/* Trending Books - shared styles. Design tokens mirror the main trendingbooks.com.au site. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-latin.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600-latin.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sora-700-latin.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/sora-800-latin.woff2') format('woff2')}

:root{
  --bg:#0a0b14; --bg2:#0d0e1a; --surface:#12131f; --surface2:#171829;
  --text:#e9eaf2; --muted:#9aa0b5; --line:rgba(255,255,255,.08);
  --brand:#7c5cff; --brand2:#18d3c8; --grad:linear-gradient(110deg,#7c5cff 0%,#18d3c8 100%);
  --ocean:#2f7dff; --ocean2:#5ad2ff; --red:#ff5c6e;
  --radius:18px; --maxw:1140px; --readw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.7 Inter,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(24,211,200,.18)}
img,svg{max-width:100%}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand2);outline-offset:3px;border-radius:4px}
.container{width:min(100% - 40px,var(--maxw));margin-inline:auto}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;line-height:1.2;margin:0 0 .5em}
h1{font-weight:800;font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.02em}
h2{font-weight:700;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.01em}
h3{font-weight:600;font-size:1.14rem}
p{margin:0 0 1.05em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--surface2);padding:10px 16px;border-radius:10px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,11,20,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font-family:Sora;font-weight:800;font-size:1.16rem;color:var(--text);letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .dot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:24px;font-size:.92rem}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a[aria-current]{color:var(--text)}
/* On small screens keep the section link + the CTA; drop the homepage anchors. */
@media (max-width:720px){
  .nav-inner{height:58px}
  .nav-links{gap:14px}
  .nav-links a.hide-sm{display:none}
  .nav-links a:not(.btn){padding:11px 0}   /* comfortable touch target */
  .logo{font-size:1.05rem;padding:9px 0}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--grad);color:#0a0b14;font-weight:600;border:0;border-radius:999px;padding:13px 24px;cursor:pointer;font-size:.95rem;font-family:inherit}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn-sm{padding:9px 17px;font-size:.87rem}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--brand2);filter:none}

/* footer */
.footer{border-top:1px solid var(--line);padding:34px 0;margin-top:72px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer p{color:var(--muted);font-size:.88rem;margin:0}
.footer .logo{font-size:1rem}

/* hero */
.hero{position:relative;padding:64px 0 44px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:-40% -10% auto;height:520px;background:radial-gradient(50% 60% at 30% 40%,rgba(47,125,255,.20),transparent 70%),radial-gradient(45% 55% at 75% 30%,rgba(124,92,255,.16),transparent 70%);pointer-events:none}
.hero>*{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;margin-bottom:20px}
.eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--brand2)}
.lede{font-size:1.14rem;color:var(--muted);max-width:64ch}
.crumbs{font-size:.84rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}
.crumbs span{opacity:.5;margin:0 7px}

/* library grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:34px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s}
a.card:hover{border-color:rgba(24,211,200,.45);transform:translateY(-3px);text-decoration:none}
.card h3{color:var(--text);margin-bottom:4px}
.card .by{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.card p{color:var(--muted);font-size:.93rem;flex:1}
.card .meta{display:flex;gap:14px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;margin-top:6px}
.card.soon{opacity:.55}
.spine{height:5px;border-radius:99px;margin-bottom:18px;background:var(--grad)}
.spine.ocean{background:linear-gradient(110deg,#2f7dff,#5ad2ff)}
.spine.mind{background:linear-gradient(110deg,#7c5cff,#ff7ac6)}
.spine.deal{background:linear-gradient(110deg,#ff9d4d,#ffd24d)}
.spine.mountain{background:linear-gradient(110deg,#8d95b5,#e6ecff)}
.spine.gm{background:linear-gradient(110deg,#7a1f2b,#ff5c6e)}
.spine.bge{background:linear-gradient(110deg,#3b2d6b,#c9a227)}
.spine.bot{background:linear-gradient(110deg,#a78bff,#ffd24d)}
.spine.power{background:linear-gradient(110deg,#8b0f1d,#d4af37)}
.spine.infl{background:linear-gradient(110deg,#1f6feb,#7ee787)}
.spine.ms{background:linear-gradient(110deg,#18d3c8,#a78bff)}
.spine.lhn{background:linear-gradient(110deg,#5a3d2b,#d4af37)}
.spine.shum{background:linear-gradient(110deg,#0f9b8e,#8ee06a)}
.spine.sart{background:linear-gradient(110deg,#e8552d,#f5a623)}
.spine.hstr{background:linear-gradient(110deg,#1f6feb,#5ee6c8)}
.spine.atom{background:linear-gradient(110deg,#f5c542,#ff7a3d)}
.spine.nudg{background:linear-gradient(110deg,#2f7bff,#9b5cff)}
.spine.mset{background:linear-gradient(110deg,#ff6b9d,#ffb347)}
.spine.hbs{background:linear-gradient(110deg,#8c1515,#c8b273)}

/* article */
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:56px;align-items:start;padding-top:44px}
/* minmax(0,1fr) is required: a plain 1fr takes its automatic minimum from the
   prose column's content, which stops the whole page shrinking below 760px. */
