/* The town's shared look, direction 1b "Picture in a book": a contents rail on the left, the map framed as a plate, the feed as a
   ledger beneath it. Loaded by the 3D, flat and window pages before town.css, which the night developer may change. */
@font-face { font-family: "Zodiak"; src: url("/assets/fonts/Zodiak-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("/assets/fonts/Zodiak-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #17161a; --rail: #111015; --line: #3a3022; --text: #e8e3d8; --head: #f1e7d2; --muted: #a39e94; --soft: #b9b2a5; --dim: #cfc7b8;
  --accent: #e0a458; --accent-hi: #f2c27e; --lamp-bg: #2a2119; --lamp-text: #f6d9ad; --field: #1f1d22; --field-line: #4a4236;
  --parch: #ece2cc; --ink: #2b2419; --parch-muted: #7a6548; --parch-soft: #5a4a33; --parch-line: #d6c7a6; --parch-rule: #b8a27e;
  --rust: #7a4510; --plate: #8a6a3e; --plate-out: #4a3a26; --alert: #c0392b; --panel: #1b1b22;
  --serif: "Zodiak", Georgia, serif; --sans: "Switzer", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hi); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

#shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100vh; }

/* The contents rail. */
#rail { background: var(--rail); border-right: 1px solid var(--line); padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.brand { display: flex; flex-direction: column; gap: 4px; }
.brand .name { font: 700 30px/1.1 var(--serif); color: var(--head); }
.brand .tag { font-size: 13px; color: var(--muted); font-style: italic; }
#menu-toggle { align-self: flex-start; height: 36px; padding: 0 14px; border-radius: 6px; background: var(--lamp-bg); color: var(--lamp-text); border: 1px solid var(--accent); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; }
#menu-toggle:hover { background: #3a2c1e; }
#menu-toggle.awake { box-shadow: 0 0 0 3px rgba(224,164,88,.18), 0 0 16px rgba(224,164,88,.35); }
#guide { display: flex; flex-direction: column; gap: 14px; }
#guide[hidden] { display: none; }
#guide section { display: flex; flex-direction: column; gap: 7px; }
#guide h3 { margin: 0; display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
#guide h3 .num { font: 400 16px var(--serif); letter-spacing: 0; color: var(--accent); min-width: 18px; }
#guide .item { padding-left: 28px; }
#guide .item a { font: 500 17px var(--serif); color: var(--accent-hi); }
#guide .item a.awake { color: var(--rail); background: var(--accent); padding: 0 6px; border-radius: 4px; }
#guide p { margin: 0; } #guide p.what { font-size: 13.5px; line-height: 1.35; color: var(--text); } #guide p.how { font-size: 12.5px; line-height: 1.35; color: var(--muted); }

/* The page: chapter heading, plate, ledger. */
#main { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 20px; min-width: 0; min-height: 0; overflow-y: auto; }
.chapter { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.chapter .kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.chapter h1 { margin: 0; font: 400 26px/1.2 var(--serif); color: var(--head); }
#clock { font: 400 15px var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.chapter .tools { margin-left: auto; display: flex; gap: 8px; }
.chapter .tools button, #sound { height: 34px; padding: 0 12px; border-radius: 6px; background: transparent; border: 1px solid var(--field-line); color: var(--text); font: 500 14px var(--sans); cursor: pointer; }
.chapter .tools button:hover, #sound:hover { border-color: var(--accent); }
.chapter .speed { display: inline-flex; }
.chapter .tools .speed button { padding: 0 9px; border-radius: 0; margin-left: -1px; font-variant-numeric: tabular-nums; }
.chapter .tools .speed button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.chapter .tools .speed button:last-child { border-radius: 0 6px 6px 0; }
.chapter .tools .speed button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); position: relative; }

.plate { margin: 0; display: flex; flex-direction: column; gap: 6px; flex: none; }
.plate .frame { position: relative; height: clamp(300px, 56vh, 640px); padding: 6px; border: 1px solid var(--plate); outline: 1px solid var(--plate-out); outline-offset: 4px; background: #14151b; }
.plate .frame #map { position: absolute; inset: 6px; overflow: hidden; }
.plate figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); font-style: italic; padding-top: 6px; }
#hint { transition: opacity 1s; }

