/* NiftyOPT Pro — CAS OI Monitor card.
 * Self-contained: every selector is namespaced .cas-* so it cannot collide with
 * style.css or theme-v4.css. Colour convention matches the OI heatmap exactly —
 * CE red, PE green. Build vs unwind is carried by SIGN and GLYPH, never colour,
 * so colour keeps meaning exactly one thing on this dashboard.
 */

.cas-card { display: flex; flex-direction: column; gap: 10px; }

.cas-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cas-head .label { flex: 1 1 auto; }
.cas-phase {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-dim); background: var(--bg-card-alt); white-space: nowrap;
}
.cas-phase[data-phase="buildup"]     { color: #3b82f6; border-color: #1e3a5f; }
.cas-phase[data-phase="pre_auction"] { color: #f59e0b; border-color: #4a3410; }
.cas-phase[data-phase="baseline"]    { color: #f59e0b; border-color: #4a3410; background: #241a06; }
.cas-phase[data-phase="auction"],
.cas-phase[data-phase="frozen"]      { color: #fbbf24; border-color: #6b4a08; background: #2a1f04; }
.cas-phase[data-phase="printed"]     { color: #10b981; border-color: #14432f; }
.cas-clock {
  font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-dimmer);
}

/* ── price strip ─────────────────────────────────────────── */
/* 2x2, not 4x1: a dashboard column is ~380-460px, and four cells there wrap
   long values mid-number. Two columns keep every figure on one line. */
.cas-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
@media (min-width: 1500px) {
  .ws-col .cas-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cas-cell { background: var(--bg-card); padding: 7px 8px; min-width: 0; }
.cas-cell-k {
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dimmer); white-space: nowrap;
}
.cas-cell-v {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text); line-height: 1.25; white-space: nowrap;
}
.cas-cell-v.sm { font-size: 13px; }
.cas-cell-s { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cas-frozen .cas-cell-v { color: #fbbf24; }
.cas-froze-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .05em;
  color: #fbbf24; border: 1px solid #6b4a08; border-radius: 3px;
  padding: 0 4px; margin-left: 4px; vertical-align: middle;
}

/* ── evacuation readout ──────────────────────────────────── */
.cas-evac {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
  background: var(--bg-card-alt); display: flex; align-items: center; gap: 12px;
}
.cas-evac-ratio {
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap;
}
.cas-evac.side-CE .cas-evac-ratio { color: #ef4444; }
.cas-evac.side-PE .cas-evac-ratio { color: #10b981; }
.cas-evac.side-none .cas-evac-ratio { color: var(--text-dimmer); font-size: 15px; }
.cas-evac-body { min-width: 0; flex: 1 1 auto; }
.cas-evac-t { font-size: 12px; font-weight: 600; color: var(--text); }
.cas-evac-sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* ── section headings ────────────────────────────────────── */
.cas-sec {
  display: flex; align-items: baseline; gap: 6px; margin-top: 2px;
}
.cas-sec-t {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim);
}
.cas-sec-n { font-size: 9px; color: var(--text-dimmer); }

/* ── tables ──────────────────────────────────────────────── */
.cas-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cas-t {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  font-size: 11px;
}
table.cas-t th {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--text-dimmer); text-align: right; padding: 3px 5px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.cas-t th:first-child, table.cas-t td:first-child { text-align: left; }
table.cas-t td {
  padding: 4px 5px; text-align: right; color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .04); white-space: nowrap;
}
table.cas-t tr:last-child td { border-bottom: 0; }
.cas-ce { color: #ef4444; }
.cas-pe { color: #10b981; }
.cas-dim { color: var(--text-dimmer); }
.cas-atm-row td { background: rgba(125, 211, 252, .07); font-weight: 700; }
.cas-stale-row td { opacity: .45; }
.cas-stale-tag {
  font-size: 8px; letter-spacing: .04em; color: var(--amber);
  border: 1px solid #4a3410; border-radius: 3px; padding: 0 3px; margin-left: 3px;
}

/* magnitude bar behind a delta cell */
.cas-bar-cell { position: relative; }
.cas-bar {
  position: absolute; top: 3px; bottom: 3px; right: 2px;
  border-radius: 2px; pointer-events: none; opacity: .22;
}
.cas-bar.ce { background: #ef4444; }
.cas-bar.pe { background: #10b981; }
.cas-bar-cell > span { position: relative; }

/* ── sparkline ───────────────────────────────────────────── */
.cas-spark { width: 100%; height: 78px; display: block; }
.cas-spark-legend {
  display: flex; gap: 12px; font-size: 9px; color: var(--text-dimmer);
  letter-spacing: .05em; text-transform: uppercase;
}

/* ── footer / quality ────────────────────────────────────── */
.cas-foot {
  display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 9px;
  color: var(--text-dimmer); border-top: 1px solid var(--border); padding-top: 7px;
}
.cas-foot b { color: var(--text-dim); font-weight: 600; }
.cas-warn { color: var(--amber); }

.cas-empty {
  font-size: 11px; color: var(--text-dimmer); padding: 14px 4px; text-align: center;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .cas-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cas-evac-ratio { font-size: 22px; }
}

.cas-evac-warn {
  font-size: 10px; color: var(--amber); margin-top: 6px;
  border-top: 1px solid var(--border); padding-top: 5px;
}

/* stale-feed state: last good numbers stay readable but must not look live */
.cas-offline { opacity: .55; filter: saturate(.6); }
.cas-offline-note {
  opacity: 1; filter: none; font-size: 10px; font-weight: 600; color: var(--amber);
  border: 1px solid #6b4a08; background: #2a1f04; border-radius: 6px;
  padding: 6px 8px; margin-bottom: 8px;
}

/* ── indicative index strip (1s live) ── */
.cas-indic { display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-bottom: 1px solid #1e293b; font-size: 12px; color: #94a3b8;
  font-variant-numeric: tabular-nums; }
.cas-indic.hidden { display: none; }
.cas-indic-phase { text-transform: uppercase; font-size: 9px; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 3px; background: #1e293b; color: #94a3b8; }
.cas-indic-phase[data-ph="entry1"], .cas-indic-phase[data-ph="entry2"] {
  background: #3b2f14; color: #fcd34d; }
.cas-indic-phase[data-ph="matching"] { background: #14323b; color: #67e8f9; }
.cas-indic-lvl { font-size: 16px; font-weight: 600; color: #e2e8f0; }
.cas-indic-div.up { color: #6ee7b7; }
.cas-indic-div.down { color: #fca5a5; }
.cas-indic-spark { width: 120px; height: 26px; color: #64748b; flex: 0 0 auto; }
.cas-indic-meta { margin-left: auto; font-size: 10px; }
/* Divergence formed with weight behind it: the strip itself takes a side. */
.cas-indic.alert.up { box-shadow: inset 3px 0 0 #059669; background: rgba(5,150,105,.08); }
.cas-indic.alert.down { box-shadow: inset 3px 0 0 #dc2626; background: rgba(220,38,38,.08); }
.cas-indic.alert .cas-indic-lvl { animation: casIndicPulse 1.2s ease-in-out infinite; }
@keyframes casIndicPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .cas-indic.alert .cas-indic-lvl { animation: none; }
}

.cas-indic-flow { font-size: 11px; padding: 2px 6px; border-radius: 3px;
  background: #1e293b; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cas-indic-flow.up { color: #6ee7b7; }
.cas-indic-flow.down { color: #fca5a5; }