/* Ictineu · la ciudad. The HUD design system (DESIGN.md §15), from Xavi's moodboard of
   2026-10-16: a black ground, white linework and ONE accent the player picks (orange by
   default, the board's own). Shapes from its first sheet: chamfered corners, label tabs, thin
   rules, square bullets, segmented bars. A slow light runs round every dialog and every main
   action. Two signal colours the accent never replaces: YELLOW warns, RED is danger.

   Mobile first, and sized to the platforms' own guidance (Apple HIG, Material 3): reading text
   17 px (iOS body), nothing a player must read under 13 px (11 px only for chart ticks, HIG's
   caption-2 floor), inputs 16 px so iOS never zooms, tap targets 44-48 px.

   Buttons: the action is FILLED with the accent; anything secondary is OUTLINED. Floating
   panels (the sheet, dialogs, the stage bar, toasts, labels over the tower) are glass: a
   translucent fill with the scene blurred behind it.

   The frame: the element is the fill (transparent, glass or accent) cut by a chamfer; its
   ::before is the border, a 1 px ring traced as one even-odd polygon (outer contour, then the
   inner one), so the diagonal corners get their line and the running light follows them. */

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;
  /* the accent: ui.js (applyAccent) writes these from the player's pick */
  --accent: #ff6a1a; --accent-rgb: 255, 106, 26; --accent-hi: #ff6a1a; --on-accent: #0b0b0b; --accent-tint: #3a241b;
  --ground: #07080a;
  --panel: #0d0f12;
  --panel-2: #14171b;
  --edge: #2a2f35;          /* 1 px linework */
  --edge-2: #434a52;        /* lines that have to be seen */
  --ink: #eceff1;
  --ink-dim: #8e979e;       /* 6.4:1 on the panel */
  --ink-faint: #5d656c;     /* decoration and what cannot be used */
  --warn: #ffd23f;
  --hot: #ff3b30;
  --sea: #080c0f;           /* behind the 3D tower; scene3d.js clears to the same */
  --glass: rgba(9, 11, 14, 0.8);           /* darker glass, so what is on it reads (Xavi, 2026-10-17) */
  --glass-hi: rgba(9, 11, 14, 0.88);
  --wash: rgba(255, 255, 255, 0.04);     /* a card on glass: a lift, without a second blur */
  --display: 'Chakra Petch', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* the type scale */
  --fs-tick: 11px; --fs-cap: 13px; --fs-sm: 15px; --fs-ui: 16px; --fs-body: 17px; --fs-lead: 22px; --fs-h2: 26px; --fs-h1: 32px;
  --tap: 44px; --tap-main: 48px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(11, 13, 16, 0.97); --glass-hi: rgba(11, 13, 16, 0.98); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(11, 13, 16, 0.97); --glass-hi: rgba(11, 13, 16, 0.98); }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ground); color: var(--ink);
  font: var(--fs-body)/1.45 var(--body);
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
[hidden] { display: none !important; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── the frame ─────────────────────────────────────────────────────────── */
.card, .dialog, .coach, .spark, .queue, .btn:not(.ghost), .choice, .opt, .fixbtn, .seg button, .stepper button, .res button, .dock .dockturn, .toast, .s3label, .tnode, .iconbtn {
  --cut: 10px; --bw: 1px; --edge-c: var(--edge-2); --fill: transparent;
  border: 0; background: var(--fill);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.card::before, .dialog::before, .coach::before, .spark::before, .queue::before, .btn:not(.ghost)::before, .choice::before, .opt::before, .fixbtn::before, .seg button::before, .stepper button::before, .res button::before, .dock .dockturn::before, .toast::before, .s3label::before, .tnode::before, .iconbtn::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--edge-c);
  clip-path: polygon(evenodd,
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + 0.414 * var(--bw)) var(--bw), var(--bw) calc(var(--cut) + 0.414 * var(--bw)), var(--bw) calc(100% - var(--bw)),
    calc(100% - var(--cut) - 0.414 * var(--bw)) calc(100% - var(--bw)), calc(100% - var(--bw)) calc(100% - var(--cut) - 0.414 * var(--bw)),
    calc(100% - var(--bw)) var(--bw), calc(var(--cut) + 0.414 * var(--bw)) var(--bw));
}
.btn:focus-visible, .choice:focus-visible, .opt:focus-visible, .fixbtn:focus-visible, .seg button:focus-visible, .stepper button:focus-visible, .res button:focus-visible, .dock .dockturn:focus-visible, .queue:focus-visible, .tnode:focus-visible { outline: none; --edge-c: var(--accent-hi); }

/* the light that runs round the border: dialogs and the main actions only */
.dialog::before, .btn.primary::before, .dock .dockturn::before, .fixbtn.lead::before, .opt.go::before {
  background: conic-gradient(from var(--spin), var(--edge-c) 0deg 236deg, rgba(var(--accent-rgb), 0.35) 292deg, var(--glint, var(--accent-hi)) 342deg, var(--edge-c) 359deg);
  animation: run 6.5s linear infinite;
}
@keyframes run { to { --spin: 360deg; } }

