/* =====================================================================
   QA FAMILY · shared design layer for every Quarter Athletic platform (v1, 2026-11-09)
   The same file ships in each app (Locker Room: public/qa-family.css, Training Hub: public/qa-family.css).
   Edit it in one app, then copy it to the others unchanged.

   Like Microsoft's apps: every platform shares the type, corners, card style, top bar and app switcher,
   and each keeps its own accent so it still has its own presence.
     Locker Room  · QA Navy + Marigold
     Training Hub · Training Green #1F5E46 + Marigold (green for learning: calm focus over long sessions)

   Type: Plus Jakarta Sans for all text (headings 700, labels 600, body 400/500), Geist Mono for times and codes.
   Ramp: 40 page title · 24 section · 20 small section · 16 card title · 14 body · 12 label.
   Both fonts are self-hosted from /fonts (SIL Open Font License), so no outside font service is used.
   ===================================================================== */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* brand constants (never change per app) */
  --qa-paper:#F4F1EB; --qa-ink:#161517; --qa-navy:#1B2A4E; --qa-marigold:#E4A305; --qa-green:#1F5E46;
  /* type */
  --qa-font:"Plus Jakarta Sans","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --qa-font-mono:"Geist Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  /* corners: controls are pills, cards are 20 */
  --qa-r-xs:6px; --qa-r-s:10px; --qa-r-m:14px; --qa-r-l:20px; --qa-r-pill:999px;
  /* surfaces */
  --qa-card-pad:24px; --qa-gap:20px;
  --qa-shadow:0 1px 2px rgba(22,21,23,.04),0 6px 20px rgba(22,21,23,.05);
  --qa-shadow-pop:0 12px 40px rgba(22,21,23,.16),0 2px 6px rgba(22,21,23,.08);
  --qa-pop-bg:#FFFFFF; --qa-pop-fg:#161517; --qa-pop-dim:#6B675F; --qa-pop-hover:#F3F0EA; --qa-pop-line:#E9E5DE;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --qa-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --qa-shadow-pop:0 12px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --qa-pop-bg:#232225; --qa-pop-fg:#F4F1EB; --qa-pop-dim:#A39E95; --qa-pop-hover:#2E2D30; --qa-pop-line:#353437;
}}
:root[data-theme="dark"],[data-theme="dark"] .qa-apps{
  --qa-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --qa-shadow-pop:0 12px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --qa-pop-bg:#232225; --qa-pop-fg:#F4F1EB; --qa-pop-dim:#A39E95; --qa-pop-hover:#2E2D30; --qa-pop-line:#353437;
}

/* ---------- App switcher (the "waffle"): identical in every platform ---------- */
.qa-apps{position:relative;display:inline-flex;font-family:var(--qa-font)}
.qa-apps-btn{width:36px;height:36px;border:0;border-radius:var(--qa-r-pill);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.qa-apps-btn:hover,.qa-apps-btn[aria-expanded="true"]{background:color-mix(in srgb,currentColor 9%,transparent)}
.qa-apps-btn:focus-visible{outline:2px solid var(--qa-marigold);outline-offset:2px}
.qa-apps-btn svg{width:18px;height:18px}
.qa-apps-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:300px;max-width:calc(100vw - 24px);padding:10px;border-radius:var(--qa-r-l);background:var(--qa-pop-bg);color:var(--qa-pop-fg);box-shadow:var(--qa-shadow-pop);border:1px solid var(--qa-pop-line);animation:qaPop .16s ease-out both}
.qa-apps-pop[hidden]{display:none}
@keyframes qaPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.qa-apps-h{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--qa-pop-dim);padding:6px 8px 8px}
.qa-app{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--qa-r-m);text-decoration:none;color:inherit}
.qa-app:hover{background:var(--qa-pop-hover)}
.qa-app:focus-visible{outline:2px solid var(--qa-marigold);outline-offset:-2px}
.qa-app b{display:block;font-size:14px;line-height:20px;font-weight:700}
.qa-app small{display:block;font-size:12px;line-height:16px;color:var(--qa-pop-dim)}
.qa-app[aria-current="page"]{background:var(--qa-pop-hover)}
.qa-app[aria-current="page"] b::after{content:"You're here";margin-left:8px;font-size:11px;font-weight:600;color:var(--qa-pop-dim)}
/* each app's tile: same shape, its own colours */
.qa-app-ic{width:40px;height:40px;flex:none;border-radius:var(--qa-r-s);position:relative;overflow:hidden}
.qa-app-ic::after{content:"";position:absolute;right:-1px;bottom:-1px;width:62%;height:62%;border-radius:100% 0 0 0}
.qa-app-ic.lr{background:var(--qa-navy)}
.qa-app-ic.lr::after{background:var(--qa-marigold)}
.qa-app-ic.th{background:var(--qa-green)}
.qa-app-ic.th::after{background:var(--qa-marigold)}
@media (prefers-reduced-motion:reduce){.qa-apps-pop{animation:none}}