.below { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; flex: 1; min-height: 260px; }
.below.solo { grid-template-columns: minmax(0, 1fr); }

/* The day's ledger: the feed on parchment. */
#side { background: var(--parch); color: var(--ink); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ledger-head h2 { margin: 0; font: 700 20px var(--serif); }
.ledger-note { margin: 0; font-size: 13px; color: var(--parch-soft); font-style: italic; }
#walks-row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
#walks { appearance: none; -webkit-appearance: none; margin: 0; width: 40px; height: 22px; border-radius: 11px; background: #b8a99a; position: relative; cursor: pointer; flex: none; }
#walks::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fbf6ea; transition: left .15s; }
#walks:checked { background: #8a5a1c; } #walks:checked::after { left: 21px; }
#feed { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
#feed li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--parch-line); font-size: 15px; line-height: 1.4; color: #6b5d48; font-style: italic; }
#feed time { color: var(--parch-muted); font-variant-numeric: tabular-nums; font-style: normal; }
#feed li.say { color: var(--ink); font-style: normal; } #feed li.say strong { color: var(--rust); font-weight: 600; margin-right: 2px; }
#feed li.voice { color: #4a3d2c; font-style: italic; }
#feed li.watcher { color: var(--rust); font-style: normal; font-weight: 500; }

/* Speak to the town. */
#watcher { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#watcher h2 { margin: 0; font: 700 20px var(--serif); color: var(--head); }
#watcher .lede { margin: 0; font-size: 14px; color: var(--soft); }
#watcher-log { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 120px; font-size: 14px; }
#watcher-log:empty { display: none; }
#watcher-log li { padding: 3px 0; overflow-wrap: anywhere; }
#watcher-log li.watcher strong { color: var(--accent); } #watcher-log li.town strong { color: var(--accent-hi); }
#watcher-log li.quiet { color: var(--muted); font-style: italic; } #watcher-log small { display: block; color: var(--muted); font-size: 12px; }
#watcher-form { display: flex; flex-direction: column; gap: 10px; flex: 1; }
#watcher-text { flex: 1; min-height: 80px; resize: none; border: 1px solid var(--field-line); border-radius: 4px; background: var(--field); padding: 10px; font: 15px var(--sans); color: var(--text); }
#watcher-form button { align-self: flex-end; height: 38px; padding: 0 16px; border-radius: 5px; border: 0; background: var(--accent); color: #1a1408; font: 600 14px var(--sans); cursor: pointer; }
#watcher-status { margin: 0; min-height: 1.2em; color: var(--muted); font-size: 13px; }
#mode { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; font-style: italic; }

/* The life card, as a bookplate on the map. */
#card { display: none; position: absolute; right: 14px; top: 14px; width: 300px; max-height: calc(100% - 28px); overflow-y: auto; background: var(--parch); color: var(--ink); border: 1px solid var(--plate); padding: 14px 16px; z-index: 5; font-size: 14px; }
#card h3 { margin: 0 34px 2px 0; font: 700 22px/1.2 var(--serif); }
#card .muted { color: var(--parch-soft); } #card p { margin: 6px 0; } #card ol { padding-left: 18px; margin: 6px 0 0; }
#card .life { margin: 8px 0; display: grid; gap: 2px; } #card .arrears { color: #8f2a1e; font-weight: 600; margin-left: 6px; }
#card .badge { border: 1px solid #a33224; color: #8f2a1e; font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 10px; vertical-align: middle; font-family: var(--sans); }
#card .badge.lead { border-color: #8a5a1c; color: #6b4515; }
#card .needs { display: grid; gap: 4px; margin: 8px 0; }
#card .need { display: grid; grid-template-columns: 70px 1fr 26px; align-items: center; gap: 8px; font-size: 13px; }
#card .need .val { text-align: right; color: var(--parch-soft); font-variant-numeric: tabular-nums; }
#card .bar { height: 5px; background: var(--parch-line); overflow: hidden; }
#card .bar i { display: block; height: 100%; background: #8a5a1c; } #card .bar i.low { background: #a33224; } #card .bar i.mind { background: #3a6ea5; }
#card .skills .work { font-weight: 600; } #card .skills .work .bar i { background: var(--ink); }
#card .sect { margin-top: 10px; } #card .sect > strong { font-family: var(--serif); } #card ul.rel { padding-left: 0; margin: 4px 0 0; list-style: none; }
#card ul.rel li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--parch-rule); padding: 2px 0; }
#card > button { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 1px solid var(--parch-rule); background: none; border-radius: 4px; cursor: pointer; color: var(--ink); font-size: 16px; }

