/*
 * Leka replay viewer.
 *
 * Palette and type are the obsidian + emerald/teal token system from
 * danielesambu.com; [data-theme="light"] flips token *values* rather than
 * introducing a second palette, so every rule is written once.
 *
 * Layout principle: hierarchy comes from space, type scale, and alignment —
 * not from borders. There is exactly one hairline rule in the chrome (under
 * the header) and one inside a panel (under the quote row). Everything else
 * is separated by whitespace, which is why nothing here is a nested card.
 */

:root {
  --obsidian: #0c0d0e;
  --deep-charcoal: #17191b;
  --rich-black: #1c1e20;
  --dark-slate: #272a2d;
  --muted-graphite: #34373a;

  --antique-gold: #2fbf8f;
  --burnished-copper: #23a67a;
  --aged-bronze: #1f5c48;
  --warm-amber: #4fd6a8;
  --ink-strong: #06120d;

  --ivory-text: #f3f1ec;
  --parchment-text: #c4c6c8;
  --muted-text: #9b9ea1;
  --subtle-text: #63666a;

  --sell: hsl(350, 62%, 60%);
  --sell-dim: hsl(350, 40%, 34%);

  --serif-font: 'Playfair Display', Georgia, serif;
  --sans-font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono-font: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --hairline: rgba(243, 241, 236, 0.07);
  --rail: rgba(243, 241, 236, 0.045);
  --glow: 0 6px 24px rgba(47, 191, 143, 0.14);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme="light"] {
  --obsidian: #faf9f6;
  --deep-charcoal: #ffffff;
  --rich-black: #f5f3ef;
  --dark-slate: #e7e4dd;
  --muted-graphite: #d3cfc5;

  --antique-gold: #046c4e;
  --burnished-copper: #035939;
  --aged-bronze: #0f8c66;
  --warm-amber: #0f8c66;
  --ink-strong: #ffffff;

  --ivory-text: #15181b;
  --parchment-text: #33373b;
  --muted-text: #6b6e72;
  --subtle-text: #a2a5a8;

  --sell: hsl(350, 55%, 45%);
  --sell-dim: hsl(350, 35%, 74%);

  --hairline: rgba(20, 20, 20, 0.09);
  --rail: rgba(20, 20, 20, 0.05);
  --glow: 0 6px 24px rgba(4, 108, 78, 0.12);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory-text);
  font-family: var(--sans-font);
  font-size: 15px;
  line-height: 1.55;
  transition: background .45s var(--ease), color .45s var(--ease);
}

/* =====================  masthead  ===================== */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding: 26px 44px 22px;
  border-bottom: 1px solid var(--hairline);
}

.wordmark { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.name {
  font-family: var(--serif-font);
  font-size: 27px; font-weight: 500; letter-spacing: -0.01em;
}
.desc { color: var(--muted-text); font-size: 14px; font-weight: 300; }

.controls { display: flex; align-items: center; gap: 12px; }

/* Segmented control: one container, one moving highlight — not three buttons
   each carrying their own border. */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--rich-black);
  border-radius: 9px;
}
.seg {
  appearance: none; border: 0; background: transparent;
  color: var(--muted-text);
  font-family: var(--sans-font); font-size: 13.5px; font-weight: 500;
  padding: 6px 16px; border-radius: 7px; cursor: pointer;
  transition: color .2s var(--ease), background .28s var(--ease);
}
.seg:hover { color: var(--parchment-text); }
.seg.active {
  background: var(--antique-gold); color: var(--ink-strong);
  font-weight: 600; box-shadow: var(--glow);
}

.icon-btn {
  appearance: none; border: 0; background: var(--rich-black);
  color: var(--muted-text); width: 34px; height: 34px;
  border-radius: 9px; cursor: pointer; font-size: 14px;
  transition: color .2s var(--ease);
}
.icon-btn:hover { color: var(--antique-gold); }

/* =====================  transport  ===================== */

.transport {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 44px;
}

.play {
  appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--antique-gold); color: var(--ink-strong);
  font-size: 12px; line-height: 1; flex: none;
  transition: transform .18s var(--ease), box-shadow .28s var(--ease);
}
.play:hover { transform: scale(1.06); box-shadow: var(--glow); }

#scrub {
  appearance: none; flex: 1; height: 3px; border-radius: 2px;
  background: var(--dark-slate); cursor: pointer; outline: none;
}
#scrub::-webkit-slider-thumb {
  appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ivory-text); border: 0; cursor: grab;
  transition: transform .15s var(--ease);
}
#scrub::-webkit-slider-thumb:hover { transform: scale(1.18); }
#scrub::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ivory-text); border: 0; cursor: grab;
}