/* glass: what floats over the tower lets it show through, blurred */
.sheet, .dialog, .queue, .toast, .s3label, .coach {
  -webkit-backdrop-filter: blur(var(--blur, 14px)) saturate(1.4); backdrop-filter: blur(var(--blur, 14px)) saturate(1.4);
}

/* ── screens ───────────────────────────────────────────────────────────── */
#app { height: 100%; display: flex; flex-direction: column; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* title */
.title-screen {
  justify-content: center; align-items: center; text-align: center; gap: 28px;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(#11161a 0%, var(--ground) 62%);
}
.title-mark { font: 700 clamp(56px, 19vw, 120px)/0.9 var(--display); letter-spacing: 0.05em; color: var(--accent-hi); text-transform: uppercase; }
.title-tag { font: var(--fs-ui)/1.4 var(--mono); color: var(--ink-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; }
.title-tag::before { content: '> '; color: var(--accent-hi); }
.title-actions { display: grid; gap: 12px; width: min(320px, 100%); }
.title-accent { display: grid; gap: 10px; justify-items: center; }
.title-accent .lab { font: var(--fs-cap) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.title-cloud { display: grid; gap: 8px; justify-items: center; margin-top: 4px; }
.title-cloud .note, .title-acct { text-align: center; margin: 0; }
.gsi { min-height: 44px; display: flex; justify-content: center; }
.card.cloud .row2 { display: flex; flex-wrap: wrap; gap: 8px; }
.card.cloud p { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0 2px; color: var(--accent-hi); font: inherit; text-decoration: underline; cursor: pointer; min-height: 24px; }
.title-meta { font: var(--fs-cap) var(--mono); letter-spacing: 0.08em; color: var(--ink-faint); }

/* buttons: FILLED is the action, OUTLINED is secondary, a bare word is the least of all */
.btn {
  --cut: 8px; --edge-c: rgba(var(--accent-rgb), 0.75);
  position: relative; min-height: var(--tap-main); padding: 10px 18px; cursor: pointer; color: var(--accent-hi);
  font: 600 var(--fs-ui)/1.15 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(1px); }
.btn.primary { --fill: var(--accent); --edge-c: rgba(255, 255, 255, 0.22); --glint: #ffffff; color: var(--on-accent); }
.btn.warn { --edge-c: var(--warn); color: var(--warn); }
.btn.ghost { background: transparent; border: 0; color: var(--ink-dim); }
.btn.small { --cut: 6px; min-height: var(--tap); padding: 6px 14px; font-size: var(--fs-sm); }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn.wide { width: 100%; }

/* ── top instruments: the main information, the detail a tap away ─────── */
.top {
  background: var(--panel); border-bottom: 1px solid var(--edge);
  padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 8px;
  display: grid; gap: 8px; position: relative; z-index: 5;
}
.row1 { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.clock { font: 600 var(--fs-ui) var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); flex: 1; white-space: nowrap; }
.clock small { display: block; font: var(--fs-cap) var(--mono); color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
/* the way out and the menu: small filled frames in the accent, always in the same corner */
.iconbtn {
  --cut: 6px; --fill: var(--accent); --edge-c: rgba(255, 255, 255, 0.22);
  position: relative; flex: none; width: var(--tap); height: var(--tap); padding: 0; color: var(--on-accent); cursor: pointer; display: grid; place-items: center;
}
.iconbtn .lu { stroke-width: 2.25; }
.iconbtn:active { transform: translateY(1px); }
.iconbtn:focus-visible { outline: none; --edge-c: #ffffff; }
/* attached to its container's corner: the outer corner is the container's own (square on a header,
   cut by the sheet's chamfer on a sheet, which clips it), the inner corner is cut like every frame */
.iconbtn.corner {
  --ic: 10px; position: absolute; top: 0; right: 0; z-index: 4; width: var(--tap-main); height: var(--tap-main);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ic) 100%, 0 calc(100% - var(--ic)));
}
.iconbtn.corner.left { right: auto; left: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ic)), calc(100% - var(--ic)) 100%, 0 100%); }
.iconbtn.corner::before { display: none; }
.iconbtn.corner:active { transform: none; filter: brightness(1.15); }
.iconbtn.corner:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -7px; }
.top .iconbtn.corner, .yard .yhead .iconbtn.corner { top: env(safe-area-inset-top, 0px); }
.top .row1 { padding-right: 46px; }

/* a resource: a big icon, one figure under it, and how full it is as the tile's right edge: a bar
   that fills from the bottom, its top cut at 45 degrees, parallel to the corner that cuts its foot */
