/* Desk styles. They were injected as inline <style> elements by brief.js and
   walk.js; a strict style-src CSP blocks those, so they ship as a file. */

/* ── Brief desk (moved from brief.js) ── */
#briefDesk .br-desk{font:inherit;font-size:13px;line-height:1.45;color:var(--ink);border-top:2px solid var(--ink);padding-top:10px}
#briefDesk .br-h{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:.01em}
#briefDesk .br-lede{margin:0 0 4px;font-size:12px;color:var(--muted);max-width:74ch}
#briefDesk .br-sec{margin:0;padding:13px 0 4px;border-top:1px solid var(--line)}
#briefDesk .br-sec:first-of-type{border-top:0}
#briefDesk .br-sec>h4{margin:0 0 9px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#briefDesk .br-fields{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;margin:0 0 9px}
#briefDesk .br-fields label{font-size:11px;color:var(--muted)}
#briefDesk input[type=number]{width:104px;font:inherit;font-family:var(--mono);font-size:12px;padding:2px 4px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
#briefDesk input[type=number]:focus,#briefDesk select:focus{outline:2px solid var(--accent);outline-offset:-1px}
#briefDesk input[type=range]{width:118px;accent-color:var(--accent)}
#briefDesk select{font:inherit;font-size:12px;padding:2px 4px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
#briefDesk .br-ledger{width:100%;margin:0 0 9px;border-collapse:collapse;table-layout:fixed;font-size:12px}
#briefDesk .br-ledger th{overflow-wrap:anywhere;text-align:left;font-weight:400;vertical-align:top;padding:2px 16px 2px 0;color:var(--muted)}
#briefDesk .br-ledger td{text-align:right;vertical-align:top;padding:2px 0;font-family:var(--mono);white-space:normal;overflow-wrap:anywhere}
#briefDesk .br-ledger thead th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:4px}
#briefDesk .br-cur{color:var(--accent);font-weight:600}
#briefDesk .br-flag{color:var(--accent);font-weight:600}
#briefDesk .br-rule{display:block;width:min(100%,280px);height:16px;margin:0 0 9px;color:var(--ink)}
#briefDesk .br-rule.over{color:var(--accent)}
#briefDesk .br-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);margin:0 0 9px}
#briefDesk .br-card{background:var(--panel);padding:9px 10px 10px}
#briefDesk .br-card.br-on{background:var(--paper);border-left:3px solid var(--accent);padding-left:7px}
#briefDesk .br-card button{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--accent);padding:0 0 2px;cursor:pointer}
#briefDesk .br-card dl{display:flex;flex-wrap:wrap;gap:2px 8px;margin:7px 0 0;font-size:11px}
#briefDesk .br-card dt{color:var(--faint)}
#briefDesk .br-card dd{margin:0 0 0 6px;font-family:var(--mono)}
#briefDesk .br-opt{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
#briefDesk .br-sac{margin:5px 0 0;padding-top:5px;border-top:1px dotted var(--line);font-size:11.5px}
#briefDesk .br-note{margin:0 0 9px;font-size:11px;color:var(--muted);max-width:78ch}
#briefDesk .br-tag{display:inline-block;margin:5px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--accent);border:1px solid var(--accent);padding:0 4px}
#briefDesk .br-read{font-size:11px;color:var(--muted);margin:0 0 9px}
#briefDesk details{margin:0 0 9px}
#briefDesk summary{font-size:11px;color:var(--muted);cursor:pointer}
#briefDesk .br-svg{margin:7px 0 0;max-width:340px;color:var(--ink)}
#briefDesk .br-svg svg{display:block;width:100%;height:auto}
#briefDesk .br-disclaimer{margin:13px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);max-width:82ch}
#briefDesk .br-jump{font:inherit;font-size:11px;color:var(--ink);background:none;border:1px solid var(--line);padding:1px 6px;cursor:pointer;white-space:nowrap}
#briefDesk .br-jump:hover{border-color:var(--accent);color:var(--accent)}

