/* ============================================================
   Crude Scout — Unified design system
   Cool grays · system font · 4px radii · color used sparingly
   ============================================================ */

:root {
  /* Surfaces — cool grays only */
  --bg:        #111;
  --bg-1:      #1a1a1a;   /* row separators, input bg, soft surface */
  --bg-2:      #222;      /* button bg, raised surface */
  --bg-3:      #2a2a2a;   /* hover */
  --bg-hover:  #1f1f1f;

  /* Borders */
  --line:        #333;
  --line-soft:   #1a1a1a;
  --line-strong: #444;

  /* Text ramp */
  --fg:   #e0e0e0;
  --fg-2: #aaa;
  --fg-3: #888;
  --fg-4: #666;
  --fg-5: #444;

  /* Blue — interactive (links, primary actions, filter-active) */
  --blue:               #7db4ff;
  --blue-bg:            #161e2c;
  --blue-border:        #2a3a55;
  --blue-border-strong: #4a6fa0;

  /* Green — live / ok */
  --green:    #6fdc8c;
  --green-bg: #142819;

  /* Red — alert / error / dead */
  --red:        #ff7070;
  --red-bg:     #2a1818;
  --red-bright: #ff4444;

  /* Yellow — warn / attention */
  --yellow:    #e0b870;
  --yellow-bg: #241f15;

  /* Warm — narrative-only: touched / escalation / milestone */
  --warm:        #d4a560;
  --warm-dim:    #a8854a;
  --warm-faint:  rgba(212, 165, 96, 0.14);

  --radius: 4px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Scrollbars — thin, original style */
html { overflow-y: scroll; scrollbar-color: var(--bg-3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
::selection { background: var(--blue-bg); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; border: 0; padding: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }

/* ---------- Layout ---------- */

/* Clamp to viewport height so the Narrative 3-column body has a real height
   to fill (ProgressionChart uses a ResizeObserver and needs a deterministic
   parent height). The non-narrative screens scroll inside .screen-body. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* The main area below topbar + toolbar fills the rest of the viewport so
   full-bleed tabs (Narrative) can render a 3-column grid that fills it. */
.main-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Screen = a single tab's body. Flex column so the toolbar + body stack. */
.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.screen-body {
  flex: 1;
  min-height: 0;
  padding-top: 8px;
  padding-bottom: 36px;
  overflow: auto;
}
.screen-body.full-bleed {
  padding: 0;
  overflow: hidden;
}
.screen.full-bleed {
  /* Narrative claims the whole space; no inner container constraint. */
}

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Topbar (global) ---------- */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex: 0 0 auto;
}
.topbar-inner {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 0;
}

/* ---------- Per-tab toolbar (second strip) ---------- */

.toolbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex: 0 0 auto;
}
.toolbar-inner {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 14px;
  flex-wrap: wrap;
}
.toolbar-title {
  font-size: 14px;
  color: var(--fg);
  font-weight: 500;
}
.toolbar-sub {
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.toolbar-sub b { color: var(--fg-2); font-weight: 500; }
.toolbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 0;
  margin-right: 8px;
  font-size: 13px; color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
}
.topbar .brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-2);
  box-shadow: 0 0 6px rgba(170,170,170,0.5);
  animation: brandPulse 2.6s ease-in-out infinite;
}

.tabs { display: flex; gap: 0; align-items: stretch; }
.tabs a, .tabs button {
  color: var(--fg-3);
  padding: 12px 14px;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.tabs a:hover, .tabs button:hover { color: var(--fg); text-decoration: none; }
.tabs a.active, .tabs button.active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}


