/* Turn & Hex - parchment and ink. Light parchment by default; "candlelit" is the dark variant. No images: the page grain
 * is layered gradients. One accent - brass - marks the active turn and the primary action. */
:root, :root[data-theme="light"] {
  --page: #eadcbc; --page-2: #e2cfa6; --paper: #f6ecd6; --paper-2: #f1e4c7; --ink: #2b1f14; --ink-2: #5a4630; --ink-3: #8a7458;
  --rule: rgba(43, 31, 20, 0.18); --rule-2: rgba(43, 31, 20, 0.32); --brass: #b8862f; --brass-ink: #5f410e; --brass-wash: rgba(184, 134, 47, 0.16);
  --oxblood: #7a2a1c; --oxblood-wash: rgba(122, 42, 28, 0.1); --moss: #4d5e2e; --moss-wash: rgba(77, 94, 46, 0.12); --fog: #8f8a80; --shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 10px rgba(60, 40, 15, 0.12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #1b1510; --page-2: #241b13; --paper: #2a2118; --paper-2: #31271c; --ink: #f1e3c2; --ink-2: #cdb78e; --ink-3: #9a8562; --rule: rgba(241, 227, 194, 0.14); --rule-2: rgba(241, 227, 194, 0.28); --brass: #e0aa48; --brass-ink: #f6d48e; --brass-wash: rgba(224, 170, 72, 0.16); --oxblood: #e07a5f; --oxblood-wash: rgba(224, 122, 95, 0.14); --moss: #a8bd7a; --moss-wash: rgba(168, 189, 122, 0.12); --shadow: 0 2px 14px rgba(0, 0, 0, 0.45); color-scheme: dark; } }
:root[data-theme="dark"] { --page: #1b1510; --page-2: #241b13; --paper: #2a2118; --paper-2: #31271c; --ink: #f1e3c2; --ink-2: #cdb78e; --ink-3: #9a8562; --rule: rgba(241, 227, 194, 0.14); --rule-2: rgba(241, 227, 194, 0.28); --brass: #e0aa48; --brass-ink: #f6d48e; --brass-wash: rgba(224, 170, 72, 0.16); --oxblood: #e07a5f; --oxblood-wash: rgba(224, 122, 95, 0.14); --moss: #a8bd7a; --moss-wash: rgba(168, 189, 122, 0.12); --shadow: 0 2px 14px rgba(0, 0, 0, 0.45); color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 15px; line-height: 1.45; min-height: 100vh;
  background-color: var(--page);
  background-image: radial-gradient(ellipse at 20% 10%, rgba(255, 248, 230, 0.55), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(120, 80, 30, 0.12), transparent 60%), repeating-linear-gradient(0deg, rgba(90, 70, 48, 0.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--page), var(--page-2)); background-attachment: fixed; }
:root[data-theme="dark"] body { background-image: radial-gradient(ellipse at 50% -10%, rgba(224, 170, 72, 0.16), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(224, 122, 95, 0.08), transparent 60%), linear-gradient(180deg, var(--page), var(--page-2)); }
a { color: var(--brass-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 6px; padding: 5px 8px; min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .maphost:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
textarea { width: 100%; resize: vertical; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-size: 0.86em; }
.hint { color: var(--ink-3); font-size: 0.88em; }
.empty { color: var(--ink-3); font-style: italic; margin: 8px 2px; }
h2, h3, h4 { font-weight: 700; letter-spacing: 0.01em; margin: 0; }
h2 { font-size: 1.15rem; font-variant: small-caps; letter-spacing: 0.06em; }
h3 { font-size: 0.98rem; margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); font-variant: small-caps; letter-spacing: 0.05em; }
h4 { font-size: 0.92rem; margin: 12px 0 4px; }

/* Buttons: chips are quiet, .btn is a plate, .brass is the one primary action. */
.chip, .tab-btn, .seg-btn, .stab, .pt, .mini, .qd, .cond { cursor: pointer; border: 1px solid var(--rule-2); background: var(--paper); border-radius: 999px; padding: 4px 11px; font-size: 0.88rem; line-height: 1.25; white-space: nowrap; }
.chip:hover, .tab-btn:hover, .mini:hover, .qd:hover { border-color: var(--ink-2); }
.chip.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn { cursor: pointer; border: 1px solid var(--ink-2); background: var(--paper-2); border-radius: 7px; padding: 7px 14px; font-weight: 700; box-shadow: var(--shadow); }
.btn.brass, .mini.brassy { background: linear-gradient(180deg, #d4a24a, var(--brass)); color: #1f150a; border-color: #8a6420; }
.btn.wide { width: 100%; padding: 10px; font-size: 1rem; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.mini { padding: 2px 8px; font-size: 0.8rem; border-radius: 6px; }

/* Header */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 18px; border-bottom: 2px solid var(--ink); background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.backlink { font-size: 0.85rem; text-decoration: none; color: var(--ink-2); }
.brand { display: flex; align-items: center; gap: 9px; }
.seal { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-weight: 700; box-shadow: 0 0 0 2px var(--brass) inset; }
.wordmark { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; }
.motto { font-style: italic; color: var(--ink-3); font-size: 0.9rem; }
.titlefield { flex: 1 1 200px; max-width: 360px; }
.titlefield input { width: 100%; font-style: italic; background: transparent; border-color: transparent; border-bottom: 1px dashed var(--rule-2); border-radius: 0; font-size: 1.05rem; }
.clockbox { display: flex; align-items: center; gap: 6px; }
.clock { font-size: 1.05rem; padding: 2px 8px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--paper); min-width: 62px; text-align: center; }
.clock.running { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass-wash); }
.round-badge { font-variant: small-caps; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--rule-2); color: var(--ink-2); }
.round-badge.live { border-color: var(--brass); background: var(--brass-wash); color: var(--ink); font-weight: 700; }
.session { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.credits { font-family: var(--mono); font-size: 0.85rem; }
.ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--rule); }
.rlabel { font-variant: small-caps; letter-spacing: 0.06em; color: var(--ink-3); margin-right: 4px; }
.rsep { flex: 1; }
.tab-btn { border-radius: 6px; }
.scene-dlg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 18px; padding: 12px; border: 1px solid var(--brass); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.scene-dlg #sceneTitle { flex: 2 1 220px; } .scene-dlg #sceneNote { flex: 3 1 260px; } .scene-dlg .hint { flex-basis: 100%; margin: 0; }
.phonetabs { display: none; }

/* The table: tracker | map | side */
.table { display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr) minmax(320px, 390px); gap: 14px; padding: 14px 18px; align-items: start; }
.col { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; min-width: 0; }
.colhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.turnbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.turnbar #readyTrigger { flex: 1 1 150px; font-size: 0.85rem; }
.addrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.addrow select { flex: 1 1 140px; } .addrow input[type="number"] { width: 64px; } .addrow input[type="text"] { flex: 1 1 110px; }

