:root {
  --void: #09090b;
  --panel: #111114;
  --panel-2: #17171b;
  --line: #2d3442;
  --line-soft: rgba(45, 52, 66, .55);
  --ink: #dcd6cd;
  --ink-2: #aaa59b;
  --ink-3: #8b929e;
  --gold: #d4af37;
  --gold-dim: #8a7328;
  --gold-soft: rgba(212, 175, 55, .14);
  --cinnabar: #a63d40;
  --jade: #3b7a57;
  --lapis: #2f5d8a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --radius: 6px;
  --ground: url("/ground.svg");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--void); color: var(--ink);
  font: 14px/1.5 var(--serif);
  display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
  position: relative;
}
/* The desk (court-bar.js + court-terminal.js) is fixed to the bottom of the
   viewport and cannot reserve its own scroll room from outside the document
   flow, so it hands its real, measured height up through these two custom
   properties and this is the ONE place body padding is set from them. Each
   piece owns its own variable and nothing else may declare body's
   padding-bottom — two rules on the same selector is a coin flip on load
   order, which is exactly the bug this replaces. */
:root { --bar-h: 0px; --term-h: 0px; }
body { padding-bottom: calc(var(--bar-h) + var(--term-h)); }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--gold); }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ground) center 34% / 150vmax auto no-repeat;
  opacity: .028;
}

/* ---------- sign-in gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 50; background: var(--void);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
#gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ground) center / 90vmin auto no-repeat; opacity: .05;
}
.gate-card {
  position: relative; width: min(420px, 100%); border: 1px solid var(--line);
  background: var(--panel); border-radius: var(--radius); padding: 28px 26px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gate-seal { text-align: center; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 4px; }
.gate-title { text-align: center; font: 500 1.3rem var(--serif); letter-spacing: .08em; color: var(--gold); margin: 0 0 2px; }
.gate-sub { text-align: center; font-size: 12px; color: var(--ink-3); margin: 0 0 22px; font-style: italic; }
.gate-field { margin-bottom: 14px; }
.gate-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 5px; }
.gate-field input {
  width: 100%; background: var(--void); border: 1px solid var(--line); color: var(--ink);
  padding: 9px 10px; border-radius: 4px; font-family: var(--mono); font-size: 13px;
}
.role-row { display: flex; gap: 6px; margin-bottom: 14px; }
.role-btn {
  flex: 1; min-width: 0; background: var(--void); border: 1px solid var(--line); color: var(--ink-2);
  padding: 10px 4px; border-radius: 4px; cursor: pointer; font-size: 11px; text-align: center;
  transition: border-color .15s, color .15s, background .15s;
}
.role-btn strong { display: block; font-family: var(--serif); font-size: 13px; color: inherit; margin-bottom: 2px; }
.role-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.gate-remember { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
.gate-enter {
  width: 100%; background: var(--gold); border: none; color: #1a1508; font-weight: 600;
  padding: 11px; border-radius: 4px; cursor: pointer; letter-spacing: .04em; font-size: 13px;
  text-transform: uppercase;
}
.gate-enter:hover { background: #e0c05a; }
.gate-enter:disabled { opacity: .5; cursor: not-allowed; }
.gate-note { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: 12px; line-height: 1.5; }
.gate-error { font-size: 12px; color: var(--cinnabar); text-align: center; min-height: 16px; margin-top: 8px; }
.gate-skip { display: block; width: 100%; text-align: center; margin-top: 10px; font-size: 11.5px; color: var(--ink-3); background: none; border: none; cursor: pointer; text-decoration: underline; }

/* ---------- court shell ---------- */
/* This has to be height, not min-height. A grid's 1fr row only distributes
   real remaining space when the container's own height is definite; with
   only a floor, the browser sizes the row to its content instead, so the
   card kept its natural height and quietly overflowed past the stage's own
   (correctly shrunk) box — invisible in the numbers, still covered on
   screen. A definite height, reserving --bar-h/--term-h the desk reports,
   is what makes align-items:stretch actually bind the card to the room
   that's left, so its own overflow-y:auto takes the rest as a scrollbar
   instead of the fixed desk taking it as an occlusion. */
.court { position: relative; z-index: 1; height: calc(100dvh - var(--bar-h, 0px) - var(--term-h, 0px)); min-height: 0; display: grid; grid-template-rows: auto 1fr auto; }

header.tabs {
  display: flex; border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 5; overflow-x: auto;
}
.brand {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); border-right: 1px solid var(--line);
}
.brand .seal-mark { width: 16px; height: 16px; border: 1px solid var(--gold-dim); border-radius: 50%; display: inline-block; position: relative; }
.brand .seal-mark::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--gold-dim); border-radius: 50%; }
.tab {
  flex: 1; min-width: 84px; background: none; border: none; border-right: 1px solid var(--line-soft);
  color: var(--ink-3); padding: 12px 6px 10px; cursor: pointer; font-family: var(--serif); font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; position: relative; transition: color .15s;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--gold); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 2px; background: var(--gold); }
