/* Flipbook Canvas — the shell.
 *
 * Two palettes, chosen by [data-theme] which theme.js sets before first paint. The
 * light one is the house style's own paper (#F5EFE6 family) so the app frame and the
 * plates it shows read as one object; the dark one is a plate room.
 *
 * The plate is the load-bearing layout: a 16:9 box that everything else positions
 * against in percentages, because every coordinate in this app is normalized and a
 * pixel offset anywhere would put a card in the wrong place. */

:root {
  --bg: #faf6ef;
  --panel: #ffffff;
  --panel2: #f4ede1;
  --fg: #241f18;
  --mut: #6d6353;
  --line: #ddd2bf;
  --line2: #cbbda4;
  --accent: #8c5b2f;
  --accent-fg: #ffffff;
  --ok: #2c6e49;
  --warn: #9a5b12;
  --err: #a33227;
  --lit: #d9a35b;
  --shadow: 0 1px 2px rgba(60, 44, 25, .08), 0 8px 24px rgba(60, 44, 25, .07);
  --radius: .7rem;
}

:root[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1b1e23;
  --panel2: #20242b;
  --fg: #e9e5dd;
  --mut: #9a938a;
  --line: #2f343c;
  --line2: #3d444e;
  --accent: #d59a5c;
  --accent-fg: #1a1409;
  --ok: #6ec08f;
  --warn: #e0a45c;
  --err: #e58b80;
  --lit: #d59a5c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Hiragino Sans", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { text-decoration: none; }

.mono, .small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: .84rem; }
.muted { color: var(--mut); }
.hidden { display: none !important; }
.minihead { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: 1.1rem 0 .4rem; }

