/* Inter — loaded so typography is CONSISTENT everywhere. "Cerebri Sans Pro" was
   named in the stack but never loaded (no @font-face), so each OS fell back to a
   different font; on some systems that fallback rendered poorly (the "weird A/S"
   Mitch reported 2026-09-11). Inter is a clean, professional UI face with
   unambiguous letterforms, close to Cerebri's geometric feel, and it renders the
   same on every machine. display=swap so text shows immediately in the fallback
   and reflows when Inter arrives — no blank flash. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   HP Platform (High Performance / NDC) — shared styles
   ─────────────────────────────────────────────────────────────────────────
   SKIN: white, WPC red, light grey. HP is the NATIONAL programme, so it wears
   the national brand rather than a module colour of its own (OTCP, by
   contrast, carries teal #03989E as its hero).

   ⚠ ONE DELIBERATE DIVERGENCE FROM THE DESIGN SYSTEM — read before "fixing" it.
   Red here is #EA212D, set on Corey's instruction (2026-08-19: "our WPC red
   #ea212d"). The canonical wpc-design-system.css v2.3 in OneDrive → "WPC
   Website Style Guide" declares --wpc-red: #C0392B, and the Hub, My WPC and
   OTCP all use that value.

   This file previously used #EA212D, was changed TO #C0392B on 2026-08-04 for
   exactly that consistency reason, and is now changed back. Both values have a
   real claim: #EA212D is the brand/logo red, #C0392B is what the web design
   system codifies. They are not reconcilable by picking one file to trust.

   So: if HP looks redder than the Hub beside it, that is this decision, not a
   bug. The fix is not to edit this line — it is to settle which red WPC uses
   on the web and change the design system, after which every property moves
   together.

   Variable NAMES are unchanged, so all 18 pages inherit the skin with no
   per-page edits. Do not hard-code hexes in a page; add a token here.
   ───────────────────────────────────────────────────────────────────────── */:root{
  /* ── HP / NDC wears the NATIONAL brand ─────────────────────────────────────
     Unlike OTCP, which carries its own module hero colour, the High Performance
     programme is the national one: white, WPC red, light grey, and nothing else
     competing with it. Red is the accent, never the field — it marks the active
     item and the primary action, and stays off everything that is merely
     structural, so that when it appears it means something. */
  /* ── THE ONE SWITCH ───────────────────────────────────────────────────────
     Read the note at the top of this file first. Two reds have a real claim:
     #EA212D is the brand/logo red Corey set on 2026-08-19; #C0392B is what
     wpc-design-system.css v2.3 codifies and what the Hub, My WPC and OTCP use.
     Both are here so switching is one line, not a hunt. Uncomment the second
     block and comment the first to move HP onto the web design system — and
     when that decision is made, make it everywhere at once. */
  --red:#EA212D;   --red-2:#C4101B;   --red-tint:#FDECEE;   /* brand red (current) */
  /* --red:#C0392B;   --red-2:#9E2E22;   --red-tint:#FCE9EC;   design-system red */

  /* chrome — white over light grey */
  --chrome:#FFFFFF;                  /* sidebar, cards, panels */
  --navy:#1B2230;  --navy-2:#000000; /* kept as names: now near-black type/fills */
  --line:#E4E8F0;                    /* hairlines on white — wpc-border */
  --muted:#6B7280;
  --text:#1B2230;
  --light:#F1F2F4;                   /* light grey — hovers, tracks, zebra */
  --bg:#F5F6FA;                      /* page ground — wpc-zebra */

  /* status pairs — unchanged; red is reserved for brand + danger */
  --ok:#1F7A3D;     --ok-bg:#E3F4E8;
  --warn:#8A6A12;   --warn-bg:#FFF6E9;
  --info:#3B4252;   --info-bg:#F1F2F4;
  --danger:#EA212D; --danger-bg:#FDECEE;

  --gold:#C9A227;   --steel:#566073;
  --sidebar:230px;

  /* ── radii, from the design system ─────────────────────────────────────── */
  --radius:10px;  --radius-lg:14px;  --radius-pill:100px;

  /* ── the design system's own token names ───────────────────────────────────
     assets/wpc-design-system.css scopes its tokens to .wpc, so a .wpc-card used
     inside a page here would otherwise resolve against a second palette. These
     alias the same values under the design system's names, so the two agree.
     Everything below is identical to wpc-design-system.css v2.3 EXCEPT --wpc-red,
     which follows the divergence documented at the top of this file. */
  --wpc-navy:#1D2951;      --wpc-navy-800:#172140;
  --wpc-red:var(--red);    --wpc-red-700:var(--red-2);
  --wpc-gold:var(--gold);  --wpc-silver:#9AA0A6;    --wpc-bronze:#B5732A;
  --wpc-ink:var(--text);   --wpc-ink-soft:var(--muted);
  --wpc-zebra:var(--bg);   --wpc-border:var(--line); --wpc-white:#FFFFFF;
  --wpc-slate:#3B4252;     --wpc-slate-800:#2A2F3B; --wpc-steel:var(--steel);
  --wpc-mist:#EDEFF3;
  --wpc-red-tint:var(--red-tint);   --wpc-navy-tint:#EEF1F5;
  --wpc-warm-bg:var(--warn-bg);     --wpc-warm-ink:var(--warn);
  --wpc-ok-bg:var(--ok-bg);         --wpc-ok-ink:var(--ok);
  --wpc-maxw:1100px;
  /* Cerebri Sans Pro is Typekit-loaded on waterpolo.ca; off-domain (Netlify)
     it falls through to the system stack, exactly as the Hub and My WPC do. */
  --font:"Inter","Cerebri Sans Pro","Cerebri Sans",-apple-system,BlinkMacSystemFont,
         "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ── the design system's .wpc scope follows HP's palette ─────────────────────
   wpc-design-system.css declares its tokens on `.wpc`, which is MORE specific
   than :root — so without this, a .wpc-card sitting inside an HP page would
   resolve against the design system's own values and carry a second palette
   (most visibly a different red) on the same screen. styles.css is linked after
   it, so this wins. Aliases only: no value is invented here. */
.wpc{
  --wpc-red:var(--red);        --wpc-red-700:var(--red-2);
  --wpc-red-tint:var(--red-tint);
  --wpc-ink:var(--text);       --wpc-ink-soft:var(--muted);
  --wpc-border:var(--line);    --wpc-zebra:var(--bg);
  --wpc-ok-bg:var(--ok-bg);    --wpc-ok-ink:var(--ok);
  --wpc-warm-bg:var(--warn-bg);--wpc-warm-ink:var(--warn);
  --wpc-gold:var(--gold);      --wpc-steel:var(--steel);
  --wpc-font:var(--font);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);
  color:var(--text);background:var(--bg);font-size:14px;line-height:1.5}