/* Topbar status cluster — plain, small, no labels */
.status {
  margin-left: auto;
  display: flex; align-items: center;
  gap: 14px;
  color: var(--fg-3);
  font-size: 12px;
  padding-right: 4px;
}
.status .sep { color: var(--fg-5); }
.status .pill {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
}
.status .pill.live  { background: var(--green-bg); color: var(--green); }
.status .pill.dead  { background: var(--red-bg);   color: var(--red); }
.status .clock {
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.status .clock .zone  { color: var(--fg-4); margin-left: 3px; }
.status .clock .innerSep { color: var(--fg-5); margin: 0 6px; }
.status .meta-item {
  font-size: 12px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.status .meta-item .v {
  font-family: var(--mono);
  color: var(--fg);
}
.status .meta-item.is-blue .v { color: var(--blue); }
.status .meta-item.is-warm .v { color: var(--warm); }

.reload-btn {
  color: var(--fg-3);
  padding: 4px 6px;
  font-size: 14px;
  display: inline-flex; align-items: center;
  line-height: 1;
  transition: color .2s;
}
.reload-btn:hover { color: var(--fg); }
.reload-btn.spin svg { animation: spin .6s ease; }
.reload-btn.spin    { color: var(--red-bright); }

/* Logout button — same icon-button geometry as reload, sits next to it. */
.logout-btn {
  color: var(--fg-3);
  padding: 4px 6px;
  margin-left: 2px;
  font-size: 14px;
  display: inline-flex; align-items: center;
  line-height: 1;
  transition: color .2s;
}
.logout-btn:hover { color: var(--red-bright); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes brandPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(170,170,170,0.4); }
  50%      { box-shadow: 0 0 12px rgba(170,170,170,0.6); }
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---------- Section heading (plain text — not mono caps) ---------- */

.section-head {
  display: flex; align-items: baseline;
  gap: 12px;
  padding: 18px 0 12px;
}
.section-head .title {
  font-size: 16px; color: var(--fg);
  font-weight: 500;
}
.section-head .sub {
  font-size: 12px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.section-head .sub b { color: var(--fg); font-weight: 500; }
.section-head .right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Buttons + controls ---------- */

.btn {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg-3); border-color: var(--fg-5); }
.btn-primary {
  background: var(--blue-bg);
  border-color: var(--blue-border-strong);
  color: var(--blue);
}
.btn-primary:hover { background: var(--blue-border); }

.filter-btn {
  background: var(--bg-1);
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 12px;
  font-size: 12px;
  transition: background .12s, border-color .12s, color .12s;
}
.filter-btn:hover { background: var(--bg-2); color: var(--fg); }
.filter-btn.active {
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue-border-strong);
}

.toggle {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--fg-2);
  font-size: 12px;
  user-select: none;
  cursor: pointer;
}
.toggle input { accent-color: var(--blue); cursor: pointer; }

.text-input {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color .12s;
}
.text-input:focus { border-color: var(--blue-border-strong); }

.pill-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.pill-tag.blue   { background: var(--blue-bg);   color: var(--blue);   }
.pill-tag.green  { background: var(--green-bg);  color: var(--green);  }
.pill-tag.yellow { background: var(--yellow-bg); color: var(--yellow); }
.pill-tag.red    { background: var(--red-bg);    color: var(--red);    }
.pill-tag.warm   { background: var(--warm-faint); color: var(--warm); }
.pill-tag.muted  { background: var(--bg-2);     color: var(--fg-3); }

/* ---------- Login ---------- */
/* Bare original chrome (centered h2 + horizontal form) on top of a faint
   background droplet that zooms toward the viewer on submit. */

.login-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  /* Center the login form vertically + horizontally. The icon is
     absolutely positioned so it ignores the flex layout and stays anchored
     to the viewport center independently. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon rendered at NATIVE PNG resolution (553px wide) so it never upscales
   past its source pixels. The zoom-on-submit goes to scale 7 but opacity
   finishes fading at 55% of the transform duration — so the icon is fully
   invisible before it reaches its pixelated peak. Pure compositor animation
   (transform + opacity, no filter) for a smooth GPU ride. */