/* ---------- Dashboard pieces: the same Home layout in every platform ----------
   Each app maps these to its own theme:
   --qa-surface (card) · --qa-sunk (icon chip) · --qa-dim (secondary text) · --qa-edge (dark-mode card edge)
   --qa-hero-bg / --qa-hero-fg / --qa-hero-dim / --qa-hero-chip / --qa-hero-ring (the one highlighted card: the app's accent) */
.qa-dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding-top:4px}
.qa-dhead h1{font-family:var(--qa-font);font-size:40px;line-height:48px;font-weight:500;letter-spacing:-.03em;margin:4px 0 0}
.qa-dhead h1 b{font-weight:800}
.qa-dhead .qa-lede{margin:6px 0 0;color:var(--qa-dim,#6B675F);font-size:16px;line-height:24px;max-width:72ch}
@media (max-width:860px){.qa-dhead h1{font-size:32px;line-height:40px}}

.qa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.qa-kpi{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;min-height:156px;padding:20px 22px;border-radius:var(--qa-r-l);background:var(--qa-surface,#fff);box-shadow:var(--qa-edge,var(--qa-shadow));font-family:var(--qa-font)}
.qa-kpi-ic{width:36px;height:36px;border-radius:var(--qa-r-pill);display:grid;place-items:center;background:var(--qa-sunk,#E9E5DE);margin-bottom:auto}
.qa-kpi-ic svg{width:18px;height:18px}
.qa-kpi-v{margin-top:18px;font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.qa-kpi-v small{font-size:16px;font-weight:600;color:var(--qa-dim,#6B675F);letter-spacing:0}
.qa-kpi-k{font-size:14px;line-height:20px;font-weight:600}
.qa-kpi-s{font-size:12px;line-height:16px;color:var(--qa-dim,#6B675F)}
.qa-kpi.hero{background:var(--qa-hero-bg,var(--qa-navy));color:var(--qa-hero-fg,#F4F1EB)}
.qa-kpi.hero .qa-kpi-s,.qa-kpi.hero .qa-kpi-v small{color:var(--qa-hero-dim,#A9B8DA)}
.qa-kpi.hero .qa-kpi-ic{background:var(--qa-hero-chip,var(--qa-marigold));color:#161517}
.qa-kpi.hero::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:84px;height:84px;border-radius:100% 0 0 0;border:9px solid var(--qa-hero-ring,var(--qa-marigold));border-right:0;border-bottom:0;opacity:.9}

.qa-dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px;align-items:start}
.qa-dcol{display:grid;gap:20px;align-content:start;min-width:0}
@media (max-width:1100px){.qa-dgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .qa-kpis{grid-template-columns:1fr 1fr;gap:12px}
  .qa-kpi{min-height:0;padding:16px}
  .qa-kpi-v{font-size:24px;line-height:30px;margin-top:14px}
  .qa-kpi.hero::after{display:none}
}