/* ── THE Z INDEX ────────────────────────────────────────────────────────────
   Terminal in garnet and gold. Memos render as paper, because memos are paper.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #08080a;
  --panel:     #101014;
  --panel-2:   #0b0b0e;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.19);
  /* Text ramp. Everything here is small monospace on a near-black panel, so
     each step is measured against --panel (#101014) rather than guessed:
     text 14.9:1 · text-2 10.7:1 · dim 7.9:1 · dimmer 5.6:1. Nothing that
     carries an actual sentence sits below --text-2. */
  --text:      #e4e4de;
  --text-2:    #c2c2ca;
  --dim:       #a6a6b0;
  --dimmer:    #8a8a94;
  --gold:      #ceb888;
  --garnet:    #782f40;
  --garnet-lt: #a8455e;
  --green:     #2eab9c;
  --red:       #e2504d;
  --paper:     #ece7dc;
  --paper-ink: #24211c;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120,47,64,.13), transparent 70%);
  min-height: 100vh;
}

.hidden { display: none !important; }
.screen { min-height: 100vh; }

/* ── Boot memo ──────────────────────────────────────────────────────────── */

.boot-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 6vh, 72px) 18px 64px;
}

.memo {
  background: var(--paper);
  color: var(--paper-ink);
  padding: clamp(24px, 4vw, 44px);
  border-radius: 2px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.06);
  position: relative;
}
.memo::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(36,33,28,.18);
  pointer-events: none;
}

.memo-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .14em; color: rgba(36,33,28,.75);
  border-bottom: 2px solid var(--paper-ink);
  padding-bottom: 8px;
}

.memo-title {
  font-size: clamp(17px, 3vw, 23px);
  letter-spacing: .06em;
  margin: 20px 0 16px;
  font-weight: 700;
}

.memo-meta {
  font-size: 11px;
  border-left: 3px solid var(--garnet);
  padding-left: 12px;
  margin-bottom: 22px;
}
.memo-meta div { margin: 3px 0; }
.memo-meta span {
  display: inline-block; width: 46px;
  color: rgba(36,33,28,.7); letter-spacing: .12em;
}

