/* delta-flow.css - dense live Delta Flow dashboard */
:root { color-scheme: dark; }
html, body {
  margin: 0;
  background: #090d12;
  color: #d9e4ef;
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.df-wrap { max-width: 1360px; margin: 0 auto; padding: 20px 16px 36px; }
.df-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.df-back {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #263242;
  border-radius: 6px;
  color: #9fc6ff;
  text-decoration: none;
  background: #0f151d;
}
.df-top h1 { margin: 0; font-size: 20px; letter-spacing: 0; color: #f2f6fb; }
.df-top p { margin: 2px 0 0; color: #8193aa; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.df-status {
  min-width: 64px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid #2a3546;
  color: #8fa1b7;
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
}
.df-status.live { color: #69d39a; border-color: rgba(105, 211, 154, .35); }
.df-status.stale, .df-status.error { color: #f2bd63; border-color: rgba(242, 189, 99, .35); }

.df-hero {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) repeat(3, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.df-card, .df-panel {
  background: #0f151d;
  border: 1px solid #202b3a;
  border-radius: 6px;
}
.df-card { padding: 12px; min-width: 0; }
.df-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8fa1b7; font-size: 12px; }
.df-chip {
  padding: 3px 6px;
  border: 1px solid #28384a;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
}
.df-big { margin: 10px 0 8px; font: 700 28px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
.df-subgrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  color: #7f91a7;
  font-size: 11px;
}
.df-subgrid b { color: #cad7e6; font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.pos { color: #69d39a !important; }
.neg { color: #ee7770 !important; }
.mut { color: #94a4b8 !important; }
/* Conviction (ex-hedge) headline + the hedge component (amber — a lean, not supply). */
.df-conviction {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 2px;
  padding-top: 8px;
  border-top: 1px solid #202b3a;
}
.df-conviction-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8fa1b7; }
.df-conviction-val { font: 700 18px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.df-hedge { color: #f2bd63 !important; }

/* Caption shown only when hedging flips a negative raw net to bullish conviction. Amber = hedge lean. */
.df-cap { margin-top: 8px; font-size: 11px; line-height: 1.4; color: #8fa1b7; }
.df-cap::before { content: "🛡 "; }

/* Conviction-by-window table — raw Δ vs hedge vs ex-hedge conviction at a glance. */
.df-wtab-panel { margin: 10px 0; }
.df-wtab { width: 100%; border-collapse: collapse; font: 12px ui-monospace, "SF Mono", Menlo, monospace; }
.df-wtab th {
  font: 600 9.5px system-ui, -apple-system, sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: #5d6b7e; text-align: left; padding: 5px 8px 7px; border-bottom: 1px solid #202b3a;
}
.df-wtab th.r, .df-wtab td.r { text-align: right; }
.df-wtab td { padding: 6px 8px; border-bottom: 1px solid #161f2b; font-variant-numeric: tabular-nums; }
.df-wtab tr:last-child td { border-bottom: 0; }
.df-wtab td.win { color: #c2cfde; font-weight: 600; }
.df-wtab tr.sess td { border-top: 1px solid #263242; }
.df-cb { display: inline-block; min-width: 62px; padding: 2px 7px; border-radius: 5px; font-weight: 600; }
.df-cb.pos { background: #10241a; }
.df-cb.neg { background: #25131a; }
.df-wtag { color: #8fa1b7; font-family: system-ui, -apple-system, sans-serif; }
.df-wtag.amber { color: #f2bd63; }

.df-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(220px, .85fr);
  gap: 10px;
  align-items: start;
}
.df-panel { padding: 12px; min-width: 0; }
.df-panel-title { font-weight: 650; color: #eef4fb; margin-bottom: 10px; }
.df-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 160px) 1fr minmax(80px, auto);
  gap: 10px;
  align-items: center;
  min-height: 24px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.df-bar-label { color: #c2cfde; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-bar-track { height: 7px; background: #182231; border-radius: 5px; overflow: hidden; }
.df-bar-fill { height: 100%; border-radius: 5px; background: #90a1b5; }
.df-bar-fill.pos { background: #51bf82; }
.df-bar-fill.neg { background: #db625d; }
.df-bar-value { text-align: right; }

/* Driver-mechanic strike/side rows: strike | driver chip | bar | value. Colour follows the driver. */
.df-panel-sub { float: right; font-weight: 400; color: #5d6b7e; font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.df-drow {
  display: grid;
  grid-template-columns: 46px 116px 1fr 62px;
  gap: 9px; align-items: center; min-height: 27px;
  font: 12px ui-monospace, "SF Mono", Menlo, monospace;
}
.df-drow-k { color: #c2cfde; font-weight: 600; }
.df-drow-v { text-align: right; color: #90a1b5; }
.df-drv {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  font: 600 11px system-ui, -apple-system, sans-serif; padding: 3px 7px;
  border-radius: 6px; border: 1px solid #28384a; white-space: nowrap; color: #8fa1b7;
}
.df-drv-ic { font-size: 12px; line-height: 1; }
.df-drv-none { color: #4f5d70; border-style: dashed; }
/* Driver tones — chip, bar fill, and value all take the driver colour (green/amber/red). */
.df-d-chase .df-drv, .df-d-support .df-drv { color: #69d39a; background: #10241a; border-color: #1d573a; }
.df-d-hedge .df-drv { color: #f2bd63; background: #241d0c; border-color: #5a481c; }
.df-d-resist .df-drv { color: #ee7770; background: #25131a; border-color: #5a2530; }
.df-d-chase .df-bar-fill, .df-d-support .df-bar-fill { background: #51bf82; }
.df-d-hedge .df-bar-fill { background: #cf9a3a; }
.df-d-resist .df-bar-fill { background: #db625d; }
.df-d-chase .df-drow-v, .df-d-support .df-drow-v { color: #69d39a; }
.df-d-hedge .df-drow-v { color: #f2bd63; }
.df-d-resist .df-drow-v { color: #ee7770; }
.df-drow.pos .df-bar-fill { background: #51bf82; }
.df-drow.pos .df-drow-v { color: #69d39a; }
.df-drow.neg .df-bar-fill { background: #db625d; }
.df-drow.neg .df-drow-v { color: #ee7770; }

/* Reading note: disambiguates amber hedge vs red resistance on the biggest negatives. */
.df-note {
  font-size: 12px; line-height: 1.45; color: #a9b8ca;
  border: 1px dashed #263242; border-radius: 6px; padding: 9px 12px; margin: 10px 0;
  background: #0c1119;
}
.diag { grid-column: span 2; }
.df-diag-grid { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 8px; }
.df-diag {
  background: #121a24;
  border: 1px solid #202b3a;
  border-radius: 5px;
  padding: 8px;
}
.df-diag span { display: block; color: #8193aa; font-size: 11px; }
.df-diag b { display: block; margin-top: 2px; color: #e6eef8; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.df-empty, .df-empty-small {
  color: #8fa1b7;
  text-align: center;
}
.df-empty {
  margin-top: 60px;
  padding: 24px;
  border: 1px solid #202b3a;
  border-radius: 6px;
  background: #0f151d;
}
.df-empty h2 { margin: 0 0 8px; color: #edf4fc; font-size: 17px; }
.df-empty p { margin: 0; }
.df-empty-small { padding: 18px 8px; }

@media (max-width: 980px) {
  .df-hero, .df-grid { grid-template-columns: 1fr; }
  .diag { grid-column: auto; }
  .df-diag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .df-wrap { padding: 12px 10px 28px; }
  .df-top { grid-template-columns: 1fr; }
  .df-status { justify-self: start; }
  .df-bar-row { grid-template-columns: 1fr; gap: 4px; padding: 5px 0; }
  .df-bar-value { text-align: left; }
}

/* Underlying-override thesis monitor */
.df-thesis { border: 1px solid #202b3a; border-left-width: 3px; border-radius: 8px;
  background: #0c1119; padding: 10px 12px; margin: 0 0 10px; }
.df-thesis-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.df-thesis-ttl { font-weight: 650; color: #eef4fb; font-size: 12px; }
.df-thesis-badge { font: 700 11px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .07em;
  padding: 3px 9px; border-radius: 5px; text-transform: uppercase; }
.df-thesis-dets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0 2px; }
.df-thesis-d { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; color: #8ea0b6; }
.df-thesis-d span { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.df-thesis-d b { color: #cad7e6; font-weight: 600; }
.df-thesis-d.on b { font-weight: 700; }
.df-thesis-note { font-size: 11px; color: #8fa1b7; margin-top: 7px; line-height: 1.4; }
.df-thesis.th-holds { border-left-color: #51bf82; }
.df-thesis.th-holds .df-thesis-badge { color: #69d39a; background: #10241a; border: 1px solid #1d573a; }
.df-thesis.th-risk { border-left-color: #cf9a3a; }
.df-thesis.th-risk .df-thesis-badge { color: #f2bd63; background: #241d0c; border: 1px solid #5a481c; }
.df-thesis.th-risk .df-thesis-d.on b { color: #f2bd63; }
.df-thesis.th-broken { border-left-color: #db625d; }
.df-thesis.th-broken .df-thesis-badge { color: #ee7770; background: #25131a; border: 1px solid #5a2530; }
.df-thesis.th-broken .df-thesis-d.on b { color: #ee7770; }
.df-thesis.th-unknown { border-left-color: #33425a; }
.df-thesis.th-unknown .df-thesis-badge { color: #8fa1b7; background: #141c26; border: 1px solid #263242; }
@media (max-width: 640px) { .df-thesis-dets { grid-template-columns: 1fr; } }

/* Session flow chart (scheduled-session line graph) */
.df-schart { margin-bottom: 14px; }
.df-schart-right { float: right; display: inline-flex; align-items: center; gap: 8px; }
.df-schart-pct { color: #8fa1b7; font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.df-schart-badge {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.df-schart-badge.stale { color: #f2b866; background: #221a10; border: 1px solid #55401f; }
.df-schart-badge.rebuild { color: #9fc6ff; background: #10192a; border: 1px solid #29405f; }
.df-schart-badge.retained { color: #8fa1b7; background: #141c26; border: 1px solid #263242; }
.df-schart-legend { display: flex; gap: 16px; margin: 6px 0 8px; color: #8fa1b7; font-size: 11px; }
.df-schart-key { display: inline-flex; align-items: center; gap: 6px; }
.df-schart-swatch { width: 18px; height: 0; border-top: 2.5px solid currentColor; }
.df-schart-swatch.dashed { border-top-style: dashed; }
.df-schart-net { color: #79b8ff; stroke: #79b8ff; }
.df-schart-call { color: #69d39a; stroke: #69d39a; }
.df-schart-put { color: #ee7770; stroke: #ee7770; }
.df-schart-plot { position: relative; height: 240px; }
.df-schart-svg { width: 100%; height: 100%; display: block; }
.df-schart-zero { stroke: rgba(143, 161, 183, .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.df-schart-tick { stroke: rgba(110, 125, 146, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.df-schart-now { stroke: #c8d6e8; stroke-width: 1; stroke-dasharray: 3, 3; opacity: .85; vector-effect: non-scaling-stroke; }
.df-schart-ylab {
  position: absolute;
  left: 4px;
  color: #5d6b7e;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  pointer-events: none;
}
.df-schart-ylab.max { top: 2px; }
.df-schart-ylab.zero { transform: translateY(-100%); }
.df-schart-ylab.min { bottom: 2px; }
.df-schart-now-label {
  position: absolute;
  top: -14px;
  transform: translateX(-50%);
  color: #c8d6e8;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  pointer-events: none;
}
.df-schart-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fa1b7;
  font-size: 12px;
  pointer-events: none;
}
.df-schart-xlabs {
  position: relative;
  height: 16px;
  margin-top: 4px;
  color: #5d6b7e;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.df-schart-xlab { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.df-schart-xlab:first-child { transform: none; }
.df-schart-xlabs .df-schart-xlab:last-child { transform: translateX(-100%); }
.df-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.df-schart-foot { margin-top: 6px; color: #5d6b7e; font-size: 10px; }

/* Session-flow reading guide (under the chart) */
.df-schart-guide {
  margin: 10px 2px 2px;
  font-size: 11.5px;
}
.df-schart-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.df-schart-guide-table th,
.df-schart-guide-table td {
  text-align: left;
  padding: 4px 10px 4px 0;
  border-bottom: 1px solid rgba(150, 180, 220, 0.08);
  color: var(--muted, #93a2ba);
  font-weight: 400;
}
.df-schart-guide-table th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  color: var(--muted, #66768e);
}
.df-schart-guide-table td.up { color: #4ade80; }
.df-schart-guide-table td.dn { color: #fb7185; }
.df-schart-guide-table .df-schart-net-lab { color: #60a5fa; }
.df-schart-guide-table .df-schart-call-lab { color: #4ade80; }
.df-schart-guide-table .df-schart-put-lab { color: #fb7185; }
.df-schart-guide-note {
  margin-top: 7px;
  color: var(--muted, #66768e);
  line-height: 1.45;
}

/* Aggressive-flow burst bubbles */
.df-schart-burst { opacity: 0.95; }
.df-schart-burst-halo { opacity: 0.22; }
.df-schart-swatch.bubble {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: currentColor;
  opacity: 0.7;
}
.df-schart-burst-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  fill: #dbe4f0;
  paint-order: stroke;
  stroke: rgba(10, 14, 21, 0.85);
  stroke-width: 3px;
}

/* Session-chart spot overlay (price, right-hand scale) */
.df-schart-spot { stroke: #dbe4f0; opacity: 0.75; }
.df-schart-swatch.spotline { background: #dbe4f0; height: 2px; opacity: 0.75; }
.df-schart-ylab.spotlab { left: auto; right: 6px; color: #dbe4f0; }

/* Session-chart zoom + spot readout */
.df-schart-plot { cursor: crosshair; }
.df-schart-plot.zoomed { cursor: grab; }
.df-schart-plot.zoomed:active { cursor: grabbing; }
.df-schart-spotval {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted, #93a2ba);
}
.df-schart-spotval b { color: #dbe4f0; font-weight: 600; }
.df-schart-hint {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #66768e);
  opacity: 0.75;
}
.df-schart-badge.zoom {
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}
.df-schart-spot-endlab {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  fill: #dbe4f0;
  paint-order: stroke;
  stroke: rgba(10, 14, 21, 0.85);
  stroke-width: 3px;
}
.df-schart-burst-label.zoomed { font-size: 11px; }

/* Session-chart crosshair readout */
.df-schart-crosshair { stroke: rgba(219, 228, 240, 0.55); stroke-width: 1; stroke-dasharray: 3 3; }
.df-schart-hover {
  position: absolute;
  top: 6px;
  z-index: 3;
  min-width: 168px;
  padding: 8px 10px;
  margin-left: 10px;
  border: 1px solid rgba(150, 180, 220, 0.22);
  border-radius: 8px;
  background: rgba(10, 14, 21, 0.94);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  pointer-events: none;
}
.df-schart-hover.left { margin-left: 0; margin-right: 10px; }
.df-schart-hover-t {
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(150, 180, 220, 0.14);
  color: #dbe4f0;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.df-schart-hover-row { display: flex; justify-content: space-between; gap: 14px; line-height: 1.55; }
.df-schart-hover-row span { color: #93a2ba; }
.df-schart-hover-row b { font-weight: 600; }
.df-schart-hover-row.up b { color: #4ade80; }
.df-schart-hover-row.dn b { color: #fb7185; }
.df-schart-hover-row.na b { color: #66768e; }
.df-schart-hover-row.net b { color: #60a5fa; }
.df-schart-hover-row.strike b { color: #dbe4f0; }
/* Direction wins over the neutral .strike colour: same specificity would otherwise let the
   later .strike rule override .up/.dn, leaving bought/sold rows grey. */
.df-schart-hover-row.strike.up b { color: #4ade80; }
.df-schart-hover-row.strike.dn b { color: #fb7185; }
.df-schart-hover-note { margin-top: 5px; color: #66768e; font-size: 9.5px; }

/* Burst bubbles are stroked in SCREEN px (vector-effect: non-scaling-stroke), so a bubble sitting on
   the first/last minute would be clipped by the SVG's default overflow. Let it draw past the box and
   reserve the room in the container — clamping the centre instead would put the bubble at the wrong
   time/value, which is worse than a few pixels of bleed. */
.df-schart-svg { overflow: visible; }
.df-schart-plot { padding: 20px 22px; margin: -20px -22px; }
.df-schart-hover-row.spot b { color: #dbe4f0; }
.df-schart-hover-row.sold b { color: #fbbf24; }

/* Pinned crosshair readout (click a minute to hold it) */
.df-schart-hover.pinned { border-color: rgba(56, 189, 248, 0.55); }
.df-schart-crosshair.pinned { stroke: rgba(56, 189, 248, 0.9); stroke-dasharray: none; }
.df-schart-pinlab {
  margin-left: 8px;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: #38bdf8;
  font-weight: 600;
}

/* ---- Flow acceleration meter ---------------------------------------------------------------
   The CVD speedometer idiom, applied to option delta flow. Colour is the SIDE (buying green,
   selling red); "slowing" is a MODIFIER on that hue, never a colour of its own, so a dial can
   never paint accelerating selling in the buy colour (the CVD MS-R2 rule). Unrated states —
   quiet, stale, insufficient — stay muted rather than borrowing a side they did not measure. */
.df-accel { margin-bottom: 10px; }
.df-accel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.df-accel-gauge {
  background: #0c1219;
  border: 1px solid #1b2533;
  border-radius: 6px;
  padding: 8px 8px 10px;
  text-align: center;
  min-width: 0;
}
.df-accel-tf { color: #8fa1b7; font-size: 11px; letter-spacing: .04em; margin-top: 2px; }
.df-accel-word {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.df-accel-word.buy { color: #69d39a; }
.df-accel-word.sell { color: #ee7770; }
.df-accel-word.flat { color: #8fa1b7; font-weight: 500; }
/* Said in HUE, not by fading the text out: a dimmed word still reads as a word, just a quiet one.
   Slowing keeps its side's colour and is marked by the italic + the arrow in the rates line. */
.df-accel-word.fading { font-style: italic; }
.df-accel-rates {
  margin-top: 4px;
  color: #7f91a7;
  font: 400 10px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  overflow-wrap: anywhere;
}