/* Initiative cards */
.tracker-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper-2); }
.card.side-foe { border-left: 4px solid var(--oxblood); } .card.side-party { border-left: 4px solid var(--ink); } .card.side-ally { border-left: 4px solid var(--moss); }
.card.current { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 3px 12px rgba(184, 134, 47, 0.3); background: linear-gradient(90deg, var(--brass-wash), var(--paper-2) 60%); }
.card.st-down { opacity: 0.6; } .card.st-down .cname { text-decoration: line-through; }
.card.st-delayed { border-style: dashed; }
.card.halo::after { content: ""; position: absolute; inset: -5px; border-radius: 11px; border: 2px dashed var(--brass); pointer-events: none; animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .card.halo::after { animation: none; } }
.sigil { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; background: var(--paper); border: 2px solid var(--ink); flex: none; }
.side-foe > .sigil, .sigil.side-foe { border-color: var(--oxblood); border-style: dashed; background: var(--oxblood-wash); }
.side-ally > .sigil, .sigil.side-ally { border-color: var(--moss); background: var(--moss-wash); }
.sigil.small { width: 26px; height: 26px; font-size: 0.72rem; border-width: 1.5px; }
.sigil.ghosty { border-style: dotted; opacity: 0.8; }
.crow1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cname { font-size: 1rem; }
.badge { white-space: nowrap; font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink-2); font-variant: small-caps; letter-spacing: 0.04em; }
.badge.now { background: var(--brass); color: #1f150a; border-color: var(--brass); } .badge.down { color: var(--oxblood); border-color: var(--oxblood); } .badge.spot { border: 1px dashed var(--brass); color: var(--brass-ink); background: var(--brass-wash); }
.crow2, .crow3 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.cinitl { font-size: 0.8rem; color: var(--ink-3); } .cinit { width: 52px; padding: 2px 5px; }
.hpbar { flex: 1 1 60px; height: 7px; border-radius: 4px; background: var(--rule); overflow: hidden; min-width: 40px; }
.hpfill { display: block; height: 100%; background: var(--moss); } .hpfill.low { background: var(--oxblood); }
.camt { width: 54px; padding: 2px 5px; } .crounds { width: 48px; padding: 2px 4px; font-size: 0.8rem; }
.ccond { font-size: 0.8rem; padding: 2px 4px; max-width: 120px; }
.bonus { font-size: 0.82rem; color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.cond { font-size: 0.75rem; padding: 1px 7px; background: var(--brass-wash); border-color: var(--brass); }
.cact { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }

/* Map */
.mapcol { display: flex; flex-direction: column; gap: 8px; }
.pinned { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pin { position: relative; padding: 8px 26px 8px 10px; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--rule-2); box-shadow: 2px 3px 0 var(--rule); transform: rotate(-0.4deg); }
.pin:nth-child(2n) { transform: rotate(0.5deg); }
.pin::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.pinkind { display: block; font-size: 0.7rem; font-variant: small-caps; letter-spacing: 0.06em; color: var(--oxblood); }
.pintitle { display: block; } .pindetail { margin: 3px 0 0; font-size: 0.86rem; color: var(--ink-2); }
.pin .unpin { position: absolute; top: 4px; right: 4px; }
.pin .usedpin { margin-top: 4px; }
.maptools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--ink-2); border-radius: 7px; overflow: hidden; }
.seg-btn { border: 0; border-radius: 0; border-right: 1px solid var(--rule-2); background: var(--paper); padding: 5px 12px; }
.seg-btn:last-child { border-right: 0; }
.seg-btn.on { background: var(--ink); color: var(--paper); }
.toolopts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.check { display: inline-flex; gap: 5px; align-items: center; font-size: 0.88rem; }
.mapscroll { overflow: auto; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper-2); max-height: 72vh; }
.mapscroll.drop { outline: 2px dashed var(--brass); outline-offset: -4px; }
.maphost { touch-action: none; user-select: none; -webkit-user-select: none; line-height: 0; }
.maphost svg { display: block; width: 100%; height: auto; min-width: 560px; }
.maphost[data-tool="move"] svg { cursor: grab; } .maphost[data-tool="terrain"] svg, .maphost[data-tool="fog"] svg { cursor: crosshair; } .maphost[data-tool="ruler"] svg { cursor: copy; }
.maphost .tok { cursor: grab; } .maphost .tok.dragging { cursor: grabbing; opacity: 0.85; }
.maphost .tok.sel circle:last-of-type { stroke-width: 3; }
.mapfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.mapstatus { color: var(--ink-2); }
.mapsize input { width: 56px; padding: 2px 5px; }

