/* ============================================================================
   USDUC Ecosystem — Canonical Design System (tokens + base + components)
   Single source of truth. Every USDUC page imports ONLY this file for style.
   Extracted & refined from the live unstable.army design language (OKLCH,
   Space Grotesk / Inter / IBM Plex Mono). Hybrid direction: calm & serious
   base, recognisable USDUC accent.
   Fonts are served locally from /static/army_assets/fonts/ (CSP font-src 'self').
   ============================================================================ */

/* ── Design tokens ── */
:root{
  color-scheme:dark;
  --bg:oklch(0.15 0.026 258); --surface:oklch(0.195 0.03 258); --surface2:oklch(0.235 0.034 258);
  --line:oklch(0.30 0.033 258); --line-soft:oklch(0.255 0.03 258);
  --ink:oklch(0.98 0.01 258); --body:oklch(0.83 0.02 258); --mute:oklch(0.65 0.03 258);
  --accent:oklch(0.62 0.17 256); --accent-strong:oklch(0.68 0.16 252); --on-accent:oklch(0.16 0.02 258);
  --accent-wash:oklch(0.62 0.17 256 / .13);
  --sky:oklch(0.80 0.12 236); --sky-wash:oklch(0.80 0.12 236 / .13);
  --good:oklch(0.78 0.15 155); --bad:oklch(0.68 0.19 24);
  --shadow:0 18px 50px oklch(0 0 0 / .5);
  --r:12px; --r-sm:8px; --r-lg:18px;
  --sp:clamp(16px,4vw,30px);
  --section:clamp(38px,7vw,58px);
  --maxw:1120px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:oklch(0.99 0.003 258); --surface:oklch(0.96 0.008 258); --surface2:oklch(0.93 0.012 258);
  --line:oklch(0.84 0.02 258); --line-soft:oklch(0.89 0.014 258);
  --ink:oklch(0.20 0.04 258); --body:oklch(0.34 0.035 258); --mute:oklch(0.46 0.032 258);
  --accent:oklch(0.52 0.19 258); --accent-strong:oklch(0.48 0.19 258); --on-accent:oklch(0.99 0 0);
  --accent-wash:oklch(0.52 0.19 258 / .08);
  --sky:oklch(0.55 0.17 244); --sky-wash:oklch(0.55 0.17 244 / .09);
  --good:oklch(0.55 0.15 155); --bad:oklch(0.55 0.2 24);
  --shadow:0 18px 50px oklch(0.5 0.05 258 / .13);
}

/* ── Base ── */
*{box-sizing:border-box;min-width:0}
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}  /* clip keeps position:sticky working */
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:'Inter',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
svg{display:block}
img{max-width:100%}

.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.disp{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.05}
/* Anton display caps — big editorial headlines (the /redesign house style) */
.display{font-family:'Anton',system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;color:var(--ink)}
.eyebrow-mono{font-family:'IBM Plex Mono',monospace;font-size:clamp(9px,1.05vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp)}
.section{padding:var(--section) 0}
.icon{width:1em;height:1em;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--mute)}
.center{text-align:center}

/* ── Type scale ── */
.h1{font-size:clamp(2.1rem,6vw,3.4rem)}
.h2{font-size:clamp(1.5rem,4vw,2.15rem)}
.h3{font-size:clamp(1.12rem,2.6vw,1.35rem)}
.lead{font-size:clamp(1.02rem,2.2vw,1.2rem);color:var(--body)}
.eyebrow{font:600 .72rem/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.kicker{color:var(--mute);font-size:.8rem}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:11px var(--sp);display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:7px}
.brand span{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand b{color:var(--accent);font-weight:400}
.sp{flex:1}
.navlinks{display:flex;gap:2px;align-items:center}
.navlink{font-size:.78rem;font-weight:600;color:var(--mute);text-decoration:none;padding:7px 10px;border-radius:var(--r-sm)}
.navlink:hover,.navlink[aria-current="page"]{color:var(--ink);background:var(--surface)}
@media(max-width:760px){.nav .navlinks{display:none}.nav .nav-cta{display:none}}
/* mobile burger + sheet */
.burger{display:none;width:38px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger i{width:16px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.sheet{display:none;flex-direction:column;gap:2px;padding:8px var(--sp) 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.sheet a{padding:12px 8px;color:var(--body);text-decoration:none;font-weight:600;font-size:.98rem;border-radius:var(--r-sm)}
.sheet a:hover{background:var(--surface);color:var(--ink)}
.sheet .btn{margin-top:8px}
.sheet.open{display:flex}
@media(max-width:760px){.burger{display:flex}}

/* ── Buttons ── */
.btn{border:none;border-radius:var(--r-sm);padding:10px 18px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:transform .12s,background .12s,border-color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:7px 13px;font-size:.78rem}
.iconbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--body);cursor:pointer;display:grid;place-items:center;font-size:1rem}
.iconbtn:hover{border-color:var(--accent);color:var(--ink)}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,26px)}
.card-hover{transition:transform .14s,border-color .14s,box-shadow .14s}
.card-hover:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
a.card{text-decoration:none;display:block;color:inherit}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── Badges / chips ── */
.badge{display:inline-flex;align-items:center;gap:6px;font:600 .72rem/1 'Space Grotesk',sans-serif;letter-spacing:.02em;padding:5px 10px;border-radius:999px;background:var(--accent-wash);color:var(--accent);border:1px solid transparent}
.badge-good{background:oklch(0.78 0.15 155 / .13);color:var(--good)}
.badge-bad{background:oklch(0.68 0.19 24 / .13);color:var(--bad)}
.badge-neutral{background:var(--surface2);color:var(--mute)}
.chip{font:600 .74rem/1 'Inter',sans-serif;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--body);cursor:pointer}
.chip[aria-pressed="true"],.chip.active{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* ── Stat tile ── */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat .k{font-size:.72rem;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.stat .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--ink);margin-top:4px}

/* ── Forms ── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.78rem;font-weight:600;color:var(--body)}
.input,.textarea,.select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;color:var(--ink);font:inherit;font-size:.9rem}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.textarea{resize:vertical;min-height:90px}
.hint{font-size:.74rem;color:var(--mute)}

/* ── Footer ── */
.foot{border-top:1px solid var(--line-soft);margin-top:var(--section);padding:32px 0;color:var(--mute);font-size:.82rem}
.foot a{color:var(--body);text-decoration:none}
.foot a:hover{color:var(--accent)}

/* ── Misc ── */
.divider{height:1px;background:var(--line-soft);border:0;margin:0}
.pill-live{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--good)}
.pill-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 oklch(0.78 0.15 155 / .5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(0.78 0.15 155 / .5)}70%{box-shadow:0 0 0 8px oklch(0.78 0.15 155 / 0)}100%{box-shadow:0 0 0 0 oklch(0.78 0.15 155 / 0)}}