:root{--text-scale:1}
*,*::before,*::after{box-sizing:border-box}
body{font-size:calc(16px * var(--text-scale,1))}
main,section,article,form,header nav{min-width:0}
img,video,iframe,svg{max-width:100%}
img,video{height:auto}
p,li,h1,h2,h3,label,a{overflow-wrap:anywhere}
input,textarea,select,button{max-width:100%;font-family:inherit}
input,textarea,select,button,.button,.shelf-btn{font-size:calc(16px * var(--text-scale,1));min-height:44px}
button,.button,.shelf-btn{white-space:normal}
:focus-visible{outline:3px solid #886529;outline-offset:4px}
html[data-theme=dark] :focus-visible{outline-color:#e2c384}
.skip-link{position:absolute;inset-inline-start:16px;top:0;transform:translateY(-150%);z-index:1000;background:#fff;color:#17362c;padding:12px 20px}
.skip-link:focus{transform:translateY(0)}
.reading-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;max-width:1240px;margin:auto;padding:12px 20px;color:#17362c;background:#faf7ef}
.reading-bar button,.reading-bar select{background:#fffdf8;color:inherit;border:1px solid #886529;border-radius:4px;padding:8px 12px}
.reading-bar #reading-status{font-size:calc(14px * var(--text-scale,1))}
html[data-theme=dark] .reading-bar{background:#172720;color:#edf0e7}
html[data-theme=dark] .reading-bar button,html[data-theme=dark] .reading-bar select{background:#243a2e;border-color:#dbc58e}
.shelf-card>*,.research-card>*,.media-tile>*,.hero-inner>*,.author-section>*,.grandfather-card>*,.second-book-layout>*{min-width:0}
.books-shelf .shelf-grid,.chapters-grid,.research-index .media-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
main.research-detail,main.resource-page{max-width:min(100%,74rem);margin-inline:auto}
main.research-detail :is(p,ul,ol),main.resource-page :is(p,ul,ol){max-width:65ch;font-size:calc(20px * var(--text-scale,1));line-height:1.85}
main.research-detail :is(p,ul,ol),main.resource-page :is(p,ul,ol){margin-inline:auto}
/* Use the existing Arabic home header across both languages and all templates. */
header.sn-header{--navy:#14233f;--gold:#b8923a;--gold-text:#8a6a22;position:relative;z-index:50;background:#fff;border-bottom:1px solid #ece6d6;max-width:none;margin:0;padding:0;display:block;color:var(--navy)}
.sn-header__inner{max-width:1440px;margin:auto;min-height:84px;padding:12px clamp(16px,3vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sn-header__inner>*{min-width:0}
.sn-logo{flex:1;font-size:calc(clamp(22px,2.2vw,30px) * var(--text-scale,1));font-weight:700;color:var(--navy);text-decoration:none;white-space:normal}
header.sn-header .sn-nav{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;width:auto;order:initial;max-width:100%}
header.sn-header .sn-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:calc(20px * var(--text-scale,1));color:var(--navy);text-decoration:none;padding:6px 0;white-space:normal}
header.sn-header .sn-nav a:hover{color:var(--gold-text)}
.sn-actions{display:flex;align-items:center;gap:4px;max-width:100%}
.sn-lang,.translation-unavailable{font-size:calc(16px * var(--text-scale,1));color:var(--navy);padding:10px 12px;min-height:44px;text-decoration:none}
.sn-menu-btn{display:none;flex:none;width:44px;height:44px;min-height:44px;padding:8px;border:0;background:transparent;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}
html[lang=en] .sn-header{font-family:Arial,sans-serif}
html[data-theme=dark] header.sn-header{--navy:#edf0e7;--gold-text:#e2c384;background:#172720;border-color:#546858}
@media(max-width:1100px){
 .sn-header__inner{min-height:64px;padding-block:10px;gap:12px}
 html[data-reading-ready] .sn-menu-btn{display:inline-flex}
 header.sn-header .sn-nav{width:100%;order:3;flex-direction:column;align-items:stretch;gap:0;position:static;box-shadow:none;background:inherit;border:0}
 html[data-reading-ready] header.sn-header .sn-nav{display:none}
 html[data-reading-ready] header.sn-header .sn-nav.is-open{display:flex}
 header.sn-header .sn-nav a{padding:10px 4px}
 .sn-logo{font-size:calc(22px * var(--text-scale,1))}
 .second-book-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:500px){
 .reading-bar{padding-inline:16px}
 .sn-header__inner{align-items:flex-start}
 .sn-logo img{max-width:60px}
 main.research-detail,main.resource-page{padding-inline:20px}
}