/* ============================================================
   THE FREESIDE DESIGN SYSTEM — drop-in stylesheet
   ------------------------------------------------------------
   Grammar from NativeFoundation (RelayOS). Palette + texture from
   EnterpriseAlumni (AlumniPortal). Internal to NF + EA staff only —
   never surface Freeside / Molly / Seldon / Case to end customers.

   Semantic colour, mapped to the product's own architecture:
     Network blue  (EA) → the platform / network / data · structural + primary
     Agent orange  (NF) → the intelligence · emphasis + the one "dispatch" verb
     Forecast teal (EA) → Seldon · prediction, confidence, projection
     Wargame violet(EA) → simulation / what-if / wargaming

   Pair with the type import (or self-host the WOFF2s):
   @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Surfaces — white page like EA; cards separated by shadow + hairline, not tone */
  --fs-canvas:  #FFFFFF;   /* page background — white, matches EA */
  --fs-surface: #EEF1F6;   /* inset / secondary panels (the only soft grey) */
  --fs-paper:   #FFFFFF;   /* cards */
  --fs-neutral: #D5DAE2;   /* dividers */
  --fs-line:    #E2E6ED;   /* hairline on white */
  --fs-line2:   #EEF1F5;   /* fainter hairline */

  /* Ink — cool slate navy (NF navy × EA slate #363C4A). All AA on white. */
  --fs-ink:  #16202E;      /* headlines, max contrast — 16.4:1 */
  --fs-ink2: #3A4657;      /* body / secondary — 9.6:1 */
  --fs-ink3: #646E7A;      /* captions, mute — 5.2:1 (AA for small text) */
  --fs-ink-invert: #FFFFFF;

  /* Network blue — from EA. Structural + primary action.
     Tuned to 5.1:1 on white → passes AA both as link text and as a button fill. */
  --fs-net:        #0F72B8;
  --fs-net-strong: #0F5A99;   /* hover / pressed — 7.1:1 */
  --fs-on-primary: #FFFFFF;   /* text on a --fs-net fill (flips dark in dark theme) */
  --fs-net-deep:   #0B2542;   /* navy panels / hero */
  --fs-net-soft:   #E4EFF8;   /* tint bg */
  --fs-net-ink:    #08355C;   /* text on soft */

  /* Agent orange — from NF (#FF6B35). Spot accent + the single sanctioned CTA.
     The vivid hue fails AA as text on white, so it is NEVER used for text —
     use --fs-agent-text (5.1:1) for any orange lettering, and DARK ink on the
     orange Dispatch fill (not white). */
  --fs-agent:      #FF6B35;   /* fills, dots, logo, the constellation — non-text only */
  --fs-agent-soft: #FFE4D6;
  --fs-agent-ink:  #7A2700;   /* on --fs-agent-soft badges — 8.2:1 */
  --fs-agent-text: #B84E1C;   /* orange lettering on white — 5.1:1 */

  /* Forecast teal — from EA (#008577). Seldon. */
  --fs-forecast:      #008577;
  --fs-forecast-soft: #D6EFEB;
  --fs-forecast-ink:  #044F47;

  /* Wargame violet — from EA offers pill. Simulation. */
  --fs-sim:      #6C5CE0;
  --fs-sim-soft: #E9E5FB;
  --fs-sim-ink:  #362A7A;

  /* Semantic status. `*-text` are the AA-on-white lettering tones; the base
     hues are for fills/borders/icons (non-text or ≥3:1 UI). */
  --fs-warn:   #E8912A; --fs-warn-soft:   #FCEBD3; --fs-warn-ink:   #7A4A00; --fs-warn-text:   #835200;
  --fs-danger: #D64545; --fs-danger-soft: #FBE2E2; --fs-danger-ink: #7C1F1F; --fs-danger-text: #BE382F;

  /* Type — Geist for everything; JetBrains Mono for the machine voice.
     Inter is the EA-continuity fallback. No serif. */
  --fs-sans:  "Geist", "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --fs-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Radii — NF-tight, EA-pill for controls */
  --fs-rad-sm: 6px; --fs-rad-md: 10px; --fs-rad-lg: 14px;
  --fs-rad-xl: 18px; --fs-rad-pill: 999px;

  /* Spacing — 8px grid */
  --fs-1:4px; --fs-2:8px; --fs-3:12px; --fs-4:16px; --fs-5:20px;
  --fs-6:24px; --fs-7:32px; --fs-8:40px; --fs-9:48px; --fs-10:64px;

  /* Elevation — cool slate-tinted, multi-stop (cards sink, they don't float) */
  --fs-sh-xs:    0 1px 2px rgba(11,37,66,0.06), 0 2px 4px rgba(11,37,66,0.04);
  --fs-sh-sm:    0 1px 3px rgba(11,37,66,0.08), 0 2px 6px rgba(11,37,66,0.05);
  --fs-sh-card:  0 2px 4px rgba(11,37,66,0.07), 0 8px 20px rgba(11,37,66,0.10);
  --fs-sh-pop:   0 4px 8px rgba(11,37,66,0.10), 0 12px 28px rgba(11,37,66,0.12);
  --fs-sh-hero:  0 4px 10px rgba(11,37,66,0.10), 0 18px 40px rgba(11,37,66,0.14);
  --fs-sh-inset: inset 0 1px 2px rgba(11,37,66,0.10), inset 0 0 0 1px rgba(11,37,66,0.05);
  --fs-hairline: 1px solid rgba(11,37,66,0.10);

  --fs-focus: 0 0 0 3px rgba(19,124,196,0.28);
  --fs-ease:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark "night watch" theme ───────────────────────────────── */
