/* ═══════════════════════════════════════════════════════════════
   variant.css — puts the variant report on the shared design system.

   Load order in variant.html is:
       inline <style>   (the report's own ~900 lines, unchanged)
       tokens.css
       chrome.css
       variant.css      ← last

   The report's layout does not need rewriting; only the palette it
   draws from and its page chrome. So the inline <style> stays, its
   :root block is deleted (see the patch notes), and everything it
   referenced is re-pointed here at tokens.css.

   ALIASES ONLY — no hex values are repeated from tokens.css. If a
   colour needs changing it changes in one place, there.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces the report asks for by its own names ── */
  --bg-2:      var(--ink);
  --surface-2: var(--slate-2);
  --surface-3: var(--well);

  /* The report used --line-2 for anything more visible than a hairline.
     tokens has one --line at that weight and --hair below it. */
  --line-2: var(--line);

  /* ── one interactive colour ── */
  --accent:      var(--gold);
  --accent-soft: var(--gold-soft);
  --accent-line: var(--gold-edge);
  --gold-line:   var(--gold-edge);

  /* ── text ramp ── */
  --t1: var(--paper);
  --t2: var(--dim);
  --t3: var(--dimmer);
  --t4: #4A5A7E;          /* one step below --dimmer; nothing in tokens sits here */

  /* ── classification borders (report says -line, tokens says -edge) ── */
  --P-line:   var(--P-edge);
  --LP-line:  var(--LP-edge);
  --VUS-line: var(--VUS-edge);
  --LB-line:  var(--LB-edge);
  --B-line:   var(--B-edge);
  --UNK-line: var(--UNK-edge);

  /* population-frequency series — three datasets, not a clinical scale */
  --pf-v4: var(--VUS);
  --pf-v2: #9B8CFF;
  --pf-ca: var(--gold);

  /* ── layout ── */
  --shell: var(--measure);
  --nav-h: var(--nav-height);
}

/* ═══════════ page frame ═══════════ */
/* Flat, matching the index. The report had its own three-layer radial
   gradient; two different page backgrounds across one site reads as two
   different products. */
body {
  background: var(--ink);
  font-size: 15px;
  padding-bottom: var(--footer-height);
}

/* .shell predates .wrap and does the same job. Aligned so the report and
   the index share a content column. */
.shell {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The animated FASTQ canvas is gone from the index, replaced by a static
   rule of bases. Same here: it was a full-viewport requestAnimationFrame
   loop repainting for the life of the page. */
#seqCanvas, .bg-fade { display: none !important; }

.seq-rule {
  font-family: var(--mono); font-size: 11px; letter-spacing: .42em;
  color: var(--dim); opacity: .08; user-select: none;
  white-space: nowrap; overflow: hidden; padding: 22px 0 0;
}

/* ═══════════ context bar ═══════════ */
/* Sits under the shared nav and carries what is specific to this one
   report: which variant, which framework, print, re-run. Global
   navigation is header.html's job; this bar is the page's job. */
.ctx-bar {
  position: sticky; top: var(--nav-height); z-index: 39;
  background: rgba(5, 11, 28, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.ctx-inner {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter);
  height: 52px; display: flex; align-items: center; gap: 14px;
}

.ctx-back {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--dim); font-size: 12.5px; text-decoration: none; transition: .15s;
}
.ctx-back:hover { color: var(--paper); border-color: var(--gold-edge); }
.ctx-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ctx-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ctx-id .m { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-id .m b { color: var(--gold); font-weight: 600; }
.ctx-id .s { font-family: var(--mono); font-size: 10.5px; color: var(--dimmer); }
.ctx-id .s b { color: var(--dim); font-weight: 500; }

.ctx-gap { flex: 1; }
.ctx-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ctx-framework {
  display: inline-flex; align-items: center; gap: 6px; max-width: 320px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--gold-edge); background: var(--gold-soft); color: var(--gold);
  font-family: var(--mono); font-size: 10.5px; text-decoration: none; transition: .15s;
}
.ctx-framework:hover { border-color: rgba(201,165,80,.6); }
.ctx-framework span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-framework svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; opacity: .8; }

.ctx-btn {
  height: 30px; min-width: 30px; padding: 0 9px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--dim); font-size: 12px; cursor: pointer; text-decoration: none; transition: .15s;
}
.ctx-btn:hover { color: var(--gold); border-color: var(--gold-edge); background: var(--gold-soft); }
.ctx-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctx-btn.is-rerun { color: var(--warn); border-color: rgba(232,185,106,.4); background: rgba(232,185,106,.08); }

/* The live status bar hangs off both bars, not just the nav. */
.live-status-bar { top: calc(var(--nav-height) + 52px); }

@media (max-width: 900px) {
  .ctx-inner { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .ctx-id { order: 3; flex-basis: 100%; }
  .live-status-bar { top: var(--nav-height); }
  .seq-rule { display: none; }
}

/* ═══════════ AI notice ═══════════ */
/* Styles come from chrome.css. This is the page someone lands on from a
   search engine without ever seeing the homepage, so the notice matters
   more here than there. */
.variant-ai-note { margin: 20px 0 0; }

/* ═══════════ report tone alignment ═══════════ */
/* The report set its verdict at 38px against the index's 48px h1, and
   its section headings in tracked-out caps. Pulled closer to the index
   so the two pages read as one product. */
.hs-call { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.035em; }
.sec-h { font-size: 13px; letter-spacing: .12em; }
.card { border-radius: 14px; }
.rationale-para { font-size: 14.5px; line-height: 1.9; }

/* Toast: the report used an id, the index a class. Both land here. */
#toast, .toast {
  bottom: calc(var(--footer-height) + 22px);
  background: var(--slate);
  border-color: var(--line);
}
@media (max-width: 900px) { #toast, .toast { bottom: 22px; } }