/* ROBINHOOD TRENCHES — terminal readout.
   Flat, square, dense. No rounded corners, no gradients except the heat bar. */

:root {
  --bg: #04060a;
  --panel: #070a0f;
  --row: #0a0e14;
  --line: #16202c;
  --line-soft: #0d141c;
  --fg: #c2d2e4;
  --dim: #5c6d82;
  --dimmer: #35424f;
  --green: #24ff8b;
  --red: #ff3355;
  --amber: #ffb000;
  --cyan: #2fd9ff;
  --magenta: #ff4fd8;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 12px; line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
body { padding-bottom: 30px; }

.scanlines {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) { .scanlines { display: none; } }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
b { font-weight: 500; color: var(--fg); }
.up { color: var(--green); }
.down { color: var(--red); }
.flat { color: var(--dim); }
.dim { color: var(--dim); }

/* --------------------------------------------------------------- header */

.head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 700; letter-spacing: .12em; font-size: 14px; color: var(--green); }
.caret { animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.head .sub { color: var(--dim); margin-left: 10px; font-size: 11px; }
.head-r { display: flex; gap: 6px; }

button.tg, select, input {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--dim); background: var(--row);
  border: 1px solid var(--line); border-radius: 0; padding: 3px 8px; cursor: pointer;
}
button.tg:hover, select:hover { color: var(--fg); border-color: var(--dim); }
button.tg[aria-pressed="true"], button.tg.on { color: var(--green); border-color: #14663a; }
input { color: var(--fg); cursor: text; min-width: 160px; }
input::placeholder { color: var(--dimmer); }

/* -------------------------------------------------------------- readout */

.readout {
  display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center;
  padding: 5px 12px; border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 11px; background: var(--bg);
}
.ro-dot::before {
  content: "●"; color: var(--dimmer); margin-right: 5px;
}
.ro-dot.live::before { color: var(--green); animation: pulse 2s infinite; }
.ro-dot.warn::before { color: var(--amber); }
.ro-dot.down::before { color: var(--red); }
@keyframes pulse { 50% { opacity: .3; } }

/* --------------------------------------------------------------- window */

.winbar {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.winbar-label { color: var(--dimmer); font-size: 10px; letter-spacing: .14em; margin-right: 6px; }
.winbar button {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  font-family: var(--mono); font-size: 11px; padding: 2px 9px; cursor: pointer;
}
.winbar button:hover { color: var(--fg); }
.winbar button.on { color: var(--green); border-color: #14663a; background: var(--row); }
.winbar-note { color: var(--dimmer); font-size: 10px; margin-left: 12px; }

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--line); border-bottom: 1px solid var(--line);
}
.st { background: var(--panel); padding: 8px 12px 9px; min-width: 0; }
.st-k { font-size: 9.5px; letter-spacing: .1em; color: var(--dim); white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; }
.st-hint { color: var(--dimmer); letter-spacing: 0; }
.st-v { font-size: 22px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-n { font-size: 10px; color: var(--dimmer); margin-top: 2px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heatbar { height: 5px; margin-top: 5px; background: var(--row); border: 1px solid var(--line); }
.heatbar span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #14663a, var(--green) 60%, var(--amber) 85%, var(--magenta));
  transition: width .5s linear; }

/* ---------------------------------------------------------------- rules */

.rule {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px 7px; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.rl { color: var(--green); font-size: 11px; letter-spacing: .16em; font-weight: 700; }
.rm { color: var(--dimmer); font-size: 10.5px; }
.rtools { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* --------------------------------------------------------------- tables */

.tblwrap { overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--panel); }
.tblwrap#tape-wrap, .tblwrap.tall { max-height: 520px; overflow-y: auto; }
.tblwrap.short { max-height: 300px; overflow-y: auto; }

table.t { width: 100%; border-collapse: collapse; white-space: nowrap; }
table.t th {
  text-align: left; font-size: 9.5px; letter-spacing: .1em; color: var(--dim);
  font-weight: 500; padding: 5px 10px; background: var(--row);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3;
}
table.t th.n, table.t td.n { text-align: right; }
table.t td { padding: 3px 10px; border-bottom: 1px solid var(--line-soft); }
table.t tbody tr:hover td { background: #0e141c; }
.w-time { width: 70px; }
.w-side { width: 34px; }

.sym { color: var(--cyan); font-weight: 500; }
.stk { color: var(--amber); font-size: 9px; }
.newpos { color: var(--magenta); font-size: 9px; }
.who { color: var(--fg); cursor: pointer; }
.who:hover { color: var(--green); text-decoration: underline; }
.addr { color: var(--dimmer); font-size: 10px; }
.lk { color: var(--dim); font-size: 10px; letter-spacing: .04em; }
.lk:hover { color: var(--cyan); }
.est { color: var(--dimmer); }

tr.buy .side { color: var(--green); font-weight: 700; }
tr.sell .side { color: var(--red); font-weight: 700; }
tr.buy .size { color: var(--green); }
tr.sell .size { color: var(--red); }

/* size tiers — a big fill has to read as big */
tr.sz2 td { font-size: 12.5px; }
tr.sz3 td { font-size: 13.5px; background: #0a1118; }
tr.sz4 td { font-size: 15px; font-weight: 700; background: #0b1a13; }
tr.sz4.sell td { background: #1a0b11; }
tr.sz4 .size { text-shadow: 0 0 16px currentColor; }
tr.new td { animation: flash .8s ease; }
@keyframes flash { from { background: rgba(36,255,139,.22); } to { background: transparent; } }
tr.new.sell td { animation: flashs .8s ease; }
@keyframes flashs { from { background: rgba(255,51,85,.20); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.new td, tr.new.sell td { animation: none; } }

.state-printing { color: var(--green); }
.state-draining { color: var(--red); }
.state-flat { color: var(--dimmer); }

.empty { padding: 20px 12px; color: var(--dimmer); }
.chain { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 9.5px; padding: 0 5px; border: 1px solid var(--line); color: var(--dim); }
.chip.lead { color: var(--magenta); border-color: #43203c; }
.arrow { color: var(--dimmer); }

/* ---------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86);
         display: flex; align-items: flex-start; justify-content: center;
         padding: 30px 12px; overflow-y: auto; }
.modal[hidden], .big[hidden] { display: none; }
.modal-box { background: var(--panel); border: 1px solid var(--line);
             width: min(1180px, 100%); position: relative; }
.modal-close { position: absolute; top: 7px; right: 9px; background: none; border: 0;
               color: var(--dim); font-family: var(--mono); font-size: 11px; cursor: pointer; }
.modal-close:hover { color: var(--green); }
.mhead { padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.mhead h3 { margin: 0; font-size: 17px; letter-spacing: .04em; }
.mlinks { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; margin-top: 7px; }
.mgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
         background: var(--line); border-bottom: 1px solid var(--line); }
.mgrid .c { background: var(--panel); padding: 7px 11px; }
.mgrid .c .k { font-size: 9.5px; letter-spacing: .08em; color: var(--dim); }
.mgrid .c .v { font-size: 15px; font-weight: 700; }
.mtitle { font-size: 10px; letter-spacing: .14em; color: var(--dim);
          padding: 11px 12px 5px; border-top: 1px solid var(--line-soft); }
.curve { display: block; width: 100%; height: 88px; }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
        padding: 10px 12px; color: var(--dimmer); font-size: 10px;
        border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ big */

.big {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 300;
  padding: 8px 22px; pointer-events: none; border: 1px solid currentColor;
  background: #050a08; font-size: 15px; font-weight: 700; letter-spacing: .05em;
  text-shadow: 0 0 18px currentColor; animation: bigin 2.4s ease forwards;
}
@keyframes bigin {
  0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }
}

@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .stats { grid-template-columns: repeat(2, 1fr); }
                             .mgrid { grid-template-columns: repeat(2, 1fr); }
                             .head .sub, .winbar-note { display: none; } }