.login-icon {
  position: absolute;
  top: 50%; left: 50%;
  /* Native PNG size — no upscaling at idle, sharpest possible render. */
  width: 553px;
  height: auto;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.15);
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  /* Shorter opacity (40% of transform) so the icon is fully invisible
     well before its peak scale, AND the transform itself is shorter so
     the compositor isn't holding a giant layer for as long. */
  transition:
    transform 600ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity   240ms cubic-bezier(0.4, 0, 1, 1);
}
.login-stage[data-phase="idle"] .login-icon {
  opacity: 0.06;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
.login-stage[data-phase="enter"] .login-icon {
  opacity: 0;
  /* Peak scale dropped 7 → 4: at idle 830px, that's a 3320px texture
     instead of 5810px — roughly half the pixels for the GPU to push
     through every frame. Visual zoom still reads as dramatic because the
     eye latches onto the START of the motion, not the end. */
  transform: translate3d(-50%, -50%, 0) scale(4);
}

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
  transition: opacity .28s ease-out, transform .28s ease-out;
}
.login-stage[data-phase="enter"] .login {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.login h2 {
  color: var(--fg);
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 400;
}
.login form { display: flex; gap: 8px; align-items: center; }
.login input {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
}
.login button {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  padding: 6px 16px;
  font-size: 13px;
  border-radius: var(--radius);
  font-family: inherit;
}
.login button:hover { background: var(--bg-3); }
.login .error {
  color: var(--red);
  font-size: 12px;
  margin: 10px 0 0;
}

/* ---------- Headlines ----------
   Vertically dense (rich) · horizontally generous (breath) ·
   typography hierarchy supplies the negative space. */

.hl-controls {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin: 4px 0 10px;
}
.hl-count {
  color: var(--fg-4); font-size: 12px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.hl-count b { color: var(--fg-2); font-weight: 500; }

/* Column header strip — small mono labels, low weight. */
.hl-cols {
  display: grid;
  grid-template-columns: 88px 130px 96px 1fr 48px;
  gap: 22px;
  padding: 6px 4px 7px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hl-list { border-top: 0; }

.hl-row {
  display: grid;
  grid-template-columns: 88px 130px 96px 1fr 48px;
  gap: 22px;
  align-items: baseline;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.hl-row:hover { background: rgba(255,255,255,0.012); }
.hl-row .time {
  color: var(--fg-2); font-size: 11.5px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.hl-row .time .zone { color: var(--fg-4); margin-left: 3px; }
.hl-row .src {
  color: var(--fg-3); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-row .id  {
  color: var(--fg-5); font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.hl-row .headline {
  color: var(--fg);
  font-size: 13px;
  line-height: 1.4;
}
.hl-row .open-link {
  text-align: right;
  font-size: 11px;
  color: var(--fg-3);
}
.hl-row .open-link a { color: var(--fg-3); }
.hl-row .open-link a:hover { color: var(--blue); }
.hl-row.is-empty .headline { color: var(--fg-3); font-style: italic; }
.hl-row.is-duped { opacity: 0.55; }

/* Originals row (when toggled on) */
.hl-row .orig {
  grid-column: 4 / span 1;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}
.hl-row.show-original { grid-template-rows: auto auto; }

/* Batch separator — slim divider with mono timestamp.
   Adds visible pipeline rhythm without wasting vertical space. */
.hl-batch {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 11px 4px 5px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-4);
}
.hl-batch:first-child { margin-top: 0; border-top: 0; }
.hl-batch .label { color: var(--fg-3); }
.hl-batch .label b { color: var(--fg-2); font-weight: 500; }
.hl-batch .meta { color: var(--fg-5); }

/* Load-more button */
.load-more {
  display: block; margin: 14px auto;
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 5px 22px;
  font-size: 12px;
}
.load-more:hover { background: var(--bg-3); color: var(--fg); }

/* ---------- Narrative V3 (reskinned, cool grays + system font) ---------- */

.nv {
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  gap: 0;
  min-height: calc(100vh - 100px);
  margin: 0 -20px;
  border-top: 1px solid var(--line);
}
.nv > .col {
  min-height: 0;
}
.nv > .col.left  { border-right: 1px solid var(--line); padding: 16px 14px; }
.nv > .col.main  { padding: 14px 22px; min-width: 0; }
.nv > .col.right { border-left: 1px solid var(--line); padding: 16px 18px; background: #0e0e0e; }

/* Arc tree */
.arc-tree { display: flex; flex-direction: column; gap: 2px; }
.arc-tree .arc {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}
.arc-tree .arc:hover { background: var(--bg-1); }
.arc-tree .arc.active { background: var(--bg-1); }
.arc-tree .arc .ind {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-5); flex-shrink: 0;
}
.arc-tree .arc.touched .ind {
  background: var(--warm);
  box-shadow: 0 0 6px var(--warm-dim);
}
.arc-tree .arc .label {
  font-size: 13px; color: var(--fg);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arc-tree .arc .count {
  font-family: var(--mono); font-size: 11px; color: var(--fg-3);
}

.arc-tree .threads {
  padding: 4px 0 8px 22px;
  border-left: 1px solid var(--line-soft);
  margin-left: 13px;
}
.arc-tree .thread {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-2);
  transition: background .12s, color .12s;
}
.arc-tree .thread:hover { background: var(--bg-1); color: var(--fg); }
.arc-tree .thread.active { background: var(--bg-1); color: var(--fg); }
.arc-tree .thread .lbl {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arc-tree .thread .score {
  font-family: var(--mono); font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.arc-tree .thread.touched .score { color: var(--warm); }

/* Left rail stats footer */
.nv-stats {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
}
.nv-stats .stat .lbl { color: var(--fg-3); font-size: 11px; }
.nv-stats .stat .val {
  font-family: var(--mono); font-size: 18px;
  color: var(--fg); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.nv-stats .stat .val .delta { color: var(--warm); font-size: 11px; margin-left: 6px; }

/* Arc head */
.arc-head .toolbar {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-3); font-size: 12px;
  margin-bottom: 8px;
}
.arc-head .toolbar .batch {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--radius);
  color: var(--fg);
}
.arc-head .toolbar .nav {
  background: var(--bg-1);
  border: 1px solid var(--line);
  width: 26px; height: 26px;
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
}
.arc-head .toolbar .nav:hover:not(:disabled) { color: var(--fg); background: var(--bg-2); }
.arc-head .toolbar .touched-pill { margin-left: auto; }

.arc-title {
  font-size: 20px; font-weight: 500; color: var(--fg);
  margin: 4px 0;
}
.arc-meta {
  display: flex; gap: 14px;
  color: var(--fg-3); font-size: 12px;
  margin-bottom: 12px;
}
.arc-meta b { color: var(--fg); font-weight: 500; }

/* Thread tabs */
.thread-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 8px 0 14px;
}
.thread-tabs .t {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fg-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.thread-tabs .t:hover { color: var(--fg); }
.thread-tabs .t.active { color: var(--fg); border-bottom-color: var(--fg); }
.thread-tabs .t.active.touched { border-bottom-color: var(--warm); }
.thread-tabs .t .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-5);
}
.thread-tabs .t.touched .dot {
  background: var(--warm);
  box-shadow: 0 0 6px var(--warm-dim);
}
.thread-tabs .t .score {
  font-family: var(--mono); font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.thread-tabs .t.touched .score { color: var(--warm); }

/* Thread detail head */
.thread-head {
  display: flex; align-items: flex-end; gap: 18px;
  margin-bottom: 14px;
}
.thread-head .info { flex: 1; min-width: 0; }
.thread-head .info .title {
  font-size: 15px; color: var(--fg); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.thread-head .info .summary {
  color: var(--fg-2); font-size: 12.5px;
  margin-top: 4px;
  max-width: 720px; line-height: 1.5;
}
.thread-head .score-block { text-align: right; }
.thread-head .score-block .num {
  font-family: var(--mono); font-size: 24px;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.thread-head .score-block .delta {
  font-family: var(--mono); font-size: 11px;
  color: var(--warm);
  margin-top: 4px;
}
.thread-head .score-block .delta.flat { color: var(--fg-3); }
.thread-head .score-block .delta.down { color: var(--fg-2); }

/* Chart */
.chart-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.chart-card .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  color: var(--fg-3); font-size: 12px;
}
.chart-card .head .title { color: var(--fg); font-weight: 500; }
.chart-range { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chart-range button {
  padding: 3px 10px;
  font-size: 11px;
  color: var(--fg-3);
  border-right: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.chart-range button:last-child { border-right: 0; }
.chart-range button:hover { color: var(--fg); }
.chart-range button.active { color: var(--fg); background: var(--bg-1); }
.chart { position: relative; height: 200px; }
.chart svg { display: block; width: 100%; height: 100%; }
.chart .yax {
  position: absolute; left: -2px; top: 0; bottom: 16px;
  width: 30px;
  font-family: var(--mono); font-size: 10px;
  color: var(--fg-4);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.chart .yax .tick { position: absolute; transform: translateY(-50%); right: 4px; }
.chart .xax {
  position: absolute; bottom: 0; left: 32px; right: 0;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}

/* Progression list */
.prog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.prog .row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  cursor: pointer;
}
.prog .row:last-child { border-bottom: 0; }
.prog .row:hover { background: var(--bg-1); }
.prog .row.this-batch::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--warm);
  box-shadow: 0 0 6px var(--warm-dim);
}
.prog .row .meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: var(--fg-3);
}
.prog .row .meta .time {
  font-family: var(--mono); color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.prog .row .meta .score {
  margin-left: auto;
  font-family: var(--mono); color: var(--fg);
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.prog .row.this-batch .meta .score { color: var(--warm); }
.prog .row .rationale {
  color: var(--fg-2); font-size: 12.5px;
  margin-top: 6px; line-height: 1.55;
}

/* Right column: selected point detail */
.detail .closebtn {
  position: absolute; top: 6px; right: 8px;
  color: var(--fg-3); font-size: 18px; line-height: 1;
}
.detail .closebtn:hover { color: var(--fg); }
.detail { position: relative; }
.detail .time {
  font-family: var(--mono); font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.detail .score-row {
  margin-top: 12px;
  display: flex; align-items: baseline; gap: 12px;
}
.detail .score-row .num {
  font-family: var(--mono); font-size: 26px;
  color: var(--fg); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.detail .score-row .delta { font-family: var(--mono); font-size: 11px; color: var(--warm); }
.detail .tags { display: flex; gap: 5px; margin: 10px 0 14px; flex-wrap: wrap; }
.detail .rationale {
  color: var(--fg); font-size: 13px; line-height: 1.6;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.detail .trig-head {
  color: var(--fg-3); font-size: 12px;
  margin-bottom: 10px;
}
.detail .trig-head b { color: var(--fg); font-weight: 500; }
.detail .trigger {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.detail .trigger .head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--fg-3);
  padding-bottom: 7px; border-bottom: 1px dotted var(--line);
  font-variant-numeric: tabular-nums;
}
.detail .trigger .head .id { margin-left: auto; color: var(--fg-5); }
.detail .trigger .fact { color: var(--fg); font-size: 12.5px; margin-top: 8px; line-height: 1.5; }
.detail .trigger .src-line {
  margin-top: 10px;
  padding: 7px 10px;
  background: var(--bg);
  border-left: 2px solid var(--line);
  font-size: 11.5px;
  color: var(--fg-2);
}
.detail .trigger .src-line .src { font-family: var(--mono); color: var(--fg-3); }
.detail .trigger .src-line .txt { color: var(--fg); }

/* ---------- Debug ---------- */

.dbg {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  margin: 8px 0;
}
.dbg .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.dbg .panel .head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.dbg .panel .head .title { color: var(--fg); font-size: 13px; font-weight: 500; }
.dbg .panel .head .sub   { color: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.dbg .panel .head .right { margin-left: auto; display: inline-flex; gap: 6px; }

/* Log */
.log {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  background: var(--bg);
  padding: 4px 0;
  max-height: 72vh;
  overflow-y: auto;
}
.log .line {
  padding: 4px 14px;
  display: grid;
  grid-template-columns: 64px 50px 1fr;
  gap: 12px;
  border-left: 2px solid transparent;
}
.log .line.alert { border-left-color: var(--warm); }
.log .line .t { color: var(--fg-4); font-variant-numeric: tabular-nums; }
.log .line .lvl { color: var(--fg-2); }
.log .line .lvl.warn  { color: var(--yellow); }
.log .line .lvl.error { color: var(--red); }
.log .line .msg { color: var(--fg); }

/* Daily metrics grid */
.daily {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}
.daily .metric {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.daily .metric .lbl { color: var(--fg-3); font-size: 11px; }
.daily .metric .val {
  font-family: var(--mono); font-size: 20px;
  color: var(--fg); margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.daily .metric .note { color: var(--fg-4); font-size: 11px; margin-top: 3px; }

/* Cycle heartbeat strip — subtle, lives at the bottom of the metrics panel */
.cycle-card {
  margin: 0 12px 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cycle-card .head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0; border: 0;
  margin-bottom: 10px;
}
.cycle-card .head .lbl { color: var(--fg-3); font-size: 12px; }
.cycle-card .head .next { color: var(--blue); font-family: var(--mono); font-size: 11px; }
.cycle-card .strip {
  display: flex; gap: 2px; height: 24px;
}
.cycle-card .strip .seg { flex: 1; background: var(--bg-2); }
.cycle-card .strip .seg.past { background: var(--fg-5); }
.cycle-card .strip .seg.current {
  background: var(--warm);
  box-shadow: 0 0 6px var(--warm-dim);
}
.cycle-card .axis {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono); font-size: 10px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.cycle-card .axis .now { color: var(--fg-2); }

/* ---------- Misc ---------- */

.mono { font-family: var(--mono); }
.muted { color: var(--fg-3); }
.tabular { font-variant-numeric: tabular-nums; }


/* ============================================================
   Debug dashboard (two-column overview) — see gui/debug-explore
   ============================================================ */
/* Two-column debug page.
   LEFT: status strip + commodity stat cards (with last/24h/all metrics).
   RIGHT: errors panel + recent cycles. */

.dbg-page {
  display: grid;
  grid-template-rows: 1fr;
  height: 100%;
  /* Match the headlines page: centered, capped at 1600px, 20px side gutters. */
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 20px 12px;
  min-height: 0;
  overflow: hidden;
}

/* ===== Toolbar pipeline pill + meta cells =====
   Replaces the old in-body .status-strip. The pill mirrors the unified
   topbar's MARKET OPEN / CLOSED pill (same .pill geometry); the cell stack
   mirrors the narrative toolbar's .tb-meta-item (lbl + val + delta), so the
   Debug toolbar reads as a sibling to Headlines and Narrative — not a
   bespoke widget. */

.dbg-pipeline-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em;
}
.dbg-pipeline-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.dbg-pipeline-pill.live {
  background: var(--green-bg);
  color: var(--green);
}
.dbg-pipeline-pill.live .dot {
  box-shadow: 0 0 6px var(--green);
  animation: livePulse 2s ease-in-out infinite;
}
.dbg-pipeline-pill.idle {
  background: var(--bg-2);
  color: var(--fg-4);
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.dbg-toolbar-meta {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-right: 6px;
}
.dbg-meta-item {
  display: flex; flex-direction: column;
  font-family: var(--mono); font-size: 11px;
  line-height: 1.15;
}
.dbg-meta-item .lbl {
  color: var(--fg-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.dbg-meta-item .val {
  color: var(--fg);
  font-size: 12.5px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.dbg-meta-item .val .delta {
  color: var(--fg-4);
  font-size: 10.5px;
  font-weight: 400;
}

/* ===== Two-column body ===== */
.dbg-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.col-left, .col-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ===== Asset stat card ===== */
.asset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
  flex: 0 0 auto;
}
.asset.crude { flex: 0 0 auto; }
.asset .head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
.asset .head .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.asset .head .dot.ok   { background: var(--green); box-shadow: 0 0 5px rgba(111,220,140,0.4); }
.asset .head .dot.warn { background: var(--yellow); }
.asset .head .dot.err  { background: var(--red); }
.asset .head .dot.off  { background: transparent; border: 1px solid var(--fg-5); }

.asset .head .name { color: var(--fg); font-size: 13.5px; font-weight: 500; }
.asset .head .role {
  font-family: var(--mono); font-size: 9px;
  color: var(--fg-4); background: var(--bg-2);
  padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.asset .head .right {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.asset .head .right b { color: var(--fg-2); font-weight: 500; }

/* Heartbeat tooltip */
.asset .hb {
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: visible;
}
.asset { overflow: visible; }
.hb-tip {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 7px 11px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  z-index: 20;
  min-width: 240px;
}
.hb-tip .row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 1px 0;
}
.hb-tip .row .k {
  color: var(--fg-4); font-size: 9.5px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.hb-tip .row .v { color: var(--fg); }
.hb-tip .row .v.warm { color: var(--warm); }
.hb-tip .row .v.dim  { color: var(--fg-4); }
.hb-tip .row .v.up   { color: var(--green); }
.hb-tip .row .v.down { color: var(--yellow); }
.hb-tip .row .v.neutral { color: var(--fg-3); }
.hb-tip .hr {
  border-top: 1px solid var(--line);
  margin: 4px -10px;
}
.hb-tip .head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.hb-tip .head .ts {
  display: flex; flex-direction: column; gap: 1px;
}
.hb-tip .head .ts .awst { color: var(--fg); font-size: 12px; }
.hb-tip .head .ts .utc  { color: var(--fg-4); font-size: 9.5px; }
.hb-tip .head .state {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hb-tip .head .state.ok { background: var(--bg-2); color: var(--fg-3); }
.hb-tip .head .state.current { background: var(--warm-faint); color: var(--warm); }
.hb-tip .head .state.future { background: var(--bg-2); color: var(--fg-5); }
.asset .hb .label {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px;
  color: var(--fg-5); letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 3px;
}
.asset .hb .strip {
  display: flex; gap: 1px; height: 14px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.asset .hb .strip .seg { flex: 1; background: var(--bg-2); }
.asset .hb .strip .seg.ok      { background: var(--fg-5); }
.asset .hb .strip .seg.current { background: var(--warm); box-shadow: 0 0 6px var(--warm-dim); }
.asset .hb .strip .seg.future  { background: var(--bg-2); }

/* Metric matrix */
.asset .matrix {
  display: grid;
  grid-template-columns:
    72px              /* stage label */
    minmax(0, 1fr)    /* now */
    minmax(0, 1fr)    /* 24h */
    minmax(0, 1fr);   /* all */
  column-gap: 10px;
  row-gap: 0;
  padding: 6px 14px 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.asset .matrix .ch {
  font-size: 10.5px; color: var(--fg-2);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: right;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.asset .matrix .ch.first {
  text-align: left;
  color: var(--fg-3);
  font-weight: 400;
}
.asset .matrix .rl {
  font-size: 11px; color: var(--fg);
  letter-spacing: 0.04em; text-transform: uppercase;
  align-self: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}
.asset .matrix .cell {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.asset .matrix .cell:last-of-type, .asset .matrix .rl:last-of-type { border-bottom: 0; }
.asset .matrix .cell .n {
  font-size: 13px; color: var(--fg);
}
.asset .matrix .cell .n.avg { color: var(--fg-2); }
.asset .matrix .cell .n.all { color: var(--fg-3); }
.asset .matrix .cell .lat {
  font-size: 10px; color: var(--fg-5);
}

/* Off card (ASX) */
.asset.off { opacity: 0.65; }
.asset.off .off-body {
  padding: 8px 12px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-5);
}

/* Analyst strip (under crude) */
.analyst-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px;
  border-top: 1px dashed var(--line-strong);
  background: rgba(212,165,96,0.04);
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
}
.analyst-strip .arrow { color: var(--fg-5); }
.analyst-strip .nm { color: var(--fg); font-family: var(--sans); font-size: 11.5px; }
.analyst-strip .state {
  font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--warm-faint);
  color: var(--warm);
  padding: 1px 5px; border-radius: 3px;
}
.analyst-strip .planned {
  margin-left: auto;
  color: var(--fg-5);
  font-size: 10px;
}
.analyst-strip .planned b { color: var(--fg-4); font-weight: 500; }

/* ===== Errors panel ===== */
.errors {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  display: flex; flex-direction: column;
  flex: 1 1 0;
  min-height: 160px;
  overflow: hidden;
}
.errors .ehead {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  flex: 0 0 auto;
}
.errors .ehead .title { font-size: 12.5px; color: var(--fg); font-weight: 500; }
.errors .ehead .counts {
  display: inline-flex; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-3);
  white-space: nowrap;
  align-items: baseline;
}
.errors .ehead .counts > span { white-space: nowrap; }
.errors .ehead .right {
  margin-left: auto;
  font-family: var(--mono); font-size: 9.5px;
  color: var(--fg-5);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.errors .scroll {
  overflow: auto;
  flex: 1; min-height: 0;
}
.errors.clean .clean-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  color: var(--green);
  font-family: var(--mono); font-size: 11.5px;
}
.errors.clean .clean-bar .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 5px var(--green);
}

/* Error row — narrower than full width since this is the right half */
.errow {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 0 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.errow .sev {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  align-self: start;
}
.errow .sev .dot { width: 6px; height: 6px; border-radius: 50%; }
.errow .sev.error .dot { background: var(--red); box-shadow: 0 0 4px rgba(255,112,112,0.4); }
.errow .sev.warn  .dot { background: var(--yellow); }
.errow .sev.error { color: var(--red); }
.errow .sev.warn  { color: var(--yellow); }
.errow .body { min-width: 0; }
.errow .body .meta {
  display: flex; gap: 8px; align-items: baseline;
  color: var(--fg-3);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.errow .body .meta .awst { color: var(--fg-2); }
.errow .body .meta .utc { color: var(--fg-5); }
.errow .body .meta .com {
  color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 9.5px;
}
.errow .body .meta .stg {
  color: var(--fg-4); font-size: 9.5px;
}
.errow .body .ttl {
  color: var(--fg);
  font-family: var(--sans);
  font-size: 12px;
  margin-top: 2px;
  white-space: normal;
}
.errow .body .det {
  color: var(--fg-3);
  font-size: 10.5px;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.errow.expanded .body .det { white-space: normal; }
.errow .body .chev {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--fg-5);
  margin-top: 3px;
  cursor: pointer;
}
.errow .body .chev:hover { color: var(--fg-3); }
.errow .body .trace {
  margin-top: 5px;
  border-left: 2px solid var(--line);
  padding: 5px 8px;
  background: var(--bg);
  border-radius: 2px;
  font-size: 10px;
  color: var(--fg-3);
  white-space: pre-wrap;
}
.errow .body .trace .ln { display: block; }
.errow:last-child { border-bottom: 0; }

/* ===== Recent cycles ===== */
.recent {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  display: flex; flex-direction: column;
  height: 200px;
  flex: 0 0 auto;
  overflow: hidden;
}
.recent .head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.recent .head .title { font-size: 12.5px; color: var(--fg); font-weight: 500; }
.recent .head .sub { font-family: var(--mono); font-size: 10px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.recent .head .right { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--fg-4); font-variant-numeric: tabular-nums; }

.recent .scroll { overflow: auto; flex: 1; min-height: 0; }

.recent .colhead, .recent .row {
  display: grid;
  grid-template-columns:
    120px           /* time UTC + AWST */
    minmax(0, 1fr)  /* horizontal stage dots */
    minmax(0, 1.2fr) /* counts */
    50px;           /* duration */
  gap: 10px;
  align-items: center;
  padding: 3px 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.recent .colhead {
  font-size: 9px;
  color: var(--fg-5);
  letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex: 0 0 auto;
}
.recent .row {
  font-size: 11px;
  border-bottom: 1px solid var(--line-soft);
}
.recent .row:hover { background: var(--bg-hover); }
.recent .row.in-flight { background: rgba(212,165,96,0.05); }

.recent .row .t {
  display: flex; flex-direction: column; gap: 0;
  font-variant-numeric: tabular-nums;
}
.recent .row .t .awst { color: var(--fg); font-size: 11px; }
.recent .row .t .utc { color: var(--fg-5); font-size: 9.5px; }

.recent .row .lanes,
.recent .colhead .lanes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  font-size: 10px;
}
.recent .row .lanes .lb {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-4);
}
.recent .row .lanes .lb .dot { width: 6px; height: 6px; border-radius: 50%; }
.recent .row .lanes .lb.dim { color: var(--fg-5); }
.recent .colhead .lanes .lb { color: var(--fg-5); }

.recent .row .counts {
  display: inline-flex; gap: 9px;
  color: var(--fg-2);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
}
.recent .row .counts .c {
  display: inline-flex; align-items: baseline; gap: 3px;
}
.recent .row .counts .c .k { color: var(--fg-5); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }
.recent .row .dur { color: var(--fg-3); text-align: right; font-size: 10.5px; }
.recent .row.in-flight .dur { color: var(--warm); }

/* ===== Footnote ===== */
.footnote {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
  font-family: var(--mono); font-size: 9.5px;
  color: var(--fg-5);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.footnote b { color: var(--fg-3); font-weight: 500; }
.footnote .sep { color: var(--line-strong); }

/* =========================================================================
   CRUDE SCOUT — loading symbol (the site's default loader).
   Droplet of crude with a sloshing surface. Pure CSS/SVG. Markup is the
   <Loader> component in unified-shell.jsx (+ a static copy in #root for the
   pre-React gap). Centered via .cs-loader-center; ~48px so it stays small.
   ========================================================================= */
/* Fixed viewport overlay so the loader is dead-center on every page regardless
   of where <Loader/> is rendered in the tree (left rail, list, etc.). */
.cs-loader-center {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.cs-loader {
  --_size: var(--cs-loader-size, 48px);
  --_oil:  var(--warm, #d4a560);
  width: var(--_size);
  height: calc(var(--_size) * 1.2);   /* droplet viewBox is 200×240 */
  display: inline-block; line-height: 0;
}
.cs-loader svg { width: 100%; height: 100%; display: block; }
.cs-loader__glass { fill: color-mix(in srgb, var(--_oil) 12%, transparent); }
.cs-loader__wave  { fill: var(--_oil); }
.cs-loader__level { animation: cs-loader-fill  2.8s cubic-bezier(.45,0,.55,1) infinite; }
.cs-loader__slosh { animation: cs-loader-slosh 1.7s linear infinite; }
@keyframes cs-loader-fill {
  0%   { transform: translateY(240px); }
  44%  { transform: translateY(20px); }
  56%  { transform: translateY(20px); }
  100% { transform: translateY(240px); }
}
@keyframes cs-loader-slosh {
  from { transform: translateX(0); }
  to   { transform: translateX(-100px); }   /* wave period = 100px → seamless */
}
/* "Loading" text under the droplet — a warm highlight sweeps left → right. */
.cs-loader__text {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.34em; text-indent: 0.34em;   /* offset trailing tracking so it stays centred */
  text-transform: uppercase;
  background-image: linear-gradient(90deg,
    var(--warm-dim) 0%, var(--warm-dim) 38%, #f6dca8 50%, var(--warm-dim) 62%, var(--warm-dim) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: cs-loader-text 2s linear infinite;
}
@keyframes cs-loader-text {   /* decreasing position sweeps the bright band left → right */
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-loader__level { animation: none; transform: translateY(95px); }
  .cs-loader__slosh { animation: none; }
  .cs-loader__text  { animation: none; -webkit-text-fill-color: var(--warm-dim); color: var(--warm-dim); }
}