#banner { display: none; position: fixed; top: 0; left: 0; right: 0; background: var(--alert); color: #fff; padding: 10px 14px; font-weight: 600; z-index: 10; }

/* Phone and narrow windows: the contents fold behind the button, the ledger stacks under the plate, the page scrolls. */
@media (max-width: 900px) {
  body { overflow: auto; }
  #shell { display: block; height: auto; }
  #rail { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 8; overflow: visible; }
  .brand .tag { display: none; } .brand .name { font-size: 24px; }
  #menu-toggle { align-self: center; }
  #guide { position: absolute; left: 0; right: 0; top: 100%; max-height: 75vh; overflow-y: auto; background: var(--rail); border-bottom: 1px solid var(--line); padding: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  #main { padding: 16px; overflow: visible; }
  .plate .frame { height: 52vh; }
  .below { grid-template-columns: minmax(0, 1fr); }
  #side { max-height: 70vh; }
  #card { width: auto; left: 10px; right: 10px; top: 10px; }
  #guide .item { padding-left: 0; }
  .rail-nav .item { padding-left: 0; }
}

/* Sub-page section: the look for every converted town page (book, choices, chronicle, family, mind,
   replay, room, translator, watcher2, paper, ideas). Reuses the tokens above; adds the chapter header,
   reading column, panels, tables, forms and chart frames those pages need. */