.res { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.res button {
  --cut: 6px; --edge-c: var(--edge); position: relative;
  min-height: 56px; padding: 8px 7px 7px 2px; display: grid; justify-items: center; align-content: center; gap: 5px; cursor: pointer; color: var(--ink);
}
.res .ico { width: 24px; height: 24px; color: var(--accent-hi); }
.res b { font: var(--fs-sm)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.res b:empty { display: none; }
.res .lvl { --w: 5px; position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: var(--w); background: var(--edge); }
.res .lvl i {
  position: absolute; inset: 0; background: var(--accent);
  /* empty is the corner's own line, so a low level is not lost under the chamfer: the fill's top
     runs from that line (f = 0) to the top of the tile (f = 1) */
  clip-path: polygon(0 calc((1 - var(--f, 0)) * (100% + var(--w) - var(--cut))), 100% calc((1 - var(--f, 0)) * (100% + var(--w) - var(--cut)) - var(--w)), 100% 100%, 0 100%);
}
.res button.warn { --edge-c: var(--warn); }
.res button.warn .ico, .res button.warn b { color: var(--warn); }
.res button.warn .lvl { background: rgba(255, 210, 63, 0.25); }
.res button.warn .lvl i { background: var(--warn); }
.res button.crit { --edge-c: var(--hot); --fill: rgba(255, 59, 48, 0.12); }
.res button.crit .ico, .res button.crit b { color: var(--hot); }
.res button.crit .lvl { background: rgba(255, 59, 48, 0.25); }
.res button.crit .lvl i { background: var(--hot); }

/* three bars and their names; the figures are in the sheets */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gauge { display: grid; gap: 6px; align-content: center; min-height: 36px; cursor: pointer; background: none; border: 0; padding: 2px 0; text-align: left; }
.gauge .lab { font: var(--fs-cap)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.gauge .track { position: relative; height: 6px; background: repeating-linear-gradient(90deg, var(--edge-2) 0 4px, transparent 4px 6px); }
.gauge .fill {
  position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 6px);
  clip-path: inset(0 calc(100% - var(--f, 0) * 100%) 0 0); transition: clip-path 0.4s;
}
.gauge .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.gauge.warn .lab { color: var(--warn); }
.gauge.warn .fill { background: repeating-linear-gradient(90deg, var(--warn) 0 4px, transparent 4px 6px); }
.gauge.crit .lab { color: var(--hot); }
.gauge.crit .fill { background: repeating-linear-gradient(90deg, var(--hot) 0 4px, transparent 4px 6px); }

/* ── the tower and the panels' ground ──────────────────────────────────── */
.main { flex: 1; min-height: 0; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
.water { position: relative; min-height: 100%; background: var(--ground); }
.tower { position: relative; padding: 8px 6px 24px; }
.tower svg { display: block; width: 100%; height: auto; overflow: visible; }
.tower .tap { cursor: pointer; }
.tower .ringlab { font-family: var(--display); font-weight: 700; letter-spacing: 0.08em; }
.tower .monotxt { font-family: var(--mono); }
.queue {
  --cut: 8px; --fill: var(--glass); --blur: 12px; position: relative; margin: 0 10px; width: calc(100% - 20px);
  min-height: var(--tap-main); padding: 10px 14px; cursor: pointer; text-align: left;
  font: var(--fs-sm) var(--mono); color: var(--ink-dim); display: flex; gap: 10px; align-items: center;
}
.queue svg { color: var(--accent-hi); flex: none; }
.queue b { color: var(--ink); font-weight: 400; font-size: var(--fs-ui); }
.queue b.warn { color: var(--warn); }
.queue b.crit { color: var(--hot); }
.queue .sep { flex: 1; }
.addring { margin: 10px; }

.toasts { position: absolute; left: 8px; right: 8px; top: 6px; z-index: 4; display: grid; gap: 6px; pointer-events: none; }
.toast {
  --cut: 6px; --fill: var(--glass); --blur: 10px; position: relative;
  justify-self: center; max-width: 100%; padding: 8px 14px; color: var(--ink);
  font: var(--fs-sm)/1.3 var(--mono); animation: toast 4.2s forwards; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast.warn { --edge-c: var(--warn); color: var(--warn); }
.toast.good { --edge-c: rgba(var(--accent-rgb), 0.75); color: var(--accent-hi); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── dock ──────────────────────────────────────────────────────────────── */
.dock {
  display: grid; grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr; background: var(--panel); border-top: 1px solid var(--edge);
  padding: 0 4px env(safe-area-inset-bottom, 0px); position: relative; z-index: 5;
}
.dock button {
  min-height: 58px; background: none; border: 0; color: var(--ink-dim); cursor: pointer; position: relative;
  display: grid; justify-items: center; align-content: center; gap: 4px; font: var(--fs-cap) var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.dock button svg { width: 22px; height: 22px; }
.dock button.on { color: var(--accent-hi); }
.dock button.on::after { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: var(--accent); }
.dock .dot { width: 6px; height: 6px; background: var(--warn); position: absolute; margin-left: 18px; margin-top: -18px; }
/* the turn, in reach of the thumb: the one filled action of the main screen */
.dock .dockturn {
  --cut: 10px; --fill: var(--accent); --edge-c: rgba(255, 255, 255, 0.22); --glint: #ffffff;
  margin: 6px 2px; color: var(--on-accent); gap: 2px; min-height: 52px; padding: 4px 6px;
  font: 700 13px/1.1 var(--display); letter-spacing: 0.04em; text-align: center;
}
.dockturn b { font: 700 16px/1 var(--display); }
.dock .dockturn.running { --fill: transparent; --edge-c: rgba(var(--accent-rgb), 0.75); --glint: var(--accent-hi); color: var(--accent-hi); }
.dock .dockturn[disabled] { opacity: 0.35; cursor: default; }

/* ── panels (people, laws, chronicle) ──────────────────────────────────── */
.panel { padding: 16px 16px 32px; display: grid; gap: 16px; align-content: start; }
.panel h2 { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-h2)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin: 4px 0 0; color: var(--ink); text-wrap: balance; }
.panel h2::before { content: ''; width: 10px; height: 10px; background: var(--accent); flex: none; }
.panel h3, .sheet h3 { display: flex; align-items: center; gap: 8px; font: var(--fs-cap) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin: 6px 0 0; }
.panel h3::before, .sheet h3::before { content: ''; width: 6px; height: 6px; background: var(--accent); flex: none; }
.panel h3::after, .sheet h3::after { content: ''; flex: 1; height: 1px; background: var(--edge); }
.panel p, .note { margin: 0; color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.45; }
.card { --cut: 10px; --fill: var(--wash); --edge-c: var(--edge); position: relative; padding: 14px; display: grid; gap: 12px; }
.hl { font: var(--fs-cap) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-hi); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-ui); }
.kv span { color: var(--ink-dim); }
.kv b { font: var(--fs-ui) var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: var(--fs-cap) var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border: 1px solid rgba(var(--accent-rgb), 0.6); color: var(--accent-hi); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.crit { border-color: var(--hot); color: var(--hot); background: rgba(255, 59, 48, 0.1); }
.chip.dim { border-color: var(--edge-2); color: var(--ink-dim); }
/* the first thing a sheet says: its state in words */
.status { font: 700 var(--fs-lead)/1.2 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.status.warn { color: var(--warn); }
.status.crit { color: var(--hot); }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); }
.switch { width: 56px; height: 32px; border: 1px solid var(--edge-2); background: transparent; position: relative; cursor: pointer; flex: none; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; background: var(--ink-faint); transition: transform 0.2s; }
.switch.on { border-color: var(--accent); background: var(--accent-tint); }
.switch.on::after { transform: translateX(24px); background: var(--accent); }

/* hands: who can work against what is promised */
.hands .kv { align-items: baseline; }
.hands .kv b.num { font: 20px var(--mono); color: var(--accent-hi); }
.hands.warn .kv b.num { color: var(--warn); }
.hands.crit .kv b.num { color: var(--hot); }
.meter { display: flex; height: 6px; background: repeating-linear-gradient(90deg, var(--edge-2) 0 5px, transparent 5px 7px); }
.meter i { display: block; height: 100%; }
.meter i.p { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 7px); }
.meter i.b { background: repeating-linear-gradient(90deg, var(--ink-dim) 0 5px, transparent 5px 7px); }
.hands.crit .meter i.p { background: repeating-linear-gradient(90deg, var(--hot) 0 5px, transparent 5px 7px); }

/* how to fix it: the first fix is the action (filled), the others are alternatives (outlined) */
.fix { --edge-c: rgba(var(--accent-rgb), 0.55); }
.fix .finding { display: grid; gap: 10px; }
.fix .finding + .finding { border-top: 1px solid var(--edge); padding-top: 12px; }
.fix p { margin: 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink); }
.fixbtn {
  --cut: 8px; --edge-c: rgba(var(--accent-rgb), 0.75);
  position: relative; min-height: var(--tap-main); padding: 10px 14px; text-align: left; display: grid; gap: 3px; cursor: pointer; color: var(--accent-hi);
}
.fixbtn b { font: 600 var(--fs-ui)/1.25 var(--display); letter-spacing: 0.02em; }
.fixbtn small { font: var(--fs-cap)/1.35 var(--mono); color: var(--ink-dim); }
.fixbtn.lead { --fill: var(--accent); --edge-c: rgba(255, 255, 255, 0.22); --glint: #ffffff; color: var(--on-accent); }
.fixbtn.lead small { color: var(--on-accent); opacity: 0.78; }

/* the accent picker */
.accents { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.card .accents { justify-content: flex-start; }
.swatch-btn {
  width: var(--tap); height: var(--tap); border: 0; padding: 0; cursor: pointer; background: var(--sw);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.swatch-btn.on { box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 5px var(--ink); }
.swatch-btn.custom {
  width: auto; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); color: var(--ink); font: var(--fs-cap) var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.swatch-btn.custom.on { box-shadow: inset 0 0 0 1px var(--accent-hi); }
.swatch-btn.custom input { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }

.jobs { display: grid; gap: 2px; }
.job { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--edge); min-height: 56px; }
.job:last-child { border-bottom: 0; }
.job .name { display: flex; align-items: center; gap: 10px; font-size: var(--fs-ui); }
.job .name small { display: block; font: var(--fs-cap) var(--mono); color: var(--ink-dim); }
.swatch { width: 10px; height: 10px; flex: none; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { --cut: 6px; --edge-c: rgba(var(--accent-rgb), 0.7); position: relative; width: var(--tap); height: var(--tap); color: var(--accent-hi); font: 22px/1 var(--mono); cursor: pointer; }
.stepper button[disabled] { opacity: 0.3; cursor: default; }
.stepper output { min-width: 48px; text-align: center; font: var(--fs-body) var(--mono); }

.people { display: grid; }
.person { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; min-height: 52px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--edge); background: none; text-align: left; cursor: pointer; color: var(--ink); font-size: var(--fs-body); }
.person small { display: block; font: var(--fs-cap) var(--mono); color: var(--ink-dim); margin-top: 2px; }
.mood { width: 36px; height: 6px; background: var(--edge); overflow: hidden; }
.mood i { display: block; height: 100%; background: var(--accent); }
.mood.warn i { background: var(--warn); }
.sortrow { display: flex; gap: 6px; overflow-x: auto; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.seg button { --cut: 5px; position: relative; min-height: var(--tap); color: var(--ink-dim); font: 600 var(--fs-sm) var(--display); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; padding: 4px; }
.seg button.on { --fill: var(--accent); --edge-c: transparent; color: var(--on-accent); }
.law { display: grid; gap: 10px; }
.law .eff { font-size: var(--fs-sm); color: var(--ink-dim); min-height: 2.8em; }
.law .eff b { color: var(--ink); font-weight: 600; }

/* how it began: the founders' account, folded once the city has a history of its own */
.origin { margin: 12px 0 14px; gap: 10px; }
.origin summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.origin summary::-webkit-details-marker { display: none; }
.origin summary::after { content: '+'; font: 700 16px var(--mono); color: var(--accent-hi); }
.origin[open] summary::after { content: '–'; }
.origin p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); max-width: 62ch; }
.origin p:last-child { color: var(--ink-dim); }
.log { display: grid; gap: 0; }
.log .yh { display: flex; align-items: center; gap: 8px; font: 700 var(--fs-ui) var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hi); margin: 18px 0 4px; }
.log .yh .mono { font: var(--fs-cap) var(--mono); color: var(--ink-dim); letter-spacing: 0.02em; text-transform: none; }
.log .e { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--edge); font-size: var(--fs-sm); }
.log .e time { font: var(--fs-cap) var(--mono); color: var(--ink-faint); padding-top: 2px; }
.log .e.warn { color: var(--warn); }

