/* ══════════════════════════════════════════════════════════
   WRISTLA · Drop-in skin for the whole portal
   ──────────────────────────────────────────────────────────
   Loaded AFTER portal.css so its :root overrides win. All
   existing classes (.card, .btn, .alert, .pill, .topbar, etc.)
   pick up the new palette + typography automatically.

   Palette, fonts and ring-gauge colors follow the Wristla
   design bundle (tokens.css): deeper navy canvas, neon cyan/
   iris accents, Space Grotesk display + JetBrains Mono data.
   ══════════════════════════════════════════════════════════ */


/* ── 1 · Token refinements ────────────────────────────────── */
:root {
  /* Canvas — deeper navy, matches Wristla tokens.css */
  --bg:          #07090F;
  --bg-raised:   #0D1119;
  --bg-inset:    #04060A;
  --card:        #0D1119;
  --card-hover:  #141925;

  /* Ink */
  --text:           #EDF1F7;
  --text-secondary: #A6B0C0;
  --muted:          #6A7587;

  /* Hairlines */
  --border:        rgba(255, 255, 255, 0.055);
  --border-accent: rgba(255, 255, 255, 0.12);
  --hairline:      rgba(255, 255, 255, 0.07);

  /* Brand neons — oklch for perceptual parity across hues */
  --accent:      oklch(0.82 0.15 200);              /* cyan — primary */
  --accent-dim:  oklch(0.82 0.15 200 / 0.55);
  --accent-glow: oklch(0.82 0.15 200 / 0.22);
  --ok:          oklch(0.82 0.15 200);
  --ok-glow:     oklch(0.82 0.15 200 / 0.18);

  --strain:      oklch(0.70 0.18 275);              /* iris — secondary metric */
  --strain-glow: oklch(0.70 0.18 275 / 0.20);
  --iris:        oklch(0.70 0.18 275);
  --iris-glow:   oklch(0.70 0.18 275 / 0.20);

  --magenta:      oklch(0.68 0.22 330);             /* hero gradient end */
  --magenta-glow: oklch(0.68 0.22 330 / 0.20);

  --warn:      oklch(0.88 0.18 92);                 /* bright yellow */
  --warn-dim:  oklch(0.88 0.18 92 / 0.55);
  --warn-glow: oklch(0.88 0.18 92 / 0.20);

  --orange:      oklch(0.75 0.19 55);               /* between warn and bad */
  --orange-glow: oklch(0.75 0.19 55 / 0.20);

  --danger:      oklch(0.62 0.24 25);               /* coral-red */
  --danger-dim:  oklch(0.62 0.24 25 / 0.55);
  --danger-glow: oklch(0.62 0.24 25 / 0.22);

  --bad:      oklch(0.62 0.24 25);
  --bad-glow: oklch(0.62 0.24 25 / 0.22);

  /* Gradients */
  --grad-cyan:    linear-gradient(135deg, oklch(0.82 0.15 200), oklch(0.70 0.18 275));
  --grad-iris:    linear-gradient(135deg, oklch(0.70 0.18 275), oklch(0.68 0.22 330));
  --grad-warn:    linear-gradient(135deg, oklch(0.88 0.18 92),  oklch(0.68 0.22 330));

  /* Typography — display + mono join the existing Inter body */
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shadows (deeper, more dimensional) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
}


/* ── 2 · Body canvas ──────────────────────────────────────── */
body {
  background:
    radial-gradient(900px 420px at 22% -8%, oklch(0.82 0.15 200 / 0.07), transparent 60%),
    radial-gradient(700px 360px at 78% -6%, oklch(0.70 0.18 275 / 0.06), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, oklch(0.68 0.22 330 / 0.04), transparent 60%),
    var(--bg);
  letter-spacing: -0.005em;
}

::selection { background: var(--accent-glow); color: var(--text); }