.counter {
  font-family: var(--mono-font); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--muted-text);
  min-width: 172px; text-align: right; flex: none;
}

#speed {
  appearance: none; border: 0; background: var(--rich-black);
  color: var(--parchment-text); font-family: var(--sans-font); font-size: 12.5px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; flex: none;
}

/* =====================  panels  ===================== */

main { padding: 14px 44px 52px; display: grid; gap: 60px; grid-template-columns: 1fr; }

/* Compare mode. Both columns run the identical section stack in the identical
   order, so section N on the left sits level with section N on the right and
   the eye can scan straight across. It only collapses on genuinely narrow
   screens, because stacked columns defeat the entire purpose of comparing. */
main.dual { grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 1020px) { main.dual { grid-template-columns: 1fr; gap: 52px; } }

.compare-note {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -6px 0 -18px;
  color: var(--muted-text); font-size: 13px; font-weight: 300; line-height: 1.6;
}
.compare-note b { color: var(--parchment-text); font-weight: 500; }
.compare-note .hint { color: var(--subtle-text); font-size: 12.5px; }

.book { min-width: 0; }

/* Instrument identity on the left, the three quotes on the right -- the
   arrangement a terminal uses, so the eye lands on price first. */
.book-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.ident { min-width: 0; }
.title {
  margin: 0 0 2px;
  font-family: var(--serif-font); font-size: 18px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--parchment-text);
}
.last-line { display: flex; align-items: baseline; gap: 10px; }
.last {
  font-family: var(--mono-font); font-variant-numeric: tabular-nums;
  font-size: 34px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05;
}
.chg { font-family: var(--mono-font); font-size: 12.5px; font-weight: 500; color: var(--subtle-text); }
.chg.up { color: var(--antique-gold); }
.chg.down { color: var(--sell); }

.quotes { display: flex; gap: 30px; }
.stat { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.figure {
  font-family: var(--mono-font); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
}
.stat.bid .figure { color: var(--antique-gold); }
.stat.ask .figure { color: var(--sell); }
.stat.mid .figure { color: var(--parchment-text); }
.caption {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--subtle-text); font-weight: 500;
}

.chart-main { margin-bottom: 30px; }

/* Single mode: ladder, then two stacked columns of supporting views. */
.body {
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr) minmax(0, 0.92fr);
}
@media (max-width: 1180px) { .body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }
@media (max-width: 820px)  { .body { grid-template-columns: 1fr; gap: 34px; } }

/* Compare mode: one column per panel, sections in a fixed order with fixed
   heights, so both panels line up row for row. */
main.dual .chart-main { margin-bottom: 24px; }
main.dual .body { grid-template-columns: 1fr; gap: 24px; }
main.dual .col-side { display: contents; }
main.dual .book-head { gap: 18px; }
main.dual .last { font-size: 27px; }
main.dual .quotes { gap: 20px; }
main.dual .figure { font-size: 15px; }
main.dual .ladder { min-height: 292px; }
main.dual .tape { max-height: 116px; }

h3 {
  margin: 0 0 12px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--subtle-text); font-weight: 600;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
h3 span {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-family: var(--mono-font); font-size: 10px; color: var(--subtle-text);
}

.col-side { display: grid; gap: 30px; align-content: start; min-width: 0; }
.unit { min-width: 0; }

canvas { width: 100%; display: block; }

/* =====================  depth ladder  ===================== */

.ladder {
  font-family: var(--mono-font); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lrow {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 46px;
  align-items: center; gap: 11px; height: 20px;
}
.lrow .bar { position: relative; height: 3px; border-radius: 2px; background: var(--rail); }
.lrow .fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; transition: width .2s var(--ease); }
.lrow.b .fill { background: var(--antique-gold); }
.lrow.a .fill { background: var(--sell); }
.lrow .px { text-align: right; font-weight: 500; }
.lrow.b .px { color: var(--antique-gold); }
.lrow.a .px { color: var(--sell); }
.lrow .qty { color: var(--muted-text); font-size: 11px; }

/* The spread gap is shown as space plus one small centered label, not a
   boxed divider — the eye already reads the colour change. */
.spreadrow {
  display: flex; align-items: center; gap: 10px;
  height: 30px; color: var(--subtle-text);
  font-family: var(--sans-font);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.spreadrow::before, .spreadrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rail);
}
.empty { color: var(--subtle-text); font-style: italic; font-size: 11.5px; padding: 6px 0; font-family: var(--sans-font); }