.session-badge { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.session-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.session-badge.live .dot { background: var(--jade); box-shadow: 0 0 6px var(--jade); }
.session-badge.err .dot { background: var(--cinnabar); box-shadow: 0 0 6px var(--cinnabar); }
.session-badge button { background: none; border: none; color: var(--ink-3); text-decoration: underline; cursor: pointer; font-size: 11px; }

/* ---------- stage ---------- */
.stage {
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: stretch; min-height: 0; padding: 18px 10px;
  gap: 4px;
}
.pager { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pager button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--gold); font-size: 16px; cursor: pointer;
}
.pager button:disabled { opacity: .25; cursor: default; }
.pager .pager-label {
  background: none; border: none; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* min-height:0 overrides the automatic minimum size every grid/flex item
   gets by default (floor = its content's natural height, regardless of
   align-items:stretch) — without it .card-wrap silently refuses to shrink
   below the card's full content height and the stretch above is a no-op. */
.card-wrap { min-width: 0; min-height: 0; display: flex; justify-content: center; }
.card {
  position: relative; width: 100%; max-width: 560px; border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: -10% -30%; pointer-events: none; z-index: 0;
  background: var(--ground) center 40% / 150% auto no-repeat; opacity: .04;
}
.card.vizier::before { opacity: .08; background-size: 118% auto; background-position: center 28%; }
.card-head, .card-body { position: relative; z-index: 1; }
.card-head {
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 14px; align-items: flex-start;
}
.card-body { padding: 14px 18px 18px; overflow-y: auto; }

.portrait {
  flex: none; width: 84px; height: 126px; border: 1px solid var(--gold-dim); border-radius: 3px;
  background: var(--void); position: relative; overflow: hidden;
}
.card.vizier .portrait { width: 150px; height: 225px; margin: 4px auto 0; }
.portrait svg { width: 100%; height: 100%; display: block; }
.head-text { min-width: 0; flex: 1; }
.head-title { font-size: 16px; color: var(--gold); margin: 0 0 2px; letter-spacing: .02em; }
.head-sub { font-size: 12px; color: var(--ink-2); margin: 0 0 6px; }
.head-canon { font-size: 12px; color: var(--ink-3); font-style: italic; line-height: 1.5; margin: 0; }
.badge {
  display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--gold-dim); color: var(--gold-dim); padding: 1px 6px; border-radius: 3px; margin-top: 5px;
}
.badge.empty { border-color: var(--cinnabar); color: var(--cinnabar); }
.badge.filled { border-color: var(--jade); color: var(--jade); }

.mandate { font-size: 13px; line-height: 1.65; color: var(--ink); margin: 0 0 12px; }
.reading { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); font-style: italic; margin: 0 0 14px; border-left: 2px solid var(--gold-dim); padding-left: 10px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.stat {
  border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; background: var(--void);
}
.stat-name { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gold-dim); display: flex; justify-content: space-between; }
.stat-val { font-family: var(--mono); }
.stat-bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.stat-bar > i { display: block; height: 100%; background: var(--gold); }
.stat-gov { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

.mantle-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.chip { font-size: 11px; border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; color: var(--ink-2); }
.chip.gold { border-color: var(--gold-dim); color: var(--gold); }

/* seat footer under-arrow labels */
.underarrow { text-align: center; }

/* ---------- vizier tab console ---------- */
.vizier-panel { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.vizier-panel textarea {
  width: 100%; min-height: 64px; background: var(--void); border: 1px solid var(--line); color: var(--ink);
  border-radius: 4px; padding: 8px 10px; font-family: var(--serif); font-size: 13px; resize: vertical;
}
.vizier-panel .row { display: flex; gap: 8px; margin-top: 8px; }
.btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); padding: 7px 14px;
  border-radius: 4px; cursor: pointer; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1508; font-weight: 600; }
.btn.gold:hover { background: #e0c05a; }
.counsel-out {
  margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--void);
  font-size: 13px; line-height: 1.6; white-space: pre-wrap;
}
.counsel-meta { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }

