/* ==========================================================================
   SIGMA SCANNER — proof.css
   §7 The evidence · the page's only OTHER dark surface (alongside §14
   Footer — see 06-DESIGN-SYSTEM.md's two-dark-surface budget).

   Every specific figure in this section's markup is copied from §4
   Overview's own backtest panel, not re-invented — see index.html's
   section comment for the one deliberate exception (the heat strip's real
   down year is labelled with the exact same −10.77% as the KPI, not a
   second invented drawdown number).

   Layer discipline: base rules and every responsive override live
   together in @layer components — an override left in @layer layout has
   silently lost to a components-layer base rule twice already in this
   project, regardless of specificity or matching media query.
   ========================================================================== */

@layer components {

  /* Own background, not the bare [data-theme="dark"] scope colour
     (--deep-900, #04120B) — that flat value is a genuinely green-tinted
     black (~154° hue) and reading it across a whole section is exactly
     what made this page feel "green" rather than "premium dark". A soft
     top-anchored vignette in near-neutral charcoal replaces it; green is
     demoted to one small glow below, not the section's base colour. */
  .proof {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background-image: radial-gradient(130% 90% at 50% -10%, #0C1512 0%, #06100B 45%, #030705 100%);
  }

  /* One green accent (brand, bottom-left, restrained) balanced by one
     neutral slate highlight (top-right, a soft light-catch, not a colour
     wash) — a single hue stacked on itself is what reads as "tinted";
     pairing it with a neutral reads as "lit". Kept smaller and dimmer
     than the original two-green version for the same reason. */
  .proof__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(50% 45% at 8% 100%, rgb(34 197 94 / .10) 0%, rgb(34 197 94 / 0) 70%),
      radial-gradient(38% 34% at 94% 4%,  rgb(148 163 184 / .05) 0%, rgb(148 163 184 / 0) 70%);
  }

  .proof .ss-container { position: relative; z-index: 1; }

  .proof__header { max-inline-size: 560px; margin-block-end: var(--sp-9); }
  .proof__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--ink-900);
    margin-block-start: var(--sp-3);
  }

  .proof__board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
  }

  /* ========================================================================
     CURVE CARD
     ======================================================================== */
  .proof__curve-card {
    padding: var(--sp-7);
    border-radius: var(--r-xl);
    background: var(--deep-800);
    border: 1px solid var(--deep-700);
  }

  .proof__kpis { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-block-end: var(--sp-6); }
  .proof__kpi { display: flex; flex-direction: column; gap: 2px; }
  .proof__kpi b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-metric);
    font-weight: 700;
    color: var(--ink-900);
  }
  .proof__kpi span { font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
  .proof__kpi[data-tone="gain"] b { color: var(--data-gain-text); }
  .proof__kpi[data-tone="loss"] b { color: var(--data-loss-text); }

  .proof__curve { display: block; inline-size: 100%; block-size: auto; }
  .proof__curve * { vector-effect: non-scaling-stroke; }
  .proof__curve-bench { stroke: var(--data-benchmark); stroke-width: 1.5; stroke-dasharray: 4 4; }
  .proof__curve-strat { stroke: var(--signal-400); stroke-width: 2.5; stroke-linecap: round; }

  .proof__axis {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-start: var(--sp-3);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-300);
  }
  .proof__axis span:nth-child(2) { color: var(--signal-400); margin-inline-start: auto; }
  .proof__axis-bench { color: var(--ink-400) !important; }

  /* ========================================================================
     HEAT CARD
     ======================================================================== */
  .proof__heat-card {
    padding: var(--sp-7);
    border-radius: var(--r-xl);
    background: var(--deep-800);
    border: 1px solid var(--deep-700);
  }

  .proof__heat-label {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--ink-400);
    margin-block-end: var(--sp-5);
  }

  .proof__heat { display: flex; flex-direction: column; gap: var(--sp-3); }

  .proof__heat-cell {
    display: grid;
    grid-template-columns: 40px 1fr 64px;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
  }
  .proof__heat-year { font-family: var(--font-mono); color: var(--ink-400); }
  .proof__heat-cell b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: end;
    color: var(--data-gain-text);
  }
  .proof__heat-cell[data-tone="loss"] b { color: var(--data-loss-text); }

  /* The bar itself: a track plus a fill scaled by --m (0–1) — the exact
     same "track + scaleX(var(--m))" recipe as every other bar on this
     page (Features' factor bars, Overview's weight/rank rows), just
     renamed per-section. One grammar, not a new one for this card. */
  .proof__heat-track {
    display: block;
    block-size: 6px;
    border-radius: var(--r-full);
    background: var(--deep-700);
    overflow: hidden;
  }
  .proof__heat-track i {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--signal-500), var(--signal-400));
    transform-origin: left center;
    transform: scaleX(var(--m, 0));
  }
  .proof__heat-cell[data-tone="loss"] .proof__heat-track i { background: var(--data-loss); }

  .proof__disclaimer {
    max-inline-size: 90ch;
    margin-block-start: var(--sp-8);
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-300);
  }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see file header
     ======================================================================== */
  @media (min-width: 1024px) {
    .proof__board {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: var(--sp-8);
      align-items: stretch;
    }
  }
}