/* ── Walk-in desk (moved from walk.js) ── */
.wk *{box-sizing:border-box}
.wk-sec{border-top:1px solid var(--line);padding-top:12px;margin-top:20px}
.wk-h{font:600 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 2px}
.wk-note{font:400 12px/1.55 var(--sans);color:var(--muted);margin:0 0 8px;max-width:80ch}
.wk-fig{margin:0}
.wk-figwrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wk-figwrap svg{display:block;width:100%;height:auto;background:var(--dark)}
.wk-cap{font:400 11px/1.6 var(--mono);color:var(--muted);padding:6px 0 0}
.wk-key{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:1px 10px;margin:8px 0 0;font:400 11px/1.5 var(--sans);color:var(--muted)}
.wk-key b{font:400 10px/1.7 var(--mono);color:var(--accent)}
.wk-key i{overflow-wrap:anywhere;font-style:normal;font-family:var(--mono)}
.wk-ctl{display:grid;grid-template-columns:minmax(80px,1fr) minmax(80px,2fr) auto;gap:6px 10px;align-items:center;margin:12px 0}
.wk-ctl label,.wk-ctl output{font:400 11px/1.4 var(--sans);color:var(--muted)}
.wk-ctl output{font-family:var(--mono);color:var(--ink);text-align:right}
.wk-ctl input{width:100%;accent-color:var(--accent)}
.wk-btn{font:400 11px/1 var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:0;padding:6px 10px;cursor:pointer}
.wk-btn:hover{border-color:var(--accent);color:var(--accent)}
.wk-ctl p{grid-column:1/4;font:400 11px/1.55 var(--sans);color:var(--faint);margin:2px 0 0}
.wk-src{font:400 11px/1.55 var(--sans);color:var(--faint);margin:8px 0 0;max-width:80ch}
.wk-src b{font-weight:400;color:var(--accent)}
.wk-svg .wk-sky{fill:var(--dark,#111416)}
.wk-svg .wk-glass{fill:#1e2629;stroke:var(--dim);stroke-width:1}
.wk-svg .wk-wall{fill:#1a2022;stroke:var(--dim);stroke-width:1}
.wk-svg .wk-floor{fill:#141a1c;stroke:var(--dim);stroke-width:1}
.wk-svg .wk-ceil{fill:#262e31;stroke:var(--dim);stroke-width:1}
.wk-svg .wk-hatch{fill:#20272a;stroke:var(--dim);stroke-width:1}
.wk-svg .wk-ground{fill:#1a1f21;stroke:var(--dim);stroke-width:1}
.wk-svg .wk-kerb{fill:none;stroke:var(--dim);stroke-width:2}
.wk-svg .wk-tw{fill:#232b2e}
.wk-svg .wk-tw2{fill:#1f2629}
.wk-svg .wk-nb{fill:#191f21}
.wk-svg .wk-nb-l{fill:none;stroke:#4d5856;stroke-width:1}
.wk-svg .wk-fig{fill:var(--dim,#a2aca9)}
.wk-svg .wk-l{fill:none;stroke:var(--dim,#a2aca9);stroke-width:1}
.wk-svg .wk-l2{fill:none;stroke:var(--dim,#a2aca9);stroke-width:2}
.wk-svg .wk-faint{fill:none;stroke:#3f4a4b;stroke-width:1}
.wk-svg .wk-ghost{opacity:.4}
.wk-svg .wk-svc{fill:none;stroke:#77858a;stroke-width:1}
.wk-svg .wk-a{stroke:var(--accent,#f59e0b);fill:none}
.wk-svg .wk-bg{fill:var(--dark,#111416);stroke:none}
.wk-svg .wk-pin{fill:var(--dark,#111416);stroke:var(--accent,#f59e0b);stroke-width:1}
.wk-svg .wk-pin-t{fill:var(--accent,#f59e0b);font-family:var(--mono);font-size:11px}
.wk-svg text{font-family:var(--mono);font-size:11px;fill:var(--dim,#a2aca9)}

/* ── Place / context desk (moved from context.js) ── */
.cx-desk,.cx-desk *{box-sizing:border-box}
.cx-desk{font-size:13px;line-height:1.45;color:var(--ink)}
.cx-head{border-bottom:2px solid var(--ink);padding-bottom:6px;margin:0 0 10px}
.cx-head h2{margin:0;font-size:19px;letter-spacing:.01em}
.cx-head p{margin:3px 0 0;color:var(--muted)}
.cx-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px;font-size:12px}
.cx-cities{display:flex;flex-wrap:wrap;border:1px solid var(--line)}
.cx-cities button{font:inherit;background:transparent;border:0;border-right:1px solid var(--line);padding:6px 11px;min-height:34px;cursor:pointer;color:var(--muted)}
.cx-cities button:last-child{border-right:0}
.cx-cities button[aria-pressed=true]{background:var(--accent);color:var(--dark);font-weight:600}
.cx-input{font:inherit;font-family:var(--mono);padding:4px 6px;border:1px solid var(--line);background:var(--panel);min-height:32px}
.cx-grid{align-items:start;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:960px){.cx-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.cx-card{border:1px solid var(--line);background:var(--panel);padding:10px 12px;margin:0 0 12px}
.cx-card h3{margin:0 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cx-site b{display:block;font-size:16px}
.cx-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0;font-size:12px}
.cx-kv dt{color:var(--muted)}
.cx-kv dd{margin:0;font-family:var(--mono);word-break:break-word}
.cx-note{font-size:11px;line-height:1.5;color:var(--faint);margin:6px 0 0}
.cx-note p{margin:0 0 4px}
.cx-warn{font-size:12px;line-height:1.5;border-left:2px solid var(--accent);padding:2px 0 2px 10px;margin:0 0 8px}
.cx-fig{margin:0}
.cx-fig svg{display:block;width:100%;height:auto;background:var(--dark)}
.cx-legend{display:flex;flex-wrap:wrap;gap:3px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:10.5px;color:var(--muted)}
.cx-legend i{display:inline-block;width:13px;height:9px;margin-right:5px;vertical-align:-1px}
.cx-strips{margin-top:12px}
.cx-strip{display:flex;align-items:center;gap:10px;margin:2px 0}
.cx-strip-holder{width:392px;max-width:62vw}
.cx-strip svg{display:block;width:100%;height:auto;background:var(--dark)}
.cx-strip figcaption{font-family:var(--mono);font-size:10px;color:var(--muted);min-width:104px;text-align:right}
.cx-strips .cx-strip svg{max-width:392px}
table.cx-table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:11.5px}
.cx-table caption{text-align:left;font-family:var(--sans);font-size:11px;color:var(--muted);padding:0 0 4px}
.cx-table th,.cx-table td{border-bottom:1px solid var(--line);padding:3px 5px;text-align:right;white-space:nowrap}
.cx-table th:first-child,.cx-table td:first-child{text-align:left}
.cx-table thead th{border-bottom:2px solid var(--ink);color:var(--muted);font-weight:600}
.cx-table tbody th{font-weight:600;color:var(--ink)}
.cx-hit{color:var(--accent);font-weight:600}
.cx-zero{color:var(--faint)}
.cx-g{stroke:var(--line);fill:none;stroke-width:1}
.cx-axis{stroke:var(--dim);fill:none;stroke-width:1}
.cx-nb{fill:var(--panel);stroke:var(--dim);stroke-width:1}
.cx-nb.hit{fill:var(--accent);fill-opacity:.3;stroke:var(--accent)}
.cx-ref{fill:none;stroke:var(--dim);stroke-width:1;stroke-dasharray:4 3}
.cx-tower{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:2}
.cx-shadow{fill:var(--accent);fill-opacity:.24;stroke:none}
.cx-bar-nb{fill:var(--panel);stroke:var(--dim);stroke-width:1}
.cx-bar-model{fill:var(--accent)}
.cx-t{fill:var(--dim);font-family:var(--mono);font-size:9px}
.cx-t-d{fill:var(--dim);font-family:var(--mono);font-size:10px}
.cx-t-a{fill:var(--accent);font-family:var(--mono);font-size:9.5px;font-weight:600}
.cx-t-n{fill:var(--dim);font-family:var(--mono);font-size:12px;font-weight:700}
.cx-line{stroke:var(--accent);stroke-width:1.5}
.cx-strip-frame{fill:none;stroke:var(--line);stroke-width:1}
.cx-strip-hit{fill:var(--accent)}
.cx-now{stroke:var(--dim);stroke-width:2}
.cx-legend i.cx-shadow{background:rgba(245,158,11,.24)}
.cx-legend i.cx-tower{border:1px solid var(--accent);background:rgba(245,158,11,.16)}
.cx-legend i.cx-nb{border:1px solid var(--muted)}
.cx-legend i.cx-ref{border:1px dashed var(--muted)}

/* ── the city lens ────────────────────────────────────────────────────────
   SEVEN typographic roles and seven distinct sizes: 22 / 15 / 13 / 12 / 11 /
   10 / 9.5. The previous version ran 10 / 11 / 13.5 — three sizes for six
   roles, with a ONE PIXEL step between the source list and the fact values, so
   the eye had nothing to land on and every line arrived at the same volume.
   That is the failure this block is written against, and tests/lens.test.mjs
   now parses these numbers and fails the build if the scale collapses again.

   The drawing carries FILL, not outline, so it has mass and separates from
   the text. An outlined box on a cream page is the same value as the page: a
   picture with no tone in it reads as a second caption.

   The column is still content-width — a fact is as wide as its words. Fixing
   the hierarchy and fixing the air-slop are the same job: weight goes on the
   one thing that matters, and the rest goes tight against it. */
.lx-band{border:1px solid var(--accent);border-left-width:3px;background:var(--panel);padding:14px 18px 13px;margin:0 0 12px;display:block}
/* Role 7 — a label, not a headline. It was 11px uppercase amber, which made it
   compete with the sentence it labels. */
.lx-head h3{margin:0 0 5px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:600}
/* Role 1 — the claim. The only large thing in the band, and the first thing
   read. Nothing else is allowed to be bigger than 15px. */
.lx-head p{margin:0;max-width:50ch;font-size:22px;line-height:1.26;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.lx-body{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:flex-start;margin-top:14px}
.lx-fig{flex:0 0 auto;line-height:0}
.lx-fig svg{display:block;width:420px;height:auto;max-width:100%}
.lx-s{font:9.5px var(--mono);fill:var(--muted)}
/* Labels printed on the dark ground. Muted is #585e5b and disappears on
   #111416 — the same token that reads as "quiet" on cream reads as "missing"
   on soil, so anything inside the earth carries this class instead. */
.lx-on{fill:var(--dim)}
.lx-side{flex:0 1 auto;min-width:0}
.lx-fx{margin:0 0 9px}
/* Role 2 — the proof. */
.lx-fx code{display:block;font:600 15px var(--mono);color:var(--accent);letter-spacing:-.01em;line-height:1.35}
/* Role 3 — what the proof means, in words. */
.lx-fx span{display:block;margin-top:4px;max-width:46ch;font-size:12px;line-height:1.5;color:var(--muted)}
/* Roles 4 and 5 — the numbers lead, the label supports. The value is a full
   step BIGGER than its label, which is the opposite of the old table. */
.lx-rows{display:grid;grid-template-columns:max-content max-content;gap:4px 18px;margin:0;align-items:baseline}
.lx-rows dt{font-size:11px;color:var(--faint);white-space:nowrap}
.lx-rows dd{margin:0;font:600 13px var(--mono);color:var(--ink);white-space:nowrap}
/* Role 6 — provenance. Demoted to the bottom, on a hairline, with no underline
   until the pointer is on it: a field of underlined links reads as content. */
.lx-meta{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.lx-assume{margin:0;font-size:10px;line-height:1.55;color:var(--dim);max-width:96ch}
.lx-band h4{margin:9px 0 3px;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:600}
.lx-src{margin:0;padding:0;list-style:none;font-size:9.5px;line-height:1.6;color:var(--dim)}
.lx-src li{margin:0}
.lx-src a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.lx-src a:hover,.lx-src a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:900px){.lx-body{gap:12px 20px}.lx-fig svg{width:300px}.lx-head p{font-size:19px}.lx-side{max-width:none}}

/* The stand-here desk. Same discipline as the lens band: one drawing, one
   reading order, nothing stretched. The landscape is the drawing and it is
   dark; the numbers sit beside it on the panel, not on top of it. */
.st-head h3{margin:0 0 4px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:600}
.st-head p{margin:0 0 12px;max-width:62ch;font-size:19px;line-height:1.4;color:var(--ink)}
.st-body{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:flex-start;margin:0 0 14px}
.st-fig{flex:0 0 auto;line-height:0}
.st-fig svg{display:block;width:760px;height:auto;max-width:100%}
.st-side{flex:0 1 auto;min-width:0;max-width:340px}
.st-pick{display:block;width:100%;margin:0 0 12px;padding:5px 6px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);font:13px var(--mono)}
.st-rows{margin:0}
.st-rows dt{font-size:11px;color:var(--muted);line-height:1.5}
.st-rows dd{margin:0 0 5px;font:600 13px var(--mono);color:var(--ink);letter-spacing:-.01em}
.st-sky{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start;border-top:1px solid var(--line);padding-top:12px}
.st-sky .st-fig svg{width:420px}
.st-sky p{margin:0;flex:1 1 200px;max-width:40ch;font-size:12px;line-height:1.55;color:var(--muted);align-self:center}
.sx-s{font:9.5px var(--mono);fill:var(--muted)}
.st-source{margin:12px 0 0;font-size:9.5px;line-height:1.6;color:var(--faint)}
.st-warn{border:1px solid var(--accent);border-left-width:3px;padding:10px 14px;margin:0 0 12px}
.st-warn p{margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
@media(max-width:900px){.st-fig svg{width:340px}.st-side{max-width:none}.st-head p{font-size:17px}}