@media (max-width:980px){.wrap{grid-template-columns:minmax(0,1fr);gap:0}.toc{display:none}}
.prose{max-width:var(--readw);min-width:0;overflow-wrap:break-word}
.prose h2{margin-top:2.2em;padding-top:.3em;scroll-margin-top:150px}
.prose h3{margin-top:1.9em;color:var(--text);scroll-margin-top:150px}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.15em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--brand2)}
.prose strong{color:#fff;font-weight:600}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 22px;border-left:3px solid var(--brand);color:var(--muted);font-size:1.05rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:3em 0}

/* table of contents */
.toc{position:sticky;top:96px;font-size:.87rem;border-left:1px solid var(--line);padding-left:20px}
.toc strong{display:block;font-family:Sora;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{display:block;color:var(--muted);padding:4px 0;border-left:2px solid transparent;margin-left:-22px;padding-left:20px}
.toc a:hover{color:var(--text);text-decoration:none}
.toc a.on{color:var(--text);border-left-color:var(--brand2)}
.toc .sub{padding-left:32px;font-size:.83rem}

/* mobile table of contents (replaces the sticky sidebar under 980px) */
.mtoc{display:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 0 22px}
.mtoc>summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:Sora;font-weight:600;font-size:.93rem;display:flex;align-items:center;gap:10px;min-height:48px}
.mtoc>summary::-webkit-details-marker{display:none}
.mtoc>summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:1.25rem;font-weight:400}
.mtoc[open]>summary::after{content:"\2212"}
.mtoc .links{padding:2px 18px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.mtoc a{color:var(--muted);font-size:.92rem;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.mtoc a:last-child{border-bottom:0}
.mtoc a:hover{color:var(--text);text-decoration:none}
@media (max-width:980px){.mtoc{display:block}}

/* horizontal-scroll affordance, added to overflowing tables/figures by script */
.scrollhint{display:none;font-size:.78rem;color:var(--muted);margin:0 0 7px;align-items:center;gap:7px}
.scrollhint.show{display:flex}
.scrollhint::after{content:"\2192";animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(5px);opacity:1}}
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figscroll>svg{display:block}
/* Below this width the chart would shrink past legibility, so hold it at a
   readable size and let the container scroll instead. */
@media (max-width:800px){.figscroll>svg{min-width:660px}}

/* fact strip */
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 15px;font-size:.85rem;color:var(--muted)}
.fact b{color:var(--text);font-weight:600}

