/* Cross-Asset Confirmation tab (Feature A). Standalone, namespaced `cac-*`; uses the
   app's theme tokens (every palette x mode for free), the shared radius scale
   (--r-xs..--r-lg) and the card / label / number vocabulary that surface.css defines.
   Responsive at 760px. All visuals are qualitative — the cluster votes are dimensionless
   -1..+1 concept-space signals, never exchange prices. */

/* ── The stack ─────────────────────────────────────────────────────────────── */

/* The view itself is the tinted ground, so it keeps the shared top gutter rather than
   the `padding: 0` this file used to force: under the sheet metaphor the view supplied
   its own frame, under the card metaphor the ground supplies only space.
   `gap` rather than per-block margins, so a block the renderer omits (no stress
   measures yet, no regime history yet) leaves no hole where its margin used to be. */
.cac-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  padding-bottom: 24px;
}

/* Every top-level block is a card floating on that ground. The card is applied to THIS
   file's own class names rather than by adding `.card` in the renderer because
   cross-asset.js builds its loading skeleton out of exactly these names — one rule then
   dresses the placeholder and the real board identically, and the two cannot drift. */
.cac-controls, .cac-header, .cac-measblk, .cac-patblk, .cac-voteblk, .cac-ribblk,
.cac-foot, .cac-empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.cac-empty {
  padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center;
}
.cac-faint { color: var(--text-faint); font-weight: 400; }

/* ── Controls ──────────────────────────────────────────────────────────────── */

/* No bottom rule: cards are separated by the gap above them, never by a hairline drawn
   across the page — that was the sheet this design replaces. */
.cac-controls {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px;
}
/* Headlines are the serif, and only headlines. */
.cac-title {
  font: 600 20px/1.25 var(--font-display);
  letter-spacing: -.015em;
  color: var(--text);
}
/* The heading-plus-gloss pairing the design uses constantly. The gloss stays plain
   sentence-case UI text, which is what keeps the headline beside it readable as a
   sentence rather than as a slogan. */
.cac-title .cac-faint {
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: 0;
  color: var(--text-muted);
}
.cac-when { font: 400 11px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }

/* The Refresh control carries the shared `.btn` alongside `.cac-btn`, so this file no
   longer declares a button of its own. Restating the shared look here is exactly how a
   page and the vocabulary drift apart, and the drift only shows up on the next retune. */

/* Section labels — the design's signature: uppercase mono at wide tracking in the
   quietest tier, so a block can be introduced without a heading big enough to compete
   with the content under it. A trailing gloss opts back out of the tracked caps. */
.cac-sub-h {
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--colhead);
  margin: 0;
}
.cac-sub-h .cac-faint {
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

/* tone tokens (shared) — a six-step confirmation ramp.
   ⚠️ KNOWN RESOLUTION LOSS, reported not fixed: `strong` and `good` resolve to the same
   colour, so six declared levels render as five. Minting a sixth hue here would change
   what the page communicates, so the encoding is left exactly as the renderer emits it.
   `mid` moved off --accent: accent is the interactive colour (links, focus rings, the
   active control) and must never carry a data status. --mixed-* is the vocabulary's
   non-directional "indeterminate / both ways" step, which is what `mid` means. */
.cac-tone--strong { color: var(--bull-text); }
.cac-tone--good { color: var(--bull-text); }
.cac-tone--mid { color: var(--mixed-text); }
.cac-tone--neutral { color: var(--text-2); }
.cac-tone--warn { color: var(--warn-text); }
.cac-tone--bad { color: var(--bear-text); }

/* ── Header: regime + driver ───────────────────────────────────────────────── */

/* Two stat tiles inside one card. They nest, so they step DOWN a rung to --r-md on the
   KPI tier — a child radius equal to its parent's reads as a mistake. */
.cac-header {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: clamp(13px, 1.2vw, 18px);
}
.cac-regime, .cac-driver {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 15px;
  background: var(--surface-kpi);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 200px; flex: 1;
}
.cac-regime-lbl, .cac-driver-lbl {
  font: 500 9.5px/1.3 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead);
}
.cac-regime-val, .cac-driver-val {
  font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--text);
}
/* Deliberately given no colour of their own: these two inherit the tile's tone class,
   which is where the confirmed / contradicted reading actually lives. */