/* ── sidebar + content frame ── */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar);height:100vh;background:var(--chrome);border-right:1px solid var(--line);
  color:var(--text);padding:18px 0;overflow-y:auto;z-index:40}
.sidebar .brand{padding:4px 20px 18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.sidebar .brand .brandrow{display:flex;align-items:center;gap:10px}
.sidebar .brand img.logo{display:block;width:38px;height:38px;flex:0 0 38px;object-fit:contain}
.sidebar .brand .brandtext{min-width:0}
.sidebar .brand b{display:block;font-size:15px}
.sidebar .brand span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.sidebar a{display:block;padding:9px 20px;color:var(--text);text-decoration:none;font-size:13.5px}
.sidebar a:hover{background:var(--light);color:var(--text)}
.sidebar a.active{background:var(--red-tint);color:var(--red-2);font-weight:700;border-left:3px solid var(--red);padding-left:17px}
.sidebar .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:14px 20px 4px}
.content{margin-left:var(--sidebar);padding:28px 32px;max-width:1200px}

.page-h1{font-size:22px;color:var(--navy);margin:0 0 4px;font-weight:700}
.page-sub{color:var(--muted);font-size:13px;margin:0 0 22px}

/* ── toolbar ── */
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.bar input,.bar select{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.bar input[type=search]{min-width:240px;flex:1}
.spacer{flex:1}

/* ── buttons ── */
.btn{padding:9px 16px;background:var(--red);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:14px}
.btn:hover{background:var(--red-2)}
.btn-sec{background:#fff;color:var(--text);border:1.5px solid var(--line)}
.btn-sm{padding:5px 11px;font-size:12.5px;border-radius:7px}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:#FAFBFC}
tr.row{cursor:pointer}tr.row:hover{background:#F4F7FB}
tr.inact td{opacity:.5}
tbody tr:last-child td{border-bottom:none}

/* ── pills / badges ── */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-info{background:var(--info-bg);color:var(--info)}
.p-danger{background:var(--danger-bg);color:var(--danger)}
.p-muted{background:var(--light);color:var(--muted)}

/* ── cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.card .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.card .v{font-size:26px;font-weight:700;color:var(--navy);margin-top:4px}
.card .d{font-size:12px;margin-top:2px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.panel h3{margin:0 0 14px;font-size:14px;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}

/* ── drawer ── */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:50}
.drawer{position:fixed;top:0;right:0;height:100vh;width:520px;max-width:94vw;background:#fff;
  box-shadow:-8px 0 30px rgba(0,0,0,.2);display:none;z-index:51;overflow-y:auto;padding:24px}
.drawer h2{margin:0 0 4px;color:var(--navy)}
.drawer .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.closeX{float:right;border:none;background:none;font-size:22px;cursor:pointer;color:var(--muted)}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:4px}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.sec h3{font-size:13px;color:var(--navy);margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px}

/* ── misc ── */
.proto-flag{background:var(--warn-bg);color:var(--warn);border:1px solid #F0D9A8;border-radius:8px;
  padding:8px 12px;font-size:12.5px;margin-bottom:18px}
.bar2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meter{position:relative;height:8px;background:#E6E9ED;border-radius:4px;overflow:visible}
.meter .fill{position:absolute;left:0;top:0;height:8px;background:var(--steel);border-radius:4px}
.meter .tick{position:absolute;top:-2px;height:12px;width:2px;background:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════════
   Depth, iconography and motion — 2026-08-20
   ───────────────────────────────────────────────────────────────────────────
   Corey: "OTCP is more visually interesting... this falls flat somehow."
   Measured rather than guessed. OTCP's page carries 60 inline SVGs, 9
   transitions, 6 box-shadows and a gradient; this stylesheet had 0, 0, 1 and 0.
   So the flatness was not the palette — the national white/red/grey is correct
   and stays — it was the absence of three things: something to look at, a sense
   of depth, and any response to the pointer. All three are added below without
   introducing a second accent colour.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. nav iconography ──────────────────────────────────────────────────── */
.sidebar .navlink,
.sidebar .planned{
  display:flex; align-items:center; gap:10px;
}
.navico{
  width:16px; height:16px; flex:0 0 16px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.55; transition:opacity .15s ease;
}
.sidebar a:hover .navico{ opacity:.9 }
.sidebar a.active .navico{ opacity:1 }
.sidebar .planned{ opacity:.45; cursor:default }
.sidebar .navlink span{ flex:1; min-width:0 }
.outmark{ font-style:normal; font-size:11px; opacity:.5 }

/* ── 2. depth ────────────────────────────────────────────────────────────── */
/* Two levels only. A card sits on the page; a dialog sits above everything.
   More than two and "raised" stops meaning anything. */
.panel,
.card{
  box-shadow:0 1px 2px rgba(27,34,48,.05), 0 8px 20px -14px rgba(27,34,48,.18);
}

/* ── 3. motion ───────────────────────────────────────────────────────────── */
/* Short and only on things that are actually interactive. */
.sidebar a,
.btn, .btn-sm, .chip, .rowbtn{
  transition:background-color .15s ease, border-color .15s ease,
             color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn:active, .btn-sm:active{ transform:translateY(1px) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important }
}

/* ── 4. the WPC mark as a ground ─────────────────────────────────────────── */
/* Corey asked for the icon as a page background. A full-bleed mark competes
   with tabular data and hurts legibility, so it is placed as a single large
   watermark pinned bottom-right, behind everything, at 3% — visible as texture
   when the eye rests, invisible while reading a table. Fixed, so it does not
   travel with scroll and turn into wallpaper.
   Set --wpc-watermark:none on <html> to switch it off. */
/* z-index:-1 puts it behind all content while staying above the body's own
   background, which is the whole trick — it needs NO positioning changes to
   anything else.
   The first attempt did `.content, .sidebar { position:relative; z-index:1 }`
   to stack them above it. .sidebar is `position:fixed`; overriding that to
   `relative` dropped it into normal flow as a 100vh block at the top of the
   page and pushed every screen below the fold. Do not restate `position` on a
   fixed element to win a stacking contest. */
body::before{
  content:"";
  position:fixed;
  right:-90px; bottom:-110px;
  width:min(52vw,620px); aspect-ratio:1;
  background:var(--wpc-watermark, url('/assets/wpc-icon-c-master.png')) no-repeat center/contain;
  opacity:.03;
  pointer-events:none;
  z-index:-1;
}