.memo-body p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.72; }
.memo-body em { font-style: normal; border-bottom: 1px solid rgba(36,33,28,.45); }
.memo-sign { margin-top: 22px !important; }
.memo-sign-name { letter-spacing: .1em; color: rgba(36,33,28,.82); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 2px;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-primary {
  background: var(--garnet);
  border-color: var(--garnet-lt);
  color: #f3e9dc;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--garnet-lt); color: #fff; border-color: var(--gold); }
.btn-lg { display: block; width: 100%; margin-top: 28px; padding: 15px; font-size: 12px; }
.btn-block { display: block; width: 100%; margin-top: 10px; }

/* ── Ticker bar ─────────────────────────────────────────────────────────── */

#ticker-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 16px;
  background: linear-gradient(180deg, #131318, #0c0c10);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.tb-left { flex: 1 1 240px; min-width: 0; }
.tb-name { font-size: 14px; letter-spacing: .14em; color: var(--gold); font-weight: 700; }
.tb-sym { color: var(--text); margin-left: 6px; }
.tb-sub { font-size: 9.5px; letter-spacing: .12em; color: var(--dim); margin-top: 2px; }

.tb-mid { text-align: right; }
.tb-level { font-size: 22px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tb-chg { font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.up   { color: var(--green); }
.down { color: var(--red); }

.tb-right { display: flex; gap: 18px; }
.tb-stat { text-align: right; }
.tb-stat span { display: block; font-size: 9px; letter-spacing: .16em; color: var(--dim); }
.tb-stat b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Grid ───────────────────────────────────────────────────────────────── */

#terminal {
  display: grid;
  gap: 10px;
  padding: 10px;
  grid-template-columns: 196px minmax(0,1fr) 244px;
  grid-template-rows: minmax(300px, 44vh) auto auto;
  grid-template-areas:
    "layers  chart    side"
    "week    actions  side"
    "tape    tape     tape";
  max-width: 1560px;
  margin: 0 auto;
}
#panel-layers  { grid-area: layers; }
#panel-chart   { grid-area: chart; }
#panel-side    { grid-area: side; }
#panel-week    { grid-area: week; }
#panel-actions { grid-area: actions; }
#panel-tape    { grid-area: tape; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px;
  min-width: 0;
}
.panel-chart { padding: 6px; position: relative; }
#chart { width: 100%; height: 100%; display: block; }

.chart-legend {
  position: absolute; top: 9px; left: 62px;
  display: flex; gap: 12px; font-size: 9px; color: var(--dim); letter-spacing: .1em;
}
.sw { display: inline-block; width: 12px; height: 2px; margin-right: 5px; vertical-align: middle; }

.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: .18em; color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px; margin-bottom: 9px;
}
.panel-head:not(:first-child) { margin-top: 16px; }
.panel-head-note { color: var(--dim); letter-spacing: .1em; text-transform: none; }
.panel-foot { font-size: 10px; color: var(--dim); margin-top: 10px; line-height: 1.6; }

/* ── Layer panel ────────────────────────────────────────────────────────── */

.layer-list { display: flex; flex-direction: column-reverse; gap: 3px; }

.layer {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center; gap: 7px;
  padding: 6px 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: rgba(255,255,255,.017);
}
.layer.top {
  border-color: var(--line-2);
  background: rgba(206,184,136,.07);
}
.layer-chip { width: 8px; height: 8px; border-radius: 1px; }
.layer-name { font-size: 9.5px; letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer.top .layer-name { color: var(--gold); font-weight: 700; }
.layer-z { font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.layer-btns { display: flex; flex-direction: column; gap: 1px; }
.layer-btns button {
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 8px; line-height: 1; padding: 1px 3px; font-family: var(--mono);
}
.layer-btns button:hover:not(:disabled) { color: var(--gold); }
.layer-btns button:disabled { opacity: .2; cursor: default; }

/* ── Indicators ─────────────────────────────────────────────────────────── */

.z-list { display: flex; flex-direction: column; gap: 4px; }
.z-row { display: grid; grid-template-columns: 1fr 46px; align-items: center; gap: 6px; font-size: 9.5px; }
.z-label { letter-spacing: .08em; color: var(--dim); }
.z-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.z-track { grid-column: 1 / -1; height: 3px; background: rgba(255,255,255,.06); position: relative; border-radius: 2px; }
.z-track::before { content:""; position:absolute; left:50%; top:-1px; bottom:-1px; width:1px; background: rgba(255,255,255,.18); }
.z-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.z-stretch { color: var(--red); }
.z-over    { color: var(--gold); }
.z-locked  { color: var(--text-2); font-size: 10.5px; letter-spacing: .04em; line-height: 1.6; }

.energy-wrap { display: flex; align-items: center; gap: 8px; }
.energy-track {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.06);
}
.energy-bar { height: 100%; width: 72%; background: var(--green); transition: width .3s, background .3s; }
#energy-val { font-size: 10px; width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

.hr-file { font-size: 10.5px; color: var(--text-2); line-height: 1.75; }
.hr-file .bad { color: var(--red); }
.hr-file .ok  { color: var(--green); }

/* ── Week panel ─────────────────────────────────────────────────────────── */

.week-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.week-n { font-size: 9px; letter-spacing: .2em; color: var(--garnet-lt); }
.week-title { font-size: 16px; letter-spacing: .08em; font-weight: 700; color: var(--gold); }
.week-sub { font-size: 9.5px; letter-spacing: .12em; color: var(--dim); text-align: right; max-width: 45%; }
.week-brief { font-size: 12.5px; line-height: 1.75; color: var(--text-2); white-space: pre-line; }

/* ── Inline memo card ───────────────────────────────────────────────────── */

.memo-card {
  background: var(--paper); color: var(--paper-ink);
  padding: 14px 16px; margin-top: 14px; border-radius: 2px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  border-left: 4px solid var(--garnet);
}
.memo-card-head {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 9.5px; letter-spacing: .13em; color: rgba(36,33,28,.75);
  border-bottom: 1px solid rgba(36,33,28,.25); padding-bottom: 6px; margin-bottom: 9px;
}
.memo-card-title { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; margin-bottom: 7px; }
.memo-card-body { font-size: 12px; line-height: 1.72; }
.memo-req {
  margin-top: 10px; padding-top: 8px; font-size: 10px; letter-spacing: .05em;
  border-top: 1px dashed rgba(36,33,28,.35); color: rgba(36,33,28,.8);
}
.memo-req b { color: var(--garnet); }
.memo-req.satisfied b { color: #1d6f4a; }

/* ── Actions ────────────────────────────────────────────────────────────── */

.slot-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 11px; }
.slot {
  height: 42px; border: 1px dashed var(--line-2); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 9px; letter-spacing: .05em; color: var(--dim);
  padding: 3px; cursor: default; line-height: 1.25;
}
.slot.filled {
  border-style: solid; border-color: var(--garnet-lt);
  background: rgba(120,47,64,.22); color: var(--text); cursor: pointer;
}
.slot.filled:hover { background: rgba(226,80,77,.24); border-color: var(--red); }
.slot.locked {
  border-style: solid; border-color: rgba(226,80,77,.45);
  background: repeating-linear-gradient(45deg, rgba(226,80,77,.11) 0 5px, transparent 5px 10px);
  color: var(--red); font-size: 7.5px;
}

.action-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 6px;
  max-height: 460px; overflow-y: auto; padding-right: 4px;
}

.action-group-head {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  font-size: 9px; letter-spacing: .17em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px; margin: 12px 0 3px;
}
.action-group-head:first-child { margin-top: 0; }
.agh-note { color: var(--dim); letter-spacing: .04em; font-size: 9.5px; text-align: right; }

.action {
  text-align: left; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 2px solid var(--line-2);
  border-radius: 2px;
  background: rgba(255,255,255,.014); color: var(--text);
  font-family: var(--mono); cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color .12s, background .12s;
}
.action:hover:not(:disabled) { border-color: var(--gold); background: rgba(206,184,136,.06); }
.action:disabled { opacity: .32; cursor: not-allowed; }
.action-authorized   { border-left-color: #5fa85f; }
.action-unauthorized { border-left-color: #e2504d; }
.action-unclassified { border-left-color: var(--gold); }

.action-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.action-name { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }
.action-slots { font-size: 9px; color: var(--dim); white-space: nowrap; }
.action-desc {
  font-size: 10.5px; line-height: 1.55; color: var(--text-2);
  margin: 5px 0 8px; flex: 1;
}
.action-fx { font-size: 8.5px; margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.fx { font-variant-numeric: tabular-nums; }
.action.required { border-color: var(--garnet-lt); background: rgba(120,47,64,.14); }
.action.required .action-name::after { content: " ●"; color: var(--garnet-lt); font-size: 8px; }
.action.oversold .action-name::after { content: " ▲"; color: var(--gold); font-size: 8px; }
.action:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── The desk ───────────────────────────────────────────────────────────────
   Five analysts, backlit by their own monitors, sitting at a surface that is
   the top edge of the six slots below them. Figures are phosphor silhouettes
   rather than portraits — at 50px a face is a smudge, so the finance bro is
   carried by the props: quarter-zip, handset, headset, backwards cap.
   ───────────────────────────────────────────────────────────────────────── */

.desk {
  /* Seats and nameplates share these so the two rows can never drift apart.
     Gap stays tight relative to seat width — the read is one shared desk, not
     five people who each got their own office. */
  --seat-w: clamp(40px, 7.6vw, 94px);
  --seat-gap: clamp(2px, .7vw, 10px);
}

/* ── Squawk box ─────────────────────────────────────────────────────────── */

.squawk {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 11px;
  /* Held to a readable measure and centred over the seats, so the notch never
     has to reach for somebody outside the box. */
  max-width: 660px;
  margin: 0 auto 11px;
  /* Reserve two lines. The box is persistent now, so the cost of guessing low
     is the whole band jumping while you arrow through the log. */
  min-height: 70px;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .25s;
}
.squawk.live { border-color: rgba(206,184,136,.34); }

.squawk-idle { font-size: 10px; color: var(--dim); line-height: 1.6; }
.squawk-idle[hidden] { display: none; }

.squawk-body { display: none; }
.squawk.live .squawk-body { display: block; }

.squawk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.squawk-who {
  font-size: 8.5px; letter-spacing: .16em; color: var(--garnet-lt);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.squawk-text { font-size: 11.5px; line-height: 1.55; color: var(--text); }

.squawk-nav { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.squawk-nav button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--dim);
  font-family: var(--mono); font-size: 7.5px; line-height: 1;
  padding: 4px 7px;
  min-width: 22px; min-height: 19px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.squawk-nav button:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.squawk-nav button:disabled { opacity: .28; cursor: default; }
.squawk-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.squawk-count {
  font-size: 8.5px; letter-spacing: .1em; color: var(--dimmer);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center;
}

/* Scrolled back through the log rather than sitting on the newest line. */
.squawk.recall { border-color: rgba(206,184,136,.5); }
.squawk.recall .squawk-count { color: var(--gold); }
.squawk.recall .squawk-tail { border-color: rgba(206,184,136,.5); }

/* The notch points at whoever is talking, and slides when that changes —
   which is the desk visibly turning to look at them. */
.squawk-tail {
  position: absolute; bottom: -5px; left: 50%;
  width: 9px; height: 9px;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  transition: left .34s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.squawk.live .squawk-tail {
  opacity: 1;
  border-color: rgba(206,184,136,.34);
}

@keyframes squawkPop {
  0%   { opacity: 0; transform: translateY(4px) scale(.986); }
  60%  { opacity: 1; transform: translateY(0) scale(1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.squawk.pop { animation: squawkPop .26s cubic-bezier(.34,1.4,.64,1); }

/* ── Seats ──────────────────────────────────────────────────────────────── */

.desk-row {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--seat-gap);
}
/* Screen spill. The only ambient motion on the page. */
.desk-row::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  background: radial-gradient(ellipse 66% 100% at 50% 100%, rgba(206,184,136,.11), transparent 72%);
  pointer-events: none;
  animation: deskGlow 7.5s ease-in-out infinite;
}
@keyframes deskGlow { 0%, 100% { opacity: .72; } 42% { opacity: 1; } 74% { opacity: .84; } }

.seat { width: var(--seat-w); flex: 0 0 auto; }
.fig { width: 100%; height: auto; display: block; margin-bottom: -2px; }

.desk-front {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: var(--seat-gap);
  border-top: 2px solid rgba(206,184,136,.30);
  background: var(--panel);
  padding-top: 5px;
  box-shadow: 0 -7px 16px -7px rgba(0,0,0,.9);
}
.plate {
  width: var(--seat-w); flex: 0 0 auto;
  text-align: center;
  font-size: 8px; letter-spacing: .1em; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Figures ────────────────────────────────────────────────────────────── */
/* One tone per analyst drives the whole silhouette. Everything that needs to
   read as dark is black-over-tone rather than a second hue, so the figure
   stays one colour family. */

.fig .skin  { fill: var(--tone); }
.fig .hair  { fill: rgba(8,8,11,.58); }
.fig .vest  { fill: var(--vest); }
.fig .shirt { fill: var(--tone); opacity: .55; }
.fig .zip   { stroke: rgba(255,255,255,.15); }
.fig .glasses { stroke: rgba(8,8,11,.72); }

.fig .arm path { stroke: var(--tone); opacity: .9; }
.fig .arm-phone rect { fill: var(--gold); opacity: .8; }
.fig .prop-headset path { stroke: rgba(206,184,136,.55); }
.fig .prop-headset .ear { fill: rgba(206,184,136,.55); transition: fill .2s; }
.fig .cup rect { fill: rgba(255,255,255,.2); }
.fig .cup .rim { fill: rgba(206,184,136,.7); }
.fig .cup path { stroke: rgba(206,184,136,.6); }

.fig .monitor > rect:first-of-type { fill: #0a0a0d; stroke: rgba(255,255,255,.15); stroke-width: .6; }
.fig .screen { fill: rgba(206,184,136,.10); }
.fig .scan   { fill: rgba(206,184,136,.20); }

/* ── Idle, talking, agreeing ─────────────────────────────────────────────── */

.fig .body {
  transform-box: view-box; transform-origin: 20px 42px;
  animation: deskBreathe var(--breath, 5s) ease-in-out infinite var(--stagger, 0s);
}
@keyframes deskBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7px); } }

/* Leaning into the phone, and staying leaned until the squawk expires. */
.seat.talking .fig .body { animation: deskLean 1s cubic-bezier(.3,1.2,.5,1) forwards; }
@keyframes deskLean {
  0%   { transform: translateY(0) rotate(0deg); }
  32%  { transform: translateY(-1.7px) rotate(-2.4deg); }
  100% { transform: translateY(-.5px) rotate(-.7deg); }
}

/* Trey, when anybody else has spoken. */
.seat.nodding .fig .body { animation: deskNod 1.5s ease-in-out; }
@keyframes deskNod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  22% { transform: translateY(1.3px) rotate(1.7deg); }
  50% { transform: translateY(0) rotate(0deg); }
  76% { transform: translateY(1px) rotate(1.2deg); }
}

/* The handset lives at the ear. Talking is a flex of the arm into it, not a
   pickup — nobody on a desk has ever actually put the phone down. */
.fig .arm-phone {
  transform-box: view-box; transform-origin: 27.9px 26.4px;
  transition: transform .3s cubic-bezier(.3,1.3,.5,1);
}
.seat.talking .fig .arm-phone { transform: rotate(-7deg); }
.seat.talking .fig .arm-phone rect { opacity: 1; }

/* Mitch raises the coffee to say the thing. */
.fig .arm-coffee { transform-box: view-box; transform-origin: 28.4px 26.6px; }
.fig .cup { transform-box: view-box; transform-origin: 32.8px 36.4px; }
.fig .arm-coffee, .fig .cup { transition: transform .32s cubic-bezier(.3,1.3,.5,1); }
.seat.talking .fig .arm-coffee { transform: rotate(-9deg); }
.seat.talking .fig .cup { transform: translate(-.6px,-2.6px) rotate(-8deg); }

.seat.talking .fig .prop-headset .ear { fill: var(--gold); }
.seat.talking .fig .prop-headset path { stroke: rgba(206,184,136,.95); }

/* The week prints and every screen on the desk jumps. */
.monitor.flash .screen { animation: monFlash .75s ease-out; }
@keyframes monFlash {
  0%   { fill: rgba(206,184,136,.5); }
  100% { fill: rgba(206,184,136,.10); }
}

/* ── Order ticket ───────────────────────────────────────────────────────── */

#ticket-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.ticket {
  position: fixed;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 5px; overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(206,184,136,.20), rgba(120,47,64,.34));
  color: var(--gold);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: .1em;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  will-change: transform, opacity;
}

@keyframes slotStamp {
  0%   { transform: scale(1.15); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(206,184,136,.26); }
  60%  { transform: scale(.98); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(206,184,136,0); }
}
.slot.stamp { animation: slotStamp .34s cubic-bezier(.3,1.5,.5,1); }

@keyframes slotCleared {
  0%   { background: rgba(226,80,77,.3); border-color: var(--red); }
  100% { background: transparent; border-color: var(--line-2); }
}
.slot.cleared { animation: slotCleared .45s ease-out; }

/* ── Tape ───────────────────────────────────────────────────────────────── */

.tape { max-height: 190px; overflow-y: auto; font-size: 11px; line-height: 1.7; }
.tape-week { border-left: 2px solid var(--line-2); padding: 3px 0 9px 10px; margin-bottom: 8px; }
.tape-week-head { font-size: 9.5px; letter-spacing: .12em; color: var(--dim); margin-bottom: 3px; }
.tape-line { color: var(--text-2); }
.tape-line.good, .tape-line.ok { color: var(--green); }
.tape-line.bad { color: var(--red); }
.tape-line.warn { color: #d8a13c; }
.tape-line.shock { color: var(--garnet-lt); }
.tape-line.pattern, .tape-line.unlock { color: var(--gold); }

/* ── Overlay ────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,4,6,.86);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
}
.overlay-card {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 3px; padding: clamp(18px, 3.5vw, 34px);
  max-width: 620px; width: 100%;
  box-shadow: 0 30px 90px rgba(0,0,0,.8);
}

.rep-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.rep-kicker { font-size: 9px; letter-spacing: .2em; color: var(--garnet-lt); }
.rep-title { font-size: clamp(18px,3.4vw,25px); letter-spacing: .05em; font-weight: 700; margin: 5px 0 0; color: var(--gold); }
.rep-print { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.rep-level { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep-pct { font-size: 14px; font-variant-numeric: tabular-nums; }

.rep-lines { margin: 0 0 6px; }
.rep-line { padding: 5px 0 5px 12px; border-left: 2px solid var(--line-2); margin-bottom: 4px; font-size: 11.5px; line-height: 1.6; }
.rep-line.good, .rep-line.ok { border-color: var(--green); color: #9fd8cf; }
.rep-line.bad { border-color: var(--red); color: #efa5a3; }
.rep-line.warn { border-color: #d8a13c; color: #e0c088; }
.rep-line.shock { border-color: var(--garnet-lt); color: #d9a3b0; }
.rep-line.pattern, .rep-line.unlock { border-color: var(--gold); color: var(--gold); }

.grades { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 11px; }
.grades td { padding: 5px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.grades td:first-child { letter-spacing: .1em; color: var(--dim); }
.grades td:last-child { text-align: right; font-weight: 700; font-size: 13px; }
.g-A { color: var(--green); } .g-B { color: #8ec07c; }
.g-C { color: var(--gold); } .g-D { color: #d8a13c; } .g-F { color: var(--red); }

.ending-body { font-size: 13px; line-height: 1.82; white-space: pre-line; color: var(--text-2); margin: 18px 0; }
.ending-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px,1fr)); gap: 10px; margin: 18px 0; }
.es { border: 1px solid var(--line); border-radius: 2px; padding: 9px; text-align: center; }
.es span { display: block; font-size: 9px; letter-spacing: .14em; color: var(--dim); margin-bottom: 3px; }
.es b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  #terminal {
    grid-template-columns: minmax(0,1fr) 230px;
    grid-template-rows: 40vh auto auto auto;
    grid-template-areas:
      "chart   side"
      "week    side"
      "actions actions"
      "layers  tape";
  }
}

@media (max-width: 720px) {
  body { font-size: 12px; }
  #ticker-bar { gap: 10px; padding: 9px 12px; }
  .tb-mid { text-align: left; flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; }
  .tb-right { flex: 1 1 100%; justify-content: space-between; }
  .tb-stat { text-align: left; }
  #terminal {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: none;
    grid-template-areas: "chart" "week" "actions" "layers" "side" "tape";
    padding: 8px; gap: 8px;
  }
  #panel-chart { height: 38vh; min-height: 250px; }
  .slot-row { grid-template-columns: repeat(3, 1fr); }
  .action-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .layer-list { flex-direction: column-reverse; }
  .squawk { min-height: 84px; }
  .squawk-text { font-size: 11px; }
  /* Thumbs, not cursors. */
  .squawk-nav button { min-width: 30px; min-height: 27px; font-size: 8.5px; }
}

/* Everything the desk does is flavour, so all of it comes off. The squawk
   still says its line — that is content — it just arrives without the pop. */
@media (prefers-reduced-motion: reduce) {
  .fig .body,
  .seat.talking .fig .body,
  .seat.nodding .fig .body,
  .desk-row::before,
  .monitor.flash .screen,
  .squawk.pop,
  .slot.stamp,
  .slot.cleared { animation: none; }
  .fig .arm-phone, .fig .arm-coffee, .fig .cup, .squawk-tail { transition: none; }
}

/* Scrollbars, quietly */
.tape::-webkit-scrollbar, .overlay::-webkit-scrollbar { width: 8px; }
.tape::-webkit-scrollbar-thumb, .overlay::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.11); border-radius: 4px;
}
.tape::-webkit-scrollbar-track { background: transparent; }