/* callouts */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:1.9em 0}
.box>:last-child{margin-bottom:0}
.box h3{margin-top:0}
.box.accent{border-color:rgba(124,92,255,.35);background:linear-gradient(180deg,rgba(124,92,255,.09),rgba(124,92,255,.02))}
.box.tag{border-color:rgba(24,211,200,.3);background:linear-gradient(180deg,rgba(24,211,200,.08),transparent)}
.tagline{font-family:Sora;font-weight:600;font-size:1.08rem;color:#fff}

/* key-points list */
.points{list-style:none;padding:0;counter-reset:pt}
.points li{counter-increment:pt;position:relative;padding:18px 0 18px 56px;border-bottom:1px solid var(--line);margin:0}
.points li:last-child{border-bottom:0}
.points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:17px;font-family:Sora;font-weight:700;font-size:.82rem;color:var(--brand2);background:var(--surface);border:1px solid var(--line);border-radius:9px;width:38px;height:30px;display:grid;place-items:center}
.points b{display:block;color:#fff;font-family:Sora;font-weight:600;font-size:1.02rem;margin-bottom:4px}
.points span{color:var(--muted);font-size:.95rem}

/* chapters */
.chap{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:14px;overflow:hidden}
.chap>summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:baseline;gap:14px;font-family:Sora;font-weight:600}
.chap>summary::-webkit-details-marker{display:none}
.chap>summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;font-size:1.3rem;line-height:1}
.chap[open]>summary::after{content:"\2212"}
.chap>summary:hover{background:var(--surface2)}
.chap .n{font-size:.75rem;letter-spacing:.08em;color:var(--brand2);border:1px solid var(--line);border-radius:7px;padding:3px 8px;flex:none}
.chap .body{padding:2px 22px 20px;color:var(--muted);border-top:1px solid var(--line);margin-top:0;padding-top:16px}
.chap .body>:last-child{margin-bottom:0}
.chap .body strong{color:var(--text)}
.part{font-family:Sora;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.part::after{content:"";flex:1;height:1px;background:var(--line)}

/* tables */
.tw{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
table.narrow{min-width:0}   /* two-column tables read fine at any width */
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:Sora;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface2)}
tbody tr:last-child td{border-bottom:0}
td b{color:#fff;font-weight:600}

/* ERRC grid */
.errc{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:1.8em 0}
@media (max-width:620px){.errc{grid-template-columns:1fr}}
.errc div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:.92rem;color:var(--muted)}
.errc h4{font-family:Sora;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 9px}
.errc .e h4{color:var(--red)}
.errc .r h4{color:#ffb35c}
.errc .ra h4{color:var(--brand2)}
.errc .c h4{color:var(--ocean2)}
.errc ul{margin:0;padding-left:1.1em}
.errc li{margin-bottom:3px}

/* figure */
figure{margin:2em 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
figcaption{font-size:.83rem;color:var(--muted);margin-top:14px;text-align:center}

/* audio player */
.player{position:sticky;top:64px;z-index:40;background:linear-gradient(180deg,rgba(18,19,31,.97),rgba(13,14,26,.97));backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 8px}
.player-top{display:flex;align-items:center;gap:16px}
.pbtn{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--grad);color:#0a0b14;cursor:pointer;display:grid;place-items:center;font-size:1.1rem}
.pbtn:hover{filter:brightness(1.09)}
.pmeta{flex:1;min-width:0}
.pmeta .t{font-family:Sora;font-weight:600;font-size:.97rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta .s{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptime{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted);flex:none}
.pratewrap{position:relative;flex:none}
.prate{background:var(--surface2);color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:6px 9px;font:inherit;font-size:.8rem;cursor:pointer;
  min-width:54px;text-align:center;font-variant-numeric:tabular-nums}   /* fixed width so 1x -> 1.25x does not shift the row */
.prate[aria-expanded="true"]{color:#0a0b14;background:var(--brand2);border-color:var(--brand2)}

/* speed popover */
.pspeed{position:absolute;top:calc(100% + 10px);right:0;z-index:20;width:252px;max-width:calc(100vw - 44px);
  background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.pspeed[hidden]{display:none}
/* The shelf is fixed to the bottom of the viewport, so a popover that drops
   below its button lands off screen. Open it upward there instead. */
.shelf .pspeed{top:auto;bottom:calc(100% + 12px)}
/* On a phone the shelf wraps and the speed button does not sit in a fixed
   place - it moves between rows as the bar reflows - so anchoring the popover
   to the button runs it off one edge or the other. Pin it to the viewport
   instead, just above the bar, using the height the player measures. */
@media (max-width:640px){
  .shelf .pspeed{position:fixed;left:12px;right:12px;top:auto;width:auto;max-width:none;
    bottom:calc(var(--shelf-h, 150px) + 12px)}
}
.pspeed-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.pspeed-head span{font-family:Sora;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pspeed-head b{font-family:Sora;font-size:1.08rem;color:var(--brand2);font-variant-numeric:tabular-nums}
.pspeed-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--line);margin:0;cursor:pointer;display:block}
.pspeed-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand2);border:0;cursor:pointer}
.pspeed-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand2);border:0;cursor:pointer}
.pspeed-scale{position:relative;height:20px;margin-top:7px}
.pspeed-scale i{position:absolute;top:0;width:1px;height:4px;background:rgba(255,255,255,.2)}
.pspeed-scale i.maj{height:7px;background:rgba(255,255,255,.38)}
.pspeed-scale b{position:absolute;top:9px;font-size:.67rem;font-weight:500;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pspeed-presets{display:flex;gap:6px;margin-top:12px}
.pspeed-presets button{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);color:var(--muted);
  border-radius:9px;padding:7px 3px;font:inherit;font-size:.75rem;cursor:pointer;font-variant-numeric:tabular-nums}