:root[data-theme="dark"] {
  --fs-canvas:#0C1420; --fs-surface:#101B2B; --fs-paper:#14202F;
  --fs-neutral:#24354A; --fs-line:#22334A; --fs-line2:#1A2838;
  --fs-ink:#EAF0F7; --fs-ink2:#A9B7C8; --fs-ink3:#8593A5; --fs-ink-invert:#0C1420; /* ink3 5.3:1 on paper */
  --fs-net:#3AA0E4; --fs-net-strong:#63B6ED; --fs-net-deep:#071A30; --fs-net-soft:#10314C; --fs-net-ink:#BFE0F6;
  --fs-on-primary:#0C1420;   /* dark text on the light-blue fill — 6.5:1 */
  --fs-agent:#FF7D4D; --fs-agent-soft:#3A2115; --fs-agent-ink:#FFC7AE; --fs-agent-text:#FF7D4D; /* light-on-dark passes */
  --fs-forecast:#2BB6A3; --fs-forecast-soft:#0E332E; --fs-forecast-ink:#9EE4D8;
  --fs-sim:#9385F0; --fs-sim-soft:#241E45; --fs-sim-ink:#CFC7FA;
  --fs-warn:#F0A94A; --fs-warn-soft:#33240F; --fs-warn-ink:#F7D6A3; --fs-warn-text:#F0A94A;
  --fs-danger:#E86B6B; --fs-danger-soft:#3A1919; --fs-danger-ink:#F5B9B9; --fs-danger-text:#F08C8C;
  --fs-sh-card:0 2px 6px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.4);
  --fs-sh-pop:0 6px 14px rgba(0,0,0,0.55), 0 16px 36px rgba(0,0,0,0.5);
  --fs-sh-hero:0 8px 20px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.55);
  --fs-sh-inset:inset 0 1px 2px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
  --fs-hairline:1px solid rgba(255,255,255,0.07);
  --fs-focus:0 0 0 3px rgba(58,160,228,0.35);
}

/* ── Typographic voice ──────────────────────────────────────── */
.fs-eyebrow { font-family:var(--fs-mono); font-size:10px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--fs-ink3); }
.fs-eyebrow--net{color:var(--fs-net-strong)} .fs-eyebrow--agent{color:var(--fs-agent-text)}
.fs-eyebrow--forecast{color:var(--fs-forecast)} .fs-eyebrow--sim{color:var(--fs-sim)}
.fs-h1{font-family:var(--fs-sans);font-size:56px;font-weight:700;line-height:1.02;letter-spacing:-1.8px;color:var(--fs-ink)}
.fs-h2{font-family:var(--fs-sans);font-size:32px;font-weight:600;line-height:1.12;letter-spacing:-0.7px;color:var(--fs-ink)}
.fs-h3{font-family:var(--fs-sans);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-0.3px;color:var(--fs-ink)}
.fs-body{font-family:var(--fs-sans);font-size:15px;font-weight:400;line-height:1.6;color:var(--fs-ink2)}
.fs-mono{font-family:var(--fs-mono);font-size:11px;letter-spacing:0.3px;color:var(--fs-ink3)}
/* Emphasis — weight, not colour or serif. Bold sans; inherits colour so it works on light + dark. */
.fs-em{font-weight:600}

