/* QUEUE — the game is fake software. This stylesheet is its operating system.
   "PressWord · Plugin Review Console": a melancholy late-night reviewer tool.
   Fluorescent-office dread: deep slate chrome, beige paper panes, amber CRT accents.
   It should be screenshot-indistinguishable from a real (legally-distinct) review tool. */

:root {
  /* chrome — the console shell */
  --bg:        #0e1418;
  --chrome:    #18222a;
  --chrome-2:  #1f2c36;
  --chrome-3:  #263642;
  --rail:      #11191f;
  --edge:      #2c3d49;
  --edge-soft: #223039;

  /* paper — the documents you inspect */
  --paper:     #f7f5ee;
  --paper-2:   #fffdf6;
  --paper-edge:#e2ddcc;
  --ink:       #23282d;
  --ink-soft:  #555b62;
  --muted:     #8a9099;
  --muted-d:   #6a727b;

  /* signal colors */
  --teal:      #2bb6a6;
  --teal-d:    #1d8a7e;
  --amber:     #e0a93b;
  --amber-d:   #b9842a;
  --green:     #3fae6b;
  --green-d:   #2c8a52;
  --red:       #d05858;
  --red-d:     #b03e3e;
  --blue:      #5b8fd0;
  --violet:    #9a7bd0;
  --hot:       #e86a5c;

  --you:       #2bb6a6;

  --mono: "SFMono-Regular", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(8,14,18,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }

/* =====================================================================
   App shell: title bar · main (rail + workspace) · status bar
   ===================================================================== */
#app { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; }

/* --- fake OS window title bar --- */
#titlebar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #20303b, #18242c);
  border-bottom: 1px solid #0a1014;
  padding: 7px 12px; color: #cdd7dd; font-size: 12px; flex: none;
  user-select: none;
}
#titlebar .traffic { display: flex; gap: 7px; }
#titlebar .traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
#titlebar .traffic .r { background: #ec6a5e; } #titlebar .traffic .y { background: #f4be4f; } #titlebar .traffic .g { background: #61c554; }
#titlebar .tb-title { font-weight: 600; letter-spacing: .2px; color: #e7eef2; }
#titlebar .tb-title b { color: var(--teal); }
#titlebar .tb-sub { color: #7d8a93; }
#titlebar .tb-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: #8c99a2; }

/* --- main split --- */
#main { display: grid; grid-template-columns: 232px 1fr; flex: 1; min-height: 0; }

/* =====================================================================
   Left rail — the dread engine. Queue counter, day, trust, nav.
   ===================================================================== */