.rail-nav { display: flex; flex-direction: column; gap: 14px; }
.rail-nav section { display: flex; flex-direction: column; gap: 7px; }
.rail-nav h3 { margin: 0; display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.rail-nav h3 .num { font: 400 16px var(--serif); letter-spacing: 0; color: var(--accent); min-width: 18px; }
.rail-nav .item { padding-left: 28px; }
.rail-nav .item a { font: 500 17px var(--serif); color: var(--accent-hi); }
.rail-nav .item a[aria-current="page"] { color: var(--rail); background: var(--accent); padding: 0 6px; border-radius: 4px; }
.rail-nav p { margin: 0; } .rail-nav p.what { font-size: 13.5px; line-height: 1.35; color: var(--text); } .rail-nav p.how { font-size: 12.5px; line-height: 1.35; color: var(--muted); }

#main.page { display: flex; flex-direction: column; gap: 18px; padding: 24px 32px 32px; min-width: 0; overflow-y: auto; }
.page .lede { margin: 2px 0 0; font-size: 14.5px; color: var(--soft); max-width: 70ch; }
.page h2 { margin: 10px 0 2px; font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 6px; }

.page .panel { background: var(--panel); border: 1px solid var(--field-line); border-radius: 8px; padding: 14px 16px; max-width: 900px; }
.page .panel + .panel { margin-top: 10px; }

/* Reading column: parchment, 60 to 70 characters, for chronicle, paper, book, family prose. */
.page .reading { max-width: 68ch; display: flex; flex-direction: column; gap: 18px; }
.page .reading > article, .page .reading > p:only-child, .page .reading > table { background: var(--parch); color: var(--ink); border: 1px solid var(--plate); padding: 20px 26px; }
.page .reading h2 { font: 700 22px var(--serif); margin: 0; }
.page .reading .week, .page .reading .byline { color: var(--parch-soft); font-size: 13px; margin: 2px 0 10px; }
.page .reading p { margin: 0 0 8px; line-height: 1.6; }
.page .reading .verdict { font-style: italic; }
.page .reading table { background: var(--parch); color: var(--ink); border-color: var(--plate); }
.page .reading table th, .page .reading table td { border-bottom: 1px solid var(--parch-line); color: var(--ink); }
.page .reading table th { color: var(--parch-soft); }
.page .reading ul { color: var(--ink); }
.page .masthead { font: 700 30px var(--serif); margin: 0; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.page .score { float: right; font: 700 26px var(--serif); color: var(--rust); }

.page table { border-collapse: collapse; width: 100%; max-width: 920px; background: var(--panel); border: 1px solid var(--field-line); }
.page table th, .page table td { padding: 7px 10px; border-bottom: 1px solid var(--field-line); text-align: left; vertical-align: top; font-size: 14px; }
.page table th { color: var(--muted); font: 600 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.page table td { color: var(--text); }

.page button { background: var(--accent); color: #1a1408; border: 0; border-radius: 6px; padding: 7px 14px; font: 600 14px var(--sans); cursor: pointer; }
.page button:hover { background: var(--accent-hi); }
.page button.quiet, .page button.refuse, .page button.reject { background: transparent; color: var(--text); border: 1px solid var(--field-line); }
.page button:disabled { opacity: .5; cursor: default; }

.page select, .page input[type="text"], .page input[type="range"], .page textarea, .page input:not([type]) {
  background: var(--field); color: var(--text); border: 1px solid var(--field-line); border-radius: 5px; padding: 6px 9px; font: inherit;
}
.page form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.page .chart-frame { background: var(--panel); border: 1px solid var(--field-line); border-radius: 8px; padding: 12px; max-width: 900px; }
.page .chart-frame svg { width: 100%; height: auto; display: block; }

/* Mind page charts: the link and agreement lines use slots 1 and 2 of the dataviz reference palette. */
.page .legend { display: flex; gap: 16px; font-size: 14px; margin-bottom: 6px; color: var(--text); }
.page .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.page .axis, .page .guide { stroke: var(--field-line); }
.page .guide { stroke-dasharray: 4 4; }
.page .muted-label { fill: var(--muted); font-size: 12px; } .page .end-label { fill: var(--text); font-size: 15px; }
.page .line-link, .page .line-agree { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.page .line-link { stroke: #3987e5; } .page .line-agree { stroke: #d95926; }
.page .dot-link, .page .dot-agree { stroke: var(--panel); stroke-width: 2; } .page .dot-link { fill: #3987e5; } .page .dot-agree { fill: #d95926; }
.page .hit { fill: transparent; } .page .night:hover circle { r: 6; }
.page .bar-a { fill: #3987e5; } .page .bar-b { fill: #d95926; } .page .mark { fill: var(--accent); font-size: 11px; } .page .band { fill: #3987e5; opacity: .18; }
.page .scroll { overflow-x: auto; max-width: 900px; flex-shrink: 0; }

.page .empty, .page .muted { color: var(--muted); font-size: 13.5px; }
.page .q { margin: 0; font-weight: 600; font-family: var(--serif); }
.page .a { margin: 4px 0 0; overflow-wrap: anywhere; }
.page .title { font-weight: 600; margin: 0 0 4px; font-family: var(--serif); }
.page .detail, .page .who, .page .outcome, .page .state { margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }
.page .reason, .page .text { margin: 4px 0; overflow-wrap: anywhere; }
.page .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page .open .outcome, .page .open .state { color: var(--accent); }
.page .label { margin-left: 8px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--field); color: var(--accent); }
.page details { margin-top: 6px; } .page summary { cursor: pointer; color: var(--muted); }
.page pre { background: var(--field); border: 1px solid var(--field-line); border-radius: 6px; padding: 8px; max-height: 60vh; overflow: auto; font: 12px/1.4 ui-monospace, monospace; white-space: pre; color: var(--text); }

/* watcher2 keeps its own accent so it reads as a second, different watcher. */
.page.watcher2 { --accent: #c77dff; --accent-hi: #d9a6ff; }

@media (max-width: 900px) {
  #main.page { padding: 16px; }
  .page .reading { max-width: 100%; padding: 16px 18px; }
  .page table { display: block; overflow-x: auto; }
}