/* ── Surfaces ───────────────────────────────────────────────── */
.fs-card{background:var(--fs-paper);border-radius:var(--fs-rad-lg);box-shadow:var(--fs-sh-card);outline:var(--fs-hairline);outline-offset:-1px;padding:24px;transition:transform 140ms var(--fs-ease),box-shadow 140ms var(--fs-ease)}
.fs-card--hover:hover{transform:translateY(-2px);box-shadow:var(--fs-sh-pop)}
.fs-inset{background:var(--fs-surface);border-radius:var(--fs-rad-md);box-shadow:var(--fs-sh-inset);padding:16px}

/* ── Buttons ────────────────────────────────────────────────── */
.fs-btn{font-family:var(--fs-sans);font-size:13px;font-weight:600;letter-spacing:0.1px;height:40px;padding:0 20px;border-radius:var(--fs-rad-pill);border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform 120ms var(--fs-ease),box-shadow 120ms var(--fs-ease),background 120ms var(--fs-ease)}
.fs-btn:hover{transform:translateY(-1px)}
.fs-btn svg{width:16px;height:16px}
.fs-btn--primary{background:var(--fs-net);color:var(--fs-on-primary);box-shadow:0 1px 2px rgba(11,37,66,0.25)}
.fs-btn--primary:hover{background:var(--fs-net-strong);box-shadow:0 4px 14px rgba(15,90,153,0.35)}
/* Agent orange CTA — ONLY for dispatching an agent. Uses DARK ink on the orange
   fill (5.8:1) — white-on-orange fails AA. The single exception to "orange is never a CTA". */