/* ---------- tables tab ---------- */
.tables-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.phase-card { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; background: var(--void); }
.phase-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.phase-glyph { font-size: 18px; }
.phase-name { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.phase-domain { font-size: 11px; color: var(--ink-3); margin: 0 0 8px; }
.phase-empty { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.matter-row { font-size: 12.5px; padding: 5px 0; border-top: 1px dashed var(--line-soft); }
.matter-row:first-of-type { border-top: none; }
.matter-name { color: var(--ink); }
.matter-abstract { color: var(--ink-3); }

/* ---------- chairs tab ---------- */
.chairs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.chair { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--void); }
.chair-role { font-size: 9.5px; text-transform: uppercase; color: var(--gold-dim); letter-spacing: .07em; }
.chair-title { font-size: 13.5px; margin: 3px 0; }
.chair-seat { font-size: 11px; color: var(--ink-3); }
.chair-bindings { margin-top: 6px; font-size: 10.5px; color: var(--ink-2); }
.chair-vacant { font-size: 11.5px; color: var(--ink-3); font-style: italic; }

/* ---------- floor tab ---------- */
.floor-empty { text-align: center; padding: 30px 10px; color: var(--ink-3); font-style: italic; font-size: 13px; }
.floor-q { font-size: 14px; color: var(--gold); margin-bottom: 8px; }
.floor-block { margin-bottom: 14px; }
.floor-label { font-size: 10.5px; text-transform: uppercase; color: var(--gold-dim); letter-spacing: .07em; margin-bottom: 4px; }
.floor-text { font-size: 13px; line-height: 1.6; }

/* ---------- overlays (goals / tasks) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(9,9,11,.72); display: flex;
  align-items: flex-end; justify-content: center;
}
.overlay-sheet {
  width: min(560px, 100%); max-height: 72vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 20px 20px 24px;
}
.overlay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.overlay-head h2 { font-size: 15px; color: var(--gold); margin: 0; letter-spacing: .04em; text-transform: uppercase; }
.overlay-close { background: none; border: none; color: var(--ink-3); font-size: 20px; cursor: pointer; line-height: 1; }
.overlay-empty { color: var(--ink-3); font-style: italic; font-size: 12.5px; }

/* ---------- workshop panel ---------- */
.workshop { border: 1px dashed var(--line); border-radius: 4px; padding: 10px 12px; margin-top: 14px; }
.workshop-head { display: flex; justify-content: space-between; align-items: baseline; }
.workshop-head h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gold-dim); margin: 0; }
.workshop-flag { font-size: 10px; color: var(--ink-3); }
.workshop textarea {
  width: 100%; min-height: 54px; margin-top: 8px; background: var(--void); border: 1px solid var(--line);
  color: var(--ink); border-radius: 4px; padding: 7px 9px; font-family: var(--mono); font-size: 12px; resize: vertical;
}

/* ---------- footer: council + console ---------- */
footer.floorbar { border-top: 1px solid var(--line); background: var(--panel); position: relative; z-index: 1; }
footer.floorbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--ground) 96% 50% / 54% auto no-repeat; opacity: .03;
}
.floorbar > * { position: relative; z-index: 1; }
.council-row { display: flex; gap: 8px; padding: 10px 12px 0; }
.council-row input { flex: 1; background: var(--void); border: 1px solid var(--line); color: var(--ink); border-radius: 4px; padding: 8px 10px; font-size: 13px; }
#council-btn { position: relative; }
#council-btn .seal-ring::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: var(--ground) center / contain no-repeat; opacity: .25;
}
.console {
  height: 108px; overflow-y: auto; margin: 8px 12px 10px; padding: 8px 10px; background: var(--void);
  border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
}
.console .line { white-space: pre-wrap; word-break: break-word; }
.console .line.sys { color: var(--ink-3); }
.console .line.ok { color: var(--jade); }
.console .line.err { color: var(--cinnabar); }
.console .line.ans { color: var(--ink); }

/* ---------- the hall: all twelve chambers, one line each ---------- */
.hall { display: grid; gap: 6px; }
.hall-row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  text-align: left; background: var(--void); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px; cursor: pointer; color: inherit; font: inherit;
}
.hall-row:hover { border-color: var(--gold-dim); }
.hall-row.seated { border-left: 2px solid var(--jade); }
.hall-glyph { font-size: 17px; color: var(--gold); text-align: center; }
.hall-mid { min-width: 0; display: grid; gap: 1px; }
.hall-title { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hall-title i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.hall-line { font-size: 11.5px; color: var(--ink-3); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hall-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.hall-row.seated .hall-badge { color: var(--jade); }

/* ---------- the back link out of a chamber, and the thread held there ---------- */
.back-row {
  display: inline-block; background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-3); font-size: 11px; letter-spacing: .04em; padding: 5px 10px; margin-bottom: 12px;
  cursor: pointer; font-family: inherit;
}
.back-row:hover { color: var(--gold); border-color: var(--gold-dim); }
.stall-thread { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.t-entry.said { color: var(--gold, #c6a04a); }
.t-who { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.t-entry.said .t-who { color: var(--gold-dim); }
.t-meta { text-transform: none; letter-spacing: 0; opacity: .7; }
.t-text { font-size: 13px; line-height: 1.55; margin-top: 2px; white-space: pre-wrap; }
.t-entry.failed .t-text { color: var(--cinnabar); opacity: .85; }

@media (max-width: 520px) {
  .stage { grid-template-columns: 44px 1fr 44px; padding: 12px 4px; }
  .pager button { width: 32px; height: 32px; font-size: 14px; }
  .card-head { flex-direction: column; align-items: center; text-align: center; }
  .portrait { width: 110px; height: 165px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .tab { font-size: 10px; min-width: 54px; padding: 11px 2px 9px; letter-spacing: 0; }
  .hall-row { grid-template-columns: 28px 1fr auto; gap: 8px; }
}