.pspeed-presets button:hover{color:var(--text);border-color:var(--brand2)}
.pspeed-presets button.on{background:var(--brand2);border-color:var(--brand2);color:#0a0b14;font-weight:600}
.pspeed-note{font-size:.71rem;color:var(--muted);margin:10px 0 0;line-height:1.45}
.pspeed-note[hidden]{display:none}
.pbar{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--surface2);margin:15px 0 0;cursor:pointer}
.pbar::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--brand2);border:0;cursor:pointer}
.pbar::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--brand2);border:0;cursor:pointer}
.pchapters{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;max-height:0;overflow:hidden;transition:max-height .25s}
.player.open .pchapters{max-height:400px}
.pchapters button{background:var(--surface2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 12px;font:inherit;font-size:.79rem;cursor:pointer}
.pchapters button:hover{color:var(--text);border-color:var(--brand2)}
.pchapters button.on{color:#0a0b14;background:var(--brand2);border-color:var(--brand2);font-weight:600}
.ptoggle{background:none;border:0;color:var(--muted);font:inherit;font-size:.79rem;cursor:pointer;padding:9px 0 0;text-align:left}
.ptoggle:hover{color:var(--text)}
.pnote{font-size:.78rem;color:var(--muted);margin:10px 0 0}

/* cast */
.pcast{flex:none;background:var(--surface2);color:var(--muted);border:1px solid var(--line);border-radius:11px;padding:8px 9px;cursor:pointer;display:grid;place-items:center;line-height:0}
.pcast:hover{color:var(--text);border-color:var(--brand2)}
.pcast.on{color:#0a0b14;background:var(--brand2);border-color:var(--brand2)}
.pcast[hidden]{display:none}
.pcast-status{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--brand2);margin:12px 0 0}
.pcast-status[hidden]{display:none}
.pcast-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand2);flex:none;animation:castpulse 1.8s ease-in-out infinite}
@keyframes castpulse{0%,100%{opacity:.35}50%{opacity:1}}
.minibar .mcast{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:8px;line-height:0;border-radius:9px}
.minibar .mcast.on{color:var(--brand2)}
.minibar .mcast[hidden]{display:none}

/* offline / install row */
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:14px 0 0}
.pchip{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:8px 14px;font:inherit;font-size:.79rem;cursor:pointer;min-height:38px}
.pchip:hover{color:var(--text);border-color:var(--brand2);text-decoration:none}
.pchip[hidden]{display:none}
.pchip svg{flex:none}
.pchip.saved{color:var(--brand2);border-color:rgba(24,211,200,.4)}
.pchip.busy{cursor:progress;color:var(--text)}
.pchip:disabled{cursor:progress;opacity:.85}
.pchip .ring{width:15px;height:15px;border-radius:50%;flex:none;
  background:conic-gradient(var(--brand2) calc(var(--p,0)*1%),rgba(255,255,255,.14) 0)}
.poffnote{font-size:.78rem;color:var(--muted);margin:10px 0 0}
.poffnote[hidden]{display:none}
@media (max-width:640px){.pchip{min-height:42px;padding:10px 15px}}

/* per-card play button on the library index. The card itself is an <a>, so the
   button is a SIBLING inside .card-wrap - a <button> inside an <a> is invalid
   and would follow the link on click. */
.card-wrap{position:relative;display:flex}
.card-wrap>.card{flex:1}
/* top clears the spine: 24px card padding + 5px spine + 9px gap. A 42px
   button at top:16px sat straight on the spine gradient. */