.bars { display: grid; gap: 8px; }
.skill { display: grid; grid-template-columns: 104px 1fr 38px; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.skill .track { height: 6px; background: var(--edge); overflow: hidden; }
.skill .track i { display: block; height: 100%; background: var(--ink-faint); }
.skill.top .track i { background: var(--accent); }
.skill.warn .track i { background: var(--warn); }
.skill.crit .track i { background: var(--hot); }
.skill b { font: var(--fs-cap) var(--mono); font-weight: 400; text-align: right; color: var(--ink-dim); }

/* ── the sheet: glass, top corners cut, its own scroller ────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 20; }
.sheet {
  --cut: 14px; --bw: 1px; --edge-c: var(--edge-2); --blur: 18px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 78%;
  display: flex; flex-direction: column; overflow: hidden; background: var(--glass);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
  transform: translateY(102%); transition: transform 0.22s ease-out;
}
.sheet::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--edge-c);
  clip-path: polygon(evenodd,
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + 0.414 * var(--bw)) var(--bw), var(--bw) calc(var(--cut) + 0.414 * var(--bw)), var(--bw) 100%,
    calc(100% - var(--bw)) 100%, calc(100% - var(--bw)) calc(var(--cut) + 0.414 * var(--bw)), calc(100% - var(--cut) - 0.414 * var(--bw)) var(--bw),
    calc(var(--cut) + 0.414 * var(--bw)) var(--bw));
}
.sheet.open { transform: none; }
.sheet-in { overflow-y: auto; min-height: 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.sheet .grab { width: 44px; height: 4px; background: var(--accent); margin: 4px auto 12px; }
.sheet .head { display: flex; align-items: flex-start; gap: 10px; padding-right: 40px; }
.sheet .head h2 { flex: 1; margin: 0; font: 700 var(--fs-h2)/1.05 var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.sheet .head h2 small { display: block; font: var(--fs-sm) var(--mono); color: var(--ink-dim); letter-spacing: 0.02em; text-transform: none; margin-top: 6px; }
.sheet .body { display: grid; gap: 14px; margin-top: 14px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice {
  --cut: 8px; --fill: var(--wash); --edge-c: var(--edge-2);
  position: relative; min-height: 68px; color: var(--ink); padding: 10px 12px; text-align: left; cursor: pointer; display: grid; gap: 3px; align-content: start;
}
.choice b { font: 600 var(--fs-ui)/1.2 var(--display); letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; }
.choice small { font: var(--fs-cap)/1.35 var(--mono); color: var(--ink-dim); }
.choice small.need { color: var(--accent-hi); }
.choice small.why { color: var(--warn); }
.choice.on { --edge-c: var(--accent); }
/* not available: still readable, so the player learns what it takes */
.choice[disabled] { cursor: default; --fill: transparent; --edge-c: var(--edge); }
.choice[disabled] b { color: var(--ink-dim); }
.choice[disabled] small.need { color: var(--ink-faint); }

/* ── dialogs: decisions, alerts, the winter report, the end ───────────── */
.overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.42);
  display: grid; place-items: center; overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.dialog {
  --cut: 14px; --edge-c: var(--edge-2); --fill: var(--glass-hi); --blur: 18px; --sig: var(--accent);
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; color: var(--ink);
  animation: dlgIn 0.22s ease-out;
}
@supports (height: 100dvh) { .dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } }
@keyframes dlgIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialog .dlg-in { overflow-y: auto; min-height: 0; display: grid; gap: 14px; padding: 18px 16px 16px; }
/* the kicker: a filled tab cut at 45°; on a notice the same slant goes on in whole
   parallelograms; then a rule, or the date */
