/* Folio engine stylesheet: layout + token NAMES only. Colours come from the book's theme.css
   (book.json tokens -> CSS custom properties, dark + light). Defaults below are neutral fallbacks. */
:where(:root) { --bg:#0b0b0d; --surface:#141418; --border:#2c2a31; --text:#ece8e1; --text-muted:#8e8a93; --accent:#c9a84c; --accent-ink:#e0c070; --holo:#bfefff; --plate:rgba(6,7,9,.86);
  --font-mono: monospace; --font-sans: sans-serif; --gut: 16px; }
*{box-sizing:border-box}
/* contract v1.2 row 55: nothing is ever italic or faux-italic (no book face has an italic; CJK never slants) */
*,*::before,*::after{font-synthesis-style:none;font-synthesis:weight}
i,em,cite,var,dfn,address,q,blockquote,:lang(zh),:lang(ja),:lang(ko),:lang(zh) *,:lang(ja) *,:lang(ko) *{font-style:normal!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 var(--font-sans)}
body{overflow:hidden}
body.view-column{overflow:auto}
.sr-only,.skip:not(:focus){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:16px;top:56px;z-index:2000;background:var(--surface);color:var(--accent-ink);border:1px solid var(--accent);padding:8px 12px;font:600 13px var(--font-mono)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;outline:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#stage[hidden]{display:none}
#stage.xfade{animation:folio-xfade .35s ease-out}
@keyframes folio-xfade{from{opacity:.15}to{opacity:1}}
#labels{position:fixed;inset:0;pointer-events:none}

/* hologram tags: dark plate, lit edge, crisp text (>=14px) */
.lbl{position:absolute;transform:translate(-50%,-125%);white-space:nowrap;font:600 14px/1.25 var(--font-mono);color:var(--accent-ink);background:var(--plate);border:1px solid var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 0 14px color-mix(in srgb,var(--accent) 28%,transparent);padding:4px 8px;letter-spacing:.02em}
[data-theme="light"] .lbl{box-shadow:0 1px 6px rgba(0,0,0,.12)}
.lbl.ghost{border-style:dashed;border-color:var(--holo);color:var(--holo);box-shadow:0 0 12px color-mix(in srgb,var(--holo) 22%,transparent)}
.lbl.quiet{border-color:var(--border);color:var(--text-muted);box-shadow:none}
.lbl.below{transform:translate(-50%,10%)}
.lbl.r{transform:translate(8%,-125%)}.lbl.l{transform:translate(-108%,-125%)}
.lbl.top{transform:translate(-50%,-100%)}
.lbl.hidden-lbl{display:none}

/* top bar: one line, reserved zone (<= 64px). Sources live behind a chip, never floating over the scene. */
.mast{position:fixed;left:16px;top:12px;right:186px;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;font:500 12px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);z-index:10;min-height:26px}
.mast b{color:var(--accent-ink);font-weight:700}
.mast .long{overflow:hidden;text-overflow:ellipsis}
.mast .short{display:none}
.src-chip{flex:none;font:600 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:5px 10px;cursor:pointer}
#srcscrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:15}
#srcsheet{display:none;position:fixed;left:16px;top:52px;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 140px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);padding:12px 14px;font:400 13px/1.55 var(--font-mono);color:var(--text);z-index:20}
#srcsheet h4{margin:0 0 6px;font:600 12px var(--font-mono);letter-spacing:.1em;color:var(--text-muted)}
#srcsheet p{margin:0 0 8px;overflow-wrap:anywhere}
#srcsheet code{font:400 12px var(--font-mono);color:var(--text-muted)}
#srcsheet a{color:var(--accent-ink);font-size:12px}
#srcsheet .asof{color:var(--text-muted);font-size:12px}
#srcsheet button{font:600 12px var(--font-mono);background:transparent;color:var(--accent-ink);border:1px solid var(--accent);padding:5px 10px;cursor:pointer}
.src-open #srcscrim,.src-open #srcsheet{display:block}
.src-open #labels,.src-open .sheet{display:none!important}