.fs-btn--agent{background:var(--fs-agent);color:#16202E;box-shadow:0 1px 2px rgba(122,39,0,0.25)}
.fs-btn--agent:hover{background:#F4551B;box-shadow:0 4px 14px rgba(255,107,53,0.4)}
.fs-btn--ghost{background:transparent;color:var(--fs-ink);border-color:var(--fs-line);box-shadow:var(--fs-sh-xs)}
.fs-btn--ghost:hover{border-color:var(--fs-net);color:var(--fs-net-strong)}
.fs-btn--danger{background:transparent;color:var(--fs-danger-text);border-color:color-mix(in srgb,var(--fs-danger) 55%,transparent)}
.fs-btn--danger:hover{background:var(--fs-danger-soft)}
.fs-btn--sm{height:32px;padding:0 14px;font-size:12px}

/* ── Inputs ─────────────────────────────────────────────────── */
.fs-field{display:flex;flex-direction:column;gap:6px}
.fs-field label{font-family:var(--fs-mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--fs-ink3)}
.fs-input{height:42px;padding:0 14px;border-radius:var(--fs-rad-md);border:1px solid var(--fs-line);background:var(--fs-canvas);box-shadow:inset 0 1px 2px rgba(11,37,66,0.05);font-family:var(--fs-sans);font-size:14px;color:var(--fs-ink);outline:none;width:100%;transition:border-color 120ms var(--fs-ease),box-shadow 120ms var(--fs-ease)}
.fs-input::placeholder{color:var(--fs-ink3)}
.fs-input:focus{border-color:var(--fs-net);box-shadow:var(--fs-focus)}
.fs-input--pill{border-radius:var(--fs-rad-pill);background:var(--fs-surface);border-color:transparent}

/* ── Chips ──────────────────────────────────────────────────── */
.fs-chip{font-family:var(--fs-sans);font-size:13px;color:var(--fs-ink2);padding:7px 15px;border-radius:var(--fs-rad-pill);background:var(--fs-paper);border:1px solid var(--fs-line);cursor:pointer;box-shadow:var(--fs-sh-xs);transition:all 120ms var(--fs-ease)}
.fs-chip:hover{border-color:var(--fs-net);color:var(--fs-net-strong)}
.fs-chip--on{background:var(--fs-net);color:#fff;border-color:var(--fs-net)}

/* ── Status: CLI pills, badges, dots ────────────────────────── */
.fs-pill{font-family:var(--fs-mono);font-size:10px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;padding:3px 4px;white-space:nowrap;color:var(--fs-ink2)}
.fs-pill::before{content:'[ ';color:var(--fs-ink3)} .fs-pill::after{content:' ]';color:var(--fs-ink3)}
.fs-pill--live{color:var(--fs-agent-text)} .fs-pill--pred{color:var(--fs-forecast)}
.fs-pill--wait{color:var(--fs-warn-text)} .fs-pill--done{color:var(--fs-net)} .fs-pill--sim{color:var(--fs-sim)}

.fs-badge{font-family:var(--fs-mono);font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 9px;border-radius:var(--fs-rad-pill);display:inline-flex;align-items:center;gap:5px}
.fs-badge--net{background:var(--fs-net-soft);color:var(--fs-net-ink)}
.fs-badge--agent{background:var(--fs-agent-soft);color:var(--fs-agent-ink)}
.fs-badge--forecast{background:var(--fs-forecast-soft);color:var(--fs-forecast-ink)}
.fs-badge--sim{background:var(--fs-sim-soft);color:var(--fs-sim-ink)}
.fs-badge--warn{background:var(--fs-warn-soft);color:var(--fs-warn-ink)}
.fs-badge--danger{background:var(--fs-danger-soft);color:var(--fs-danger-ink)}

.fs-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.fs-dot--live{background:var(--fs-agent);box-shadow:0 0 0 4px var(--fs-agent-soft);animation:fs-pulse 2.4s var(--fs-ease) infinite}
.fs-dot--pred{background:var(--fs-forecast);box-shadow:0 0 0 4px var(--fs-forecast-soft)}
.fs-dot--done{background:var(--fs-net);box-shadow:0 0 0 4px var(--fs-net-soft)}
@keyframes fs-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── Confidence / progress bar ──────────────────────────────── */
.fs-bar{height:8px;border-radius:var(--fs-rad-pill);background:var(--fs-surface);overflow:hidden;box-shadow:var(--fs-sh-inset)}
.fs-bar>i{display:block;height:100%;border-radius:var(--fs-rad-pill);background:var(--fs-forecast)}

/* ── The human ◆ machine pair (the intent line) ─────────────── */
.fs-pair{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fs-pair__human{font-weight:600;font-size:16px;color:var(--fs-ink)}
.fs-pair__sep{width:8px;height:16px;background:var(--fs-agent);animation:fs-breath 3.4s var(--fs-ease) infinite}
.fs-pair__machine{font-family:var(--fs-mono);font-size:12px;color:var(--fs-ink2);letter-spacing:0.3px}
@keyframes fs-breath{
  0%{background:var(--fs-agent);opacity:.15} 15%,35%{background:var(--fs-agent);opacity:1} 49%{background:var(--fs-agent);opacity:.15}
  50%{background:var(--fs-net);opacity:.15} 65%,85%{background:var(--fs-net);opacity:1} 99%{background:var(--fs-net);opacity:.15}
  100%{background:var(--fs-agent);opacity:.15}
}

/* ── Constellation hero (EA facets × the NF node-mark) ──────── */
.fs-hero{position:relative;border-radius:var(--fs-rad-xl);overflow:hidden;color:#fff;background:linear-gradient(135deg,#0B2542 0%,#0F3A66 55%,#10538F 100%);box-shadow:var(--fs-sh-hero);padding:40px}
.fs-hero__facets{position:absolute;inset:0;opacity:.5}   /* subtle white polygons */
.fs-hero__constell{position:absolute;inset:0}            /* orange nodes + edges over blue field */

/* ── Accessibility infrastructure ───────────────────────────── */
/* Visible keyboard focus on every interactive element. Never remove without
   a replacement. The ring (net) is ≥3:1 on both themes. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.fs-btn:focus-visible, .fs-chip:focus-visible {
  outline: 3px solid var(--fs-net); outline-offset: 2px;
}
/* Screen-reader-only text (e.g. accessible names for icon-only controls, skip links). */
.fs-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.fs-sr-only:focus, .fs-skip:focus { position:static!important; width:auto; height:auto;
  margin:0; clip:auto; padding:8px 14px; background:var(--fs-net); color:#fff; border-radius:var(--fs-rad-md); }

/* Minimum interactive target size (WCAG 2.5.8). Applies a floor without changing
   the visual box; opt controls in with .fs-target if they render smaller. */
.fs-target { min-width:24px; min-height:24px; }

/* Windows High Contrast / forced-colors: keep affordances visible. */
@media (forced-colors: active){
  .fs-card, .fs-chip, .fs-btn, .fs-badge, .fs-inset { border:1px solid; }
  .fs-dot { outline:1px solid; }
  a:focus-visible, button:focus-visible, .fs-btn:focus-visible { outline:2px solid CanvasText; }
}

/* Honour reduced-motion: kill the breathing cursor, pulse, hovers, transitions. */
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}