.cardplay{position:absolute;top:38px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;
  border:0;background:var(--grad);color:#0a0b14;cursor:pointer;display:grid;place-items:center;padding:0}
.cardplay[hidden]{display:none}
.cardplay:hover{filter:brightness(1.09)}
.cardplay.on{box-shadow:0 0 0 3px rgba(24,211,200,.35)}
.card-wrap .card h3{padding-right:52px}

/* shelf player - the library index's own continuous player */
.shelf{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(13,14,26,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .25s ease;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.shelf.on{transform:translateY(0)}
.shelf-prog{height:3px;background:var(--surface2);overflow:hidden}
.shelf-prog i{display:block;height:100%;width:0;background:var(--grad)}
.shelf-row{display:flex;align-items:center;gap:12px;padding:11px 0 12px;flex-wrap:wrap}
.shbtn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--grad);color:#0a0b14;
  cursor:pointer;display:grid;place-items:center;padding:0}
.shbtn:hover{filter:brightness(1.09)}
.shbtn.ghost{background:var(--surface2);border:1px solid var(--line);color:var(--muted);width:38px;height:38px}
.shbtn.ghost:hover{color:var(--text);border-color:var(--brand2);filter:none}
.shmeta{flex:1;min-width:0}
.shmeta .t{font-family:Sora;font-weight:600;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shmeta .s{font-size:.79rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shbar{-webkit-appearance:none;appearance:none;flex:0 1 210px;height:6px;border-radius:99px;background:var(--surface2);cursor:pointer;margin:0}
.shbar::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--brand2);border:0;cursor:pointer}
.shbar::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--brand2);border:0;cursor:pointer}
.shtime{font-variant-numeric:tabular-nums;font-size:.81rem;color:var(--muted);flex:none}
body.has-shelf{padding-bottom:86px}
@media (max-width:860px){
  .shelf-row{gap:9px;padding:10px 0 11px}
  .shbar{display:none}
  .shtime{margin-left:auto}
  .shelf .pratewrap,.shelf #shAuto{order:9}
  .shelf #shAuto{flex:1;justify-content:center}
  body.has-shelf{padding-bottom:132px}
}
@media (max-width:520px){
  .shmeta{flex-basis:100%;order:-1}
  .shbtn{width:46px;height:46px}
  .shbtn.ghost{width:42px;height:42px}
}

/* up-next countdown */
.pnext{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:13px 15px;
  background:linear-gradient(180deg,rgba(24,211,200,.10),transparent);
  border:1px solid rgba(24,211,200,.32);border-radius:13px}