/* theme toggle + language chip (top right) */
.corner{position:fixed;top:12px;right:16px;z-index:999;display:flex;align-items:center;gap:8px}
.theme-toggle{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 12px;cursor:pointer;font:500 12px/1.4 var(--font-sans);color:var(--text-muted)}
.theme-toggle:hover{border-color:var(--accent);color:var(--text)}
.theme-toggle .icon{display:inline-flex;width:14px;height:14px;color:var(--accent-ink)}
.theme-toggle .icon svg{display:block}
.lang-chip{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 10px;cursor:pointer;font:600 12px/1.4 var(--font-mono);color:var(--text-muted)}
.lang-chip[hidden]{display:none}
.lang-menu{position:fixed;top:44px;right:16px;z-index:1000;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);min-width:140px}
.lang-menu[hidden]{display:none}
.lang-menu a{padding:8px 12px;color:var(--text);text-decoration:none;font:500 13px var(--font-sans)}
.lang-menu a.on{color:var(--accent-ink);font-weight:700}
.lang-menu a:hover{background:var(--bg)}

/* the docked ledger bar (square corners, accent top rule) */
.bar{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:14px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);font:500 12px var(--font-mono);max-width:calc(100vw - 32px);z-index:12}
.bar:empty{display:none}
.bar span,.bar button{padding:9px 13px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--text);font:inherit;white-space:nowrap}
.bar button{cursor:pointer}
.bar .opt.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-ink);font-weight:700}
.bar .go{background:var(--accent);color:#111;font-weight:700;border-right:0}
[data-theme="light"] .bar .go{color:#fff}
.bar .go.wait{opacity:.55;cursor:default}
.bar .st{color:var(--text-muted)}
.bar .scrub{display:flex;align-items:center;gap:8px;padding:0 12px;border-right:1px solid var(--border);color:var(--text)}
.bar .scrub span{padding:0;border:0}
.bar .scrub input{width:140px;margin:0;accent-color:var(--accent);cursor:pointer}

/* the docked sheet: panels that cannot float clear of the hologram (always on phone; overflow on desktop) */
.sheet{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar-top,50px) + 8px);width:min(640px,calc(100vw - 32px));background:var(--plate);border:1px solid var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 25%,transparent);padding:9px 11px;font:500 13px/1.45 var(--font-mono);color:var(--text);z-index:11;max-height:40vh;overflow:auto}
.sheet.on:not(:empty){display:block}
[data-theme="light"] .sheet{background:var(--surface)}
.sheet .dock+.dock{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.sheet i{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--text-muted)}
.sheet b{color:var(--accent-ink)}
.sheet .bytes{overflow-wrap:anywhere}

.folio-error{position:fixed;left:16px;right:16px;top:52px;z-index:3000;background:var(--surface);border:1px solid var(--accent);border-left:4px solid var(--accent);padding:10px 12px;font:500 13px var(--font-mono);color:var(--text)}
.folio-error[hidden]{display:none}

@media (max-width:699px){
  .mast{top:14px;letter-spacing:.05em;gap:8px}.mast .long{display:none}.mast .short{display:inline}
  .corner{top:14px;gap:6px}
  #srcsheet{left:16px;right:16px;width:auto;top:auto;bottom:calc(var(--bar-top,46px) + 8px);max-height:60vh}
  .lbl{white-space:normal;width:max-content;max-width:calc(100vw - 32px)}
  .bar{font-size:12px;bottom:10px}.bar span,.bar button{padding:8px 9px}
  .bar.has-opts .st,.bar.crowded .st{display:none}
  .bar .scrub{padding:0 8px}.bar .scrub input{width:84px}
  .sheet{left:16px;right:16px;width:auto;transform:none;bottom:calc(var(--bar-top,46px) + 8px)}
  .sheet.on:not(:empty){display:block}
}