.dialog .kicker { --kh: 24px; display: flex; align-items: center; gap: 10px; min-height: var(--kh); font: var(--fs-cap) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.dialog .kicker > span:first-child {
  flex: none; height: var(--kh); display: inline-flex; align-items: center;
  background: var(--sig); color: var(--on-accent); font: 700 var(--fs-cap)/1 var(--display); letter-spacing: 0.1em;
  padding: 0 calc(var(--kh) + 4px) 0 9px; clip-path: polygon(0 0, 100% 0, calc(100% - var(--kh)) 100%, 0 100%);
}
.dialog .kicker::after { content: ''; flex: 1; height: 1px; margin-left: calc(-2px - var(--kh) / 2); background: var(--edge-2); order: 1; }
.dialog .kicker > .chip { order: 2; }
.dialog .kicker > .mono { order: 3; letter-spacing: 0.04em; }
.dialog.warn { --glint: var(--warn); --sig: var(--warn); }
.dialog.hot { --glint: var(--hot); --sig: var(--hot); }
.dialog.warn .kicker > span:first-child { color: #121212; }
.dialog.hot .kicker > span:first-child { color: #ffffff; }
/* skewed -45° about its bottom-left corner, upright bars take the tab's own slant; `space` lays
   only whole bars, so neither end is cut square; the band starts 6 px past the tab's edge (the
   same gap as between bars) and keeps clear on the right the --kh its top leans out by */
.dialog.warn .kicker::after, .dialog.hot .kicker::after {
  align-self: stretch; height: auto; margin: 0 var(--kh) 0 calc(-4px - var(--kh));
  transform: skewX(-45deg); transform-origin: 0 100%;
  background: linear-gradient(90deg, var(--sig) 0 9px, transparent 9px) 0 0 / 15px 100% space no-repeat;
}
.dialog h2 { margin: 0; font: 700 var(--fs-h1)/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.dialog p { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.dialog .okline { font: 700 var(--fs-ui) var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-hi); }
.dialog .who, .dialog .sub { margin: 0; font: var(--fs-sm)/1.45 var(--mono); color: var(--ink-dim); }
.dialog .opts { display: grid; gap: 8px; }
.dialog .opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a decision's options are equal choices (neutral outline); a notice's look is secondary (accent outline); its carry-on, when it is the action, is filled */
.dialog .opt {
  --cut: 8px; --edge-c: var(--edge-2);
  position: relative; min-height: 58px; text-align: left; padding: 10px 14px; cursor: pointer; color: var(--ink); display: grid; gap: 4px; align-content: center;
}
.dialog .opt b { font: 600 var(--fs-body) var(--display); letter-spacing: 0.03em; display: flex; align-items: center; gap: 8px; }
.dialog .opt small { font: var(--fs-sm)/1.4 var(--body); color: var(--ink-dim); }
.dialog .opt .p { font: var(--fs-sm) var(--mono); color: var(--accent-hi); }
.dialog .opt[disabled] { cursor: default; --edge-c: var(--edge); }
.dialog .opt[disabled] b { color: var(--ink-dim); }
.dialog .opt[disabled] small { color: var(--warn); }
.dialog .opt.alt { --edge-c: rgba(var(--accent-rgb), 0.75); color: var(--accent-hi); }
.dialog .opt.go { --fill: var(--accent); --edge-c: rgba(255, 255, 255, 0.22); --glint: #ffffff; color: var(--on-accent); }
.dialog .sig { font: var(--fs-cap) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); text-align: right; border-top: 1px solid var(--edge); padding-top: 10px; }

/* the winter report: the year at a glance, then the names */
.dialog.report { width: min(600px, 100%); }
.report .dlg-in { padding-bottom: 0; }
.sparks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.spark { --cut: 6px; --fill: var(--wash); --edge-c: var(--edge); position: relative; margin: 0; display: grid; gap: 8px; align-content: start; padding: 12px 10px 10px; min-width: 0; }
.spark.wide { grid-column: 1 / -1; }
.spark figcaption { display: grid; gap: 3px; }
.spark .lab { font: var(--fs-cap) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.spark .lab::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.spark .val { font: 600 26px/1.05 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.spark .val small { display: block; font: var(--fs-cap)/1.35 var(--mono); color: var(--ink-dim); margin-top: 3px; }
.spark .val small.warn { color: var(--warn); }
.spark .val small.crit { color: var(--hot); }
.spark .plot { position: relative; height: 62px; margin-right: 28px; background: linear-gradient(var(--edge) 1px, transparent 1px) 0 0 / 100% 25%; }
.spark.wide .plot { height: 80px; }
.spark .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-linecap: square; }
.sl.dash { stroke-dasharray: 4 3; stroke-width: 1.4; }
.sl.base { color: var(--edge-2); stroke-width: 1; }
.sl.guide { color: var(--ink-dim); stroke-width: 1; stroke-dasharray: 2 3; }
.spark .yl { position: absolute; left: calc(100% + 5px); transform: translateY(-50%); font: var(--fs-tick)/1 var(--mono); color: var(--ink-dim); white-space: nowrap; }
.spark .dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: currentColor; }
.spark .xax { display: flex; justify-content: space-between; gap: 8px; margin-right: 28px; font: var(--fs-tick) var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); }
.spark .key { display: flex; flex-wrap: wrap; gap: 4px 12px; font: var(--fs-cap) var(--mono); color: var(--ink-dim); }
.spark .key i { display: inline-block; width: 14px; border-top: 2px solid currentColor; vertical-align: middle; margin-right: 5px; }
.spark .key i.d { border-top-style: dashed; }
.k-acc { color: var(--accent-hi); } .k-ink { color: var(--ink); } .k-dim { color: var(--ink-dim); } .k-faint { color: var(--ink-faint); }
.facts { display: grid; }
.facts .kv { padding: 10px 0; border-bottom: 1px solid var(--edge); align-items: baseline; }
.facts .kv span { flex: none; font: var(--fs-cap) var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.facts .kv b { font: 400 var(--fs-sm)/1.45 var(--body); color: var(--ink); }
.report .foot { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 12px 16px 16px; background: var(--panel); border-top: 1px solid var(--edge); display: grid; gap: 8px; }
.report .foot .sig { border: 0; padding: 0; }

/* ── shipyard ──────────────────────────────────────────────────────────── */
.yard .yhead { position: relative; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 64px; display: flex; align-items: center; gap: 10px; background: var(--panel); border-bottom: 1px solid var(--edge); }
.yard .yhead h1 { margin: 0; flex: 1; font: 700 var(--fs-h2)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.yard .yhead h1::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 10px; vertical-align: 2px; }
.yard .yhead h1 small { display: block; font: var(--fs-cap) var(--mono); color: var(--ink-dim); letter-spacing: 0.02em; text-transform: none; margin-top: 5px; }
.budget { display: grid; gap: 6px; }
.budget .track { height: 6px; background: repeating-linear-gradient(90deg, var(--edge-2) 0 5px, transparent 5px 7px); overflow: hidden; }
.budget .fill { height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 7px); }
.budget.over .fill { background: repeating-linear-gradient(90deg, var(--hot) 0 5px, transparent 5px 7px); }
.verdict { display: flex; align-items: center; gap: 12px; }
.verdict b { font: 700 var(--fs-h2)/1 var(--display); letter-spacing: 0.06em; }
.verdict .note { font-size: var(--fs-sm); }
.verdict.viable b { color: var(--accent-hi); } .verdict.tight b { color: var(--warn); } .verdict.doomed b, .verdict.budget b { color: var(--hot); } .verdict.empty b { color: var(--ink-dim); }
.lines { display: grid; gap: 10px; }
.lineb { display: grid; grid-template-columns: 76px 1fr 56px; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.lineb .track { height: 8px; background: var(--edge); position: relative; overflow: visible; }
.lineb .track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.lineb .track::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-dim); }
.lineb.tight .track i { background: var(--warn); } .lineb.bad .track i { background: var(--hot); }
.lineb.worst span { color: var(--hot); font-weight: 600; }
.lineb b { font: var(--fs-sm) var(--mono); font-weight: 400; text-align: right; }
.lineb small { grid-column: 2 / 4; font: var(--fs-cap) var(--mono); color: var(--ink-faint); margin-top: -4px; }
.field { display: grid; gap: 8px; }
.field input[type=text] { min-height: var(--tap-main); border: 1px solid var(--edge-2); border-radius: 0; background: var(--panel-2); color: var(--ink); padding: 8px 12px; font: 16px var(--body); }
.field input[type=range] { width: 100%; accent-color: var(--accent); min-height: 36px; }
.field .lab { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-dim); }
.field .lab b { color: var(--ink); font: var(--fs-sm) var(--mono); font-weight: 400; }
.yfoot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--edge); display: grid; gap: 8px; }

