/* ============================================================================
   HexVault — Signal System
   ----------------------------------------------------------------------------
   1. VIOLET is the brand. Interactive, new, "look here".
   2. EMERALD means one thing only: cryptographically verified. Not "success".
   3. SEVERITY is encoded THREE ways, never colour alone:
        word    HIGH / MEDIUM / LOW
        meter   filled cells  ███ / ██░ / █░░
        hue     rose / amber / cyan
      Any one channel carries the meaning, so it survives greyscale, print, and
      colour-blindness. (An earlier single-hue opacity ramp scored 2.9:1 / 1.6:1
      on the canvas — illegible. This replaces it.)
      Cyan carries LOW, not green: green is reserved for "verified".
   Treatment: monospace uppercase words, 2px rules, filled meters — never
   saturated capsules with tinted fills.
   ========================================================================== */

:root {
  --sig-brand:      #6355ff;
  --sig-brand-soft: #8b7fff;   /* raw violet is 4.2:1 — too low for small text */
  --sig-verified:   #00e5a0;   /* 12.5:1 */
  --sig-high:       #ff4d6d;   /*  6.4:1 */
  --sig-medium:     #ffb547;   /* 11.8:1 */
  --sig-low:        #22d3ee;   /* 11.4:1 */
  --sig-quiet:      #8892a4;
  --sig-text:       #EEF0F6;
  --sig-hair:       rgba(255,255,255,.08);
}

.sig {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; color: var(--sig-quiet);
  background: none; border: 0; padding: 0;
}
.sig-high     { color: var(--sig-high); }
.sig-medium   { color: var(--sig-medium); }
.sig-low      { color: var(--sig-low); }
.sig-verified { color: var(--sig-verified); }
.sig-brand    { color: var(--sig-brand-soft); }
.sig-quiet    { color: var(--sig-quiet); }

/* Severity: a small monospace rank + the word in the level's hue. Rank and word
   both carry the level; no meter, no bars. Reads cleanly and in greyscale. */
.sig-rank { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9px; opacity:.7; margin-right:7px; }

/* Severity row: meter + word + rule. Three channels, one glance. */
.sig-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px; border-bottom: 1px solid var(--sig-hair); color: var(--sig-quiet);
}
.sig-row:last-child { border-bottom: 0; }
.sig-row--high   { border-left: 2px solid var(--sig-high);   padding-left: 12px; color: var(--sig-text); }
.sig-row--medium { border-left: 2px solid var(--sig-medium); padding-left: 12px; color: var(--sig-text); }
.sig-row--low    { border-left: 2px solid var(--sig-low);    padding-left: 12px; }
.sig-row--flag   { border-left: 2px solid var(--sig-brand);  padding-left: 12px; color: var(--sig-text); }

/* Nav badges: typographic, not capsules */
.nav-sig {
  margin-left: auto; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sig-quiet); background: none; border: 0; padding: 0; border-radius: 0;
}
.nav-sig--new      { color: var(--sig-brand-soft); }
.nav-sig--live     { color: var(--sig-verified); }
.nav-sig--critical { color: var(--sig-high); }

/* Figures are typography, not signals */
.sig-figure { font-size: 22px; font-weight: 600; color: var(--sig-text); letter-spacing: -.01em; }
.sig-figure__unit  { font-size: 11px; color: var(--sig-quiet); margin-left: 1px; }
.sig-figure__label {
  display: block; margin-top: 4px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sig-quiet);
}

/* Legacy capsule suppression */
.nav-badge, .nav-new-badge {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; margin-left: auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 500 !important; letter-spacing: .1em; text-transform: uppercase;
}
.nav-new-badge { color: var(--sig-brand-soft) !important; }
.nav-badge     { color: var(--sig-high) !important; }