/* --- chrome ------------------------------------------------------------------ */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.brand strong { font-size: 1.02rem; }
.backlink { text-decoration: none; font-size: .88rem; }
.sep { color: var(--mut); }
.topactions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.credits { font-size: .84rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.topup { font-size: .82rem; text-decoration: none; border: 1px solid var(--line2); border-radius: 1rem; padding: .12rem .6rem; }

button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.ghost, .mini, .big {
  border: 1px solid var(--line2); background: var(--panel); color: var(--fg);
  border-radius: .5rem; padding: .3rem .7rem; font-size: .88rem;
}
.mini { padding: .22rem .58rem; font-size: .82rem; border-radius: .45rem; }
.mini.go, .big:not(.ghost) { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.mini.ghost { background: transparent; }
.big { padding: .55rem 1.05rem; font-size: .96rem; border-radius: .55rem; }
.ghost:hover, .mini:hover, .big:hover { border-color: var(--accent); }

main { max-width: 78rem; margin: 0 auto; padding: 1.6rem 1.1rem 4rem; }

/* --- hero -------------------------------------------------------------------- */

.hero h1 { font-size: clamp(1.5rem, 3.6vw, 2.15rem); line-height: 1.18; margin: .4rem 0 .6rem; }
.lede { font-size: 1.03rem; max-width: 52rem; color: var(--fg); }
.herogrid {
  display: grid; gap: .9rem; margin: 1.5rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field label { font-size: .86rem; font-weight: 600; }
.field input, .field select {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--line2);
  border-radius: .5rem; background: var(--panel); color: var(--fg); width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.herobtns { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .8rem; }
.howwrap { margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.howwrap h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.how { margin: 0; padding-left: 1.3rem; max-width: 58rem; }
.how li { margin: .45rem 0; }

/* --- workspace --------------------------------------------------------------- */

.wstop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.wstopright { display: flex; align-items: center; gap: .6rem; }
.trail { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; min-width: 0; }
.crumb {
  border: 0; background: transparent; color: var(--accent); padding: .1rem .2rem;
  font-size: .88rem; border-radius: .3rem;
}
.crumb.current { color: var(--fg); font-weight: 650; }
.crumbsep { color: var(--mut); font-size: .8rem; }

.stagewrap { position: relative; }
.stagebar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .45rem 0 0; }
.stage {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel2); overflow: hidden; box-shadow: var(--shadow);
}
.stage-empty { padding: 3.5rem 1.4rem; text-align: center; }
.stage-empty .big { font-size: 1.05rem; font-weight: 650; margin: 0 0 .4rem; }
.plate { position: relative; width: 100%; aspect-ratio: 16 / 9; touch-action: manipulation; }
.plate-img, .plate-svg, .plate-svg svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate.undrawn .plate-svg { background: var(--panel2); }

.zonelayer, .cardlayer, .textlayer { position: absolute; inset: 0; }
.zonelayer { z-index: 1; }
.leaders { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.textlayer { z-index: 3; pointer-events: none; }
.cardlayer { z-index: 4; pointer-events: none; }
.cardlayer > * { pointer-events: auto; }

.zonehot {
  position: absolute; border: 1px dashed transparent; background: transparent;
  border-radius: .4rem; padding: 0; transition: background .12s, border-color .12s;
}
.zonehot:hover, .zonehot:focus-visible { background: rgba(217, 163, 91, .16); border-color: var(--lit); outline: none; }
.zonehot.deadend:hover { background: rgba(120, 120, 120, .12); border-color: var(--line2); }
.zonehot.lit { background: rgba(217, 163, 91, .28); border-color: var(--lit); }

.leader { stroke: var(--lit); stroke-width: 2.5; fill: none; opacity: .85; }
.leader.pending { stroke-dasharray: 7 5; }
.leaderdot { fill: var(--lit); opacity: .95; }
.leaderdot.pending { fill: none; stroke: var(--lit); stroke-width: 2.5; }

.labelcard {
  position: absolute; width: 20%; min-width: 8.5rem; text-align: left;
  background: var(--panel); border: 1px solid var(--line2); border-radius: .5rem;
  padding: .35rem .5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .12rem;
  font-size: .8rem; color: var(--fg);
}
.labelcard-t { font-weight: 650; line-height: 1.25; }
.labelcard-s { color: var(--mut); font-size: .74rem; }
.labelcard-m { display: flex; gap: .2rem; flex-wrap: wrap; }
.labelcard.pending { border-color: var(--lit); border-style: dashed; }
.labelcard.crowded { box-shadow: 0 0 0 2px var(--warn); }

/* The transcribed layer sits over the picture the way a scan's OCR layer does:
 * transparent, selectable, and copyable. The drawing already carries these words as
 * pixels, so painting them again would read as a rendering fault — but they must still
 * be real text for selection, search and export. `.shown` reveals them, which is what
 * the reader wants when the drawing's own labels came back unreadable. */
.tspan {
  position: absolute; transform: translate(-50%, -50%); font-size: .68rem;
  color: transparent; background: transparent; padding: 0 .18rem;
  border-radius: .2rem; white-space: nowrap; pointer-events: auto; user-select: text;
  transition: color .12s, background .12s;
}
.tspan::selection { background: rgba(217, 163, 91, .55); color: #23201a; }
.textlayer.shown .tspan,
.tspan:hover {
  background: rgba(255, 255, 255, .82); color: #23201a;
  box-shadow: 0 0 0 1px rgba(140, 91, 47, .25);
}
:root[data-theme="dark"] .textlayer.shown .tspan,
:root[data-theme="dark"] .tspan:hover { background: rgba(20, 22, 26, .84); color: #eae6de; }
.tspan.k-heading { font-weight: 700; font-size: .76rem; }
.tspan.k-measure { font-variant-numeric: tabular-nums; }
.tspan.k-caption { max-width: 30%; white-space: normal; }

.drillpop {
  position: absolute; z-index: 30; transform: translate(-50%, .6rem);
  background: var(--panel); border: 1px solid var(--line2); border-radius: .55rem;
  box-shadow: var(--shadow); padding: .6rem .7rem; width: min(20rem, 84vw);
  display: flex; flex-direction: column; gap: .35rem;
}
.drillpop strong { font-size: .95rem; }
.gateaction { display: inline-block; margin-left: .4rem; }

/* --- page text --------------------------------------------------------------- */

.pagehead { margin: 1.1rem 0 .5rem; }
.pagetitle { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin: 0 0 .35rem; line-height: 1.22; }
.pagecaption { font-size: 1.02rem; margin: 0 0 .55rem; max-width: 56rem; }
.pagemeta { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }

.chip {
  display: inline-block; border: 1px solid var(--line2); border-radius: 1rem;
  padding: .04rem .5rem; font-size: .76rem; color: var(--mut); white-space: nowrap;
}
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.new { border-color: var(--lit); color: var(--lit); }
.chip.num { font-variant-numeric: tabular-nums; border-color: var(--accent); color: var(--accent); }
.chip.soft { opacity: .8; }

.facts { margin: .7rem 0; }
.factlist, .numlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.fact, .num {
  display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: baseline;
  border: 1px solid var(--line); border-radius: .4rem; padding: .28rem .5rem; background: var(--panel);
  font-size: .88rem;
}
.factkind, .fragkind, .numconf, .factconf, .fragzone {
  font-size: .74rem; color: var(--mut); text-transform: uppercase; letter-spacing: .04em;
}
.fact.c-low, .num.c-low { border-color: var(--warn); }
.fact.c-low .factconf, .num.c-low .numconf { color: var(--warn); }
.numval { font-variant-numeric: tabular-nums; font-weight: 650; }

.warnline { color: var(--warn); font-size: .88rem; margin: .4rem 0; }
.violations { border: 1px solid var(--warn); border-radius: var(--radius); padding: .6rem .8rem; margin: .7rem 0; background: var(--panel); }
.viollist { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.viol { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; font-size: .85rem; }
.viol.fatal { color: var(--err); }
.violfield { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: var(--mut); }

/* --- lanes and progress ------------------------------------------------------ */

.lanewrap { margin: 1rem 0; }
.lanebar { display: flex; gap: .45rem; flex-wrap: wrap; }
.lanebtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .05rem;
  border: 1px solid var(--line2); background: var(--panel); color: var(--fg);
  border-radius: .55rem; padding: .4rem .75rem; min-width: 8.5rem; text-align: left;
}
.lanebtn:hover:not(:disabled) { border-color: var(--accent); }
.lanename { font-weight: 650; font-size: .95rem; }
.lanecost { font-size: .75rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.lanebtn.done { border-left: 3px solid var(--ok); }
.lanebtn.short { border-color: var(--warn); }
.lanebtn.busy { border-color: var(--accent); }

.progress { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin: .8rem 0; background: var(--panel); }
.steps { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.step { font-size: .8rem; color: var(--mut); border: 1px solid var(--line); border-radius: 1rem; padding: .06rem .55rem; }
.step.done { color: var(--ok); border-color: var(--ok); }
.step.now { color: var(--accent); border-color: var(--accent); font-weight: 650; }

/* --- panels ------------------------------------------------------------------ */

.panels { margin-top: 1.4rem; }
.tabbar { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab {
  border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--mut);
  padding: .4rem .8rem; border-radius: .45rem .45rem 0 0; font-size: .9rem;
}
.tab.on { color: var(--fg); background: var(--panel); border-color: var(--line); font-weight: 650; }
.panel { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 1rem; background: var(--panel); }

.zonelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.zonerow { border: 1px solid var(--line); border-radius: .55rem; padding: .55rem .7rem; background: var(--panel2); display: flex; flex-direction: column; gap: .3rem; }
.zonerow.deadend { opacity: .8; border-style: dashed; }
.zonehead { display: flex; align-items: baseline; gap: .4rem; }
.zoneid { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; color: var(--mut); }
.zonename { font-weight: 650; }
.zoneobjects { margin: 0; font-size: .84rem; color: var(--mut); }
.callouts { display: flex; gap: .25rem; flex-wrap: wrap; }
.zoneact { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .2rem; }

.fidelity { border: 1px solid var(--line2); border-radius: .5rem; padding: .5rem .7rem; margin-bottom: .7rem; display: flex; flex-direction: column; gap: .2rem; }
.fidelity.v-faithful { border-color: var(--ok); }
.fidelity.v-partial { border-color: var(--warn); }
.fidelity.v-poor { border-color: var(--err); }
.fidsum { margin: .2rem 0 0; font-size: .9rem; }
.reconc { margin: .6rem 0; }
.taglist { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; }
.tag { border: 1px solid var(--line2); border-radius: 1rem; padding: .04rem .5rem; font-size: .78rem; color: var(--mut); }
.tag.miss { border-color: var(--err); color: var(--err); }
.tag.extra { border-color: var(--warn); color: var(--warn); }

.zctable { border-collapse: collapse; width: 100%; font-size: .84rem; margin: .6rem 0; }
.zctable th, .zctable td { border: 1px solid var(--line); padding: .25rem .45rem; text-align: left; }
.zctable tr.off td { color: var(--warn); }

.fraglist { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; }
.frag { display: flex; gap: .5rem; align-items: baseline; border: 1px solid var(--line); border-radius: .4rem; padding: .2rem .5rem; font-size: .88rem; }
.fragtext { font-weight: 600; }
.frag.k-measure .fragtext { font-variant-numeric: tabular-nums; }
.fragfix { color: var(--warn); font-size: .78rem; }

.placardhead { font-size: 1.25rem; margin: 0 0 .3rem; }
.standfirst { font-size: 1.02rem; color: var(--fg); margin: 0 0 .4rem; }
.placardsec { margin: 1rem 0; }
.placardsec h4 { margin: 0 0 .25rem; font-size: 1rem; }
.placardsec p { margin: 0 0 .3rem; max-width: 56rem; }
.glossary dl { margin: .3rem 0; }
.glossary dt { font-weight: 650; margin-top: .45rem; }
.glossary dd { margin: 0; color: var(--mut); }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.q { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }

.tree, .treekids { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.tree { padding-left: 0; }
.treerow { display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; color: var(--fg); padding: .18rem .3rem; border-radius: .35rem; }
.treerow:hover { background: var(--panel2); }
.treenode.current > .treerow { font-weight: 700; color: var(--accent); }
.treetitle { flex: 1; min-width: 0; }
.treemarks { display: flex; gap: .2rem; }

.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.shelfrow { display: flex; gap: .5rem; align-items: center; }
.shelfopen { flex: 1; text-align: left; border: 1px solid var(--line); border-radius: .5rem; padding: .4rem .6rem; background: var(--panel2); color: var(--fg); display: flex; flex-direction: column; gap: .1rem; }
.shelfrow.current .shelfopen { border-color: var(--accent); }
.shelftitle { font-weight: 650; }
.shelfmeta, .shelfwarn { font-size: .78rem; color: var(--mut); }
.shelfwarn { color: var(--warn); }
.searchrow { display: grid; gap: .35rem; grid-template-columns: 1fr auto; align-items: end; margin-bottom: .6rem; }
.searchrow label { grid-column: 1 / -1; font-size: .86rem; font-weight: 600; }
.searchrow input { font: inherit; padding: .42rem .55rem; border: 1px solid var(--line2); border-radius: .45rem; background: var(--panel); color: var(--fg); }
.searchresults { margin-bottom: .8rem; }

/* --- export, footer, toasts -------------------------------------------------- */

.exportrow { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0 .4rem; }
.foot { max-width: 78rem; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; border-top: 1px solid var(--line); }
.foot p { margin: .3rem 0; }

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .4rem; max-width: min(26rem, 92vw); }
.toast { border: 1px solid var(--line2); border-radius: .5rem; padding: .5rem .7rem; background: var(--panel); box-shadow: var(--shadow); font-size: .88rem; transition: opacity .5s; }
.toast.ok { border-left: 3px solid var(--ok); }
.toast.err { border-left: 3px solid var(--err); }
.toast.gone { opacity: 0; }
.toast a { margin-left: .4rem; }

@media (max-width: 700px) {
  .labelcard { width: 34%; min-width: 6.5rem; font-size: .72rem; }
  .tspan { font-size: .58rem; }
  .viol { grid-template-columns: 1fr; }
  .fact, .num { grid-template-columns: 1fr auto; }
  .searchrow { grid-template-columns: 1fr; }
}

@media print {
  .topbar, .lanewrap, .tabbar, .exportrow, .toasts, .drillpop, .herobtns, .wstopright { display: none !important; }
  .panel { border: 0; }
  body { background: #fff; color: #000; }
}

/* --- docs pages (tokens.html) ------------------------------------------------- */

.doc { max-width: 46rem; margin: 0 auto; padding: 1.8rem 1.1rem 4rem; }
.doc h1 { font-size: 1.5rem; margin: .3rem 0 .7rem; }
.doc h2 { font-size: 1.1rem; margin: 1.8rem 0 .4rem; }
.doc p { max-width: 42rem; }
.doc code { background: var(--panel2); border: 1px solid var(--line); border-radius: .25rem; padding: .04rem .3rem; font-size: .88em; font-family: ui-monospace, Menlo, Consolas, monospace; }
.statebox { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin: 1rem 0; background: var(--panel); }
.statebox p { margin: .25rem 0 0; }
.tokenrow { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.tokenbox {
  flex: 1 1 18rem; border: 1px solid var(--line2); border-radius: .45rem; padding: .5rem .6rem;
  background: var(--panel2); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem; word-break: break-all; min-height: 1.4rem;
}
.primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); border-radius: .5rem; padding: .38rem .8rem; font-size: .9rem; }
.primary:hover { filter: brightness(1.06); }

/* --- api.html ----------------------------------------------------------------- */

.doc.wide { max-width: 62rem; }
.doc .lede { font-size: 1.04rem; }
.doc h3 { font-size: 1.02rem; margin: 1.7rem 0 .4rem; }
.doc h3 code { font-size: .95em; }

.codegroup { margin: .8rem 0 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.codegroup .tabs { display: flex; flex-wrap: wrap; gap: .15rem; padding: .35rem .4rem; border-bottom: 1px solid var(--line); background: var(--panel2); }
.codegroup .tab { border: 1px solid transparent; background: transparent; color: var(--mut); border-radius: .35rem; padding: .18rem .55rem; font-size: .8rem; }
.codegroup .tab.active { background: var(--panel); color: var(--fg); border-color: var(--line2); font-weight: 650; }
.codegroup pre { margin: 0; padding: .8rem .9rem; overflow-x: auto; }

pre { background: var(--panel2); border: 1px solid var(--line); border-radius: .5rem; padding: .7rem .85rem; overflow-x: auto; max-width: 100%; }
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.55; white-space: pre; }
pre.json { background: var(--panel); }

.apitable { border-collapse: collapse; width: 100%; font-size: .87rem; margin: .8rem 0 1.2rem; display: block; overflow-x: auto; }
.apitable th, .apitable td { border: 1px solid var(--line); padding: .34rem .55rem; text-align: left; vertical-align: top; }
.apitable th { background: var(--panel2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.apitable code { background: var(--panel2); border-radius: .2rem; padding: 0 .22rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }

/* The unplanned page's call to action, and the brief it will plan from. */
.stage-empty .big { display: inline-block; }
.stage-empty button.big { margin-top: .9rem; }
.seedline {
  max-width: 40rem; margin: .5rem auto .2rem; font-size: 1.02rem;
  color: var(--fg); font-style: italic;
}