/* v7.1 readability: larger index text (desktop + phone), larger course text and 44px tap targets on phones */
.nums4 span{font-size:.85rem!important}
.sc .mt,p.mt{font-size:.92rem!important;line-height:1.55}
.c-span,.c-span span{font-size:.9rem!important}
.fig-n span{font-size:.85rem!important}
header.bar nav .ul,header.bar nav a,header.bar .rank,header.bar .v4-s-btn{font-size:.875rem!important}
.hero4 p.mono,.hero p.mono{font-size:.875rem!important}
.n,span.st,.coord span,.c-sub span,.c-meta span,.gn,.ok{font-size:.85rem!important}
.ers a{font-size:1rem!important;line-height:1.5}
.pledge{font-size:1rem!important}
.gate p{font-size:1.02rem!important}
p.st,.sc p.st{font-size:1.0625rem!important;line-height:1.55}
.g-ppl,.v4-xl,.qq{font-size:1rem!important}
.c-go,.c-go span{font-size:1rem!important}
.glance-ix a{font-size:1.02rem}
@media (max-width:640px){
 .course-page .bp,.course-page .paras p,.course-page .lb p,.course-page .key p,.course-page .story p,.course-page .next,.course-page .thread{font-size:18px!important;line-height:1.65}
 .course-page .era-hook{font-size:1.2rem!important}
 .course-page .bh{font-size:1.15rem!important}
 .course-page .gl dd{font-size:17px!important}.course-page .gl dt{font-size:1.05rem!important}
 .course-page .rl{font-size:15.5px!important}
 .course-page .bi,.course-page .era-meta span,.course-page .label,.course-page p.mono,.course-page .begin,.course-page .yr,.course-page .k,.course-page figcaption,.course-page figcaption a,.course-page .note{font-size:13.5px!important}
 .course-page .choices button,.course-page .mc button{font-size:17px!important;min-height:44px}
 .glance-ix a,.toc li a,#toclist a{display:flex!important;align-items:center;min-height:44px;font-size:17px!important}
 .course-page details.layer>summary{min-height:44px;align-items:center}.course-page .lt{font-size:17px!important}
 .course-page .who{min-height:44px}
 .course-page .layer-tools button,.course-page .links a{display:inline-flex;align-items:center;min-height:44px}
 .ers a{min-height:44px;display:flex;align-items:center}
 .v4-fc .d{font-size:1.2rem!important}
}
/* phone dropdown bar */
.mbar{display:none}
@media (max-width:640px){
 html.has-mbar header.bar,html.has-mbar body>nav.top{display:none!important}
 .mbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;position:fixed;inset:0 0 auto;z-index:60;padding:.25rem .6rem;background:#0d0e0f;border-bottom:1px solid var(--rule,#1c1e20);min-height:52px}
 .mb-t{font-size:14px;color:var(--fg-2,#bbb);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mb-l,.mb-r{position:relative}
 .mb-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;min-width:44px;padding:0 .7rem;font-size:15px;color:var(--fg,#eee);border:1px solid var(--rule-2,#2a2c2e);border-radius:2px}
 .mb-btn i{font-style:normal;font-size:11px;color:var(--fg-3,#888);transition:transform .2s}
 .mb-btn[aria-expanded=true]{border-color:var(--tq,#14a7a0)}.mb-btn[aria-expanded=true] i{transform:rotate(180deg)}
 .mb-btn:focus-visible,.mb-pop a:focus-visible,.mb-pop button:focus-visible{outline:1px solid var(--tq,#14a7a0);outline-offset:2px}
 .mb-pop{position:absolute;top:calc(100% + 6px);min-width:12.5rem;max-height:70vh;overflow:auto;list-style:none;margin:0;padding:.3rem 0;background:#101213;border:1px solid var(--rule-2,#2a2c2e);box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
 .mb-l .mb-pop{left:0}.mb-r .mb-pop{right:0}
 .mb-pop a,.mb-pop button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;min-height:46px;padding:0 1rem;font-size:16px;color:var(--fg,#eee)}
 .mb-pop li+li{border-top:1px solid var(--rule,#1c1e20)}
 .mb-pop a:active,.mb-pop button:active{background:rgba(20,167,160,.08)}
}
/* v7.1 home atmosphere */
.field .atmos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto;filter:blur(10px);transform:scale(1.06)}
.field .atmos-grain{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay}
@media (prefers-reduced-motion:reduce){.field .atmos-grain{opacity:.04}}
.field .atmos-m{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(.6px)}

/* v8.1 phone bar lockup */
@media (max-width:760px){.mb-logo{display:flex;justify-content:center;align-items:center;min-height:44px;text-decoration:none;color:#f2efe8}.mb-logo .wm5{width:min(128px,38vw);margin:0}}
.course-page .era-title{scroll-margin-top:calc(var(--barh,3rem) + 12px)}
/* v8.1 one-scroll rule: contents collapse to one line between hero and first chapter */
.course-page details.glance{padding-top:.4rem!important;padding-bottom:.4rem!important;min-height:0!important;margin:0!important}
.course-page details.glance>summary{cursor:pointer;list-style:none;padding:.5rem 0;min-height:44px;display:flex;align-items:center;gap:.5rem}
.course-page details.glance>summary::after{content:"▾";opacity:.6}
.course-page details.glance[open]>summary::after{content:"▴"}
.guide-page .g-tiers{margin-top:.2rem!important;margin-bottom:.3rem!important}.guide-page .g-prog{margin-top:.1rem!important;margin-bottom:.2rem!important}.guide-page .sheet.era{padding-top:1rem!important}.course-page .sheet.era{scroll-margin-top:0}
/* v8.1 phone remaster (<=640px) */
@media (max-width:640px){
 .mbar{padding-top:calc(.25rem + env(safe-area-inset-top));padding-left:calc(.6rem + env(safe-area-inset-left));padding-right:calc(.6rem + env(safe-area-inset-right));min-height:calc(52px + env(safe-area-inset-top))}
 footer,.foot{padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))}
 .hero4{padding-top:1.2rem!important;padding-bottom:1.2rem!important}
 .tex-still{background-color:#0d0e0f}
}

/* v8.1 phone accordions */
:root{interpolate-size:allow-keywords}
details.glance::details-content{block-size:0;overflow:hidden;transition:block-size .32s cubic-bezier(.3,.7,.2,1),content-visibility .32s allow-discrete}
details.glance[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){details.glance::details-content{transition:none}}
@media (max-width:640px){
 .acc-row{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:48px;padding:0 .2rem;background:none;border:0;border-top:1px solid var(--rule,#1c1e20);border-bottom:1px solid var(--rule,#1c1e20);color:var(--fg-2,#bbb);font-size:14px}
 .acc-row i{transition:transform .3s;font-style:normal}.acc.open .acc-row i{transform:rotate(180deg)}
 .acc-body{overflow:hidden}
 .acc.open .acc-body{grid-template-rows:1fr}
 .course-page details.glance>summary{font-size:14px;border-top:1px solid var(--rule,#1c1e20);border-bottom:1px solid var(--rule,#1c1e20);justify-content:space-between}
}
/* v8.1 phone: no sideways overflow, 13px floor for small print, comfortable tap targets */
@media (max-width:640px){
 html,body{overflow-x:clip}
 .field .atmos,.field .atmos-m{width:100%!important;height:100%!important;left:0;right:0}
 .mono.dim,.label,.meta,.note,small,.fig-n,.cap,.credit,.src{font-size:max(13px,1em)}
 main a.ul,.sc .meta a,.course .meta a,.credit a,.src a,figcaption a{display:inline-block;padding:.55rem .15rem;margin:-.55rem 0}
 .skip:focus{padding:.8rem 1rem}
 .ask4 input{min-height:44px;font-size:16px}.ask4 button{min-height:44px}
 .sc h3 a{display:flex;min-height:48px;align-items:center}
 .sig{max-width:100%}
}
/* v8.1 phone QA fixes (qa-phone-v8/ISSUES.md) */
@media (max-width:640px){
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .v4-cap{bottom:calc(.8rem + env(safe-area-inset-bottom))!important;right:calc(.8rem + env(safe-area-inset-right))!important}
 .h-hero{font-size:clamp(28px,9vw,38px)!important;overflow-wrap:anywhere}
 .nums4{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:1.1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .nums4::-webkit-scrollbar{display:none}.nums4>*{flex:0 0 auto}
 .grainfix{mix-blend-mode:normal!important;opacity:.35}
 .sig-hero{max-height:140px!important}
 .era p,.paras p,.spine p,.course-page .lede,.about p,main.about p{font-size:16.5px;line-height:1.6}
 .mapwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .era img,main figure img{background:#1a1c1e}
 a.v4-xl,button.ul,a.bmw,.gl input,#gq{min-height:44px;display:inline-flex;align-items:center}
 a.v4-xl{min-height:44px;padding:.35rem 0}
 .g-tiers{top:calc(52px + env(safe-area-inset-top))!important}
 .g-tiers button{min-height:44px!important;padding-top:.2rem!important;padding-bottom:.2rem!important}
 .acc2-row{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:48px;margin:.4rem 0;padding:0 .2rem;background:none;border:0;border-top:1px solid var(--rule,#1c1e20);border-bottom:1px solid var(--rule,#1c1e20);color:var(--fg-2,#bbb);font:inherit;font-size:14px}
 .acc2-row i{font-style:normal;transition:transform .3s}.acc2-row[aria-expanded=true] i{transform:rotate(180deg)}
 .acc2-body{overflow:hidden}
 .acc2-body.open{grid-template-rows:1fr}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.acc-body,.acc2-body{transition:none}}
@media (max-width:640px){
 .tips-panel{margin:.6rem 1rem 1rem;padding:.8rem;border:1px solid var(--rule,#1c1e20);border-radius:12px;background:#111314}
 .tips-panel .tp-h{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg-2,#bbb)}
 .tips-panel .tp-x{min-height:44px;min-width:44px;background:none;border:0;color:inherit;font:inherit}
 .v4-cap.inflow{position:static!important;inset:auto!important;flex-direction:column;align-items:flex-start;gap:.6rem}
 .v4-cap.inflow .v4-cap-f{position:static!important;max-width:none!important;width:100%}
 .v4-cap:not(.inflow){display:none!important}
 .mb-tips{display:flex;align-items:center;gap:.5rem}.cap-dot{width:14px;height:14px;border-radius:50%;background:var(--accent,#2bb6aa);box-shadow:0 0 0 2px #0d0e0f,0 0 0 3px var(--accent,#2bb6aa)}
 body{padding-bottom:env(safe-area-inset-bottom)}
}
@media (max-width:640px){
 .field .atmos{transform:none!important;filter:blur(6px)}
 .hero4{padding-top:calc(64px + env(safe-area-inset-top))!important}
 .course-page .sig-hero{display:none!important}
 .course-page .sheet.intro{padding-top:.6rem!important}
}
/* v8.1 phone QA round 2 */
@media (max-width:640px){
 #rail,.rail{display:none!important}
 .skip{min-height:44px;display:inline-flex;align-items:center}
 a.c-go{min-height:44px;display:inline-flex;align-items:center}
 .nums4 span,.nums4 b{font-size:max(13px,1em)}
 .course-page main :is(p,li,span,a,td,button,dd,dt,figcaption,small){font-size:max(13px,1em)}
 .course-page .era-meta,.course-page .mono{font-size:max(13px,.8rem)}
 .course-page .who,.course-page .who a{min-height:44px}
 .g-tiers{overflow-x:auto}.g-tiers button{flex:1 1 0;min-width:0}
 /* library: the decorative spine chart is not tappable at 2px; books are in the list below */
 #spines,#spineCap{display:none!important}
 body:has(#spines) main{padding-left:calc(1rem + env(safe-area-inset-left));padding-right:calc(1rem + env(safe-area-inset-right))}
 body:has(#spines) :is(.m,.a,span,a,li,p){font-size:max(13px,1em)}
 body:has(#spines) main a{min-height:44px;display:inline-flex;align-items:center}
 body:has(#spines) .t{font-size:17px}
 /* reader */
 .bar.top{padding-top:calc(.4rem + env(safe-area-inset-top))!important;padding-left:calc(.6rem + env(safe-area-inset-left));padding-right:calc(.6rem + env(safe-area-inset-right))}
 .bar.bottom{padding-bottom:calc(.4rem + env(safe-area-inset-bottom))!important;padding-left:calc(.6rem + env(safe-area-inset-left));padding-right:calc(.6rem + env(safe-area-inset-right))}
 .bar.top a,.bar.top button,.bar.bottom a,.bar.bottom button,.modes button,a.bmw{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;font-size:max(13px,1em)}
 .bar :is(span,i,b){font-size:max(13px,1em)}
 /* credits/about inline links */
 main :is(p,li) a{padding:.7rem 0;margin:-.7rem 0}
}

/* v8.1 phone-native course cards: thumbnail + text, ~150px each */
@media (max-width:640px){
 main section.course{display:grid!important;grid-template-columns:84px 1fr!important;grid-template-rows:auto!important;gap:.25rem .9rem!important;padding:1rem calc(1rem + env(safe-area-inset-right)) 1rem calc(1rem + env(safe-area-inset-left))!important;min-height:0!important;height:auto!important;align-items:start;border-top:1px solid var(--rule,#1c1e20);margin:0!important}
 main section.course .c-art{grid-column:1;grid-row:1/span 2;width:84px!important;height:84px!important;min-height:0!important;aspect-ratio:1;position:relative;border-radius:12px;overflow:hidden;margin:0!important}
 main section.course .c-art .tex{position:absolute;inset:0}
 main section.course .c-art .sig,main section.course .c-art .coord,main section.course .c-art .crop{display:none!important}
 main section.course .c-num{position:absolute;left:.45rem;bottom:.3rem;font-size:20px!important;line-height:1}
 main section.course .c-txt{grid-column:2;padding:0!important;margin:0!important;min-width:0}
 main section.course .c-sub,main section.course .c-hook{display:none!important}
 main section.course .c-title{font-size:21px!important;line-height:1.15;margin:0 0 .15rem!important}
 main section.course .c-subtitle{font-size:14.5px!important;margin:0 0 .3rem!important;color:var(--fg-2,#bbb)}
 main section.course .c-meta{font-size:13px!important;margin:0!important;flex-wrap:wrap;gap:.2rem .7rem}
 main section.course .c-go{margin-top:.1rem!important;font-size:14px}
}
/* v8.1 phone QA round 3 */
@media (max-width:640px){
 details.glance:not([open]) .glance-ix{display:none!important}
 details.glance::details-content{transition:none}
 .course-page .glance-ix{display:block!important;columns:auto!important;grid-template-columns:none!important}
 .course-page .glance-ix li{writing-mode:horizontal-tb!important;width:auto!important;height:auto!important}
 .course-page .glance-ix a{display:flex!important;align-items:center;min-height:44px;width:auto!important;height:auto!important;writing-mode:horizontal-tb!important;transform:none!important}
 .course-page main li>a{min-height:44px;display:flex;align-items:center}
 .course-page button.ct{min-height:44px}
 .course-page figcaption a,.course-page .note a.ul{min-height:44px;display:inline-flex!important;align-items:center;padding:0 .1rem!important;margin:0!important}
 .course-page .pm,.course-page .ct,.course-page li.c,.course-page .b-r button,.course-page .b-more,.course-page .titlebtn .sub{font-size:13px!important}
 body:has(.modes) :is(nav button,.modes button,.sheet button,body>a){min-height:44px;min-width:44px;font-size:13px!important}
 body:has(.modes) .rng span,body:has(.modes) .fin,body:has(.modes) .fin *{font-size:13px!important}
 body:has(.modes) .ttl{min-width:0;overflow:hidden}body:has(.modes) .ttl i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
 body:has(.modes) nav{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .reader-safe{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 body:has(#spines) input,body:has(#spines) .chips button,body:has(#spines) main button{min-height:44px;font-size:16px}
 .home-sc a,#scope .sc a{min-height:44px}
 main section.course a.ul,#scope a.ul{min-height:44px;display:inline-flex;align-items:center}
 .gsc,.sc{overflow-wrap:anywhere}
 .guide-page .bt,.guide-page .bi{max-width:100%;overflow-wrap:anywhere}
}

@media (max-width:640px){
 body:has(.modes) button,body:has(.modes) .modes button{min-height:44px!important;min-width:44px!important;font-size:13px!important;padding-top:0!important;padding-bottom:0!important}
 .filters button{min-height:44px!important;min-width:44px;font-size:13px!important}
 .gsc .more a.ul,.sc .more a.ul{min-height:44px;display:inline-flex;align-items:center}
 .v4-cap-f .ul,.v4-back{font-size:13px!important;min-height:44px}
 body:has(.modes) .hide-s{display:none!important}
}
@media (max-width:640px){.v4-ix{display:none!important}}
/* v8.1 phone QA round 4 */
@media (max-width:640px){
 #atlas{display:none!important}
 .sc .ers li,.sc .ers span,.sc .more,.sc .more a,.gsc .ers li,.gsc .ers span{font-size:13px!important}
 .mb-pop li,.mb-pop a,.mb-pop button{font-size:14px!important}
 main :is(p,li) a{padding:.75rem 0;margin:-.75rem 0}
 main a{min-width:44px}
 .lb button.g,.bits button{min-height:44px;min-width:44px}
 body:has(#spines) header a,body>header a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:640px){footer a,main a.ul,.bits button,main button.ul{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}.lb button,.toy button{min-width:44px}}