/* Newsmap v2 -- Manna's interface language: warm monochrome shell, Inter/Mulish/Play type, white cards with a soft lift,
   score chips with an ambient glow (Buzz score + letter grade), per-letter "DNA" headlines, cloud / starfield sky.
   v1 (the original "modern" look) is kept in /classic/ and /root/.newsmap/versions/v1-modern/. */
:root {
  --bg:#fcfcfb; --card:#ffffff; --card-hover:#f7f6f3;
  --line:rgba(20,20,22,.09); --line-strong:rgba(20,20,22,.15); --edge:rgba(20,20,22,.17);
  --text:#15151a; --ink:#1f2430; --dim:#63625f; --faint:#8b8983; --accent:#15151a; --accent-weak:rgba(20,20,22,.075);
  --shadow:0 1px 2px rgba(20,20,22,.045), 0 7px 20px -8px rgba(20,20,22,.14);
  --lift-hi:inset 0 1px 0 rgba(255,255,255,.6);
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:.15s; --dur:.2s; --r-card:14px;
  --display:"Play",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --inter:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"] {
  --bg:#0c0c10; --card:#17171d; --card-hover:#1d1d25;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --edge:rgba(255,255,255,.2);
  --text:#f3f3f6; --ink:#e6e7ee; --dim:#a4a6b3; --faint:#7b7e8d; --accent:#f3f3f6; --accent-weak:rgba(255,255,255,.09);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.65); --lift-hi:inset 0 1px 0 rgba(255,255,255,.05);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { position:relative; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* wordmark (font-weight stacking outline, as Manna's h1) */
.top { position:relative; padding:calc(14px + env(safe-area-inset-top)) 16px 6px; max-width:1500px; width:100%; margin:0 auto; }
h1 { font-family:var(--inter); font-size:clamp(40px,8vw,60px); letter-spacing:-.02em; font-weight:1000; line-height:1.2; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.stack-outline { position:relative; display:inline-block; }
.stack-bottom { font-weight:1000; color:var(--text); }
.stack-top { position:absolute; inset:0; font-weight:900; color:color-mix(in srgb, var(--text) 85%, var(--bg)); }
h1 .h1-tag { flex:none; text-align:right; color:var(--dim); font-weight:500; font-size:11px; letter-spacing:.01em; line-height:1; font-family:var(--body); }
.statline { font:600 12px/1.3 var(--body); color:var(--dim); margin:2px 0 8px; letter-spacing:.01em; }

.iconrow { position:absolute; right:18px; top:calc(78px + env(safe-area-inset-top)); display:flex; gap:12px; }
.midrow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 22px; margin:4px 0 10px; }
.qwrap { margin:0 0 10px; }
.ibtn { -webkit-appearance:none; appearance:none; background:none; border:none; padding:0; width:34px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform var(--dur-fast) var(--ease); }
.ibtn img { width:30px; height:30px; display:block; pointer-events:none; object-fit:contain; }
.ibtn:active { transform:translateY(1px); }

/* "News forecast" -- High / Avg / Low of the Buzz scores on screen, same chips as Manna's Local forecast */
.forecast { margin:0; }
.fc-cap { font:500 10px/1 ui-monospace,"JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 2px 8px; }
.fc-chips { display:flex; gap:8px; }
.hal { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 10px 5px 11px; border-radius:14px;
  background:color-mix(in srgb, rgb(var(--sc)) 15%, var(--card)); border:1px solid color-mix(in srgb, rgb(var(--sc)) 10%, transparent);
  box-shadow:0 0 12px 1px rgba(var(--sc), .30), 0 3px 12px rgba(var(--sc), .18); }
:root[data-theme="dark"] .hal { background:color-mix(in srgb, rgb(var(--sc)) 24%, var(--card)); }
.hal b { font-family:var(--inter); font-weight:900; font-size:30px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:rgb(var(--sc)); min-width:3ch; text-align:center; }
.hal i { font-style:normal; font-family:var(--inter); font-size:15px; font-weight:800; letter-spacing:.01em; text-transform:uppercase; color:rgb(var(--sc)); }
:root[data-theme="dark"] .hal b, :root[data-theme="dark"] .hal i { color:color-mix(in srgb, rgb(var(--sc)) 55%, #fff); }

.controls { display:flex; flex-wrap:wrap; gap:8px; }
.sel { -webkit-appearance:none; appearance:none; cursor:pointer; font:600 15px/1 var(--body); color:var(--text); background:var(--card); border:1px solid #fff; box-shadow:var(--shadow);
  border-radius:14px; padding:13px 38px 13px 16px; min-width:150px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
:root[data-theme="dark"] .sel { border-color:var(--line); }
.sel option { background:var(--card); color:var(--text); }
.qwrap[hidden] { display:none; }
#q { width:100%; font:500 16px/1 var(--body); color:var(--text); background:var(--card); border:1px solid #fff; box-shadow:var(--shadow); border-radius:14px; padding:13px 16px; }
:root[data-theme="dark"] #q { border-color:var(--line); }
#q::placeholder { color:var(--faint); } #q:focus { outline:none; border-color:var(--accent); }

.chips { display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; cursor:pointer; font:700 12.5px/1 var(--body); color:var(--text); background:var(--card); border:1px solid var(--edge); border-radius:999px; padding:9px 14px; box-shadow:var(--lift-hi); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover:hover) { .chip:hover { background:var(--card-hover); } }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--bg); border-color:var(--accent); }

.stage { position:relative; flex:1 1 auto; min-height:360px; margin:6px 10px 10px; }
.empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font-size:15px; text-align:center; padding:20px; }

/* regions = sections; the label is Manna's .pk-h voice */
.region { position:absolute; }
.rlabel { position:absolute; left:2px; top:0; right:0; height:20px; display:flex; align-items:center; gap:7px; font:1000 11px/1 var(--inter); letter-spacing:.09em; text-transform:uppercase; color:var(--text); pointer-events:none; }
.rlabel em { font-style:normal; font-weight:700; color:var(--faint); letter-spacing:.02em; }

/* story tile = a Prep Rows card: white, soft lift, DNA headline, Buzz chip with ambient glow */
.tile { position:absolute; margin:0; padding:0; text-align:left; cursor:pointer; overflow:hidden; border-radius:var(--r-card); color:var(--text); font-family:var(--body);
  background:var(--card); border:1px solid #fff; box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity .2s ease, filter .2s ease; }
:root[data-theme="dark"] .tile { border-color:var(--line); }
@media (hover:hover) { .tile:hover { border-color:var(--edge); } }
.tile:hover, .tile:focus-visible { z-index:3; transform:translateY(-1px); border-color:var(--edge); box-shadow:var(--shadow), 0 0 0 1px rgba(var(--sc), .35); }
.tile.dim { opacity:.2; filter:saturate(.3); }
.tile::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:rgb(var(--sc)); opacity:.85; }
.t-in { position:absolute; inset:0; padding:8px 10px 7px 12px; display:flex; flex-direction:column; justify-content:space-between; gap:3px; }
.t-title { font-family:var(--body); font-weight:800; line-height:1.14; letter-spacing:-.012em; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; }
.pr-dna { }
:root[data-theme="dark"] .t-title { text-shadow:0 0 10px rgba(var(--sc), .55), 0 0 22px rgba(var(--sc), .32); }
.t-meta { font:600 10px/1.2 var(--body); color:var(--faint); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* the chip: Manna's .pr-score + .pr-grade (number darker, letter bigger, ambient glow) */
.pr-score { position:absolute; z-index:1; display:flex; align-items:center; justify-content:center; gap:3px;
  font-family:var(--inter); font-weight:1000; font-size:var(--cs,30px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, rgb(var(--sc)) 85%, black); padding:5px 10px 5px 11px; border-radius:calc(var(--cs,30px) * .38);
  background:color-mix(in srgb, rgb(var(--sc)) 15%, var(--card)); border:1px solid color-mix(in srgb, rgb(var(--sc)) 10%, transparent);
  box-shadow:0 0 14px 1px rgba(var(--sc), .34), 0 3px 16px rgba(var(--sc), .22); }
:root[data-theme="dark"] .pr-score { color:color-mix(in srgb, rgb(var(--sc)) 70%, #fff); background:color-mix(in srgb, rgb(var(--sc)) 24%, var(--card)); }
.pr-grade { font-size:1.15em; letter-spacing:.01em; color:rgb(var(--sc)); opacity:.9; }
:root[data-theme="dark"] .pr-grade { color:color-mix(in srgb, rgb(var(--sc)) 55%, #fff); }
/* lg: chip stretched down the right side (as the Prep Rows chip is stretched down its row) */
.tile.lg .pr-score { right:6px; top:6px; bottom:6px; }
/* md: compact chip tucked in the bottom-right corner */
.tile.md .pr-score { right:6px; bottom:6px; padding:3px 7px 3px 8px; border-radius:9px; box-shadow:0 0 9px 1px rgba(var(--sc), .30), 0 2px 8px rgba(var(--sc), .2); }
.tile.md .t-meta { padding-right:62px; }
.tile.sm .pr-score, .tile.xs .pr-score, .tile.xxs .pr-score { right:5px; bottom:5px; --cs:12px; padding:2px 5px 2px 6px; border-radius:7px; gap:2px;
  box-shadow:0 0 7px 1px rgba(var(--sc), .28), 0 2px 6px rgba(var(--sc), .18); }
.tile.xs .pr-score, .tile.xxs .pr-score { --cs:10px; padding:1px 4px 1px 5px; border-radius:6px; right:3px; bottom:3px; }
.tile.xxs .pr-grade { display:none; }
.tile.sm .t-in { padding:5px 7px 4px 10px; } .tile.sm .t-meta { display:none; }
.tile.xs .t-in { padding:3px 4px 3px 8px; } .tile.xs .t-meta { display:none; }
.tile.xxs .t-title { display:none; } .tile.xxs::before { top:3px; bottom:3px; }
.tile.sm .t-title, .tile.xs .t-title { padding-right:2px; }

.foot { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; max-width:1500px; width:100%; margin:0 auto; padding:6px 18px calc(16px + env(safe-area-inset-bottom)); font:500 11.5px/1.4 var(--body); color:var(--faint); }
.foot a { color:var(--dim); }
.legend { display:flex; align-items:center; gap:6px; }
.lgchip { font:900 11px/1 var(--inter); padding:4px 7px; border-radius:7px; color:color-mix(in srgb, rgb(var(--sc)) 85%, black); background:color-mix(in srgb, rgb(var(--sc)) 15%, var(--card)); box-shadow:0 0 8px rgba(var(--sc), .3); }
:root[data-theme="dark"] .lgchip { color:color-mix(in srgb, rgb(var(--sc)) 55%, #fff); }

/* drawer = Manna's opened card: white panel, grey "how it's scored" band, colour wash band for the actions */
.scrim { position:fixed; inset:0; background:rgba(10,10,12,.36); z-index:20; } .scrim[hidden], .drawer[hidden] { display:none; }
.drawer { position:fixed; z-index:21; top:0; right:0; bottom:0; width:min(460px,100vw); background:var(--card); border-left:1px solid var(--line-strong); box-shadow:-12px 0 40px rgba(0,0,0,.18);
  overflow-y:auto; animation:slide .22s var(--ease); }
@keyframes slide { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
.drawer-x { position:absolute; right:12px; top:10px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--edge); background:var(--card); color:var(--text); font-size:22px; cursor:pointer; line-height:1; }
.d-top { padding:22px 20px 18px; position:relative; }
.d-cat { font:1000 11px/1 var(--inter); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.d-title { font:800 24px/1.18 var(--body); letter-spacing:-.02em; margin:10px 40px 10px 0; text-wrap:balance; }
:root[data-theme="dark"] .d-title { text-shadow:0 0 10px rgba(var(--sc), .55), 0 0 22px rgba(var(--sc), .32); }
.d-sub { color:var(--faint); font:600 12px/1.4 var(--body); letter-spacing:.02em; }
.d-chiprow { display:flex; align-items:center; gap:14px; margin:16px 0 4px; }
.d-chiprow .pr-score { position:relative; --cs:40px; padding:8px 14px 8px 16px; border-radius:15px; }
.d-chiprow small { font:600 12px/1.35 var(--body); color:var(--dim); }
.d-band { margin:0; padding:2px 20px 20px; background:linear-gradient(180deg,#ececee 0%,#f6f6f7 38%,#fff 100%); }
:root[data-theme="dark"] .d-band { background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 45%,transparent 100%); }
.pk-h { font:1000 12px/1 var(--inter); letter-spacing:.08em; text-transform:uppercase; color:var(--text); margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.d-band .pk-h:first-child { border-top:0; padding-top:12px; }
.pk-system { font:500 10px/1 ui-monospace,"JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.pk-system-desc { font:500 12.5px/1.55 var(--body); color:var(--dim); }
.d-steps { list-style:none; display:flex; flex-direction:column; gap:1px; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:6px; }
.d-steps a { display:block; padding:11px 13px; text-decoration:none; color:var(--text); background:var(--card); }
@media (hover:hover) { .d-steps a:hover { background:var(--card-hover); } }
.d-steps b { display:block; font:800 12px/1.2 var(--body); color:var(--dim); margin-bottom:3px; }
.d-steps span { font:600 14px/1.3 var(--body); }
.pk-band { margin:0; padding:20px; background:linear-gradient(180deg, rgba(var(--sc), .16) 0%, rgba(var(--sc), .08) 100%); }
.d-open { display:inline-flex; align-items:center; gap:8px; font:800 14px/1 var(--body); color:var(--bg); background:var(--accent); text-decoration:none; padding:13px 18px; border-radius:13px; box-shadow:var(--shadow); }
.d-note { margin-top:14px; font:500 11.5px/1.5 var(--body); color:var(--faint); }

@media (max-width:700px) {
  .top { padding-left:14px; padding-right:14px; }
  .sel { flex:1 1 140px; min-width:0; font-size:14px; }
  .stage { margin:4px 8px 8px; }
  .drawer { top:auto; height:82vh; width:100vw; border-left:0; border-top:1px solid var(--line-strong); border-radius:18px 18px 0 0; animation:rise .24s var(--ease); }
  @keyframes rise { from { transform:translateY(30px); opacity:0; } to { transform:none; opacity:1; } }
}
@media (prefers-reduced-motion:reduce) { *, .drawer { transition:none !important; animation:none !important; } }

/* 2026-11-01: colour = section, intensity = Buzz score (was: colour by score band). Dot beside each section name. */
.rlabel i, .chip i { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.chip { display:inline-flex; align-items:center; gap:7px; }

/* 2026-11-01: no chip on the tile. The TILE takes the chip's own look: its tinted background, hairline border and ambient glow;
   the headline keeps the DNA colouring. Score + grade now live in the story panel and the tile tooltip. REVERT: delete block. */
.tile { background:color-mix(in srgb, rgb(var(--sc)) 15%, var(--card)); border:1px solid color-mix(in srgb, rgb(var(--sc)) 10%, transparent);
  box-shadow:0 0 14px 1px rgba(var(--sc), .34), 0 3px 16px rgba(var(--sc), .22); }
:root[data-theme="dark"] .tile { background:color-mix(in srgb, rgb(var(--sc)) 24%, var(--card)); border-color:color-mix(in srgb, rgb(var(--sc)) 10%, transparent); }
.tile:hover, .tile:focus-visible { border-color:color-mix(in srgb, rgb(var(--sc)) 40%, transparent);
  box-shadow:0 0 18px 2px rgba(var(--sc), .46), 0 4px 20px rgba(var(--sc), .30); }
.tile::before { display:none; }
.tile .t-in { padding:8px 11px 7px 11px; }
.t-meta { color:color-mix(in srgb, rgb(var(--sc)) 55%, var(--faint)); }

/* logo from the first Newsmap, with Manna's wordmark type (the stacked outline) */
.brandrow { display:inline-flex; align-items:center; gap:clamp(8px,1.6vw,14px); }
.logo { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.3fr 1fr; gap:3px; width:clamp(34px,6.2vw,48px); height:clamp(34px,6.2vw,48px); flex:none; filter:drop-shadow(0 3px 10px rgba(124,77,255,.28)); }
.logo i { border-radius:5px; display:block; }
.logo i:nth-child(1) { background:#7c4dff; grid-row:1 / 3; box-shadow:0 0 12px rgba(124,77,255,.45); }
.logo i:nth-child(2) { background:#22b8cf; box-shadow:0 0 12px rgba(34,184,207,.45); }
.logo i:nth-child(3) { background:#e64980; box-shadow:0 0 12px rgba(230,73,128,.45); }

/* 2026-11-01 (2): the tile's tint scales with popularity (Buzz score) -- light wash for a quiet story, deep colour for a big one.
   --k = 0..1 from the score (35 -> 0, 95 -> 1). Replaces the fixed 15% tint above. REVERT: delete block. */
.tile { background:color-mix(in srgb, rgb(var(--sc)) calc(5% + 40% * var(--k, .5)), var(--card));
  box-shadow:0 0 calc(6px + 10px * var(--k, .5)) 1px rgba(var(--sc), calc(.14 + .26 * var(--k, .5))), 0 3px 16px rgba(var(--sc), calc(.08 + .18 * var(--k, .5))); }
:root[data-theme="dark"] .tile { background:color-mix(in srgb, rgb(var(--sc)) calc(8% + 46% * var(--k, .5)), var(--card)); }

/* 2026-11-01 (3): white headlines. Tiles are now a deep section colour (richer/darker = more popular) so white "DNA" type reads on
   every one, light or dark theme. Chip look (hairline border, ambient glow) kept. REVERT: delete block + whiteDnaHTML in app.js. */
.tile, :root[data-theme="dark"] .tile { background:hsl(var(--h) calc(22% + 56% * var(--k, .5)) calc(39% - 19% * var(--k, .5)));
  color:#fff; border-color:rgba(255,255,255,.14); }
.t-title, :root[data-theme="dark"] .t-title { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.28); }
.t-meta { color:rgba(255,255,255,.72); }
@media (hover:hover) { .tile:hover { border-color:rgba(255,255,255,.35); } }
.tile:hover, .tile:focus-visible { border-color:rgba(255,255,255,.4); }

/* 2026-11-01: Classic <-> Manna look switch (segmented pill, same ink-fill idiom as the section chips) */
.styleswitch { display:inline-flex; align-self:center; padding:3px; margin-right:6px; border-radius:999px; background:var(--card); border:1px solid var(--edge); box-shadow:var(--lift-hi); }
.styleswitch button { cursor:pointer; border:0; background:transparent; color:var(--dim); font:700 12px/1 var(--body); padding:8px 13px; border-radius:999px; }
.styleswitch button[aria-pressed="true"] { background:var(--accent); color:var(--bg); }
.iconrow { align-items:center; }

/* switch pinned to the SAME spot on both looks (top-right of the page) so toggling never moves it */
.styleswitch { position:absolute; top:12px; right:14px; z-index:15; margin:0; }
@media (max-width:700px) { .top { padding-top:calc(58px + env(safe-area-inset-top)); } }

/* identical size/type on both looks so the pill is pixel-for-pixel the same wherever it is */
.styleswitch { width:150px; box-sizing:content-box; }
.styleswitch button { flex:1 1 0; text-align:center; padding:8px 0; font:700 12px/1 "InterVariable","Inter",-apple-system,"Segoe UI",Roboto,sans-serif; }

/* 2026-11-01: control row laid out exactly like Classic -- edition | per-section | search | light/dark, then the Classic/Manna pill
   pinned at the far right. Same fixed widths + 36px height as the Classic copy so every control lands on the same pixels. */
.top { padding:calc(12px + env(safe-area-inset-top)) 14px 6px; }
.toprow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ctlrow { display:flex; align-items:flex-start; gap:8px; margin-right:158px; }
.ctlrow .selwrap { display:block; } .ctlrow .qwrap { flex:none; }
.ctlrow .sel, .ctlrow #q, .ctlrow .ibtn { height:36px; }
.ctlrow .sel { padding:0 26px 0 12px; font-size:13px; min-width:0; border-radius:12px; background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; }
#edition { width:150px; } #density { width:122px; } #sort { width:120px; }
.ctlrow #q { width:168px; padding:0 14px; font-size:14px; border-radius:12px; }
.ctlrow .ibtn { width:38px; border:0; }
.ctlrow .ibtn img { width:30px; height:30px; }
.statline { margin:2px 0 8px 2px; }
@media (max-width:700px) {
  .top { padding-top:calc(58px + env(safe-area-inset-top)); }
  .toprow { flex-direction:column; gap:10px; }
  .ctlrow { flex-wrap:wrap; margin-right:0; width:100%; }
  .ctlrow .qwrap { order:5; flex:1 1 100%; } .ctlrow #q { width:100%; }
}

/* 2026-11-01 (4): wider light-to-dark spread. Quiet stories are a lighter, muted tone; the biggest are deep and saturated
   (the old range was ~20 points of lightness; this is ~38). --k is now each story's rank among the stories on screen. REVERT: delete block. */
.tile, :root[data-theme="dark"] .tile { background:hsl(var(--h) calc(16% + 66% * var(--k, .5)) calc(52% - 36% * var(--k, .5))); }
.tile .t-title { text-shadow:0 1px 3px rgba(0,0,0,.38); }
.tile .t-meta { color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.3); }

/* story preview inside the panel */
.d-preview { padding:4px 20px 18px; }
.d-prev-img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--line); margin:4px 0 12px; background:var(--card-hover); }
.d-prev-text { font:600 15px/1.5 var(--body); color:var(--text); }
.d-prev-wait { color:var(--dim); font-weight:500; font-size:13.5px; }
.d-prev-src { margin-top:10px; font:500 11.5px/1.5 var(--body); color:var(--faint); }
.d-prev-src a { color:var(--dim); font-weight:700; }

/* panel order: Also covered by, then the Buzz explainer */
.d-band .d-buzz { margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }
.d-band .d-buzz:first-child { margin-top:0; border-top:0; padding-top:12px; }

/* 2026-11-01: installed desktop app windows (Safari "Add to Dock", Chrome/Edge installed app). Their window title bar overlays the top ~50px of the
   page, so controls placed there could not be clicked (a click there drags the window). Push the header below the title bar. Phones/tablets
   (coarse pointer) are unchanged -- they already worked. */
@media (min-width:701px) and (pointer:fine) {
  .webapp .top { padding-top:62px; }
  .webapp .styleswitch { top:62px; }
}
@media (display-mode:standalone) and (min-width:701px) and (pointer:fine) {
  .top { padding-top:62px; }
  .styleswitch { top:62px; }
}

/* clear (x) button inside the search field; the browser's own cancel glyph is hidden so there is only one */
.qwrap { position:relative; }
#q::-webkit-search-cancel-button, #q::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
.ctlrow #q { padding-right:34px; } #q { padding-right:34px; }
.qclear { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:0; border-radius:50%; cursor:pointer; background:var(--accent-weak); color:var(--dim); font:700 16px/1 var(--body); display:flex; align-items:center; justify-content:center; padding:0 0 2px; }
.qclear[hidden] { display:none; }
@media (hover:hover) { .qclear:hover { background:var(--edge); color:var(--text); } }

/* installed desktop app window: its title bar (traffic lights, back/forward, share) overlays the top of the page, so start the side panel
   below it -- otherwise the panel's close button sits under the title bar's own icons and can't be clicked */
@media (min-width:701px) and (pointer:fine) { .webapp .drawer { top:56px; } }
@media (display-mode:standalone) and (min-width:701px) and (pointer:fine) { .drawer { top:56px; } }

/* section headers: Manna's Prep Rows establishment-name face (Inter 700, tight tracking, per-letter "DNA" colour) */
.rlabel { height:26px; font-family:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; text-transform:none; white-space:nowrap; }
.rlabel .pr-dna { overflow:hidden; text-overflow:ellipsis; }
.rlabel em { font-size:12px; font-weight:700; letter-spacing:.02em; align-self:center; }
.rlabel i { width:9px; height:9px; }

/* section count: Manna's Prep Rows address line (Mulish, 10px/15px, faint, .02em tracking) */
.rlabel em { font-family:var(--body); font-weight:400; font-size:10px; line-height:15px; color:var(--faint); letter-spacing:.02em; }
.rlabel em { font-size:15px; line-height:1; letter-spacing:.01em; }

/* 3-way look switch: Classic | Modern | Billboard */
.styleswitch { width:198px; }
.styleswitch button { font-size:11.5px; }
.ctlrow { margin-right:206px; }
@media (max-width:700px) { .ctlrow { margin-right:0; } }
@media (min-width:701px) and (max-width:1200px) { .ctlrow #q { width:140px; } .ctlrow { gap:6px; } .ctlrow .selwrap select { max-width:128px; } }

/* tile footer: show the whole outlet name (wrap instead of ellipsis) */
.t-meta { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.2; }
.tile.md .t-meta { padding-right:0; }

/* rank number (1 = the section's top story) in the tile's top-right corner */
.t-rank { position:absolute; top:6px; right:7px; z-index:2; min-width:19px; height:19px; padding:0 5px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.28); color:#fff; font:800 11px/1 "InterVariable","Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums; letter-spacing:0; text-shadow:none; pointer-events:none; backdrop-filter:blur(2px); }
.tile.lg .t-title, .tile.md .t-title { padding-right:22px; }
.tile.sm .t-rank, .tile.xs .t-rank { top:4px; right:5px; min-width:16px; height:16px; font-size:9.5px; padding:0 3px; }
.tile.xxs .t-rank { top:50%; right:5px; transform:translateY(-50%); min-width:15px; height:15px; font-size:9px; padding:0 3px; }

/* section tag line: one short sentence saying what the section covers, on the header line after the count */
.rlabel .rtag { margin-left:6px; min-width:0; flex:1 1 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 12px/1 var(--body); letter-spacing:.005em; color:var(--dim); }
.rlabel .rtag::before { content:"\2014"; margin-right:8px; color:var(--faint); }
/* tag line scrolls sideways when it doesn't fit (same behaviour as Manna's Prep Rows establishment name) instead of being cut off */
.rlabel .rtag { overflow-x:auto; overflow-y:hidden; text-overflow:clip; pointer-events:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--faint) transparent; align-self:stretch; display:flex; align-items:center; }
.rlabel .rtag::-webkit-scrollbar { height:3px; }
.rlabel .rtag::-webkit-scrollbar-thumb { background:var(--faint); border-radius:2px; }
.rlabel .rtag::-webkit-scrollbar-track { background:transparent; }

/* rank number: no ring/backing; Manna's chip-number type (Inter, weight 1000, -.03em, tabular) scaled to the tile size (40px on the biggest tiles = Manna's chip number) */
.t-rank { background:none; border:0; backdrop-filter:none; min-width:0; height:auto; padding:0; border-radius:0; display:block;
  font-family:"InterVariable","Inter",-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:1000; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1;
  color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(0,0,0,.35); top:7px; right:10px; transform:none; font-size:40px; }
.tile.md .t-rank { font-size:26px; top:6px; right:8px; }
.tile.sm .t-rank { font-size:15px; top:5px; right:6px; min-width:0; height:auto; padding:0; }
.tile.xs .t-rank { font-size:13px; top:4px; right:5px; min-width:0; height:auto; padding:0; }
.tile.xxs .t-rank { font-size:12px; top:50%; right:5px; transform:translateY(-50%); min-width:0; height:auto; padding:0; }
.tile.lg .t-title { padding-right:46px; } .tile.md .t-title { padding-right:32px; }
.tile.sm .t-title { padding-right:18px; } .tile.xs .t-title { padding-right:16px; }
.tile.lg .t-title { padding-right:58px; } .tile.md .t-title { padding-right:40px; }
.tile.sm .t-title { padding-right:26px; } .tile.xs .t-title { padding-right:22px; }
.tile.nar .t-title { padding-right:2px; padding-top:15px; } .tile.nar .t-rank { font-size:12px; top:3px; right:5px; }
.t-rank { color:#fff; opacity:.8; }   /* 20% transparent */
.t-rank { opacity:.5; }   /* 50% opaque */
.t-rank { opacity:.75; }   /* 75% opaque */
.t-rank { opacity:.25; }   /* 25% opaque */
/* descenders (g, y, p...) were being clipped by the headers' overflow:hidden at line-height 1 -- give the text room below the baseline */
.rlabel { height:30px; }
.rlabel .pr-dna { line-height:1.3; padding-bottom:4px; }
.rlabel .rtag { line-height:1.4; padding-bottom:3px; }
.rlabel em { line-height:1.3; }

/* "How to read Really" -- the three dimensions */
.how { flex:1 1 100%; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:0 14px; }
.how summary { cursor:pointer; padding:10px 0; font:600 12px/1.3 var(--body); color:var(--dim); list-style:none; }
.how summary::-webkit-details-marker { display:none; }
.how summary::before { content:"+"; display:inline-block; width:14px; color:var(--faint); }
.how[open] summary::before { content:"\2212"; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 22px; padding:2px 0 14px; }
.how-grid b { display:block; font:700 12.5px/1.3 var(--body); color:var(--ink); margin-bottom:4px; }
.how-grid p { font:500 12px/1.55 var(--body); color:var(--dim); margin:0; }
@media (max-width:760px) { .how-grid { grid-template-columns:1fr; } }

/* Really logo (artwork) + tagline */
.logo-img { display:block; height:clamp(48px,8vw,70px); width:auto; flex:none; filter:drop-shadow(0 2px 6px rgba(124,77,255,.28)); }
.tagline { font:800 clamp(10.5px,1.55vw,13px)/1 var(--body,inherit); letter-spacing:.2em; text-transform:uppercase; color:#7c4dff; align-self:flex-end; padding-bottom:clamp(5px,.9vw,9px); white-space:nowrap; }
@media (max-width:700px) { .brandrow { flex-wrap:wrap; row-gap:2px; } .tagline { flex:1 1 100%; align-self:auto; padding:0 0 0 calc(clamp(48px,8vw,70px)*1.1 + 8px); margin-top:-2px; } }
@media (min-width:701px) and (max-width:1250px) { .ctlrow #q { width:110px; } .ctlrow .selwrap select { max-width:112px; } .ctlrow .sel { font-size:12.5px; padding-left:10px; } }
@media (min-width:701px) and (max-width:1500px) { .toprow { flex-wrap:wrap; } .ctlrow { flex:1 1 100%; order:3; margin:6px 0 0; margin-right:0; } .ctlrow .qwrap { flex:1 1 auto; } .ctlrow #q { width:100%; } .ctlrow .selwrap select { max-width:none; } }

/* sheet top bar: gradient from the darkest to the lightest letter colour of the headline's DNA */
.d-top { padding-top:0; }
.d-cat { margin:0 -20px 16px; padding:20px 64px 14px 20px; min-height:56px; display:flex; align-items:center;
  background:linear-gradient(90deg,var(--g1,#6b5a3a),var(--g2,#c49a45)); color:#fff; border-radius:0; }
.d-cat span { text-shadow:0 1px 3px rgba(0,0,0,.45); }

/* sheet bar: larger section label; close button in the segmented-toggle style (soft raised white pill, no ring) */
.d-cat { font-size:15px; letter-spacing:.1em; min-height:64px; padding-top:22px; padding-bottom:16px; }
.drawer-x { width:48px; height:36px; border-radius:18px; top:14px; right:14px; border:1px solid rgba(0,0,0,.07); background:#fff; color:#1a1a1a; font-size:22px;
  box-shadow:0 1px 1px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.16), inset 0 -1px 0 rgba(0,0,0,.05); outline:0; transition:transform .12s, box-shadow .12s; }
.drawer-x:active { transform:scale(.96); box-shadow:0 1px 2px rgba(0,0,0,.18); }
.drawer-x:focus-visible { box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.2); }
.d-cat { padding-right:76px; }

/* top colour bar 10% shorter */
.d-cat { min-height:58px; padding-top:20px; padding-bottom:14px; margin-bottom:15px; }
.drawer-x { top:11px; }

/* story sheet: the tinted band continues to the bottom (no grey section) */
#drawerBody { min-height:100%; display:flex; flex-direction:column; }
.d-band { flex:1 1 auto; background:rgba(var(--sc), .08) !important; }
.d-band .d-steps, .d-band .d-steps a { background:var(--card); }

#size { width:112px; }
@media (max-width:700px) { #density { width:112px; } #sort { width:112px; } #size { width:96px; } .ctlrow { gap:6px; } }
@media (max-width:700px) { .ctlrow .sel { font-size:13px; padding-left:10px; padding-right:24px; } #density { width:100px; } #sort { width:112px; } #size { width:94px; } .ctlrow { gap:5px; } }

/* fold: click a topic header to step it down; the indicator is a 3-level "bulb" (3 bars lit = everything, 1 = title only) */
.rlabel { pointer-events:auto; cursor:pointer; padding-right:44px; }
.region.folded { border-bottom:1px solid var(--line); }
.fold { position:absolute; top:3px; right:2px; z-index:3; width:36px; height:24px; border:0; border-radius:12px; background:color-mix(in srgb,var(--text) 7%, transparent); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; }
.fold b { display:block; width:16px; height:3px; border-radius:2px; background:var(--faint); opacity:.35; transition:opacity .15s, background .15s; }
.fold.l2 b, .fold.l1 b:nth-child(-n+2), .fold.l0 b:first-child { opacity:1; background:var(--text); }
@media (hover:hover) { .fold:hover { background:color-mix(in srgb,var(--text) 14%, transparent); } }
.fold:focus-visible { outline:2px solid var(--text); outline-offset:1px; }

.fold.lmix b:nth-child(odd) { opacity:1; background:var(--text); }
.chips .gfold { position:relative; top:auto; right:auto; flex:none; align-self:center; width:40px; height:34px; border-radius:17px; margin-right:2px; }

/* "Add a topic" sheet */
.addbtn { flex:none; align-self:center; width:34px; height:34px; border-radius:50%; border:1px dashed var(--faint); background:transparent; color:var(--dim); font:600 22px/1 var(--body,inherit); cursor:pointer; padding:0; margin-right:6px; }
@media (hover:hover) { .addbtn:hover { color:var(--text); border-color:var(--text); } }
.addsheet { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; }
.addsheet[hidden] { display:none; }
.as-scrim { position:absolute; inset:0; background:rgba(10,10,14,.5); }
.as-card { position:relative; width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; background:var(--card,#fff); color:var(--text); border:1px solid var(--line-strong,var(--line)); border-radius:20px; padding:22px 20px 20px; box-shadow:0 20px 60px rgba(0,0,0,.35); animation:rise .22s ease; }
.as-card h2 { font:800 22px/1.2 var(--body,inherit); letter-spacing:-.01em; margin:0 40px 4px 0; }
.as-sub { color:var(--dim); font:500 14px/1.4 var(--body,inherit); margin:0 0 14px; }
.as-x { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:18px; border:1px solid var(--line); background:var(--card,#fff); color:var(--text); font-size:22px; line-height:1; cursor:pointer; }
.as-l { display:block; font:800 12px/1 var(--body,inherit); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin:14px 0 6px; } .as-l span { text-transform:none; letter-spacing:0; font-weight:500; }
.as-in { width:100%; box-sizing:border-box; height:44px; border-radius:12px; border:1px solid var(--line-strong,var(--line)); background:var(--bg); color:var(--text); font:500 16px/1 var(--body,inherit); padding:0 14px; outline:0; }
.as-in:focus { border-color:var(--text); }
.as-hint { color:var(--faint); font:500 12px/1.4 var(--body,inherit); margin:6px 2px 0; }
.as-seg { display:flex; padding:3px; border-radius:999px; background:color-mix(in srgb,var(--text) 8%,transparent); }
.as-seg button { flex:1; height:36px; border:0; border-radius:999px; background:transparent; color:var(--dim); font:700 14px/1 var(--body,inherit); cursor:pointer; }
.as-seg button[aria-pressed="true"] { background:var(--card,#fff); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1); }
.as-col { margin-top:12px; }
.as-prev { display:flex; align-items:center; gap:9px; height:40px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); }
.as-prev i { width:10px; height:10px; border-radius:50%; flex:none; } .as-prev b { font:800 20px/1 var(--body,inherit); letter-spacing:-.01em; }
.as-rand { margin-top:10px; } .as-shuffle { height:38px; padding:0 16px; border-radius:19px; border:1px solid var(--line-strong,var(--line)); background:var(--card,#fff); color:var(--text); font:700 14px/1 var(--body,inherit); cursor:pointer; }
.as-pick { margin-top:12px; } .as-pick[hidden], .as-rand[hidden], .as-keywrap[hidden] { display:none; }
.as-hue { -webkit-appearance:none; appearance:none; width:100%; height:16px; border-radius:8px; background:linear-gradient(90deg,hsl(0 75% 55%),hsl(60 75% 50%),hsl(120 65% 45%),hsl(180 70% 45%),hsl(240 70% 60%),hsl(300 70% 55%),hsl(360 75% 55%)); outline:0; }
.as-hue::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid #222; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.as-hue::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #222; }
.as-sw { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .as-dot { width:30px; height:30px; border-radius:50%; border:2px solid var(--card,#fff); box-shadow:0 0 0 1px var(--line-strong,var(--line)); cursor:pointer; padding:0; }
.as-msg { min-height:20px; margin:14px 2px 2px; font:600 14px/1.4 var(--body,inherit); color:var(--dim); } .as-msg.bad { color:#d23b3b; }
.as-go { width:100%; height:48px; border-radius:14px; border:0; background:var(--accent,var(--text)); color:var(--bg); font:800 16px/1 var(--body,inherit); cursor:pointer; margin-top:6px; } .as-go:disabled { opacity:.6; cursor:wait; }
html.as-open { overflow:hidden; }
@media (max-width:700px) { .addsheet { align-items:flex-end; } .as-card { width:100vw; max-height:92dvh; border-radius:20px 20px 0 0; padding-bottom:max(20px, env(safe-area-inset-bottom)); } }

/* remove-topic button sits left of the fold switch */
.rlabel { padding-right:84px; }
.rm { position:absolute; top:3px; right:44px; z-index:3; width:30px; height:24px; border:0; border-radius:12px; background:transparent; color:var(--faint); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; opacity:.7; }
@media (hover:hover) { .rm:hover { color:#d23b3b; background:color-mix(in srgb,#d23b3b 12%, transparent); opacity:1; } }
.rm:focus-visible { outline:2px solid var(--text); outline-offset:1px; }
.as-go.danger { background:#d23b3b; color:#fff; } .as-cancel { width:100%; height:44px; border-radius:14px; border:1px solid var(--line-strong,var(--line)); background:transparent; color:var(--text); font:700 15px/1 var(--body,inherit); cursor:pointer; margin-top:8px; }

.as-go.warn { background:#c77a12; color:#fff; } .as-view { width:100%; height:44px; margin-top:8px; border-radius:14px; border:1px solid var(--line-strong,var(--line)); background:transparent; color:var(--text); font:700 15px/1 var(--body,inherit); cursor:pointer; } .as-view[hidden] { display:none; }

/* edit order */
.ordbtn { flex:none; align-self:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong,var(--line)); background:transparent; color:var(--dim); cursor:pointer; padding:0; margin-right:6px; display:inline-flex; align-items:center; justify-content:center; }
@media (hover:hover) { .ordbtn:hover { color:var(--text); border-color:var(--text); } }
.ord-list { list-style:none; margin:10px -6px 12px; padding:0 6px; max-height:min(56vh,480px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.ord-row { display:flex; align-items:center; gap:10px; padding:6px 8px 6px 4px; margin-bottom:6px; border:1px solid var(--line-strong,var(--line)); border-radius:12px; background:var(--card,var(--bg)); user-select:none; -webkit-user-select:none; }
.ord-row i { flex:none; width:10px; height:10px; border-radius:50%; }
.ord-row span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.ord-row.drag { position:relative; z-index:2; box-shadow:0 8px 26px rgba(0,0,0,.28); transform:scale(1.02); border-color:var(--text); }
.ord-h { flex:none; width:40px; height:36px; border:0; background:transparent; border-radius:9px; cursor:grab; touch-action:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.ord-h b { display:block; width:18px; height:3px; border-radius:2px; background:var(--faint); }
.ord-h:focus-visible { outline:2px solid var(--text); }
.ord-row.drag .ord-h { cursor:grabbing; }
.ord-foot { display:flex; gap:8px; } .ord-foot .as-cancel { flex:1; } .ord-foot .as-go { flex:1; width:auto; margin:0; }
.ord-tools { margin:2px 0 0; } .ord-az { height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong,var(--line)); background:transparent; color:var(--text); font:700 13px/1 var(--body,inherit); cursor:pointer; }
.azbtn { flex:none; align-self:center; height:34px; padding:0 12px; border-radius:17px; border:1px solid var(--line-strong,var(--line)); background:transparent; color:var(--dim); font:700 13px/1 var(--body,inherit); cursor:pointer; margin-right:6px; } @media (hover:hover) { .azbtn:hover { color:var(--text); border-color:var(--text); } }
@media (min-width:701px) { #sort { width:142px; } }

/* swipe between stories in the opened article */
.d-nav { display:flex; align-items:center; gap:10px; padding:10px 64px 0 16px; font:600 12px/1 var(--body, inherit); color:var(--dim, #888); }
.d-nav button { width:32px; height:30px; border-radius:15px; border:1px solid var(--edge, rgba(128,128,128,.35)); background:var(--card); color:var(--text); font-size:20px; line-height:1; cursor:pointer; padding:0; }
.d-nav span { letter-spacing:.03em; }
#drawerBody { touch-action:pan-y; }
#drawerBody.sl { animation:dsl .24s ease both; } #drawerBody.sr { animation:dsr .24s ease both; }
@keyframes dsl { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:none; } }
@keyframes dsr { from { opacity:0; transform:translateX(-36px); } to { opacity:1; transform:none; } }

/* ---- Bible: chapter tiles + reader ---- */
.tile.ch { display:flex; align-items:center; justify-content:center; }
.tile.ch .ch-n { font:900 clamp(20px,3.4vw,28px)/1 var(--inter); letter-spacing:-.02em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.38); font-variant-numeric:tabular-nums; }
.tile.ch.read::after { content:""; position:absolute; right:7px; top:7px; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.region.dim .tile, .region.dim .rlabel { opacity:.22; }
.bk .v { font:500 calc(17px * var(--vscale,1))/1.62 "Spectral",Georgia,"Times New Roman",serif; color:var(--text); margin:0 0 9px; text-wrap:pretty; }
.bk .v sup { font:800 10px/1 var(--inter); color:rgb(var(--sc)); margin-right:5px; vertical-align:.45em; letter-spacing:.02em; }
:root[data-theme="dark"] .bk .v sup { color:color-mix(in srgb, rgb(var(--sc)) 55%, #fff); }
.bk .v.hl { background:color-mix(in srgb, rgb(var(--sc)) 22%, transparent); border-radius:6px; padding:3px 6px; margin-left:-6px; margin-right:-6px; }
.bk-foot { display:flex; justify-content:space-between; gap:10px; padding:10px 16px 6px; }
.bk-b { flex:1 1 0; cursor:pointer; font:700 13px/1.2 var(--body); color:var(--text); background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:12px 10px; box-shadow:var(--lift-hi); }
.bk-b:active { transform:translateY(1px); }
.rlabel .rtag { max-width:60%; }
.ctlrow #version { width:78px; }
.vpick { display:inline-flex; margin:10px 0 2px; padding:3px; border-radius:999px; background:var(--card); border:1px solid var(--edge); box-shadow:var(--lift-hi); }
.vpick button { cursor:pointer; border:0; background:transparent; color:var(--dim); font:700 12px/1 var(--inter); padding:8px 16px; border-radius:999px; letter-spacing:.04em; }
.vpick button[aria-pressed="true"] { background:var(--accent); color:var(--bg); }
@media (max-width:700px) { .ctlrow #version { width:78px; } .ctlrow .qwrap { order:5; } }
.bk .v.vnote { font-style:italic; color:var(--dim); border-left:3px solid rgb(var(--sc)); padding-left:10px; }
.bk .v.vnote .vn-l { font:800 10px/1 var(--inter); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--sc)); }
:root[data-theme="dark"] .bk .v.vnote .vn-l { color:color-mix(in srgb, rgb(var(--sc)) 55%, #fff); }

.tile.ch.na { cursor:default; background:var(--card); border:1px dashed var(--line-strong); box-shadow:none; opacity:.55; }
.tile.ch.na .ch-n { color:var(--faint); text-shadow:none; font-weight:700; }
.tile.ch.na:hover, .tile.ch.na:focus-visible { transform:none; border-color:var(--line-strong); }
.vpick { flex-wrap:wrap; max-width:100%; border-radius:20px; gap:2px; }
.vpick button { padding:8px 11px; }
.ctlrow #version { width:96px; }

.vpick .vlang { flex-basis:100%; padding:6px 10px 2px; font:700 10px/1 var(--inter); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.vpick .vlang:not(:first-child) { margin-top:4px; border-top:1px solid var(--edge); }

.vpick.selwrap { display:block; width:150px; max-width:100%; margin:10px 0 2px; padding:0; background:none; border:0; box-shadow:none; border-radius:0; }
.vpick .vsel { width:100%; height:40px; padding:0 30px 0 14px; font-size:14px; border-radius:12px; }

.vrow { display:flex; align-items:center; gap:10px; margin:10px 0 2px; flex-wrap:wrap; }
.vrow .vpick.selwrap { margin:0; }
.fsz { display:inline-flex; gap:6px; }
.fsz button { cursor:pointer; display:inline-flex; align-items:baseline; justify-content:center; gap:1px; min-width:44px; height:40px; padding:0 10px; border-radius:12px; color:var(--text); background:var(--card); border:1px solid var(--edge); box-shadow:var(--shadow); font:700 17px/40px var(--inter); }
.fsz .fs-dec { font-size:13px; }
.fsz button small { font:700 11px/1 var(--inter); position:relative; top:-3px; }
.fsz button:disabled { opacity:.35; cursor:default; }
.fsz .fs-reset { min-width:40px; font-size:15px; }

:root { --wj:#b3261e; } :root[data-theme="dark"] { --wj:#ff7a70; } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --wj:#ff7a70; } }
.bk .v .wj { color:var(--wj); }

/* full-screen reader toggle */
.drawer-fs { position:absolute; right:70px; top:11px; z-index:2; width:44px; height:36px; border-radius:18px; border:1px solid rgba(0,0,0,.07); background:#fff; color:#1a1a1a; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 1px 1px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.16), inset 0 -1px 0 rgba(0,0,0,.05); outline:0; transition:transform .12s, box-shadow .12s; }
.drawer-fs:active { transform:scale(.96); box-shadow:0 1px 2px rgba(0,0,0,.18); }
.drawer-fs:focus-visible { box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.2); }
.drawer-fs .ic-out { display:none; } .drawer.full .drawer-fs .ic-in { display:none; } .drawer.full .drawer-fs .ic-out { display:inline; }
.d-cat { padding-right:128px; }
.drawer.full, .webapp .drawer.full { top:0; left:0; right:0; bottom:0; width:100vw; max-width:none; height:100vh; height:100dvh; border:0; border-radius:0; animation:none; }
@media (min-width:900px) { .drawer.full .d-title, .drawer.full .d-sub, .drawer.full .vrow, .drawer.full .d-preview, .drawer.full .d-note, .drawer.full .bk-foot, .drawer.full .d-nav { max-width:760px; margin-left:auto; margin-right:auto; } }

/* reader font + colour themes */
.bk .v { font-family:var(--rfont,"Spectral",Georgia,"Times New Roman",serif); line-height:var(--rlh,1.62); }
.drawer[data-rt] { background:var(--card); color:var(--text); }
.drawer[data-rt="white"], .rs[data-rt="white"]    { --card:#fff;     --bg:#fff;     --text:#15151a; --ink:#1f2430; --dim:#63625f; --faint:#8b8983; --line:rgba(20,20,22,.09); --line-strong:rgba(20,20,22,.15); --edge:rgba(20,20,22,.17); --card-hover:#f4f4f2; --wj:#b3261e; }
.drawer[data-rt="rose"], .rs[data-rt="rose"]     { --card:#f4eeee;  --bg:#f4eeee;  --text:#2a2224; --ink:#2a2224; --dim:#6e6264; --faint:#968a8c; --line:rgba(40,20,24,.1);  --line-strong:rgba(40,20,24,.17);  --edge:rgba(40,20,24,.18);  --card-hover:#ece4e4; --wj:#a3202a; }
.drawer[data-rt="grey"], .rs[data-rt="grey"]     { --card:#eceef0;  --bg:#eceef0;  --text:#1c2024; --ink:#1c2024; --dim:#5b626a; --faint:#868d95; --line:rgba(20,26,34,.1);  --line-strong:rgba(20,26,34,.17);  --edge:rgba(20,26,34,.18);  --card-hover:#e2e5e8; --wj:#b3261e; }
.drawer[data-rt="cream"], .rs[data-rt="cream"]    { --card:#fbf3e8;  --bg:#fbf3e8;  --text:#33291c; --ink:#33291c; --dim:#74664f; --faint:#9c8e76; --line:rgba(60,40,10,.1);  --line-strong:rgba(60,40,10,.17);  --edge:rgba(60,40,10,.18);  --card-hover:#f3e8d8; --wj:#a8281c; }
.drawer[data-rt="charcoal"], .rs[data-rt="charcoal"] { --card:#2b3032;  --bg:#2b3032;  --text:#e9ecec; --ink:#e9ecec; --dim:#aeb5b6; --faint:#879091; --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.17); --edge:rgba(255,255,255,.2); --card-hover:#343a3d; --wj:#ff8a80; }
.drawer[data-rt="navy"], .rs[data-rt="navy"]     { --card:#1d2838;  --bg:#1d2838;  --text:#e6ebf4; --ink:#e6ebf4; --dim:#a3afc4; --faint:#7d8aa2; --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.17); --edge:rgba(255,255,255,.2); --card-hover:#25334a; --wj:#ff8a80; }
.drawer[data-rt="black"], .rs[data-rt="black"]    { --card:#111;     --bg:#111;     --text:#f1f1f1; --ink:#f1f1f1; --dim:#a8a8a8; --faint:#808080; --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.17); --edge:rgba(255,255,255,.2); --card-hover:#1b1b1b; --wj:#ff7a70; }
.drawer[data-rt] .d-nav span, .drawer[data-rt] .d-sub { color:var(--dim); }
.drawer[data-rt] .sel { background-color:var(--card-hover); color:var(--text); }

/* reader settings sheet */
.rs { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; } .rs[hidden] { display:none; }
.rs-scrim { position:absolute; inset:0; background:rgba(10,10,12,.4); }
.rs-sheet { position:relative; width:min(480px,100vw); max-height:88vh; max-height:88dvh; overflow-y:auto; background:#fff; color:#15151a; border-radius:26px 26px 0 0; padding:8px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.25); animation:rise .24s var(--ease); font-family:var(--inter); }
@media (min-width:700px) { .rs { align-items:center; } .rs-sheet { border-radius:26px; } }
.rs-grab { width:44px; height:5px; border-radius:3px; background:#c9c9cc; margin:2px auto 8px; }
.rs-hd { position:relative; display:flex; align-items:center; justify-content:center; min-height:52px; font:700 18px/1 var(--inter); }
.rs-hd button { position:absolute; left:0; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#fff; color:#15151a; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; }
.rs-row { display:flex; gap:6px; margin:10px 0 14px; }
.rs-row button { flex:1; height:56px; border:0; border-radius:12px; background:#e6e6e8; color:#15151a; cursor:pointer; font-family:var(--inter); }
.rs-row button:disabled { opacity:.35; cursor:default; }
.rs-row .sm { font-size:15px; } .rs-row .lg { font-size:30px; } .rs-row .ls { flex:0 0 64px; display:flex; align-items:center; justify-content:center; }
.rs-row .ls svg { width:30px; height:30px; stroke:#15151a; stroke-width:2.4; fill:none; stroke-linecap:round; }
.rs-font { display:flex; width:100%; align-items:center; justify-content:space-between; text-align:left; border:1.5px solid #dcdcdf; border-radius:14px; background:#fff; padding:12px 16px; cursor:pointer; color:#15151a; font-family:var(--inter); }
.rs-font small { display:block; font-size:13px; color:#77777c; margin-bottom:3px; } .rs-font b { font-weight:500; font-size:20px; }
.rs-font i { font-style:normal; font-size:22px; color:#aaa; }
.rs-themes { display:flex; gap:10px; overflow-x:auto; padding:16px 2px 6px; scrollbar-width:none; } .rs-themes::-webkit-scrollbar { display:none; }
.rs-sw { flex:none; width:64px; height:96px; border-radius:12px; border:2px solid transparent; cursor:pointer; position:relative; padding:0; }
.rs-sw::before { content:""; position:absolute; left:11px; right:11px; top:18px; height:26px; background:linear-gradient(var(--ln) 0 3px, transparent 3px 8px, var(--ln) 8px 11px, transparent 11px 16px, var(--ln) 16px 19px, transparent 19px 24px, var(--ln) 24px 26px); opacity:.85; }
.rs-sw::after { content:""; position:absolute; left:50%; bottom:8px; width:26px; height:26px; margin-left:-13px; border-radius:50%; border:1.5px solid var(--ln); opacity:.6; }
.rs-sw.on { border-color:#15151a; } .rs-sw.on::after { background:var(--ln) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; opacity:1; filter:invert(0); }
.rs-sw[data-rt="auto"] { background:linear-gradient(135deg,#fff 50%,#17171d 50%); --ln:#888; }
.rs-fl { list-style:none; margin:6px -18px 0; } .rs-fl button { display:flex; width:100%; align-items:center; justify-content:space-between; text-align:left; border:0; background:none; padding:15px 20px; font-size:21px; color:#15151a; cursor:pointer; }
.rs-fl button.on { background:#f3efee; } .rs-fl button.on::after { content:"\2713"; font:700 20px/1 var(--inter); }
.rs-sec { font:700 20px/1 var(--inter); margin:16px 0 4px; }
.rs-hide { display:none !important; }

/* floating bottom navigation */
.fnav { position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:19; display:flex; gap:2px; padding:7px; width:min(440px, calc(100vw - 24px)); border-radius:999px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); border:1px solid rgba(0,0,0,.1); box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7); transition:transform .22s var(--ease), opacity .2s; }
:root[data-theme="dark"] .fnav { background:rgba(28,28,34,.7); border-color:rgba(255,255,255,.14); }
.fnav button { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px 6px; border:0; border-radius:999px; background:none; color:var(--text); cursor:pointer; font:700 10.5px/1 var(--inter); letter-spacing:.01em; }
.fnav svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fnav button.on { background:rgba(0,0,0,.08); } :root[data-theme="dark"] .fnav button.on { background:rgba(255,255,255,.14); }
.fnav button:active { transform:scale(.95); }
html.reading .fnav { transform:translate(-50%,140%); opacity:0; pointer-events:none; }
body { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion:reduce) { .fnav { transition:none; } }

.fnav .ibtn { width:auto; height:auto; } .fnav .ibtn img { width:24px; height:24px; margin:-1px 0 -1px; }

/* text search */
.swrap { position:relative; margin:6px 0 8px; } .swrap > svg { position:absolute; left:14px; top:13px; width:20px; height:20px; fill:none; stroke:var(--faint); stroke-width:2.2; stroke-linecap:round; pointer-events:none; }
#sq { width:100%; font:500 16px/1 var(--body); color:var(--text); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:13px 16px 13px 42px; }
.sscope { display:flex; gap:6px; margin:8px 0 0; flex-wrap:wrap; } .sscope[hidden] { display:none; }
.sscope button { cursor:pointer; border:1px solid var(--edge); background:var(--card); color:var(--text); border-radius:999px; padding:6px 13px; font:700 12px/1 var(--inter); }
.sscope button.on { background:var(--text); color:var(--bg); border-color:var(--text); }
.sres { max-width:900px; margin:0 auto; padding:4px 16px 24px; width:100%; } .sres[hidden] { display:none; }
.sres .s-sum { font:600 13px/1.4 var(--body); color:var(--dim); margin:4px 0 12px; } .sres .s-sum b { color:var(--text); }
.s-hit { display:block; width:100%; text-align:left; cursor:pointer; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:0 0 9px; box-shadow:var(--shadow); }
.s-hit:active { transform:translateY(1px); } .s-ref { display:block; font:800 12px/1 var(--inter); letter-spacing:.02em; color:var(--dim); margin-bottom:6px; }
.s-txt { font:500 16px/1.55 "Spectral",Georgia,serif; } .s-txt mark { background:rgba(255,200,40,.45); color:inherit; border-radius:3px; padding:0 1px; }
:root[data-theme="dark"] .s-txt mark { background:rgba(255,200,40,.3); }
.s-more { display:block; margin:12px auto; cursor:pointer; border:1px solid var(--edge); background:var(--card); color:var(--text); border-radius:12px; padding:12px 22px; font:700 14px/1 var(--inter); }
body.searching #stage, body.searching #chips, body.searching #statline, body.searching .foot { display:none; }

.swrap .sclear { top:23px; right:10px; width:26px; height:26px; font-size:19px; } .swrap .sclear { z-index:2; }
#sq { padding-right:44px; } #sq::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; display:none; }

.s-txt mark.rest { background:rgba(214,150,0,.5); border-radius:0 3px 3px 0; margin-left:-1px; }
.s-txt mark:has(+ mark.rest) { border-radius:3px 0 0 3px; }
:root[data-theme="dark"] .s-txt mark.rest { background:rgba(214,150,0,.42); }

.sscope .sx { margin-left:auto; display:inline-flex; align-items:center; gap:7px; } .sscope .sx::before { content:""; width:26px; height:15px; border-radius:8px; background-color:var(--edge); background-image:radial-gradient(circle at 7px 50%, #fff 5.5px, transparent 6px); transition:background-color .15s; }
.sscope .sx.on::before { background-color:#34c759; background-image:radial-gradient(circle at 19px 50%, #fff 5.5px, transparent 6px); }
.sscope .sx.on { background:var(--card); color:var(--text); border-color:var(--edge); }

/* iPhone/iPad zoom the whole page whenever a field under 16px is focused, and stay zoomed (pushing the reader and its close button off-screen). Keep every field at 16px on touch screens. */
@media (pointer:coarse) {
  input, select, textarea, .sel, .ctlrow .sel, .ctlrow #q, #q, #sq, .vpick .vsel { font-size:16px !important; }
}

.rs-fsz { display:flex; width:100%; margin:10px 0 12px; } .rs-fsz button { flex:1; height:56px; background:#e6e6e8; border:0; box-shadow:none; color:#15151a; font-size:22px; line-height:56px; } .rs-fsz .fs-dec { font-size:17px; } .rs-fsz .fs-reset { font-size:22px; } .rs-fsz small { font-size:13px; top:-5px; }
.rs-ls { margin-top:10px; } .rs-ls b { font-size:17px; }

.rs-themes { gap:8px; align-items:flex-start; }
.rs-swb { flex:none; width:84px; border:0; background:none; padding:0; cursor:pointer; text-align:center; color:#15151a; font-family:var(--inter); display:flex; flex-direction:column; align-items:center; gap:0; }
.rs-swb .rs-sw { width:64px; height:96px; margin-bottom:7px; } .rs-swb.on .rs-sw { border-color:#15151a; }
.rs-swb.on .rs-sw::after { background:var(--ln) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; opacity:1; }
.rs-swb b { font:700 13px/1.15 var(--inter); } .rs-swb small { font:500 11px/1.25 var(--inter); color:#6b6b70; margin-top:2px; }
.rs-swb .rs-sw[data-rt="auto"] { background:linear-gradient(135deg,#fff 50%,#17171d 50%); --ln:#888; }

/* frosted reader settings */
.rs-sheet { background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7); border:1px solid rgba(255,255,255,.55); box-shadow:0 -10px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7); }
.rs-scrim { background:rgba(10,10,12,.28); }
.rs-fsz button { background:rgba(120,120,128,.16); } .rs-font { background:rgba(255,255,255,.5); border-color:rgba(0,0,0,.12); }
.rs-hd button { background:rgba(255,255,255,.75); } .rs-fl button.on { background:rgba(120,120,128,.14); }

/* sheet takes the reader's chosen colours, 70% opaque */
.rs-sheet { background:color-mix(in srgb, var(--card) 70%, transparent); color:var(--text); border-color:color-mix(in srgb, var(--card) 60%, transparent); }
.rs-grab { background:var(--edge); }
.rs-hd button { background:color-mix(in srgb, var(--card) 80%, transparent); color:var(--text); border-color:var(--line-strong); }
.rs-fsz button { background:color-mix(in srgb, var(--text) 12%, transparent); color:var(--text); }
.rs-font { background:color-mix(in srgb, var(--card) 45%, transparent); color:var(--text); border-color:var(--line-strong); }
.rs-font small { color:var(--dim); } .rs-font i { color:var(--faint); }
.rs-swb { color:var(--text); } .rs-swb small { color:var(--dim); } .rs-swb.on .rs-sw { border-color:var(--text); }
.rs-fl button { color:var(--text); } .rs-fl button.on { background:color-mix(in srgb, var(--text) 10%, transparent); }

.drawer[data-rt="forest"], .rs[data-rt="forest"] { --card:#0f2a1c; --bg:#0f2a1c; --text:#e3f2e7; --ink:#e3f2e7; --dim:#a9c6b2; --faint:#80a18b; --line:rgba(220,245,228,.1); --line-strong:rgba(220,245,228,.17); --edge:rgba(220,245,228,.2); --card-hover:#163a28; --wj:#ff9a8a; }

/* third fold level: one horizontally scrolling row of chapter tiles */
.hs { position:absolute; left:0; right:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:8px; }
.hs::-webkit-scrollbar { display:none; }
.hs-track { position:relative; }
.hs .tile { scroll-snap-align:start; }
.region.hmode::after { content:""; position:absolute; right:0; top:36px; bottom:8px; width:28px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--bg)); opacity:.9; }

.vblurb { font:500 13.5px/1.5 var(--body); color:var(--dim); margin:2px 0 8px; max-width:68ch; text-wrap:pretty; } .vblurb[hidden] { display:none; }

/* blurb sits right under the title, above the controls */
.vblurb { margin:0 0 2px; }
@media (min-width:701px) and (max-width:1500px) { .vblurb { flex:1 1 100%; order:2; margin:2px 0 0; } }
@media (min-width:1501px) { .toprow { display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:start; } .toprow h1 { grid-column:1; grid-row:1; } .vblurb { grid-column:1; grid-row:2; margin:4px 0 0; } .ctlrow { grid-column:2; grid-row:1 / span 2; } }

/* chip highlights: the category you are viewing, and the book you are reading */
.chip[aria-pressed="true"] { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); font-weight:800; }
.chip.now { border-color:hsl(var(--h) 70% 48%); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px hsl(var(--h) 72% 50%), 0 0 16px 2px hsl(var(--h) 80% 55% / .5); font-weight:800; }
.chip.now i { box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px hsl(var(--h) 72% 50%); }
.chip.now[aria-pressed="true"] { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px hsl(var(--h) 72% 50%), 0 0 16px 2px hsl(var(--h) 80% 55% / .5); }
.chips { padding:5px 6px 9px; }

/* the chapter you are reading (or last read): soft ring + glow in the tile's own colour family */
.hs { padding-top:6px; }
.tile.ch.now { z-index:2; --gl:rgb(var(--sc)); --gr:color-mix(in srgb, rgb(var(--sc)) 55%, #fff); outline:2px solid color-mix(in srgb, rgb(var(--sc)) 25%, #fff); outline-offset:-2px; box-shadow:0 0 0 3px var(--gr), 0 0 20px 5px color-mix(in srgb, var(--gl) 70%, transparent), 0 0 42px 12px color-mix(in srgb, var(--gl) 38%, transparent); animation:nowglow 2.4s ease-in-out infinite; }
@keyframes nowglow { 0%,100% { box-shadow:0 0 0 3px var(--gr), 0 0 16px 3px color-mix(in srgb, var(--gl) 55%, transparent), 0 0 34px 8px color-mix(in srgb, var(--gl) 28%, transparent); } 50% { box-shadow:0 0 0 3px var(--gr), 0 0 26px 8px color-mix(in srgb, var(--gl) 85%, transparent), 0 0 52px 16px color-mix(in srgb, var(--gl) 45%, transparent); } }
@media (prefers-reduced-motion:reduce) { .tile.ch.now { animation:none; } }

.fnav button span { text-align:center; line-height:1.1; }

/* header logo = the app icon */
img.logo { display:block; width:clamp(44px,8vw,64px); height:clamp(44px,8vw,64px); border-radius:22%; object-fit:cover; flex:none; filter:none; box-shadow:0 3px 12px rgba(0,0,0,.28); }

img.logo { border-radius:0; box-shadow:none; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.32)); }

/* floating bar: 35% opaque */
.fnav { background:rgba(255,255,255,.35); }
:root[data-theme="dark"] .fnav { background:rgba(28,28,34,.35); }

/* Countdown's number chip as the chapter chip: tinted glass, hairline border, glow, tier-coloured number; tier follows chapter position in the book */
:root { --t1:#7c4dff; --t2:#4f6fd6; --t3:#2f9d5a; --t4:#c98a1a; --t5:#e0701c; --t6:#d6453d; --t1t:#6a3de8; --t2t:#3e5bb8; --t3t:#1f7d45; --t4t:#a06d0e; --t5t:#b85a0c; --t6t:#b8322b; }
:root[data-theme="dark"] { --t1:#9b6bff; --t2:#8fa8ee; --t3:#8fd0a6; --t4:#e6b565; --t5:#f08a4b; --t6:#ff6b62; --t1t:#a98bff; --t2t:#9db4f2; --t3t:#9bd8b0; --t4t:#ecc27a; --t5t:#f5a06a; --t6t:#ff8a82; }
.tile.ch { --ct:color-mix(in srgb,var(--c) 40%,#000); }
:root[data-theme="dark"] .tile.ch { --ct:color-mix(in srgb,var(--c) 70%,#fff); }
.tile.ch:not(.na), :root[data-theme="dark"] .tile.ch:not(.na) { background:color-mix(in srgb,var(--c) 22%, var(--card)); border:1px solid color-mix(in srgb,var(--c) 38%, transparent);
  border-radius:17px; box-shadow:0 0 22px -4px color-mix(in srgb,var(--c) 45%, transparent), inset 0 0 0 3px color-mix(in srgb,var(--c) 7%, transparent); }
.tile.ch:not(.na) .ch-n { color:var(--ct); text-shadow:none; letter-spacing:-.05em; }
:root[data-theme="dark"] .tile.ch:not(.na) .ch-n { text-shadow:0 1px 10px rgba(0,0,0,.35); }
@media (hover:hover) { .tile.ch:not(.na):hover { border-color:color-mix(in srgb,var(--c) 65%, transparent); } }
.tile.ch:not(.na):hover, .tile.ch:not(.na):focus-visible { border-color:color-mix(in srgb,var(--c) 65%, transparent); box-shadow:0 0 26px -2px color-mix(in srgb,var(--c) 60%, transparent), inset 0 0 0 3px color-mix(in srgb,var(--c) 10%, transparent); }
.tile.ch.read::after { background:var(--ct); box-shadow:none; }
.tile.ch.now:not(.na), :root[data-theme="dark"] .tile.ch.now:not(.na) { --gl:var(--c); --gr:color-mix(in srgb, var(--c) 55%, #fff); outline:2px solid color-mix(in srgb, var(--c) 25%, #fff); outline-offset:-2px;
  box-shadow:0 0 0 3px var(--gr), 0 0 20px 5px color-mix(in srgb, var(--gl) 70%, transparent), 0 0 42px 12px color-mix(in srgb, var(--gl) 38%, transparent); }
.tile.ch:not(.na), :root[data-theme="dark"] .tile.ch:not(.na) { background:color-mix(in srgb,var(--c) 42%, var(--card)); }
.tile.ch:not(.na), :root[data-theme="dark"] .tile.ch:not(.na) { background:color-mix(in srgb,var(--c) 20%, transparent); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border-color:color-mix(in srgb,var(--c) 32%, transparent); }
.tile.ch:not(.na), :root[data-theme="dark"] .tile.ch:not(.na) { background:color-mix(in srgb,var(--c) 9%, transparent); border-color:color-mix(in srgb,var(--c) 26%, transparent); box-shadow:0 0 16px -6px color-mix(in srgb,var(--c) 35%, transparent), inset 0 0 0 3px color-mix(in srgb,var(--c) 4%, transparent); }
.tile.ch:not(.na), :root[data-theme="dark"] .tile.ch:not(.na) { background:color-mix(in srgb,var(--c) 14%, transparent); border-color:color-mix(in srgb,var(--c) 29%, transparent); }

/* very light frost of the book type's colour behind each book row */
.region { isolation:isolate; --frost:hsl(var(--bh,0) 75% 97.5%); }
:root[data-theme="dark"] .region { --frost:hsl(var(--bh,0) 35% 9%); }
.region::before { content:""; position:absolute; z-index:-1; left:-6px; right:-6px; top:-4px; bottom:-4px; border-radius:20px; background:var(--frost); }
.region.hmode::after { background:linear-gradient(90deg, transparent, var(--frost)); }
/* desktop web-app window: its title bar / toolbar sits over the top of the page, so a full-screen chapter's close + unexpand buttons were underneath it (unclickable). Keep the full drawer below that strip. */
@media (min-width:701px) and (pointer:fine) { .webapp .drawer.full { top:56px; height:calc(100vh - 56px); height:calc(100dvh - 56px); } }
@media (display-mode:standalone) and (min-width:701px) and (pointer:fine) { .drawer.full { top:56px; height:calc(100vh - 56px); height:calc(100dvh - 56px); } }
@media (display-mode:window-controls-overlay) { .drawer.full { top:env(titlebar-area-height, 56px); } }
.drawer-x, .drawer-fs { -webkit-app-region:no-drag; app-region:no-drag; }

/* ===== ExNihilo ===== */
.xgo { display:flex; align-items:center; gap:8px; }
.xgo input { flex:1; min-width:0; }
.xgo-btn { flex:none; cursor:pointer; border:0; border-radius:12px; padding:9px 16px; font:800 14px/1 var(--inter); color:#fff; background:linear-gradient(135deg,#6a3de8,#4f6fd6); box-shadow:0 2px 8px rgba(80,70,200,.35); }
.xgo-btn:active { transform:translateY(1px); }
.xstage { position:static; height:auto; max-width:1500px; margin:0 auto; padding:6px 16px 120px; }
.xsec { position:relative; isolation:isolate; margin:0 0 14px; padding:6px 0 8px; --frost:hsl(var(--bh,262) 75% 97.5%); }
:root[data-theme="dark"] .xsec { --frost:hsl(var(--bh,262) 35% 9%); }
.xsec::before { content:""; position:absolute; z-index:-1; inset:0 -6px; border-radius:20px; background:var(--frost); }
.xh { font:700 22px/1.2 var(--inter); letter-spacing:-.02em; margin:6px 4px 10px; } .xh small { font:500 14px var(--body); color:var(--faint); letter-spacing:0; margin-left:6px; }
.xempty { color:var(--dim); font:500 14px/1.5 var(--body); margin:4px 4px 6px; max-width:60ch; }
.xlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.xcard { position:relative; display:flex; align-items:center; gap:12px; padding:12px 40px 12px 12px; border-radius:17px; cursor:pointer; text-align:left;
  background:color-mix(in srgb,hsl(var(--h) 80% 50%) 14%, transparent); border:1px solid color-mix(in srgb,hsl(var(--h) 80% 50%) 29%, transparent);
  box-shadow:0 0 16px -6px color-mix(in srgb,hsl(var(--h) 80% 50%) 35%, transparent), inset 0 0 0 3px color-mix(in srgb,hsl(var(--h) 80% 50%) 4%, transparent); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.xcard:hover, .xcard:focus-visible { border-color:color-mix(in srgb,hsl(var(--h) 80% 50%) 60%, transparent); outline:none; }
.xmono { flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font:900 20px/1 var(--inter); color:#fff; background:hsl(var(--h) 62% 46%); }
.xtx { min-width:0; display:flex; flex-direction:column; gap:3px; }
.xtx b { font:800 15px/1.25 var(--inter); letter-spacing:-.01em; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.xtx span { font:500 12px/1.3 var(--body); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xbadge { position:absolute; right:40px; top:8px; font:800 10px/1 var(--inter); letter-spacing:.04em; text-transform:uppercase; padding:4px 7px; border-radius:999px; color:#0f6a3a; background:rgba(60,190,120,.18); }
:root[data-theme="dark"] .xbadge { color:#8fe0b2; }
.xdel { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:var(--faint); font-size:20px; line-height:1; cursor:pointer; }
.xdel:hover { background:rgba(128,128,128,.18); color:var(--text); }
.xhow { margin:16px 4px 0; }
.xn-tools { gap:8px; }
.xn-btn { cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:12px; font:800 13px/1 var(--inter); color:var(--text); background:var(--card); border:1px solid var(--edge); text-decoration:none; box-shadow:var(--lift-hi); }
.xn-btn.on { color:#0f6a3a; background:rgba(60,190,120,.16); border-color:rgba(60,190,120,.45); } :root[data-theme="dark"] .xn-btn.on, .drawer[data-rt="charcoal"] .xn-btn.on, .drawer[data-rt="navy"] .xn-btn.on, .drawer[data-rt="forest"] .xn-btn.on, .drawer[data-rt="black"] .xn-btn.on { color:#8fe0b2; }
.xn-btn.ghost { box-shadow:none; background:transparent; }
.xn-btn:disabled { opacity:.6; cursor:default; }
.xn-note { margin:6px 20px 0; padding:9px 12px; border-radius:12px; font:600 13px/1.4 var(--body); color:var(--text); background:color-mix(in srgb,var(--sc) 14%, transparent); border:1px solid color-mix(in srgb,var(--sc) 30%, transparent); }
.toast { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; max-width:min(92vw,420px); padding:11px 16px; border-radius:14px; font:700 13px/1.35 var(--body); color:#fff; background:rgba(20,20,26,.92); box-shadow:0 8px 28px rgba(0,0,0,.35); text-align:center; }
/* the article itself: set in the Reader Settings font / size / line spacing / colour */
.bk.xn { font-family:var(--rfont,"Spectral",Georgia,serif); font-size:calc(17px * var(--vscale,1)); line-height:var(--rlh,1.62); color:var(--text); overflow-wrap:anywhere; }
.bk.xn p { margin:0 0 .95em; text-wrap:pretty; }
.bk.xn h2, .bk.xn h3, .bk.xn h4, .bk.xn h5, .bk.xn h6 { font-family:var(--inter); font-weight:800; line-height:1.2; letter-spacing:-.015em; margin:1.5em 0 .5em; }
.bk.xn h2 { font-size:1.35em; } .bk.xn h3 { font-size:1.18em; } .bk.xn h4, .bk.xn h5, .bk.xn h6 { font-size:1em; }
.bk.xn a { color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 40%, transparent); text-underline-offset:3px; }
.bk.xn img { display:block; max-width:100%; height:auto; margin:14px auto; border-radius:12px; }
.bk.xn figure { margin:16px 0; } .bk.xn figcaption { font:500 .78em/1.4 var(--body); color:var(--faint); margin-top:6px; text-align:center; }
.bk.xn blockquote { margin:1em 0; padding:.1em 0 .1em 1em; border-left:3px solid color-mix(in srgb,var(--sc) 70%, transparent); color:var(--dim); font-style:italic; }
.bk.xn ul, .bk.xn ol { padding-left:1.4em; margin:0 0 1em; } .bk.xn li { margin:.25em 0; }
.bk.xn pre { overflow-x:auto; padding:12px; border-radius:10px; background:color-mix(in srgb,currentColor 8%, transparent); font-size:.82em; line-height:1.45; }
.bk.xn code { font:500 .88em ui-monospace,SFMono-Regular,Menlo,monospace; }
.bk.xn table { display:block; overflow-x:auto; border-collapse:collapse; font-size:.9em; margin:1em 0; } .bk.xn th, .bk.xn td { border:1px solid var(--line-strong); padding:6px 9px; text-align:left; }
.bk.xn hr { border:0; border-top:1px solid var(--line-strong); margin:1.6em 0; }
.bk.xn > :first-child { margin-top:0; }
.xgo .sclear { top:50%; transform:translateY(-50%); right:84px; }
.xgo > svg { top:50%; transform:translateY(-50%); }
.xgo input { padding-right:44px; }
#u { width:100%; font:500 16px/1 var(--body); color:var(--text); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:13px 44px 13px 42px; outline:none; -webkit-appearance:none; appearance:none; }
#u:focus { border-color:var(--edge); box-shadow:var(--shadow), 0 0 0 3px color-mix(in srgb,#6a3de8 25%, transparent); }
.brandrow .logo { display:block; border-radius:22%; }