/* =====================  legend, stats, tape  ===================== */

.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 10px; color: var(--subtle-text); letter-spacing: 0.06em; }
.k::before { content: "—"; margin-right: 5px; font-weight: 700; }
.k50::before { color: var(--antique-gold); }
.k99::before { color: var(--warm-amber); }
.k999::before { color: var(--sell); }
.lat-now { font-family: var(--mono-font); }

.flowstats {
  margin-top: 12px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px;
  font-size: 10.5px; color: var(--subtle-text); letter-spacing: 0.04em;
}
.flowstats div { display: flex; flex-direction: column; gap: 1px; }
.flowstats b {
  color: var(--parchment-text); font-weight: 500;
  font-family: var(--mono-font); font-size: 13px; font-variant-numeric: tabular-nums;
}

.tape-unit { min-height: 0; }
.tape {
  font-family: var(--mono-font); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  max-height: 168px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--dark-slate) transparent;
}
.tape::-webkit-scrollbar { width: 4px; }
.tape::-webkit-scrollbar-thumb { background: var(--dark-slate); border-radius: 2px; }
.trow {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 54px;
  gap: 12px; height: 19px; align-items: center;
}
.trow .tt { color: var(--subtle-text); font-family: var(--sans-font); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; }
.trow .tpx { text-align: right; font-weight: 500; }
.trow.B .tpx { color: var(--antique-gold); }
.trow.A .tpx { color: var(--sell); }
.trow .tq { text-align: right; color: var(--muted-text); }

/* =====================  colophon  ===================== */

.colophon {
  padding: 0 44px 48px; max-width: 74ch;
  color: var(--subtle-text); font-size: 12.5px; font-weight: 300; line-height: 1.7;
}
.colophon code {
  font-family: var(--mono-font); font-size: 11px;
  color: var(--muted-text);
}
.colophon em { color: var(--muted-text); font-style: italic; }
.colophon a { color: var(--antique-gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.colophon a:hover { border-bottom-color: var(--antique-gold); }

.loading { padding: 72px 0; text-align: center; color: var(--subtle-text); font-weight: 300; }
.loading code { font-family: var(--mono-font); font-size: 11.5px; color: var(--muted-text); }

@media (max-width: 720px) {
  .masthead, .transport, main, .colophon { padding-left: 22px; padding-right: 22px; }
  .figure { font-size: 25px; }
}

/* Price chart legend: small colour swatches inline in the section heading. */
.price-legend { display: inline-flex; align-items: center; gap: 4px; }
.price-legend i { display: inline-block; width: 9px; height: 2px; border-radius: 1px; margin-left: 7px; }
.price-legend i:first-child { margin-left: 0; }
.sw-bid { background: var(--antique-gold); }
.sw-ask { background: var(--sell); }
.sw-mid { background: var(--muted-text); opacity: .6; }

/* ---------- price chart hover readout ---------- */

.price-wrap { position: relative; }
.price-tip {
  display: none; position: absolute; pointer-events: none; z-index: 3;
  min-width: 124px; padding: 9px 11px 8px;
  background: color-mix(in srgb, var(--deep-charcoal) 92%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  font-family: var(--mono-font); font-variant-numeric: tabular-nums;
  font-size: 11.5px; line-height: 1.5;
}
.tip-time {
  color: var(--ivory-text); font-weight: 600; font-size: 11.5px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.tip-row { display: flex; justify-content: space-between; gap: 16px; }
.tip-row span {
  color: var(--subtle-text); font-family: var(--sans-font);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
}
.tip-row b { font-weight: 500; color: var(--parchment-text); }
.tip-row b.b { color: var(--antique-gold); }
.tip-row b.a { color: var(--sell); }
.tip-foot {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline);
  color: var(--subtle-text); font-family: var(--sans-font); font-size: 10px;
  letter-spacing: 0.05em;
}
.price canvas, canvas.price { cursor: crosshair; }

/* ---------- dataset picker ---------- */

.dataset-bar {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 14px 44px;
  border-bottom: 1px solid var(--hairline);
}
.dataset-group { display: flex; align-items: center; gap: 12px; }
.dataset-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--subtle-text); font-weight: 600;
}
/* Reuses .segmented/.seg from the masthead's mode switch, so a new symbol
   or model reads as the same control, not a different widget. */
.dataset-bar .segmented { padding: 2px; }
.dataset-bar .seg { padding: 5px 13px; font-size: 12.5px; }

@media (max-width: 640px) {
  .dataset-bar { padding: 12px 22px; gap: 16px; }
}