/* ── coach marks ───────────────────────────────────────────────────────── */
.coach { --cut: 10px; --edge-c: rgba(var(--accent-rgb), 0.75); --fill: var(--glass-hi); --blur: 12px; position: fixed; left: 12px; right: 12px; z-index: 30; padding: 14px; display: grid; gap: 12px; }
.coach p { margin: 0; font-size: var(--fs-body); }
.coach .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coach .step { font: var(--fs-cap) var(--mono); letter-spacing: 0.06em; color: var(--ink-dim); }

@media (min-width: 760px) {
  .tower { max-width: 720px; margin: 0 auto; }
  .panel { max-width: 640px; margin: 0 auto; width: 100%; }
  .sheet { max-width: 560px; margin: 0 auto; }
  .coach { max-width: 480px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .gauge .fill { transition: none; }
  .dialog, .toast, .dialog::before, .btn.primary::before, .dock .dockturn::before, .fixbtn.lead::before, .opt.go::before { animation: none; }
}

/* ── the 3D stage (scene3d.js) ─────────────────────────────────────────── */
.main.towermode { overflow: hidden; }
.stage { position: absolute; inset: 0; display: none; background: var(--sea); }
.main.towermode .stage { display: block; }
.main.towermode #panelwrap { display: none; }
.stage canvas.s3canvas, .ystage canvas.s3canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.s3over { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.s3label {
  --cut: 6px; --fill: rgba(7, 8, 10, 0.55); --edge-c: rgba(255, 255, 255, 0.18); --blur: 8px;
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; text-align: left;
  padding: 6px 10px; display: grid; gap: 3px; font: 700 var(--fs-sm)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
}
.s3label small { font: var(--fs-cap)/1.2 var(--mono); color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.s3label small:empty { display: none; }
.s3label em { font: var(--fs-cap)/1.2 var(--mono); font-style: normal; letter-spacing: 0.04em; }
.s3chip { position: absolute; left: 0; top: 0; font: var(--fs-cap) var(--mono); color: var(--ink); background: rgba(7, 8, 10, 0.82); border: 1px solid rgba(var(--accent-rgb), 0.6); padding: 3px 8px; }
.s3num { position: absolute; left: 0; top: 0; font: var(--fs-sm) var(--mono); color: var(--ink-dim); text-shadow: 0 1px 2px #000; }
.s3num.on { color: var(--accent-hi); }
.stagebar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: none; gap: 6px; z-index: 3; pointer-events: none; }
.main.towermode .stagebar { display: grid; }
.stagebar > * { pointer-events: auto; }
.stagebar .queue { margin: 0; width: 100%; }
.stagebar .addring { margin: 0; display: flex; align-items: center; gap: 8px; }
.ystage { height: min(52vh, 340px); position: relative; overflow: hidden; border: 1px solid var(--edge); background: var(--sea); }
/* icons: Lucide, one stroke for all, in the accent where they mark something to touch */
.lu { flex: none; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.choice b .lu, .job .name .lu, .sheet .head h2 .lu, .person .src .lu { color: var(--accent-hi); }
.person .src { display: flex; align-items: center; gap: 12px; min-width: 0; }
.choice[disabled] b .lu { color: var(--ink-faint); }
.sheet .head h2 .lu { vertical-align: -3px; margin-right: 8px; }
.dock button .lu { width: 22px; height: 22px; }
/* the family tree: one spine at 16 px, from the parents down through the person to the children */
.tree { gap: 0; }
.tree .hl { margin-bottom: 12px; }
.trow { position: relative; display: flex; align-items: center; }
.trow.up { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 16px; }
.trow.up::after { content: ''; position: absolute; left: 16px; bottom: 0; width: 1px; height: 16px; background: var(--edge-2); }
.tlab { font: var(--fs-cap) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.tpair { display: flex; flex-wrap: wrap; gap: 8px; }
.tnote { font-size: var(--fs-sm); color: var(--ink-dim); }
.tie { flex: none; width: 18px; height: 6px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.tkids { position: relative; display: grid; gap: 8px; margin-left: 16px; padding-top: 14px; }
.tkid { position: relative; padding-left: 18px; }
.tkid::before { content: ''; position: absolute; left: 0; top: -8px; bottom: 0; width: 1px; background: var(--edge-2); }
.tkid:first-child::before { top: -14px; }
.tkid:last-child::before { bottom: 50%; }
.tkid::after { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--edge-2); }
.tnode {
  --cut: 6px; --edge-c: var(--edge-2); --fill: var(--wash);
  position: relative; display: inline-grid; gap: 2px; align-content: center; min-height: var(--tap); padding: 6px 12px; text-align: left; color: var(--ink); cursor: pointer;
}
.tnode b { font: 600 var(--fs-ui)/1.2 var(--display); letter-spacing: 0.02em; }
.tnode small { font: var(--fs-cap) var(--mono); color: var(--ink-dim); }
.tnode.self { --edge-c: var(--accent); --fill: var(--accent-tint); cursor: default; }
.tnode.self b { color: var(--accent-hi); }
.tnode.dead { --edge-c: var(--edge); --fill: transparent; cursor: default; }
.tnode.dead b, .tnode.dead small { color: var(--ink-faint); }
.tnode.none { --edge-c: var(--edge); --fill: transparent; color: var(--ink-faint); cursor: default; padding: 6px 16px; }
/* the school's chooser: nine choices in three columns */
.seg.pick { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.duo { min-width: 9.5rem; }                          /* a switch: two choices beside a label */
.card.sound .kv { align-items: center; }
.seg.pick button { font-size: var(--fs-cap); text-transform: none; letter-spacing: 0.02em; }