/* Side panel */
.sidetabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--rule-2); padding-bottom: 8px; margin-bottom: 6px; }
.stab { border-radius: 6px 6px 0 0; border-bottom: 0; }
.stab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.row2, .row3 { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.row2 label, .row3 label { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--ink-3); gap: 2px; flex: 1 1 90px; }
.stack { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; color: var(--ink-3); margin: 6px 0; }
.stack input { width: 100%; }
.budget { margin: 10px 0 4px; }
.btrack { position: relative; height: 30px; border: 1px solid var(--ink-2); border-radius: 6px; overflow: hidden; background: var(--paper-2); }
.bseg { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--rule-2); }
.bseg .blabel { position: absolute; left: 3px; bottom: 1px; font-size: 0.66rem; font-variant: small-caps; color: var(--ink-3); white-space: nowrap; overflow: hidden; max-width: 100%; }
.band-trivial { background: transparent; } .band-easy { background: var(--moss-wash); } .band-standard { background: rgba(77, 94, 46, 0.2); } .band-hard { background: var(--brass-wash); } .band-deadly { background: var(--oxblood-wash); } .band-overwhelming { background: repeating-linear-gradient(45deg, var(--oxblood-wash) 0 5px, transparent 5px 10px); }
.bseg.target { box-shadow: inset 0 0 0 2px var(--brass); } .bseg.target .blabel { color: var(--brass-ink); font-weight: 700; }
.bmark { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--ink); }
.bmark.ghost { background: transparent; border-left: 3px dotted var(--brass); } .bmark.ghost.out { border-left-color: var(--oxblood); }
.budgetline { font-size: 0.88rem; margin: 4px 0; } .budgetline .ok { color: var(--moss); } .budgetline .off { color: var(--oxblood); }
.enc-list, .cat-list, .party-list, .spot-list, .roll-list, .scene-list, .log-list, .history, .recon, .prompts { list-style: none; margin: 0; padding: 0; }
.enc { border: 1px solid var(--rule-2); border-radius: 8px; padding: 7px 8px; margin-bottom: 7px; background: var(--paper-2); }
.enchead { display: flex; align-items: center; gap: 6px; }
.encname { flex: 1; min-width: 0; } .enccost { white-space: nowrap; }
.encstat, .enctac { margin: 3px 0 0; font-size: 0.82rem; color: var(--ink-2); } .enctac { font-style: italic; }
.ghost { margin-top: 7px; padding: 7px 8px; border: 1.5px dashed var(--brass); border-radius: 7px; background: var(--brass-wash); opacity: 0.92; }
.ghosthead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ghostwhy { margin: 4px 0; font-size: 0.85rem; }
.ghostbtns { display: flex; gap: 6px; }
.delta { margin-left: auto; } .delta.up { color: var(--oxblood); } .delta.down { color: var(--moss); }
.catfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .catfilters input { flex: 1 1 140px; }
.cat { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 1px dotted var(--rule); font-size: 0.88rem; }
.catname { flex: 1; min-width: 0; } .catcost { white-space: nowrap; }
.cat-list { max-height: 340px; overflow: auto; }
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dotted var(--rule); }
.heroname { flex: 1 1 120px; min-width: 0; } .stress { display: inline-flex; gap: 4px; align-items: center; }
.spot { display: grid; grid-template-columns: 70px 1fr auto auto auto; gap: 6px; align-items: center; padding: 5px 4px; border-radius: 6px; }
.spot .mono { grid-column: 1 / -1; font-size: 0.76rem; color: var(--ink-3); }
.spot.low .spotname { color: var(--oxblood); } .spot.halo { box-shadow: 0 0 0 2px var(--brass); background: var(--brass-wash); }
.spotbar { display: flex; height: 9px; background: var(--rule); border-radius: 5px; overflow: hidden; }
.spotbar .acted { background: var(--ink-2); } .spotbar .spoke { background: var(--brass); }
.askform .lanes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.lane { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border: 1px solid var(--rule-2); border-radius: 7px; cursor: pointer; font-size: 0.9rem; }
.lane:has(input:checked) { border-color: var(--brass); background: var(--brass-wash); }
.meter { font-size: 0.86rem; color: var(--ink-2); } .clip { font-size: 0.82rem; color: var(--oxblood); }
.runnote, .gate { font-size: 0.86rem; padding: 6px 8px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule-2); }
.gate a { font-weight: 700; cursor: pointer; }
.progress { margin-top: 10px; padding: 10px; border: 1px solid var(--brass); border-radius: 8px; }
.steps { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.88rem; }
.step { color: var(--ink-3); } .step.done { color: var(--ink); } .step.active { color: var(--brass-ink); font-weight: 700; }
.result { margin-top: 12px; border-top: 2px solid var(--ink); padding-top: 8px; }
.read { font-size: 1rem; font-style: italic; }
.dialrow { display: flex; gap: 10px; align-items: center; } .dial { color: var(--ink); flex: none; }
.pacecall { font-weight: 700; margin: 0; letter-spacing: 0.04em; }
.spotcard { display: flex; gap: 10px; padding: 9px; border: 2px dashed var(--brass); border-radius: 9px; background: var(--brass-wash); margin: 8px 0; }
.spotcard.bad { border-color: var(--oxblood); background: var(--oxblood-wash); }
.spotcard p { margin: 3px 0; } .spotcard .move { font-weight: 700; }
.prompts li { padding: 3px 0; font-size: 0.9rem; }
.tonenote { font-size: 0.88rem; color: var(--ink-2); border-left: 3px solid var(--brass); padding-left: 8px; }
.anchor { font-weight: 700; } .swapsum { font-size: 0.9rem; }
.opener { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--ink); font-style: italic; background: var(--paper-2); }
.recon li { font-size: 0.85rem; padding: 3px 0 3px 18px; position: relative; }
.recon li::before { content: "\2022"; position: absolute; left: 4px; }
.recon .error { color: var(--oxblood); font-weight: 700; } .recon .warn { color: var(--oxblood); } .recon .note { color: var(--ink-2); } .recon .none { color: var(--moss); }
.resfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.partial { color: var(--oxblood); font-size: 0.88rem; }
.raw pre { white-space: pre-wrap; font-size: 0.78rem; max-height: 260px; overflow: auto; background: var(--paper-2); padding: 8px; }
.how { font-size: 0.88rem; color: var(--oxblood); }
.diceform { display: flex; flex-wrap: wrap; gap: 6px; } .diceform #diceExpr { flex: 1 1 90px; font-family: var(--mono); } .diceform #diceWho { flex: 1 1 70px; } .diceform #diceNote { flex: 2 1 110px; }
.quickdice { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.qd { font-family: var(--mono); font-size: 0.8rem; border-radius: 5px; }
.rollout { font-size: 1rem; min-height: 1.4em; padding: 6px 8px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule); overflow-wrap: anywhere; } .rollout.bad { color: var(--oxblood); }
.roll, .scene, .logline { font-size: 0.85rem; padding: 3px 0; border-bottom: 1px dotted var(--rule); overflow-wrap: anywhere; }
.roll .t, .scene .t, .logline .t { color: var(--ink-3); margin-right: 6px; } .roll .total { font-size: 1rem; }
.roll-list, .log-list { max-height: 260px; overflow: auto; }
.none { color: var(--ink-3); font-style: italic; font-size: 0.88rem; padding: 3px 0; }
.filebtns { display: flex; flex-wrap: wrap; gap: 6px; }
.history .restore { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dotted var(--rule); padding: 6px 2px; cursor: pointer; }
.history .on .restore { background: var(--brass-wash); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 9px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); font-size: 0.9rem; transition: opacity 0.5s; }
.toast.err { background: var(--oxblood); color: #fff; } .toast.gone { opacity: 0; } .toast a { color: inherit; font-weight: 700; }
.foot { padding: 14px 18px 30px; font-size: 0.85rem; color: var(--ink-3); border-top: 1px solid var(--rule); }
.printsheet { display: none; }


/* Docs pages (api.html, tokens.html) share the parchment. */
.docpage .topbar { justify-content: space-between; }
.sep { color: var(--ink-3); margin: 0 4px; }
.topactions { display: flex; gap: 8px; }
.doc { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 10px; margin-top: 16px; box-shadow: var(--shadow); }
.doc h1 { font-size: 1.7rem; margin: 6px 0 10px; }
.doc h2 { font-size: 1.2rem; margin: 26px 0 8px; font-variant: normal; letter-spacing: 0; border-bottom: 1px solid var(--rule-2); padding-bottom: 4px; }
.doc h3 { font-size: 1.02rem; border: 0; font-variant: normal; letter-spacing: 0; margin: 20px 0 6px; }
.doc p { max-width: 74ch; }
.doc pre { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 7px; padding: 10px 12px; overflow: auto; font-family: var(--mono); font-size: 0.8rem; line-height: 1.45; max-height: 560px; }
.doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.88rem; margin: 8px 0; max-width: 100%; }
.doc th, .doc td { border: 1px solid var(--rule-2); padding: 5px 8px; text-align: left; vertical-align: top; }
.doc th { background: var(--paper-2); }
.doc code { font-family: var(--mono); font-size: 0.86em; overflow-wrap: anywhere; }
.codegroup { margin: 8px 0 14px; }
.codegroup .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -1px; }
.codegroup .tab { cursor: pointer; border: 1px solid var(--rule-2); background: var(--paper); border-radius: 6px 6px 0 0; padding: 4px 10px; font-size: 0.82rem; }
.codegroup .tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.codegroup pre { margin-top: 0; border-top-left-radius: 0; }
.muted { color: var(--ink-3); } .small { font-size: 0.85rem; }
.statebox { border: 1px solid var(--rule-2); border-radius: 8px; padding: 10px 12px; background: var(--paper-2); margin: 12px 0; }
.statebox p { margin: 4px 0; }
.tokenrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.tokenbox { flex: 1 1 100%; font-family: var(--mono); font-size: 0.85rem; padding: 8px 10px; border: 1px dashed var(--rule-2); border-radius: 7px; background: var(--paper-2); overflow-wrap: anywhere; }
.primary { cursor: pointer; border: 1px solid #8a6420; border-radius: 7px; padding: 7px 14px; font-weight: 700; background: linear-gradient(180deg, #d4a24a, var(--brass)); color: #1f150a; }

/* Narrower desks: the side panel drops below the map. */
@media (max-width: 1240px) { .table { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); } .side { grid-column: 1 / -1; } }
/* Phones: one view at a time - the tracker by default, the map and the side panel as tabs. */
@media (max-width: 900px) {
  .topbar { padding: 8px 16px; gap: 8px; } .motto { display: none; } .titlefield { order: 5; flex-basis: 100%; max-width: none; } .session { margin-left: 0; }
  .ribbon { padding: 6px 16px; } .rsep { display: none; }
  .phonetabs { display: flex; position: sticky; top: 0; z-index: 20; gap: 0; background: var(--paper); border-bottom: 2px solid var(--ink); }
  .pt { flex: 1; border-radius: 0; border: 0; border-right: 1px solid var(--rule-2); padding: 10px 4px; font-weight: 700; background: var(--paper); }
  .pt.on { background: var(--ink); color: var(--paper); }
  .table { display: block; padding: 10px 16px; }
  .table .col { display: none; }
  .table[data-view="tracker"] .tracker, .table[data-view="map"] .mapcol, .table[data-view="side"] .side { display: block; }
  .table[data-view="map"] .mapcol { display: flex; }
  .maphost svg { min-width: 520px; }
  .scene-dlg { margin: 8px 16px; }
}
@media (max-width: 420px) { .card { grid-template-columns: 34px minmax(0, 1fr); } .cact { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .spot { grid-template-columns: 60px 1fr auto auto auto; } }

/* Print: only the GM sheet. */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  body > *:not(.printsheet) { display: none !important; }
  .printsheet { display: block !important; }
  .sheet h1 { font-size: 18pt; margin: 0 0 2pt; } .sheet .meta { margin: 0 0 8pt; font-style: italic; }
  .sheet h2 { font-size: 12pt; margin: 10pt 0 4pt; border-bottom: 1pt solid #000; font-variant: small-caps; }
  .sheet table { width: 100%; border-collapse: collapse; font-size: 9pt; } .sheet th, .sheet td { border: 0.5pt solid #555; padding: 2pt 4pt; text-align: left; vertical-align: top; }
  .sheet tr.cur td { font-weight: 700; } .sheet td.tick, .sheet th.tick { width: 28%; }
  .sheetmap svg { width: 100%; height: auto; max-height: 120mm; }
}
.openerbar { margin: 6px 0 0; }