/* Trade Desk v5 — the Bloomberg desk. Black screen, orange window titles,
   yellow numerals, dense monospace windows; brass for the brand and the
   account curve. Token NAMES are kept from earlier builds (navy-0..3 =
   surfaces, ivory = ink) so the JS-drawn SVGs restyle for free. The light
   theme ([data-theme="light"]) borrows "The Floor" paper-and-brass palette. */
:root {
  --navy-0: #000000;      /* page */
  --navy-1: #060606;      /* window */
  --navy-2: #0d0d0d;      /* cell */
  --navy-3: #151515;
  --line: #2a2a2a;
  --ivory: #e6e6e6;       /* ink */
  --muted: #8d8d8d;
  --brass: #c9a24a;
  --brass-hi: #e2c169;
  --green: #19d66b;
  --red: #ff3b30;
  --amber: #ff9a00;       /* day book */
  --blue: #38d4ff;        /* swing book */
  --on-accent: #000;
  --org: #ff9a00;         /* window titles */
  --yel: #ffd21f;         /* key values */
  --bar: #161616;         /* title bars */
  --zebra: rgba(255,255,255,.03);
  --strip-bg: #0b0b0b;    /* command bar + ticker */
  --strip-ink: #e6e6e6;
  --strip-mute: #8d8d8d;
  --glow: rgba(255,154,0,.35);
  --mono: "IBM Plex Mono", Menlo, Consolas, "Courier New", monospace;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color-scheme: dark;
}
[data-theme="light"] {
  --navy-0: #f4efe3; --navy-1: #fbf8f0; --navy-2: #f0eadb; --navy-3: #e7dfcb;
  --line: #ddd2b8; --ivory: #1b2a47; --muted: #6b7890;
  --brass: #a17c2f; --brass-hi: #8a6520;
  --green: #1e9e66; --red: #d5504d; --amber: #c98f1f; --blue: #2e77c9;
  --on-accent: #2a2107; --org: #8a6520; --yel: #1b2a47; --bar: #efe7d3;
  --zebra: rgba(27,42,71,.035);
  --strip-bg: #0f1b33; --strip-ink: #e8e2d1; --strip-mute: #8fa0c2;
  --glow: rgba(201,143,31,.35);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy-0); color: var(--ivory);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  min-height: 100vh; position: relative; font-size: .9rem; line-height: 1.4;
}
.bg-glow { display: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--navy-3); border: 2px solid var(--navy-0); }
.hidden { display: none !important; }
.pos { color: var(--green); } .neg { color: var(--red); }
.empty { color: var(--muted); font-size: .8rem; padding: 6px 0; }
code { color: var(--brass-hi); }
.hint { font-size: .72rem; color: var(--muted); font-weight: 400; margin-left: 8px; letter-spacing: 0; text-transform: none; }