/* Thin scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }


/* ── 3 · Topbar ───────────────────────────────────────────── */
.topbar {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.brand__link {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--text), color-mix(in oklab, var(--accent) 60%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.nav__link--active {
  background: transparent;
  border-bottom: 2px solid var(--accent);
  color: var(--text);
  box-shadow: 0 1px 0 var(--accent-glow);
}

.nav-dropdown__menu {
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  border-radius: 12px;
  overflow: hidden;
}
.nav-dropdown__item {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
}
.nav-dropdown__item--active {
  color: var(--accent);
  background: var(--accent-glow);
}


/* ── 4 · Typography ───────────────────────────────────────── */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

.muted { color: var(--text-secondary); }
.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease;
}
.link:hover { border-bottom-color: var(--accent-dim); }


/* ── 5 · Cards ────────────────────────────────────────────── */
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
    var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transition: border-color 160ms ease, transform 160ms ease;
}
.card:hover {
  border-color: var(--border-accent);
}

.card--glow-accent { box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-glow), 0 0 60px -20px var(--accent-glow); border-color: var(--accent-dim); }
.card--glow-ok     { box-shadow: var(--shadow-md), 0 0 0 1px var(--ok-glow),     0 0 60px -20px var(--ok-glow);     border-color: var(--accent-dim); }
.card--glow-warn   { box-shadow: var(--shadow-md), 0 0 0 1px var(--warn-glow),   0 0 60px -20px var(--warn-glow);   border-color: var(--warn-dim); }
.card--glow-danger { box-shadow: var(--shadow-md), 0 0 0 1px var(--danger-glow), 0 0 60px -20px var(--danger-glow); border-color: var(--danger-dim); }
.card--glow-strain { box-shadow: var(--shadow-md), 0 0 0 1px var(--strain-glow), 0 0 60px -20px var(--strain-glow); border-color: color-mix(in oklab, var(--strain) 35%, transparent); }

a.card, button.card { cursor: pointer; }
a.card:hover, button.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-accent);
}


/* ── 6 · Buttons ──────────────────────────────────────────── */
.btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 11px 18px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ok {
  background: var(--grad-cyan);
  color: #001014;
  box-shadow: 0 4px 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 0;
}
.btn--ok:hover {
  box-shadow: 0 6px 28px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn--warn {
  background: var(--grad-warn);
  color: #140a00;
  border: 0;
}
.btn--danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger-dim);
}
.btn--danger:hover {
  background: var(--danger-glow);
}
.btn--muted {
  background: var(--bg-inset);
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
}
.btn--muted:hover { color: var(--text); border-color: var(--border-accent); }
.btn--sm { padding: 8px 14px; font-size: 11px; }


/* ── 7 · Alerts ───────────────────────────────────────────── */
.alert {
  border-left-width: 2px;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 13px;
  line-height: 1.5;
}
.alert--info  { border-left-color: var(--accent); background: color-mix(in oklab, var(--accent-glow) 60%, var(--bg-raised)); }
.alert--warn  { border-left-color: var(--warn);   background: color-mix(in oklab, var(--warn-glow)   60%, var(--bg-raised)); }
.alert--error { border-left-color: var(--danger); background: color-mix(in oklab, var(--danger-glow) 60%, var(--bg-raised)); }


/* ── 8 · Pills ────────────────────────────────────────────── */
.pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-inset);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-secondary);
}
.pill--ok     { color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.pill--danger { color: var(--danger); background: var(--danger-glow); box-shadow: inset 0 0 0 1px var(--danger-dim); }


/* ── 9 · Ring gauge (existing portal class) ───────────────── */
.ring-gauge {
  filter: drop-shadow(0 0 18px var(--accent-glow));
}
.ring-gauge__value {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}


/* ── 10 · Forms ───────────────────────────────────────────── */
.input, .select, textarea.input {
  background: var(--bg-inset);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: 0;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-glow);
}


/* ── 11 · Focus-visible for a11y ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ── 12 · Metric help-link + h2 eyebrow tweak ─────────────── */
.metric-help-link {
  color: var(--text-secondary);
  border-color: var(--hairline);
}
.metric-help-link:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}


/* ── 13 · Numbers & data glyphs ───────────────────────────── */
.kpi, .metric-value, [data-role="metric"], .big-number {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}


/* ── 14 · Achievement strip polish ────────────────────────── */
.achievements-strip {
  border-radius: 14px;
  border: 1px solid var(--hairline);
}


/* ══════════════════════════════════════════════════════════
   END skin
   ══════════════════════════════════════════════════════════ */