.pnext[hidden]{display:none}
.pnext .l{font-family:Sora;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--brand2);flex:none}
.pnext b{font-family:Sora;font-weight:600;font-size:.93rem;color:#fff;flex:1;min-width:0}
.pnext .c{font-variant-numeric:tabular-nums;font-size:.83rem;color:var(--muted);flex:none}
.pnext button{background:var(--surface2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:.78rem;cursor:pointer;flex:none;min-height:36px}
.pnext button:hover{color:var(--text);border-color:var(--brand2)}
.pnext button.go{background:var(--brand2);border-color:var(--brand2);color:#0a0b14;font-weight:600}
@media (max-width:640px){.pnext b{flex-basis:100%;order:-1}.pnext button{min-height:40px;flex:1}}

/* "now playing" - shown once auto-play-next has moved the audio past the book
   whose page is on screen, so the mismatch is never a mystery */
.pnow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:12px 15px;
  background:var(--surface2);border:1px solid var(--line);border-radius:13px}
.pnow[hidden]{display:none}
.pnow .l{font-family:Sora;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex:none}
.pnow b{font-family:Sora;font-weight:600;font-size:.93rem;color:#fff;flex:1;min-width:0}
.pnow a{flex:none;font-size:.82rem;color:var(--brand2);text-decoration:none;border-bottom:1px solid rgba(24,211,200,.4)}
.pnow a:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:640px){.pnow b{flex-basis:100%;order:-1}}

/* The player header is one non-wrapping row, which on a phone leaves the title
   about 50px and ellipsises it to "Li...". It now names the book being played,
   so give it its own row rather than letting the transport squeeze it out. */
@media (max-width:640px){
  .player-top{flex-wrap:wrap}
  .pmeta{flex-basis:100%;order:-1}
}

/* affiliation disclaimer - the fuller one sits under the per-book provenance
   note, the short one in the footer so it is on the index and offline page too */
.note.discl,.note.reqlink{border-top:0;margin-top:14px;padding-top:0}
.note.reqlink a{color:var(--brand2);text-decoration:none;border-bottom:1px solid rgba(24,211,200,.4)}
.note.reqlink a:hover{color:#fff;border-bottom-color:#fff}
.discl-foot{font-size:.8rem;color:var(--muted);opacity:.85;flex-basis:100%;order:9}
@media (max-width:640px){.discl-foot{order:0}}

/* request-a-book (library index) */
.req{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-top:34px}
.req h2{margin-bottom:.35em}
.req>p{color:var(--muted);font-size:.94rem;max-width:66ch}
.req form{margin-top:20px}
.req .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.req-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.req .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.req .field label{font-size:.82rem;color:var(--muted)}
.req .field label span{color:var(--brand2)}
.req input,.req textarea{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font:inherit;font-size:.92rem;padding:11px 13px;min-height:44px}
.req textarea{resize:vertical;min-height:84px;line-height:1.5}
.req input:focus,.req textarea:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(24,211,200,.14)}
.req-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:18px}
/* .btn-sm is 34px tall, under the 44px touch target - the send button is the
   one control here a thumb has to hit, so give it the full height */
.req-actions .btn{min-height:44px}
.req-msg{margin:0;font-size:.86rem;color:var(--muted)}
.req-msg.ok{color:var(--brand2)}
.req-msg.err{color:#ff8f8f}
.req-fine{margin:14px 0 0;font-size:.79rem;color:var(--muted);opacity:.85}
@media (max-width:640px){.req{padding:22px 18px}.req-row{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- accounts */
/* the player is blank while me.php is in flight, then either reveals or gates -
   opacity rather than display so the card does not jump as it resolves */
.player.checking>*{opacity:0}
.player.locked>*:not(.pgate){display:none}
.pgate b{display:block;font-family:Sora;font-size:1.02rem;color:#fff;margin-bottom:6px}
.pgate p{color:var(--muted);font-size:.9rem;margin:0 0 12px;max-width:60ch}
.pgate-go{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:0}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:.86rem;color:var(--brand2);
  cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(24,211,200,.4)}
.linkish:hover{color:#fff;border-bottom-color:#fff}
a.acct-link{font-weight:600}
.libgate{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:22px 0 0;padding:13px 16px;
  background:var(--surface2);border:1px solid var(--line);border-radius:13px;font-size:.9rem;color:var(--muted)}
.libgate[hidden]{display:none}
.dl-lock{display:none;font-size:.9rem;color:var(--muted);margin:16px 0 0}
.dl-lock a{color:var(--brand2)}
.dl.locked .dl-actions,.dl.locked .dl-list,.dl.locked .dlbar{display:none}
.dl.locked .dl-lock{display:block}

/* account page */
.acct-wrap{max-width:560px;padding-top:52px;padding-bottom:52px}
.acct{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px}
.acct[hidden]{display:none}
.acct-head h1{font-size:1.5rem;margin:0 0 .4em}
.acct-head p{color:var(--muted);font-size:.93rem;margin:0}
.acct-tabs{display:flex;gap:6px;margin:22px 0 20px;border-bottom:1px solid var(--line)}
.acct-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font:inherit;font-size:.9rem;padding:9px 4px;margin-bottom:-1px;cursor:pointer;min-height:44px}
.acct-tabs button[aria-selected=true]{color:#fff;border-bottom-color:var(--brand2)}
.acct .field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;min-width:0}
.acct .field label{font-size:.82rem;color:var(--muted)}
.acct .field label span{color:var(--brand2)}
.acct input{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font:inherit;font-size:.95rem;padding:12px 13px;min-height:46px}
.acct input:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(24,211,200,.14)}
.acct .hint{font-size:.78rem;color:var(--muted);opacity:.85}
.acct .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.acct .btn{width:100%;margin-top:4px;min-height:48px}
.acct-msg{margin:14px 0 0;font-size:.87rem;color:var(--muted);min-height:1.2em}
.acct-msg.ok{color:var(--brand2)}
.acct-msg.err{color:#ff8f8f}
.acct-fine{margin:14px 0 0;font-size:.8rem;color:var(--muted);opacity:.85}
.acct-note{color:var(--muted);font-size:.9rem;margin:18px 0 0}
.acct-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.acct-actions .btn{width:auto}
.acct-pw{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.acct-pw summary{cursor:pointer;font-size:.88rem;color:var(--muted);min-height:32px}
.acct-pw summary:hover{color:var(--text)}
.acct-pw form{margin-top:16px}
.acct-pw .btn{width:auto}
@media (max-width:640px){.acct{padding:24px 18px 22px}}

/* the hidden attribute must win over any author display rule (.btn is inline-flex) */
[hidden]{display:none!important}

/* a play button shown to a signed-out visitor: still inviting, visibly not live */
.cardplay.gated{opacity:.55}
.cardplay.gated:hover{opacity:1}

/* category filters (library index) */
.filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 26px}
.filters[hidden]{display:none}
.filters-l{font-family:Sora;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex:none}
.filters-b{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.filters-b button{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);
  border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 15px;
  font:inherit;font-size:.84rem;cursor:pointer;min-height:40px}
.filters-b button:hover{color:var(--text);border-color:var(--brand2)}
.filters-b button i{font-style:normal;font-size:.74rem;opacity:.6;font-variant-numeric:tabular-nums}
.filters-b button[aria-pressed=true]{background:var(--brand2);border-color:var(--brand2);color:#0a0b14;font-weight:600}
.filters-b button[aria-pressed=true] i{opacity:.75}
.filters-c{font-size:.82rem;color:var(--muted);margin-left:auto;flex:none}
.card-wrap[hidden]{display:none}
@media (max-width:640px){.filters-c{margin-left:0;flex-basis:100%}}

/* offline downloads panel (library index) */
.dl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-top:34px}
.dl[hidden]{display:none}
.dl h2{margin-bottom:.35em}
.dl>p{color:var(--muted);font-size:.94rem;max-width:66ch}
.dl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 6px}
.dl-actions .usage{font-size:.83rem;color:var(--muted);margin-left:auto}
.dl-list{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.dl-list li{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.045);margin:0}
.dl-list li:last-child{border-bottom:0}
.dl-list .t{flex:1;min-width:0}
.dl-list .t b{display:block;color:#fff;font-weight:600;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-list .t span{color:var(--muted);font-size:.8rem}
.dl-list .st{font-size:.79rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;text-align:right;min-width:74px}
.dl-list .st.on{color:var(--brand2)}
.dl-list button{flex:none;background:var(--surface2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 15px;font:inherit;font-size:.79rem;cursor:pointer;min-height:38px;min-width:92px}
.dl-list button:hover{color:var(--text);border-color:var(--brand2)}
.dl-list button.saved{color:var(--brand2);border-color:rgba(24,211,200,.4)}
.dl-list button:disabled{cursor:progress;opacity:.75}
.dlbar{height:4px;border-radius:99px;background:var(--surface2);overflow:hidden;margin-top:14px}
.dlbar[hidden]{display:none}
.dlbar i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
@media (max-width:640px){
  .dl{padding:20px 18px}
  .dl-list li{flex-wrap:wrap;gap:9px}
  .dl-list .t{flex-basis:100%}
  .dl-list .st{min-width:0;text-align:left}
  .dl-list button{margin-left:auto;min-height:40px}
  .dl-actions .btn{min-height:42px}
  .dl-actions .usage{margin-left:0;flex-basis:100%}
}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:80;
  background:var(--surface2);border:1px solid var(--line);color:var(--text);
  padding:12px 18px;border-radius:999px;font-size:.87rem;max-width:min(90vw,420px);text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(255,92,110,.5)}
body.has-minibar .toast{bottom:90px}

/* fixed mini player - appears on small screens once playback starts and the
   main player card has scrolled out of view */
.minibar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(13,14,26,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);transition:transform .25s ease}
.minibar.on{transform:translateY(0)}
.minibar-row{display:flex;align-items:center;gap:12px}
.minibar .pbtn{width:44px;height:44px}
.minibar .mtitle{flex:1;min-width:0;font-size:.86rem;font-family:Sora;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minibar .mtime{font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--muted);flex:none}
.minibar .mprog{height:3px;border-radius:99px;background:var(--surface2);margin-bottom:9px;overflow:hidden}
.minibar .mprog i{display:block;height:100%;width:0;background:var(--grad)}
@media (max-width:860px){.minibar{display:block}body.has-minibar{padding-bottom:74px}}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .player{position:static}
  /* the 150px offset exists to clear the sticky player on desktop; with the
     player in normal flow only the nav needs clearing (scroll-padding-top) */
  .prose h2,.prose h3{scroll-margin-top:14px}
}
@media (max-width:640px){
  html{scroll-padding-top:74px}
  .container{width:min(100% - 28px,var(--maxw))}
  .hero{padding:34px 0 30px}
  .lede{font-size:1.03rem}
  .facts{gap:7px;margin:20px 0 4px}
  .fact{padding:7px 11px;font-size:.79rem}
  .wrap{padding-top:26px}
  .prose h2{margin-top:1.9em}
  .prose blockquote{font-size:1rem;padding-left:16px}
  /* player: bigger touch targets, roomier chapter list */
  .player{padding:16px 15px}
  .pmeta .s{font-size:.78rem}
  .pbtn{width:56px;height:56px}
  .pbar{height:10px;margin-top:16px}
  .pbar::-webkit-slider-thumb{width:22px;height:22px}
  .pbar::-moz-range-thumb{width:22px;height:22px}
  .prate{min-height:40px;min-width:58px}
  .pspeed{width:268px;padding:16px 18px 14px}
  .pspeed-range{height:10px}
  .pspeed-range::-webkit-slider-thumb{width:24px;height:24px}
  .pspeed-range::-moz-range-thumb{width:24px;height:24px}
  .pspeed-presets button{padding:10px 3px;font-size:.78rem;min-height:40px}
  .pcast{min-height:42px;min-width:44px}
  .minibar .mcast{min-height:42px;min-width:42px;padding:10px}
  .ptoggle{min-height:44px;padding-top:12px}
  .crumbs a{display:inline-block;padding:5px 0}
  .pnote{margin-top:14px}
  .pnote a{display:inline-block;margin-top:6px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;min-height:42px;line-height:22px}
  .pnote a:hover{border-color:var(--brand2);text-decoration:none}
  .player.open .pchapters{max-height:none}
  .pchapters{gap:8px}
  .pchapters button{padding:10px 14px;font-size:.82rem;min-height:42px}
  /* content blocks */
  .points li{padding:15px 0 15px 46px}
  .points li::before{width:34px;height:28px;font-size:.76rem}
  .box{padding:19px 18px}
  figure{padding:16px 14px}
  figcaption{font-size:.79rem;text-align:left}
  .errc div{padding:15px 16px}
  .chap>summary{padding:15px 16px;gap:10px;font-size:.95rem;min-height:52px;align-items:center}
  .chap .body{padding:14px 16px 18px}
  .faq summary{padding:15px 0;font-size:.95rem;min-height:52px}
  th,td{padding:10px 12px}
  .cta{padding:26px 18px;margin-top:40px}
  .cta p:last-child{display:flex;flex-direction:column;gap:10px}
  .cta .btn{width:100%}
  .footer{padding:26px 0;margin-top:48px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .grid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .card{padding:20px}
  .cardplay{top:34px}          /* 20px padding + 5px spine + 9px */
}
@media (max-width:420px){
  .pmeta .t{font-size:.9rem}
  .ptime{font-size:.76rem}
  .fact{font-size:.76rem}
}

/* faq */
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-family:Sora;font-weight:600;font-size:1rem;display:flex;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;font-size:1.25rem;line-height:1.2}
.faq[open] summary::after{content:"\2212"}
.faq .body{padding:0 0 18px;color:var(--muted);font-size:.95rem}
.faq .body>:last-child{margin-bottom:0}

/* cta */
.cta{background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(24,211,200,.08));border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-top:56px;text-align:center}
.cta h2{margin-bottom:.4em}
.cta p{color:var(--muted);max-width:52ch;margin-inline:auto}
.note{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:56px}