/* ---------- column view (header-chain fallback; also what screen readers get) ---------- */
#column{max-width:780px;margin:0 auto;padding:64px var(--gut) 120px}
#column[hidden]{display:none}
.view-column #labels,.view-column .sheet{display:none!important}
.col-head h1{font:700 22px/1.2 var(--font-sans);margin:0 0 12px;color:var(--accent-ink)}
.chain{list-style:none;margin:0;padding:0;border-left:3px solid var(--accent)}
.chain .row{border-bottom:1px solid var(--border);padding:8px 0 8px 14px}
.chain .row-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font:500 13px var(--font-mono);color:var(--text-muted)}
.chain .row-h .n{color:var(--accent-ink);font-weight:700;letter-spacing:.06em}
.chain .row-h .t{color:var(--text);font-family:var(--font-sans);font-size:15px}
.chain .row.planned .row-h .t{color:var(--text-muted)}
.chain .row-h .pl{font-size:12px}
.chain .row-h .read{margin-left:auto;background:transparent;border:1px solid var(--border);padding:3px 10px;cursor:pointer;font:600 12px var(--font-mono);color:var(--accent-ink)}
.chain .row.cur{background:var(--surface)}
.col-blk,.col-contents{padding:10px 4px 4px}
.col-blk h2,.col-contents h2{font:700 24px/1.2 var(--font-sans);margin:10px 0}
.col-contents h3{font:700 18px/1.25 var(--font-sans);margin:8px 0}
.col-blk h3{font:700 19px/1.25 var(--font-sans);margin:8px 0}
.col-blk p,.col-contents p{font:500 16px/1.55 var(--font-sans);margin:0 0 10px}
.col-hdr{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 6px;padding-bottom:6px;border-bottom:2px solid var(--accent)}
.col-hdr dt{font:500 12px var(--font-mono);letter-spacing:.08em;color:var(--text-muted)}
.col-hdr dd{margin:0;font:700 14px var(--font-mono)}
.col-fig{margin:12px 0;padding:0}
.col-fig canvas{display:block;max-width:100%;height:auto;border:1px solid var(--border)}
.col-fig figcaption{font:500 13px/1.45 var(--font-mono);color:var(--text-muted);margin-top:6px}
.col-guess,.col-insp,.col-receipt{border:1px solid var(--accent);padding:10px 12px;margin:12px 0}
.col-guess .k,.col-insp .k,.col-receipt .k{font:500 12px var(--font-mono);letter-spacing:.1em;color:var(--text-muted);margin-bottom:6px}
.col-guess .ask{font:700 17px/1.35 var(--font-sans)}
.col-guess .hint{color:var(--text-muted)}
.col-guess .verdict{color:var(--accent-ink)}
.col-guess .formula{display:block;font:700 13px/1.4 var(--font-mono);overflow-wrap:anywhere;margin-bottom:6px}
.col-items{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.col-items .item{background:transparent;border:1px solid var(--border);padding:5px 9px;cursor:pointer;font:500 13px var(--font-mono)}
.col-items .item.on{border-color:var(--accent);color:var(--accent-ink)}
.console{display:flex;flex-direction:column;gap:2px;font:500 13px/1.45 var(--font-mono);overflow-wrap:anywhere}
.console b{color:var(--accent-ink)}
.console i{font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--text-muted);margin-top:6px}
.col-receipt dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0 0 8px;font:13px var(--font-mono)}
.col-receipt dl div{display:contents}
.col-receipt dt{color:var(--text-muted)}
.col-receipt dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.col-receipt .check{font:13px/1.5 var(--font-mono);color:var(--text-muted)}
.col-receipt .slip{display:block;width:min(360px,100%);height:auto;margin-top:8px}
.col-page{border-top:2px dashed var(--border);margin-top:16px;padding-top:10px}
.col-stamp{display:inline-flex;flex-direction:column;align-items:center;border:3px solid var(--accent);color:var(--accent);padding:4px 14px;transform:rotate(-2deg);font:700 12px var(--font-mono)}
.col-stamp b{font-size:20px}
#column .bar{position:static;transform:none;margin:12px 0;max-width:100%;justify-content:flex-start}
.view-column > .bar#bar{display:none}