/* ═══════════════════════════════════════════════════════════════
   tokens.css — the single source of truth for design values.

   Load this FIRST, before every other stylesheet. Nothing else in
   the app should declare a :root variable; header, footer and page
   stylesheets all read from here. The previous build declared
   --nav-height in three files and --footer-height in two, which is
   how the layout maths drifted out of sync.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces ── */
  --ink:        #050B1C;   /* page background */
  --slate:      #0C1730;   /* raised panel */
  --slate-2:    #111E3C;   /* inset track */
  --well:       #091334;   /* input well */

  /* ── rules ── */
  --line:       rgba(124, 152, 208, .14);
  --hair:       rgba(124, 152, 208, .08);

  /* ── brand ── */
  --gold:       #C9A550;
  --gold-hi:    #DCBB6A;
  --gold-soft:  rgba(201, 165, 80, .06);
  --gold-edge:  rgba(201, 165, 80, .30);

  /* ── text ── */
  --paper:      #E9EEF9;
  --dim:        #93A3C4;
  --dimmer:     #63749A;

  /* ── signals ── */
  --live:       #00E599;   /* healthy / free / available */
  --warn:       #E8B96A;   /* AI caveat, disclaimers */
  --error:      #E07070;

  /* ── ACMG classification (semantic — do not restyle) ── */
  --P:   #E8827F;  --P-edge:   rgba(232, 130, 127, .32);
  --LP:  #D9A0A0;  --LP-edge:  rgba(217, 160, 160, .30);
  --VUS: #7AB8E8;  --VUS-edge: rgba(122, 184, 232, .32);
  --LB:  #8FC7AC;  --LB-edge:  rgba(143, 199, 172, .30);
  --B:   #5FC095;  --B-edge:   rgba(95, 192, 149, .32);
  --UNK: #8A9DC0;  --UNK-edge: rgba(138, 157, 192, .20);

  /* ── type ── */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── compatibility aliases ──
     gene-diagram.js was written against the previous variable names and
     is not being rewritten. These map the old names onto the new palette
     so it renders correctly without touching that file. Do not use them
     in new CSS. */
  --bg:           var(--ink);
  --surface:      var(--slate);
  --surface2:     var(--well);
  --border:       var(--line);
  --border-light: var(--hair);
  --text:         var(--paper);
  --text2:        var(--dim);
  --text3:        var(--dimmer);
  --gold2:        var(--gold-soft);
  --teal:         var(--live);
  --teal2:        rgba(0, 229, 153, .08);
  --P-bg:   rgba(232, 130, 127, .10);  --P-brd:   var(--P-edge);
  --LP-bg:  rgba(217, 160, 160, .08);  --LP-brd:  var(--LP-edge);
  --VUS-bg: rgba(122, 184, 232, .10);  --VUS-brd: var(--VUS-edge);
  --LB-bg:  rgba(143, 199, 172, .08);  --LB-brd:  var(--LB-edge);
  --B-bg:   rgba(95, 192, 149, .10);   --B-brd:   var(--B-edge);
  --UNK-bg: rgba(138, 157, 192, .06);  --UNK-brd: var(--UNK-edge);
  --mono-font: var(--mono);

  /* ── layout ── */
  --nav-height:    60px;
  --footer-height: 86px;   /* fixed footer; body reserves this below */
  --measure:    1180px;
  --gutter:     32px;
}

/* ═══════════ reset ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* The footer is fixed to the viewport, so the page reserves space for
   it here. Any page that loads chrome.css gets this automatically. */
body {
  min-height: 100vh;
  padding-bottom: var(--footer-height);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "zero" 1;
}

/* A display rule on a class beats the hidden attribute, which silently
   revealed the empty nav widgets. Restore the attribute's meaning. */
[hidden] { display: none !important; }

a { color: inherit; }
button { font: inherit; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ═══════════ shared primitives ═══════════ */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Status dot. Used in the nav, in queue rows, anywhere "live" is meant. */
.pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pip { animation: pip-pulse 2.6s ease-in-out infinite; }
}
@keyframes pip-pulse { 50% { opacity: .3; } }

/* Classification tag. One class per ACMG bucket; clsInfo() in home.js
   maps a raw classification string to the suffix. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid; border-radius: 5px; padding: 2px 8px;
}
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag-P   { color: var(--P);   border-color: var(--P-edge);   }
.tag-LP  { color: var(--LP);  border-color: var(--LP-edge);  }
.tag-VUS { color: var(--VUS); border-color: var(--VUS-edge); }
.tag-LB  { color: var(--LB);  border-color: var(--LB-edge);  }
.tag-B   { color: var(--B);   border-color: var(--B-edge);   }
.tag-UNK { color: var(--UNK); border-color: var(--UNK-edge); }

@media (max-width: 640px) { :root { --gutter: 20px; } }