/* ==========================================================
   Dais Console · control panel (on the dais laptop)
   Ash ground, ink text. Bronze = the instrument. Ember = stop / danger.
   ========================================================== */
:root {
  --ash: #E3E1DC; --vellum: #F6F5F2; --paper: #FFFFFF;
  --ink: #24212B; --smoke: #615D67; --rule: #C9C5BD; --stone: #B8B3AA;
  --verdigris: #2C6E61; --verdigris-wash: #D8E7E2;
  --ember: #A0352A; --ember-wash: #F2DEDA;
  --bronze: #85632A; --bronze-wash: #EDE3CF;
  --amber: #A86A00; --amber-wash: #F6E6C4;
  --pros: #A4502F; --pros-wash: #F3E0D6;
  --def: #2F5F8A; --def-wash: #DCE7F2;
  --jury: #85632A; --jury-wash: #EDE3CF;
}
html, body { height: 100%; }
body { margin: 0; background: var(--ash); color: var(--ink); font: 15px/1.45 var(--text); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.booting { padding: 4rem; text-align: center; color: var(--smoke); }
.dim { color: var(--smoke); }
.small { font-size: 0.85em; }
.hint { color: var(--smoke); font-size: 0.9rem; }
.err { color: var(--ember); font-weight: 700; }
.lbl { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--smoke); font-weight: 700; }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); font-weight: 700; }
kbd { font: 700 0.72em/1 var(--text); padding: 0.2em 0.4em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: var(--paper); color: var(--smoke); }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.45em 0.85em; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--vellum); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--smoke); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn kbd { margin-left: 0.2em; }
.btn-primary { background: var(--ink); color: var(--vellum); border-color: var(--ink); }
.btn-primary kbd { background: transparent; color: var(--vellum); border-color: #5c5764; }
.btn-warn { background: var(--amber-wash); border-color: var(--amber); color: #5a3a00; }
.btn-ok { background: var(--verdigris-wash); border-color: var(--verdigris); color: var(--verdigris); font-weight: 700; }
.btn-bad { background: var(--ember-wash); border-color: var(--ember); color: var(--ember); font-weight: 700; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--smoke); }
.btn-quiet:hover:not(:disabled) { border-color: var(--rule); }
.btn-xs { padding: 0.15em 0.5em; font-size: 0.8rem; }
.btn-big { font-size: 1.15rem; padding: 0.6em 1em; width: 100%; justify-content: center; background: var(--ink); color: var(--vellum); border-color: var(--ink); }
.btn-big kbd { background: transparent; color: var(--vellum); border-color: #5c5764; }
.btn.on { background: var(--ink); color: var(--vellum); border-color: var(--ink); }
.btn.on.danger, .btn.danger { background: var(--ember); color: #fff; border-color: var(--ember); }
.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; display: flex; gap: 0.6em; align-items: baseline; flex-wrap: wrap; }
.seg-ctl { display: inline-flex; }
.seg-ctl .btn { border-radius: 0; margin-left: -1px; }
.seg-ctl .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg-ctl .btn:last-child { border-radius: 0 6px 6px 0; }
.seg-ctl.sm .btn { padding: 0.2em 0.6em; font-size: 0.8rem; }

.row { display: flex; gap: 0.5rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 0.4rem; }
.col.end { align-items: flex-end; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }

input, select, textarea { font: inherit; font-size: 0.92rem; padding: 0.4em 0.55em; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); }
textarea { resize: vertical; width: 100%; }
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; color: var(--smoke); }
label input, label select, label textarea { color: var(--ink); }
.num { width: 5.5em; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 0.88rem; color: var(--smoke); margin-bottom: 0.3rem; }
.seg-radio { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg-radio legend { width: 100%; }
.seg-radio label { flex-direction: row; align-items: center; gap: 0.35rem; border: 1px solid var(--rule); border-radius: 6px; padding: 0.35em 0.7em; background: var(--vellum); color: var(--ink); cursor: pointer; }
.seg-radio label:has(input:checked) { background: var(--ink); color: var(--vellum); border-color: var(--ink); }
.seg-radio input { margin: 0; }
.seg-radio.big label { font-size: 1rem; padding: 0.5em 1em; }

/* ---------- chips & badges ---------- */
.chip { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15em 0.55em; border-radius: 999px; vertical-align: middle; }
.chip.s-P { background: var(--pros-wash); color: var(--pros); }
.chip.s-D { background: var(--def-wash); color: var(--def); }
.chip.s-J, .chip.s-C { background: var(--jury-wash); color: var(--jury); }
.chip.st-for { background: var(--verdigris-wash); color: var(--verdigris); }
.chip.st-against { background: var(--ember-wash); color: var(--ember); }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2em 0.6em; border-radius: 4px; background: var(--bronze-wash); color: var(--bronze); }
.badge.mob { background: #2b2633; color: #f0e3c4; }
.badge.out { background: var(--ember-wash); color: var(--ember); }
.lock { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ember); margin-left: 0.3em; }
.live-dot { font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--ember); padding: 0.1em 0.45em; border-radius: 3px; margin-left: 0.3em; }
.count { display: inline-block; min-width: 1.4em; text-align: center; font-size: 0.72rem; background: var(--ink); color: var(--vellum); border-radius: 999px; padding: 0.05em 0.4em; margin-left: 0.3em; }
.count.warn { background: var(--amber); }
.pill { font-size: 0.8rem; font-weight: 700; padding: 0.3em 0.7em; border-radius: 999px; background: var(--vellum); border: 1px solid var(--rule); color: var(--smoke); font-family: inherit; }
.pill.ok { color: var(--verdigris); border-color: var(--verdigris); background: var(--verdigris-wash); }
.pill.busy { color: var(--smoke); }
.pill.warn { color: #5a3a00; border-color: var(--amber); background: var(--amber-wash); }
.pill.bad { color: #fff; border-color: var(--ember); background: var(--ember); cursor: pointer; }

/* ---------- layout ---------- */
#app { height: 100%; display: flex; flex-direction: column; }
#hdr { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 1rem; background: var(--ink); color: var(--vellum); flex: none; }
#hdr .btn { background: transparent; color: var(--vellum); border-color: #4a4552; }
#hdr .btn:hover:not(:disabled) { border-color: var(--vellum); }
#hdr .btn.on { background: var(--vellum); color: var(--ink); border-color: var(--vellum); }
#hdr .btn.on.danger { background: var(--ember); color: #fff; border-color: var(--ember); }
#hdr kbd { background: transparent; color: #b9b3c2; border-color: #4a4552; }
.hdr-l, .hdr-r { display: flex; align-items: center; gap: 0.7rem; }
.logo { font-family: var(--display); font-size: 1.25rem; }
.case { color: #b9b3c2; font-size: 0.9rem; }
.sess { font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink); background: #EDE3CF; border: 0; border-radius: 6px; padding: 0.3em 0.7em; cursor: pointer; }
.layout { flex: 1; display: grid; grid-template-columns: 210px minmax(0, 1fr) 380px; min-height: 0; }
#nav { overflow-y: auto; padding: 0.75rem 0.5rem 2rem; border-right: 1px solid var(--rule); background: #DCD9D3; }
#main { overflow-y: auto; padding: 1rem 1.25rem 4rem; display: flex; flex-direction: column; gap: 0.9rem; outline: none; }
#side { overflow-y: auto; padding: 0.75rem; border-left: 1px solid var(--rule); background: #DCD9D3; display: flex; flex-direction: column; gap: 0.75rem; }

.nav-h { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke); font-weight: 700; padding: 0.9rem 0.6rem 0.3rem; }
.nav-h:first-child { padding-top: 0.2rem; }
.nav-i { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.9rem; padding: 0.42em 0.6em; border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.nav-i:hover { background: var(--vellum); }
.nav-i.on { background: var(--ink); color: var(--vellum); }
.nav-i.on .lock { color: #f0b3a8; }

/* ---------- floor ---------- */
.strip { display: flex; align-items: center; gap: 0.5rem; }
.strip ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem; flex-wrap: wrap; flex: 1; }
.stp { font: inherit; font-size: 0.82rem; padding: 0.3em 0.65em; border-radius: 999px; border: 1px solid var(--rule); background: var(--vellum); color: var(--smoke); cursor: pointer; }
.stp.done { color: var(--stone); text-decoration: line-through; }
.stp.on { background: var(--ink); color: var(--vellum); border-color: var(--ink); font-weight: 700; }
.stage-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.stage-h h1 { font-size: 2rem; }
.stage-h .theme { font-size: 1rem; color: var(--bronze); font-family: var(--text); font-style: italic; margin-left: 0.4rem; }
.badges { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

.card, .clock-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.card.note { background: var(--bronze-wash); border-color: #d9c8a5; }
.card.pending { border-color: var(--amber); box-shadow: inset 4px 0 0 var(--amber); }
.card.danger-zone { border-color: #e2b8b1; }
.clock-card { align-items: center; text-align: center; padding: 1rem 1rem 1.1rem; }
.clock { font-family: var(--display); line-height: 1; letter-spacing: 0.01em; transition: color 0.2s; }
.clock.big { font-size: 7.5rem; }
.clock.mid { font-size: 2.6rem; }
.clock.warn { color: var(--amber); }
.clock.over { color: var(--ember); }
.clock.paused { opacity: 0.55; }
.bar { position: relative; width: 100%; height: 8px; border-radius: 4px; background: var(--ash); overflow: visible; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--bronze); transition: width 0.2s linear; }
.bar i.over { background: var(--ember); }
.bar .half { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.ctl { justify-content: center; flex-wrap: wrap; }
.totals { font-size: 0.95rem; }
.totals b { font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.topic { font-size: 1.05rem; font-style: italic; }
.big-name { font-family: var(--display); font-size: 1.6rem; }
.wit .col { min-width: 12rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pick { font: inherit; font-size: 0.9rem; padding: 0.4em 0.8em; border-radius: 999px; border: 1px solid var(--rule); background: var(--vellum); cursor: pointer; }
.pick.on.s-P { background: var(--pros); color: #fff; border-color: var(--pros); }
.pick.on.s-D { background: var(--def); color: #fff; border-color: var(--def); }
.pick.on.s-J { background: var(--jury); color: #fff; border-color: var(--jury); }
.tips { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }

table { border-collapse: collapse; }
.list { width: 100%; }
.list td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--ash); vertical-align: middle; }
.list .n { color: var(--smoke); width: 2rem; }
.list select { width: 100%; max-width: 18rem; }
.list .st { width: 6rem; }
.list .used { width: 4rem; font-variant-numeric: tabular-nums; }
.list .acts { width: 7.5rem; text-align: right; white-space: nowrap; }
.li-current { background: var(--bronze-wash); }
.li-done { color: var(--stone); }

.delib .hint.closed { color: var(--ember); font-weight: 700; }
.motions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mo { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--ash); border-radius: 6px; }
.mo-failed, .mo-done { opacity: 0.55; }
.mo-passed { border-color: var(--verdigris); background: var(--verdigris-wash); }
.motion-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-end; }
.motion-form label { flex-direction: row; align-items: center; gap: 0.3rem; }
.motion-form input[name="topic"] { flex: 1; min-width: 12rem; }
.subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.subs li { border-left: 3px solid var(--rule); padding: 0.2rem 0.6rem; }
.subs .ok { color: var(--verdigris); font-weight: 700; font-size: 0.8rem; }
.subs .late { color: var(--ember); font-weight: 700; font-size: 0.8rem; }
.jpick { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.jpick label { flex-direction: row; align-items: center; gap: 0.3rem; color: var(--ink); }

.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rc-col { display: flex; flex-direction: column; gap: 0.35rem; }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; padding: 0.2rem 0; border-bottom: 1px solid var(--ash); font-size: 0.9rem; }
.btn.on.m-present { background: var(--verdigris); border-color: var(--verdigris); }
.btn.on.m-late { background: var(--amber); border-color: var(--amber); }
.btn.on.m-absent { background: var(--ember); border-color: var(--ember); }

/* ---------- votes ---------- */
.vote-h { flex-wrap: wrap; }
.grid th, .grid td { padding: 0.15rem; text-align: center; }
.grid thead th { font-size: 0.78rem; color: var(--smoke); font-weight: 700; vertical-align: bottom; }
.grid thead th span { display: block; font-weight: 400; font-size: 0.7rem; max-width: 4.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid .rl { text-align: left; font-size: 0.88rem; padding-right: 0.6rem; white-space: nowrap; }
.cell { width: 2.4rem; height: 2.1rem; font: 700 0.95rem var(--text); border: 1px solid var(--rule); border-radius: 5px; background: var(--vellum); cursor: pointer; color: var(--ink); }
.cell.c-Y { background: var(--ember-wash); border-color: var(--ember); color: var(--ember); }
.cell.c-N { background: var(--verdigris-wash); border-color: var(--verdigris); color: var(--verdigris); }
.cell.c-A { background: var(--ash); color: var(--smoke); }
.cell.c-X { background: transparent; border-style: dashed; color: var(--stone); }
.cell:disabled { cursor: default; }
.grid .fill { white-space: nowrap; }
.res { text-align: left !important; padding-left: 0.6rem !important; white-space: nowrap; font-weight: 700; }
.r-guilty { color: var(--ember); font-weight: 700; }
.r-not_guilty { color: var(--verdigris); font-weight: 700; }
.r-tie { color: var(--amber); font-weight: 700; }
.tie-row td { text-align: left !important; background: var(--amber-wash); padding: 0.4rem 0.6rem !important; font-size: 0.9rem; }
.result { font-size: 1rem; }
.result.neg b { color: var(--ember); }
.result.pos b { color: var(--verdigris); }
.vsum { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.2rem 1rem; }
.vsum li { display: flex; gap: 0.6rem; font-size: 0.9rem; }
.vsum li span:first-child { min-width: 5.5rem; }
.sentence { border-radius: 8px; padding: 0.8rem 1rem; background: var(--ash); }
.sentence.hell { background: var(--ember-wash); }
.sentence.heaven { background: var(--verdigris-wash); }
.warn-t { color: var(--amber); font-weight: 700; }

/* ---------- record pages ---------- */
.page-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-h h1 { font-size: 1.8rem; }
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.tbl, .att { width: 100%; }
.tbl td, .att td, .att th { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--ash); vertical-align: top; text-align: left; font-size: 0.9rem; }
.tbl tr.gone { opacity: 0.5; text-decoration: line-through; }
.att thead th { font-size: 0.78rem; color: var(--smoke); white-space: nowrap; }
.att td { text-align: center; }
.att th { white-space: nowrap; font-weight: 400; }
.att .m-present { color: var(--verdigris); font-weight: 700; }
.att .m-late { color: var(--amber); font-weight: 700; }
.att .m-absent { color: var(--ember); }
.att .below { color: var(--ember); font-weight: 700; white-space: nowrap; }
.ledger-form { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ledger-form input { flex: 1; min-width: 14rem; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--ash); }
.setting .tog { grid-column: 2; justify-self: end; }
.tog { flex-direction: row; align-items: center; gap: 0.45rem; color: var(--ink); }
.roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 1rem; }
.roster > div { display: flex; flex-direction: column; gap: 0.35rem; }
.rname { flex-direction: row; align-items: center; gap: 0.4rem; }
.rname input { flex: 1; min-width: 0; }
.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.snaps { max-height: 50vh; overflow-y: auto; }
.snaps li { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.9rem; }

/* ---------- side column ---------- */
.preview-box { background: var(--ink); color: var(--vellum); border-radius: 10px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.preview-head { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #b9b3c2; }
#tvstat.ok { color: #9fd6c6; } #tvstat.warn { color: #f0c46a; } #tvstat.bad { color: #f0a597; }
.preview-frame { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.privacy { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.2rem 0.1rem; }
.privacy .lbl { color: #b9b3c2; }
.privacy .hint { color: #cfc9d6; font-size: 0.82rem; }
.privacy .hint b { color: #f0c46a; }
.privacy .seg-ctl { align-self: flex-start; }
.privacy.safe .lbl { color: #f0c46a; }
.privacy .btn { background: transparent; color: var(--vellum); border-color: #4a4552; }
.privacy .btn.on { background: var(--vellum); color: var(--ink); border-color: var(--vellum); }
.quick { display: flex; flex-direction: column; gap: 0.5rem; }
.quick .row .btn { flex: 1; justify-content: center; }
.obj-pending { background: var(--amber-wash); border: 1px solid var(--amber); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.obj-pending .row .btn { flex: 1; justify-content: center; }
.recent { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 0.75rem; }
.recent ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.88rem; }
.recent li { display: flex; gap: 0.5rem; }
.recent li span:first-child { flex: 1; }
.rul { font-weight: 700; text-transform: capitalize; }
.rul.r-sustained { color: var(--verdigris); }
.rul.r-overruled { color: var(--ember); }
.rul.r-waived, .rul.r-withdrawn { color: var(--smoke); }

/* ---------- dialogs ---------- */
dialog { border: 0; border-radius: 12px; padding: 1.25rem 1.4rem; width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(20, 16, 28, 0.35); background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(36, 33, 43, 0.55); }
dialog h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
dialog > p { margin-bottom: 0.6rem; }
dialog hr { border: 0; border-top: 1px solid var(--ash); margin: 1rem 0; }
.obj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.obj-grid .btn { justify-content: flex-start; padding: 0.6em 0.8em; font-size: 0.95rem; }
.keys td { padding: 0.3rem 0.8rem 0.3rem 0; }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 2rem; }
.login-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 2rem; width: min(380px, 92vw); display: flex; flex-direction: column; gap: 0.9rem; }
.login-card h1 { font-size: 2.2rem; }

/* ---------- toasts ---------- */
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.4rem; z-index: 50; pointer-events: none; }
.toast { background: var(--ink); color: var(--vellum); padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.toast.warn { background: #5a3a00; }
.toast.bad { background: var(--ember); }

@media (max-width: 1280px) {
  .layout { grid-template-columns: 190px minmax(0, 1fr) 320px; }
  .clock.big { font-size: 6rem; }
}