#rail {
  background: linear-gradient(180deg, var(--chrome), var(--rail));
  border-right: 1px solid #0a1014; color: #c4ced5;
  display: flex; flex-direction: column; padding: 0; overflow-y: auto;
}
.rail-brand { padding: 14px 16px 12px; border-bottom: 1px solid var(--edge-soft); }
.rail-brand .b-logo { font-weight: 800; font-size: 16px; letter-spacing: -.3px; color: #eaf1f4; }
.rail-brand .b-logo span { color: var(--teal); }
.rail-brand .b-tag { font-size: 11px; color: #71808a; margin-top: 2px; }

/* the queue counter — always visible, climbing, the villain */
.queue-box { margin: 14px 14px 8px; padding: 14px 14px 12px; background: #0c1216; border: 1px solid var(--edge-soft); border-radius: 8px; text-align: center; position: relative; overflow: hidden; }
.queue-box:before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(224,169,59,.10), transparent 70%); pointer-events: none; }
.queue-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #6e7d86; }
.queue-num { font-size: 40px; font-weight: 800; color: #f1d79a; font-variant-numeric: tabular-nums; line-height: 1.05; margin: 2px 0; text-shadow: 0 0 18px rgba(224,169,59,.25); transition: color .3s; }
.queue-num.bump { animation: qbump .5s ease; }
@keyframes qbump { 0% { transform: scale(1); color: #ff8a6a; } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.queue-sub { font-size: 10.5px; color: #5f6d76; }
.queue-spark { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 22px; margin-top: 8px; }
.queue-spark i { width: 7px; background: linear-gradient(180deg, var(--amber), var(--amber-d)); border-radius: 1px; opacity: .8; }

.rail-stats { padding: 6px 14px 10px; }
.stat { margin-bottom: 11px; }
.stat .s-row { display: flex; justify-content: space-between; align-items: baseline; }
.stat label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #6e7d86; font-weight: 700; }
.stat .s-val { font-size: 12px; font-variant-numeric: tabular-nums; color: #c9d4da; font-weight: 700; }
.meter { height: 9px; background: #0a0f13; border-radius: 6px; overflow: hidden; margin-top: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.meter span { display: block; height: 100%; width: 70%; background: linear-gradient(180deg, var(--teal), var(--teal-d)); transition: width .5s ease, background .4s; }
.meter.trust.mid span { background: linear-gradient(180deg, var(--amber), var(--amber-d)); }
.meter.trust.low span { background: linear-gradient(180deg, var(--red), var(--red-d)); }

.rail-day { padding: 4px 14px 0; }
.day-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa7af; }
.day-dots { display: flex; gap: 4px; margin-top: 6px; }
.day-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a3a45; border: 1px solid #36495680; }
.day-dots i.done { background: var(--teal-d); border-color: var(--teal); }
.day-dots i.now { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px rgba(224,169,59,.6); }

.rail-quota { margin: 12px 14px; padding: 9px 11px; background: #0c1216; border: 1px solid var(--edge-soft); border-radius: 7px; font-size: 11px; color: #87949d; }
.rail-quota .q-row { display: flex; justify-content: space-between; color: #9aa7af; }
.rail-quota .q-row b { color: #cdd7dd; font-variant-numeric: tabular-nums; }
.rail-quota .q-note { color: #5f6d76; margin-top: 4px; font-style: italic; }

.rail-foot { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--edge-soft); font-size: 10.5px; color: #586771; line-height: 1.5; }
.rail-foot b { color: var(--teal); }

/* =====================================================================
   Workspace — switches between inbox / review desk / day-end
   ===================================================================== */
#workspace { background: #cfcabb; overflow-y: auto; position: relative; }
.ws-pad { max-width: 1080px; margin: 0 auto; padding: 0; }

/* toolbar above the workspace content */
.toolbar { display: flex; align-items: center; gap: 4px; background: var(--chrome-3); border-bottom: 1px solid #0a1014; padding: 6px 12px; position: sticky; top: 0; z-index: 5; }
.toolbar .tabs { display: flex; gap: 2px; }
.toolbar .tab { padding: 6px 14px; font-size: 12.5px; color: #93a0a9; border-radius: 5px 5px 0 0; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.toolbar .tab:hover { color: #d6e0e6; background: #2e404d; }
.toolbar .tab.active { background: #cfcabb; color: var(--ink); font-weight: 600; }
.toolbar .tab .badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 6px; min-width: 17px; text-align: center; }
.toolbar .tab .badge.teal { background: var(--teal-d); }
.toolbar .tb-spacer { flex: 1; }
.toolbar .tb-action { font-size: 12px; color: #cdd7dd; background: #34495780; border: 1px solid var(--edge); border-radius: 5px; padding: 5px 11px; cursor: pointer; }
.toolbar .tb-action:hover { background: var(--teal-d); border-color: var(--teal); }

/* =====================================================================
   INBOX
   ===================================================================== */
.inbox { display: grid; grid-template-columns: 300px 1fr; gap: 0; height: calc(100vh - 44px - 33px); }
.inbox-list { background: #ece9df; border-right: 1px solid #c2bdad; overflow-y: auto; }
.mail-hd { padding: 12px 16px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted-d); font-weight: 700; border-bottom: 1px solid #d8d3c4; }
.mail-hd.audit { color: var(--red-d); border-bottom-color: #e0c4bd; background: #f6e7e3; }
.audit-proceed { display: block; width: calc(100% - 28px); margin: 14px; padding: 12px; border: none; border-radius: 8px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform .1s, background .15s; }
.audit-proceed:hover { transform: translateY(-1px); background: #000; }
.mail-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #ddd8c9; cursor: pointer; transition: background .12s; }
.mail-item:hover { background: #f4f1e8; }
.mail-item.active { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--teal); }
.mail-item.unread .mi-subject { font-weight: 700; }
.mail-item.unread:before { content: ""; position: absolute; }
.mi-avatar { width: 34px; height: 34px; border-radius: 50%; background: #d8d3c4; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.mi-meta { min-width: 0; flex: 1; }
.mi-from { font-size: 12px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 8px; }
.mi-from .mi-when { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.mi-subject { font-size: 13px; color: var(--ink); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; align-self: center; }
.mi-tag { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; letter-spacing: .3px; }
.mi-tag.appeal { background: #f6dede; color: var(--red-d); }
.mi-tag.victim { background: #f6e3d2; color: var(--amber-d); }
.mi-tag.thanks { background: #d9f0e1; color: var(--green-d); }
.mi-tag.arc { background: #e6def4; color: var(--violet); }

.mail-read { background: var(--paper); overflow-y: auto; padding: 0; }
.mr-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-style: italic; }
.mr-head { padding: 20px 28px 14px; border-bottom: 1px solid var(--paper-edge); background: var(--paper-2); }
.mr-subject { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.mr-from { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.mr-from .av { width: 40px; height: 40px; border-radius: 50%; background: #e6e1d2; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.mr-from .who { font-size: 13px; }
.mr-from .who b { color: var(--ink); } .mr-from .who span { color: var(--muted); }
.mr-body { padding: 22px 28px 28px; line-height: 1.7; font-size: 14.5px; color: #34393f; max-width: 660px; white-space: pre-wrap; }
.mr-choices { padding: 4px 28px 26px; display: flex; flex-direction: column; gap: 9px; max-width: 660px; }
.mr-payslip { margin: 0 28px 24px; padding: 16px 20px; max-width: 620px; background: repeating-linear-gradient(45deg, #f0ede2, #f0ede2 10px, #ebe7da 10px, #ebe7da 20px); border: 1px dashed #b9b39f; border-radius: 6px; font-family: var(--mono); font-size: 12.5px; color: #6a6555; }
.mr-payslip .amt { font-size: 22px; font-weight: 800; color: var(--ink); }

/* =====================================================================
   REVIEW DESK — the inspection surface (3 panes) + verdict bar
   ===================================================================== */
.desk { display: flex; flex-direction: column; min-height: calc(100vh - 44px - 33px); }
.desk-head { background: var(--paper-2); border-bottom: 1px solid var(--paper-edge); padding: 14px 24px 12px; }
.dh-top { display: flex; align-items: baseline; gap: 10px; }
.dh-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dh-count { margin-left: auto; font-size: 11.5px; color: var(--muted-d); }
.dh-title { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 4px; line-height: 1.2; }
.dh-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.dh-meta .m b { color: var(--muted-d); font-weight: 600; }
.dh-meta .flag { color: var(--red-d); font-weight: 700; }
.tag-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ptag { font-size: 10.5px; background: #e7e2d2; color: #6f6852; border: 1px solid #d6d0bc; padding: 2px 9px; border-radius: 11px; }
.badge-update { font-size: 10px; font-weight: 800; letter-spacing: .5px; background: var(--violet); color: #fff; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }

/* inspection panes */
.panes { display: grid; grid-template-columns: 280px 1fr; gap: 0; flex: 1; min-height: 0; }
.pane-left { border-right: 1px solid var(--paper-edge); background: #f1eee4; display: flex; flex-direction: column; min-height: 0; }
.pane-section { border-bottom: 1px solid #ddd8c9; }
.pane-section > .ps-hd { display: flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-d); font-weight: 700; background: #e8e4d8; }
.ps-hd .ps-ico { font-size: 13px; }
.file-tree { padding: 8px 6px 4px; font-family: var(--mono); font-size: 12px; line-height: 1.7; max-height: 240px; overflow-y: auto; }
/* Read-only manifest: no hover, no cursor change — it is context, not a file browser. */
.file-row { padding: 1px 10px 1px 8px; white-space: nowrap; color: #3a3f45; border-radius: 3px; cursor: default; display: flex; align-items: baseline; }
.file-row.dir { color: var(--blue); font-weight: 600; }
.file-row.dir:before { content: "📁 "; font-size: 11px; margin-right: 2px; }
.file-row.file:before { content: "· "; color: #b7b1a0; }
.file-row .note { color: var(--hot); font-weight: 700; }
.file-row.sus { background: #fbe6e2; color: var(--red-d); }
.file-row.viewed { color: var(--ink); font-weight: 600; }
.file-row .viewed-tag { margin-left: auto; font-size: 9.5px; color: var(--teal-d); font-weight: 700; letter-spacing: .3px; padding-left: 10px; }
.manifest-foot { padding: 6px 14px 12px; font-size: 10.5px; color: var(--muted); font-style: italic; line-height: 1.4; }
.code-bar .cb-ico { font-size: 12px; }
.readme { padding: 12px 16px; overflow-y: auto; }
.readme .rd-desc { font-style: italic; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.55; }
.readme .rd-long { font-size: 13px; line-height: 1.65; color: #3a3f45; }
.readme .rd-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }

/* code viewer (the puzzle surface) */
.pane-right { background: #1c2530; display: flex; flex-direction: column; min-height: 0; }
.code-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #16202a; border-bottom: 1px solid #0d151c; color: #8fa0ab; font-size: 11.5px; }
.code-bar .cb-file { font-family: var(--mono); color: #c7d2da; }
.code-bar .cb-spacer { flex: 1; }
.grep { display: flex; align-items: center; gap: 6px; }
.grep input { background: #0d151c; border: 1px solid #2a3a45; color: #d6e0e6; font-family: var(--mono); font-size: 12px; padding: 4px 9px; border-radius: 5px; width: 150px; outline: none; }
.grep input:focus { border-color: var(--teal); }
.grep input.locked { opacity: .4; }
.grep .lock { font-size: 11px; color: #5f6d76; }
.code-view { flex: 1; overflow: auto; padding: 10px 0 20px; font-family: var(--mono); font-size: 13px; line-height: 1.65; counter-reset: ln; }
.code-line { display: flex; padding: 0 16px 0 0; white-space: pre; }
.code-line .ln { width: 42px; flex: none; text-align: right; padding-right: 14px; color: #4a5b66; user-select: none; }
.code-line .ct { color: #cdd9e1; }
.code-line.hot { background: rgba(232,106,92,.10); }
.code-line.hot .ct { color: #ffb3a6; }
.code-line.flagged { background: rgba(224,169,59,.16); box-shadow: inset 3px 0 0 var(--amber); }
.code-line .hl { background: var(--amber); color: #1c2530; border-radius: 2px; }
.code-empty { color: #5f6d76; padding: 20px; font-style: italic; }

/* verdict bar */
.verdict-bar { background: var(--chrome-2); border-top: 1px solid #0a1014; padding: 12px 18px; display: flex; align-items: center; gap: 10px; flex: none; }
.vb-prompt { color: #9aa7af; font-size: 12.5px; margin-right: 4px; }
.vbtn { border: 1px solid var(--edge); background: var(--chrome-3); color: #d6e0e6; border-radius: 7px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .08s, box-shadow .12s, border-color .12s, background .12s; min-width: 92px; }
.vbtn .vb-key { font-size: 9.5px; font-weight: 600; opacity: .6; letter-spacing: .5px; }
.vbtn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.vbtn.approve:hover { border-color: var(--green); background: var(--green-d); color: #fff; }
.vbtn.reject:hover { border-color: var(--red); background: var(--red-d); color: #fff; }
.vbtn.changes:hover { border-color: var(--amber); background: var(--amber-d); color: #fff; }
.vbtn.escalate:hover { border-color: var(--violet); background: #6f57a0; color: #fff; }
.vb-spacer { flex: 1; }
.vb-skip { color: #6e7d86; font-size: 12px; background: none; border: none; cursor: pointer; text-decoration: underline; }
.vb-skip:hover { color: #9aa7af; }

/* reason picker (reject) + verdict result overlay live in #overlay */

/* =====================================================================
   DAY-END LEDGER
   ===================================================================== */
.dayend { max-width: 720px; margin: 0 auto; padding: 36px 24px 60px; }
.de-kicker { text-align: center; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal-d); font-weight: 700; }
.de-title { text-align: center; font-size: 30px; font-weight: 800; color: var(--ink); margin: 6px 0 4px; }
.de-sub { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }
.de-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.de-stat { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 8px; padding: 14px 12px; text-align: center; box-shadow: var(--shadow); }
.de-stat .n { font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.de-stat .n.bad { color: var(--red-d); } .de-stat .n.good { color: var(--green-d); }
.de-stat .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted-d); margin-top: 2px; }
.de-section-hd { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-d); font-weight: 700; margin: 18px 0 8px; }
.ledger-row { background: var(--paper-2); border: 1px solid var(--paper-edge); border-left-width: 4px; border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--shadow); animation: drop .3s ease; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.ledger-row.bad { border-left-color: var(--red); }
.ledger-row.good { border-left-color: var(--green); }
.ledger-row .lr-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted-d); }
.ledger-row.bad .lr-kind { color: var(--red-d); } .ledger-row.good .lr-kind { color: var(--green-d); }
.ledger-row .lr-head { font-size: 14.5px; color: var(--ink); margin-top: 3px; line-height: 1.4; }
.ledger-row .lr-trust { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ledger-empty { text-align: center; color: var(--muted); font-style: italic; padding: 16px; }
.de-advance { display: block; margin: 26px auto 0; padding: 13px 34px; border: none; border-radius: 8px; background: var(--teal-d); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s, box-shadow .15s; }
.de-advance:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(43,182,166,.32); }

/* =====================================================================
   Status bar (bottom)
   ===================================================================== */
#statusbar { background: #0c1318; border-top: 1px solid #0a1014; color: #5f6d76; font-size: 11px; padding: 5px 14px; display: flex; gap: 18px; flex: none; font-variant-numeric: tabular-nums; }
#statusbar b { color: #87949d; }
#statusbar .sb-right { margin-left: auto; }

/* =====================================================================
   Overlay / modals — rulebook cards, verdict result, reason picker
   ===================================================================== */
#overlay { position: fixed; inset: 0; background: rgba(8,12,16,.66); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 80; backdrop-filter: blur(2px); }
#overlay.hidden { display: none; }
.modal { background: var(--paper); border-radius: 12px; max-width: 540px; width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden; animation: pop .26s cubic-bezier(.2,.9,.3,1.1); max-height: 90vh; display: flex; flex-direction: column; }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(10px); } }
.modal-head { padding: 16px 22px; color: #fff; }
.modal-head.teal { background: linear-gradient(135deg, var(--teal), var(--teal-d)); }
.modal-head.amber { background: linear-gradient(135deg, var(--amber), var(--amber-d)); }
.modal-head.red { background: linear-gradient(135deg, var(--red), var(--red-d)); }
.modal-head .m-kicker { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.modal-head .m-title { font-size: 20px; font-weight: 800; margin-top: 3px; line-height: 1.2; }
.modal-body { padding: 16px 22px; color: #3a3f45; line-height: 1.6; font-size: 14px; }
.modal-body .mb-tell { font-family: var(--mono); font-size: 12.5px; background: #ece9de; border: 1px solid var(--paper-edge); border-radius: 6px; padding: 9px 12px; margin-top: 10px; color: #5a5648; }
.modal-foot { padding: 4px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.modal-btn { padding: 12px; border: none; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--teal-d); color: #fff; transition: transform .1s; }
.modal-btn:hover { transform: translateY(-1px); }
.modal-btn.ghost { background: #e2ddcc; color: var(--ink); }

/* reason picker */
.reason-list { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding: 4px 22px 18px; }
.reason { text-align: left; border: 1px solid var(--paper-edge); background: var(--paper-2); border-radius: 7px; padding: 11px 13px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s; }
.reason:hover { border-color: var(--red); box-shadow: 0 2px 10px rgba(208,88,88,.18); transform: translateY(-1px); }
.reason .rn-name { font-weight: 700; color: var(--ink); }
.reason .rn-tell { font-size: 11.5px; color: var(--muted-d); margin-top: 2px; line-height: 1.4; }

/* verdict result flash */
.vr-head { padding: 22px 24px 16px; text-align: center; color: #fff; }
.vr-head .vr-icon { font-size: 38px; }
.vr-head .vr-word { font-size: 24px; font-weight: 800; letter-spacing: .5px; margin-top: 4px; }
.vr-body { padding: 16px 24px; line-height: 1.6; font-size: 14px; color: #3a3f45; }
.vr-body .vr-preview { margin-top: 12px; padding: 11px 14px; border-radius: 7px; font-size: 13px; line-height: 1.5; }
.vr-body .vr-preview.danger { background: #f7e3e0; color: var(--red-d); border: 1px solid #e7c2bc; }
.vr-body .vr-preview.good { background: #e0f1e7; color: var(--green-d); border: 1px solid #bfe0cd; }
.vr-body .vr-preview .vp-fuse { font-family: var(--mono); font-size: 11px; opacity: .8; }

.choice { text-align: left; border: 1px solid var(--paper-edge); background: var(--paper-2); border-radius: 7px; padding: 12px 14px; cursor: pointer; line-height: 1.45; font: inherit; transition: border-color .12s, box-shadow .12s, transform .08s; }
.choice:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(43,182,166,.16); transform: translateY(-1px); }
.choice .c-reply { display: block; margin-top: 6px; font-size: 12px; color: var(--muted-d); font-style: italic; }

/* =====================================================================
   Rubber stamp animation
   ===================================================================== */
#stamp { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 90; pointer-events: none; }
#stamp.go { display: flex; }
.stamp-mark { font-size: 60px; font-weight: 900; letter-spacing: 4px; padding: 14px 34px; border: 7px solid currentColor; border-radius: 12px; text-transform: uppercase; opacity: 0; transform: rotate(-14deg) scale(2.4); }
.stamp-mark.go { animation: stamp .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.4); } 22% { opacity: .95; transform: rotate(-14deg) scale(1); } 78% { opacity: .95; } 100% { opacity: 0; transform: rotate(-14deg) scale(1); } }
.stamp-mark.approve { color: var(--green-d); }
.stamp-mark.reject { color: var(--red-d); }
.stamp-mark.changes { color: var(--amber-d); }
.stamp-mark.escalate { color: var(--violet); }

/* =====================================================================
   Toasts
   ===================================================================== */
#toasts { position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 70; align-items: center; }
.toast { background: #11191f; color: #e7eef2; padding: 8px 16px; border-radius: 22px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: toastin .3s ease; border: 1px solid var(--edge); }
.toast.good { border-color: var(--green); } .toast.bad { border-color: var(--red); } .toast.info { border-color: var(--teal); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

/* =====================================================================
   INTRO / TITLE
   ===================================================================== */
#intro { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0a0f13; }
#intro.gone { display: none; }
#intro .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; filter: saturate(.85); }
#intro .hero-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(10,15,19,.35), rgba(10,15,19,.92)); }
.intro-card { position: relative; text-align: center; color: #e7eef2; max-width: 560px; padding: 30px; }
.intro-kicker { text-transform: uppercase; letter-spacing: 4px; font-size: 12px; color: var(--teal); }
.intro-card h1 { font-size: 76px; margin: 6px 0 2px; letter-spacing: 6px; font-weight: 900; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.intro-card .tagline { font-size: 16px; color: #b6c2ca; font-style: italic; margin-bottom: 18px; }
.intro-sub { font-size: 14.5px; line-height: 1.7; color: #aeb9c1; max-width: 470px; margin: 0 auto 8px; }
.intro-sub b { color: #e7eef2; }
#start-btn { margin: 26px 0 14px; padding: 14px 36px; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .5px; border: none; border-radius: 8px; background: var(--teal); color: #08110f; cursor: pointer; transition: transform .1s, box-shadow .15s; }
#start-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(43,182,166,.4); }
.intro-foot { font-size: 12px; color: #6e7d86; line-height: 1.6; margin-top: 6px; }
.intro-foot b { color: #9aa7af; }

/* =====================================================================
   ENDING
   ===================================================================== */
.ending-modal { max-width: 660px; }
.ending-head { padding: 32px 26px 24px; text-align: center; color: #fff; }
.ending-head.commended { background: linear-gradient(135deg, var(--teal), var(--teal-d)); }
.ending-head.survivor { background: linear-gradient(135deg, #6a7c88, #46545e); }
.ending-head.burned { background: linear-gradient(135deg, #5a4a4a, #2e2424); }
.ending-head.headline { background: linear-gradient(135deg, var(--red), var(--red-d)); }
.ending-head.martinet { background: linear-gradient(135deg, var(--amber), var(--amber-d)); }
.ending-head .e-ach { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.ending-head .e-title { font-size: 34px; font-weight: 900; margin-top: 6px; letter-spacing: -.5px; }
.ending-head .e-kicker { font-size: 14px; opacity: .9; margin-top: 6px; font-style: italic; }
.ending-body { padding: 20px 26px; line-height: 1.7; font-size: 14.5px; color: #34393f; }
.ending-body p { margin: 0 0 12px; }
.evidence-note { text-align: center; color: var(--muted-d); font-size: 12px; padding: 6px 0 10px; font-style: italic; }
.evidence { max-height: 300px; overflow-y: auto; border-top: 1px solid var(--paper-edge); background: var(--paper-2); }
.ev-row { padding: 9px 24px; border-bottom: 1px solid #efece1; font-size: 12.5px; display: flex; gap: 10px; align-items: baseline; animation: drop .2s ease; }
.ev-row .ev-day { font-family: var(--mono); font-size: 10.5px; color: var(--muted); flex: none; }
.ev-row .ev-verdict { font-weight: 700; flex: none; width: 64px; }
.ev-row.correct .ev-verdict { color: var(--green-d); }
.ev-row.wrong .ev-verdict { color: var(--red-d); }
.ev-row.defensible .ev-verdict { color: var(--amber-d); }
.ev-row .ev-name { color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row .ev-mark { margin-left: auto; flex: none; }
.ending-actions { padding: 18px 26px 24px; text-align: center; }
.ending-actions button { padding: 12px 26px; border: none; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; background: var(--ink); color: #fff; }
.ending-actions button:hover { background: #000; }

/* =====================================================================
   Day-brief splash (between days)
   ===================================================================== */
.brief-overlay { position: fixed; inset: 0; z-index: 75; background: rgba(8,12,16,.9); display: flex; align-items: center; justify-content: center; }
.brief-card { text-align: center; color: #e7eef2; max-width: 460px; padding: 30px; animation: pop .4s ease; }
.brief-card .bc-day { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal); }
.brief-card .bc-name { font-size: 40px; font-weight: 900; margin: 4px 0 12px; }
.brief-card .bc-line { font-size: 15px; color: #aeb9c1; line-height: 1.6; }
.brief-card .bc-inflow { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--amber); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #b6b1a0; border-radius: 6px; }
#rail ::-webkit-scrollbar-thumb, .pane-right ::-webkit-scrollbar-thumb, .code-view::-webkit-scrollbar-thumb { background: #2c3d49; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  #main { grid-template-columns: 1fr; }
  #rail { display: none; }
  .panes { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; }
}