.cac-regime-m, .cac-driver-s {
  font: 400 12px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ── Stress measures ───────────────────────────────────────────────────────── */

.cac-measblk {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(13px, 1.2vw, 18px);
}
.cac-measrow { display: flex; gap: 10px; flex-wrap: wrap; }
.cac-meas {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  background: var(--surface-kpi);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 96px;
}
.cac-meas-v {
  font: 500 20px/1.05 var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--text);
}
.cac-meas-l {
  font: 500 9.5px/1.3 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead);
}
.cac-meas-note { font-size: 11px; color: var(--warn-text); }

/* ── Live contradictions ───────────────────────────────────────────────────── */

.cac-contra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cac-contra-l {
  font: 500 9.5px/1.3 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead);
}
.cac-contra-c {
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .06em;
  padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--bear-edge); background: var(--bear-tint); color: var(--bear-text);
}

/* ── Pattern cards ─────────────────────────────────────────────────────────── */

.cac-patblk {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(13px, 1.2vw, 18px);
}
/* A pattern sits INSIDE the patterns card, so it steps down a rung — --r-md, the sunken
   tier, no shadow of its own. overflow:hidden so that frame carries the only rounding:
   the head's hover tint and the body's top rule are full-bleed and would otherwise
   square off the corners. */
.cac-pat {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-sunken);
  overflow: hidden;
}
.cac-pat-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer;
}
.cac-pat-head:hover { background: var(--surface-row-active); }
.cac-tw { color: var(--text-muted); width: 12px; }
.cac-pat-id { font: 500 10.5px/1 var(--font-sans); letter-spacing: .1em; color: var(--colhead); }
.cac-pat-name { font-size: 14px; color: var(--text); flex: 1; }
.cac-pat-score {
  font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cac-partial {
  font: 500 9.5px/1 var(--font-sans); letter-spacing: .06em;
  padding: 4px 8px; border: 1px solid var(--line);
  color: var(--text-muted); border-radius: var(--r-sm);
}
.cac-pat-body { padding: 4px 13px 13px 35px; border-top: 1px solid var(--line); }
.cac-clrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.cac-clrow-l {
  font: 500 9.5px/1.3 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); min-width: 96px;
}
.cac-pat-meta { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.cac-cl {
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .06em;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  white-space: nowrap;
}
.cac-cl--ok { color: var(--bull-text); border-color: var(--bull-edge); background: var(--bull-tint); }
.cac-cl--bad { color: var(--bear-text); border-color: var(--bear-edge); background: var(--bear-tint); }
/* Colour ONLY — the renderer also hangs this modifier on a .cac-vote cell, which is a
   different box; a border or a fill here would repaint half the vote grid. */
.cac-cl--neut { color: var(--text-muted); }

/* ── Cluster votes grid ────────────────────────────────────────────────────── */

.cac-voteblk {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(13px, 1.2vw, 18px);
}
.cac-votegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
}
.cac-vote {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  padding: 7px 11px;
  background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
/* The key is a record identifier, not a label, so it is NOT uppercased: `equity_vol` is
   how the deterministic record spells it, and the reader should be able to match it. */
.cac-vote-k { font: 400 11px/1.3 var(--font-sans); color: var(--text-2); }
.cac-vote-v { font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.cac-v--pos .cac-vote-v { color: var(--bull-text); }
.cac-v--neg .cac-vote-v { color: var(--bear-text); }
.cac-cl--neut .cac-vote-v, .cac-vote.cac-cl--neut .cac-vote-v { color: var(--text-muted); }

/* ── Regime history ribbon ─────────────────────────────────────────────────── */

.cac-ribblk {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(13px, 1.2vw, 18px);
}
.cac-ribbon { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.cac-rib {
  display: flex; flex-direction: column; gap: 3px; min-width: 62px; padding: 7px 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center;
}
.cac-rib--dom { border-color: var(--bull-edge); background: var(--bull-tint); }
.cac-rib--mix { border-color: var(--line); }
.cac-rib-d {
  font: 400 10px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--colhead);
}
.cac-rib-r {
  font-size: 10px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Foot ──────────────────────────────────────────────────────────────────── */

/* Colour comes from the .cac-faint the renderer pairs with it. */
.cac-foot { font-size: 11px; padding: 13px 16px; }

@media (max-width: 760px) {
  .cac-header { flex-direction: column; }
  .cac-regime, .cac-driver { min-width: 0; }
  .cac-clrow-l { min-width: 0; }
  .cac-votegrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}