/* ---------- command bar ---------- */
.cmd {
  display: flex; align-items: center; gap: 14px; padding: 6px 14px;
  background: var(--strip-bg); color: var(--strip-ink); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; font-size: .84rem;
}
.cmd .prompt { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--org); letter-spacing: .06em; white-space: nowrap; }
.logo {
  width: 26px; height: 26px; display: grid; place-items: center;
  font-weight: 900; font-size: .72rem; color: #1b1406; letter-spacing: .02em;
  background: linear-gradient(135deg, #e2c169, #8a6520); box-shadow: 0 0 10px rgba(201,162,74,.45);
}
.cmd .field { flex: 1; min-width: 160px; background: rgba(255,255,255,.05); border: 1px solid #333; padding: 3px 9px; color: var(--yel); letter-spacing: .06em; font-weight: 500; }
[data-theme="light"] .cmd .field { color: #ffd21f; }
.cmd .field i { display: inline-block; width: 7px; height: 13px; background: currentColor; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cmd .clock { color: var(--strip-mute); white-space: nowrap; }
.cmd .clock b { color: var(--strip-ink); font-weight: 500; }
.chip { padding: 2px 10px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; border: 1px solid #444; color: var(--strip-ink); white-space: nowrap; }
.chip.dry { color: var(--amber); border-color: var(--amber); }
.chip.sim { color: var(--green); border-color: var(--green); }
.chip.live { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 12px rgba(255,59,48,.6); }
.alive { font-size: .74rem; color: var(--strip-mute); white-space: nowrap; }
.alive.ok::before { content: "● "; color: var(--green); }
.alive.stale::before { content: "● "; color: var(--amber); }
.alive.off::before { content: "● "; color: var(--red); }
.tbtn { background: transparent; color: var(--strip-ink); border: 1px solid #444; padding: 3px 10px; font: 700 .7rem var(--mono); letter-spacing: .1em; cursor: pointer; }
.tbtn:hover { border-color: var(--org); color: var(--org); }

/* ---------- function bar (tabs) ---------- */
.fn { display: flex; gap: 2px; align-items: center; padding: 4px 10px; background: var(--strip-bg); border-bottom: 1px solid var(--line); position: sticky; top: 39px; z-index: 29; }
.tabbtn {
  display: flex; align-items: center; gap: 6px; background: transparent; color: var(--strip-ink);
  border: 1px solid transparent; padding: 3px 12px; cursor: pointer;
  font: 500 .8rem var(--mono); letter-spacing: .04em; transition: background .12s;
}
.tabbtn b { color: var(--yel); font-weight: 500; }
[data-theme="light"] .tabbtn b { color: #ffd21f; }
.tabbtn:hover { border-color: #444; }
.tabbtn.active { background: var(--org); color: #000; }
.tabbtn.active b { color: #000; }
.tabbtn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.8s infinite; }
.tabbtn.active .dot { background: #000; box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: .35; } }
.fnhint { margin-left: auto; color: var(--strip-mute); font-size: .7rem; letter-spacing: .04em; }

/* ---------- ticker ---------- */
.ticker { display: flex; flex-wrap: wrap; background: var(--strip-bg); color: var(--strip-ink); border-bottom: 1px solid var(--line); font-size: .8rem; }
.ticker div { padding: 5px 12px; border-right: 1px solid var(--line); white-space: nowrap; }
.ticker small { color: var(--org); font-weight: 700; margin-right: 6px; letter-spacing: .08em; }
.ticker .g { color: var(--strip-mute); margin-left: 6px; }
.ticker .y { color: var(--yel); }
[data-theme="light"] .ticker .y { color: #ffd21f; }
.ticker .pos { color: var(--green); } .ticker .neg { color: var(--red); }

.banner { margin: 8px 10px 0; padding: 8px 12px; font-size: .84rem; color: var(--red); border: 1px solid var(--red); background: rgba(255,59,48,.08); }
.banner b { letter-spacing: .08em; }

/* ---------- layout + windows ---------- */
main { padding: 8px 10px 20px; display: grid; gap: 8px; max-width: 1400px; margin: 0 auto; }
.panel, .risk-row, .hero {
  background: var(--navy-1); border: 1px solid var(--line); border-radius: 0; padding: 0 0 10px;
}
.panel h2, .risk-row .rowlabel, .hero-tag {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 4px 10px; background: var(--bar); border-bottom: 1px solid var(--line);
  color: var(--org); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.panel h2 .hint, .risk-row .rowlabel .hint { margin-left: auto; text-align: right; }
.panel > *:not(h2) { margin: 8px 10px 0; }
.panel h3 {
  font-size: .68rem; color: var(--org); margin: 12px 10px 6px !important;
  text-transform: uppercase; letter-spacing: .14em; display: flex; align-items: center; gap: 8px;
}
.panel h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.accent-day h2, .bookhdr.day { border-left: 3px solid var(--amber); }
.accent-swing h2, .bookhdr.swing { border-left: 3px solid var(--blue); }
.accent-total h2, .bookhdr.total { border-left: 3px solid var(--brass); }

/* session window */
.session .body { margin: 0 !important; padding: 26px 22px 10px; }
.steps { display: flex; justify-content: space-between; position: relative; }
.steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: 6px; height: 2px; background: var(--line); }
.steps .prog { position: absolute; left: 4%; top: 6px; height: 2px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.st { position: relative; text-align: center; font-size: .7rem; color: var(--muted); flex: 1; }
.st::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 8px; background: var(--navy-1); border: 2px solid var(--line); position: relative; z-index: 1; }
.st b { display: block; color: var(--ivory); font-weight: 500; font-size: .78rem; }
.st.done::before { background: var(--green); border-color: var(--green); }
.st.done b { color: var(--muted); }
.st.now::before { background: var(--yel); border-color: var(--yel); box-shadow: 0 0 14px var(--glow); }
.st.now b, .st.now { color: var(--yel); }
.st.next b { color: var(--org); }

/* books (Desk tab) */
.booknav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.booknav .bn { padding: 3px 12px; border: 1px solid var(--line); background: var(--navy-1); color: var(--ivory); text-decoration: none; font-size: .74rem; letter-spacing: .06em; font-weight: 500; }
.booknav .bn.day { border-left: 3px solid var(--amber); }
.booknav .bn.swing { border-left: 3px solid var(--blue); }
.booknav .bn.total { border-left: 3px solid var(--brass); }
.booknav .bn:hover { border-color: var(--org); color: var(--org); }
.book { scroll-margin-top: 92px; display: grid; gap: 8px; }
.bookhdr { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 6px 10px; background: var(--bar); border: 1px solid var(--line); }
.bookname { font-size: .9rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--org); }
.bookhdr.swing .bookname { color: var(--blue); }
.bookhdr.total .bookname { color: var(--brass-hi); }
.bookdesc { font-size: .72rem; color: var(--muted); }

/* ---------- ledger gauges ---------- */
.risk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; padding: 0 10px 10px; }
.risk-row .rowlabel { grid-column: 1 / -1; margin: 0 -10px 4px; }
.gauge label { font-size: .64rem; color: var(--org); text-transform: uppercase; letter-spacing: .12em; }
.gauge .bar { height: 7px; background: var(--navy-3); margin: 5px 0 4px; overflow: hidden; }
.gauge .fill { height: 100%; width: 0; transition: width .5s; background: var(--green); }
.gauge .fill.neg { background: var(--red); }
.gauge .fill.warn { background: var(--amber); }
.gauge span { font-size: .9rem; font-weight: 700; color: var(--yel); }
[data-theme="light"] .gauge span { color: var(--ivory); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th { text-align: left; color: var(--org); font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; padding: 4px 7px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 3px 7px; border-bottom: 1px solid var(--navy-3); vertical-align: middle; }
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: rgba(255,154,0,.07); }
td b { color: var(--yel); font-weight: 700; }
[data-theme="light"] td b { color: var(--ivory); }
td.run { font-weight: 700; }

/* ---------- badges ---------- */
.badge { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .1em; padding: 1px 7px; border: 1px solid var(--line); color: var(--muted); }
.b-green { color: var(--green); border-color: var(--green); background: rgba(25,214,107,.08); }
.b-red { color: var(--red); border-color: var(--red); background: rgba(255,59,48,.08); }
.b-gold { color: var(--yel); border-color: var(--brass); background: rgba(201,162,74,.1); }
[data-theme="light"] .b-gold { color: var(--brass-hi); }
.b-mut { color: var(--muted); }
.k-day { color: var(--amber); border-color: var(--amber); background: rgba(255,154,0,.08); }
.k-swing { color: var(--blue); border-color: var(--blue); background: rgba(56,212,255,.08); }
.side { font-size: .64rem; font-weight: 700; padding: 1px 7px; letter-spacing: .1em; }
.side.long { color: var(--green); border: 1px solid var(--green); }
.side.short { color: var(--red); border: 1px solid var(--red); }

/* ---------- trade cards (blotter rows) ---------- */
.tgroup { display: grid; gap: 6px; }
.tcard { border: 1px solid var(--line); padding: 7px 10px; background: var(--navy-2); display: grid; gap: 7px; }
.tcard:hover { border-color: var(--org); }
.tcard .row1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tcard .sym { font-size: 1rem; font-weight: 700; color: var(--yel); letter-spacing: .04em; }
[data-theme="light"] .tcard .sym { color: var(--ivory); }
.tcard .setup { font-size: .72rem; color: var(--org); font-weight: 700; }
.tcard .grade { font-size: .68rem; color: var(--muted); }
.tcard .stage { margin-left: auto; font-size: .64rem; font-weight: 700; padding: 2px 9px; border: 1px solid var(--line); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.stage.s-dry { color: var(--amber); border-color: var(--amber); }
.stage.s-wait { color: var(--yel); border-color: var(--brass); }
.stage.s-in { color: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(25,214,107,.25); }
.stage.s-target { background: var(--green); color: #000; border-color: var(--green); }
.stage.s-stop { background: var(--red); color: #fff; border-color: var(--red); }
.stage.s-dead { color: var(--muted); }
.rail-wrap { display: grid; gap: 4px; }
.rail { position: relative; height: 8px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,59,48,.8) 0%, var(--navy-3) 34%, var(--navy-3) 66%, rgba(25,214,107,.8) 100%); }
.rail .tick { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--brass); }
.rail .marker { position: absolute; top: -5px; width: 4px; height: 16px; background: var(--yel); transform: translateX(-50%); transition: left .5s; box-shadow: 0 0 8px var(--yel); }
[data-theme="light"] .rail .marker { background: var(--ivory); box-shadow: none; }
.rail-labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); }
.rail-labels b { color: var(--ivory); font-weight: 700; }
.tcard .meta { font-size: .68rem; color: var(--muted); }
.tcard .meta b { color: var(--ivory); }

/* ---------- metrics + equity ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.metric { background: var(--navy-2); border: 1px solid var(--line); padding: 7px 10px; }
.metric label { display: block; font-size: .6rem; color: var(--org); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; }
.metric b { font-size: 1rem; color: var(--yel); }
[data-theme="light"] .metric b { color: var(--ivory); }
.metric b.pos { color: var(--green); } .metric b.neg { color: var(--red); }
[id$="-equity"] { margin-top: 8px; }
[id$="-equity"] svg { display: block; width: 100%; height: auto; }

/* ---------- studies ---------- */
.studies { display: grid; gap: 6px; }
.study { border: 1px solid var(--line); padding: 8px 10px; background: var(--navy-2); }
.study.clickable { cursor: pointer; }
.study.clickable:hover { border-color: var(--org); }
.study-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.study-head b { font-size: .86rem; color: var(--yel); }
[data-theme="light"] .study-head b { color: var(--ivory); }
.study-head .view { margin-left: auto; font-size: .68rem; color: var(--org); font-weight: 700; letter-spacing: .08em; }
.study-stats { font-size: .76rem; color: var(--ivory); margin-top: 5px; }
.study-note { font-size: .72rem; color: var(--muted); margin-top: 4px; line-height: 1.45; font-family: var(--sans); }

/* ---------- hero ---------- */
.hero { padding-bottom: 12px; }
.hero-tag { display: flex; }
.hero h2 { font-size: 1.15rem; color: var(--yel); margin: 10px 10px 6px; letter-spacing: .02em; }
[data-theme="light"] .hero h2 { color: var(--ivory); }
.hero h2 .hint { display: inline; }
.hero p { color: var(--ivory); opacity: .85; font-size: .82rem; line-height: 1.55; max-width: 900px; margin: 0 10px; font-family: var(--sans); }
.hero p b { color: var(--yel); }
[data-theme="light"] .hero p b { color: var(--ivory); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 10px 0; }
.hero-stats span { font-size: .74rem; font-weight: 700; color: var(--brass-hi); background: rgba(201,162,74,.08); border: 1px solid var(--brass); padding: 3px 10px; }

/* ---------- playbook ---------- */
.playbook { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.playbook.single { grid-template-columns: 1fr; max-width: 900px; }
@media (max-width: 900px) { .playbook { grid-template-columns: 1fr; } }
.playbook figure { margin: 0; border: 1px solid var(--line); overflow: hidden; background: #fbf8f0; }
.playbook img { display: block; width: 100%; height: auto; }

/* ---------- decision log ---------- */
#log { display: grid; gap: 1px; max-height: 340px; overflow-y: auto; }
.lrow { font-size: .76rem; display: flex; gap: 10px; padding: 3px 7px; border-bottom: 1px dotted var(--navy-3); }
.lrow .lt { color: var(--muted); min-width: 92px; }
.lrow .lbadge { font-weight: 700; min-width: 62px; font-size: .64rem; letter-spacing: .1em; padding-top: 2px; }
.lbadge.order { color: var(--green); } .lbadge.blocked { color: var(--amber); }
.lbadge.update { color: var(--blue); } .lbadge.error { color: var(--red); }

/* ---------- gate ---------- */
.gate-head { display: flex; align-items: center; gap: 12px; }
.gate-foot { display: block; margin-top: 8px; line-height: 1.5; font-family: var(--sans); }
#gate-table td.mark { width: 26px; text-align: center; }
.gbar { height: 6px; min-width: 120px; background: var(--navy-3); overflow: hidden; }
.gbar i { display: block; height: 100%; background: var(--green); transition: width .5s; }
.gbar i.warn { background: var(--amber); }
.gbar i.neg { background: var(--red); }

/* ---------- trading plan ---------- */
.lawgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.law { background: var(--navy-2); border: 1px solid var(--line); border-left: 3px solid var(--brass); padding: 7px 10px; }
.law b { display: block; font-size: .82rem; color: var(--yel); margin-bottom: 2px; }
[data-theme="light"] .law b { color: var(--ivory); }
.law span { font-size: .72rem; color: var(--muted); line-height: 1.45; font-family: var(--sans); }
.accent-day .law { border-left-color: var(--amber); }
.accent-swing .law { border-left-color: var(--blue); }
.planp { font-size: .82rem; color: var(--ivory); opacity: .85; line-height: 1.55; max-width: 900px; font-family: var(--sans); }
.planp b { color: var(--yel); }
[data-theme="light"] .planp b { color: var(--ivory); }

/* ---------- friday audit ---------- */
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .review-grid { grid-template-columns: 1fr; } }
#day-bars { display: grid; gap: 3px; }
.dbar { display: grid; grid-template-columns: 54px 1fr 56px; align-items: center; gap: 8px; font-size: .74rem; }
.dbar .track { position: relative; height: 10px; background: var(--navy-3); }
.dbar .val { position: absolute; top: 0; height: 100%; }
.dbar .val.pos-bar { background: var(--green); left: 50%; }
.dbar .val.neg-bar { background: var(--red); right: 50%; }
.dbar .num { text-align: right; font-weight: 700; }
#adjustments { list-style: none; display: grid; gap: 4px; padding: 0; }
#adjustments li { font-size: .78rem; padding: 6px 10px; border-left: 3px solid var(--brass); background: var(--navy-2); font-family: var(--sans); }
#adjustments li.warn { border-left-color: var(--red); }
#adjustments li b { color: var(--yel); }
[data-theme="light"] #adjustments li b { color: var(--ivory); }

/* ---------- footer ---------- */
footer { display: flex; gap: 18px; flex-wrap: wrap; padding: 6px 14px; color: var(--strip-mute); font-size: .7rem; border-top: 1px solid var(--line); background: var(--strip-bg); margin-top: 8px; }
footer .keys { margin-left: auto; }
footer b { color: var(--yel); font-weight: 500; }