/* SPARO shared shell: topbar, footer, static-page column and prose.
   Loaded after board.css on every page and consumes its tokens
   (docs/superpowers/specs/2026-09-19-sparo-design-language.md). Language §1.2
   applies: nothing here draws a border, a divider, an underline or an outline.
   Static pages run no WebGL: the grain below is a CSS-only feTurbulence tile and
   the body carries the language §4.3 gradient fallback declared in board.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- 1. tokens on top of board.css ---------- */
:root{
  /* CSS-only grain (~4% contrast). atmosphere.installGrain() overrides this inline where it runs. */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .04 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");
  --shell-h:calc(72px*var(--ui));
  --shell-x:clamp(16px,4vw,40px);
  --page-w:880px;
  --t-body:max(15px,calc(16px*var(--ui)));
  --t-h1:max(34px,calc(56px*var(--ui)));
  --t-h2s:max(22px,calc(30px*var(--ui)));
}

/* ---------- 2. reset, scoped to .shell-body (static pages do not load sparo.css; index does) ---------- */
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.shell-body, .shell-body *, .shell-body *::before, .shell-body *::after{ box-sizing:border-box; }
.shell-body{ line-height:1.55; }
.shell-body img, .shell-body svg{ max-width:100%; display:block; }
.shell-body a, .shell-foot a{ color:inherit; text-decoration:none; }
.shell-body h1, .shell-body h2, .shell-body h3, .shell-body p{ margin:0; }
.page code{ font:inherit; font-weight:500; color:var(--ink); background-color:var(--fill-pill); padding:.05em .4em; border-radius:var(--r-chip); }

/* ---------- 3. topbar (sticky glass strip, logo left, nav slot right) ---------- */
.shell-top{
  position:sticky; top:0; z-index:45;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-9);
  min-height:var(--shell-h); padding:var(--s-4) var(--shell-x);
  background-color:rgba(11,13,16,.72);
  background-image:var(--grain); background-repeat:repeat;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.brand{ display:inline-flex; align-items:center; gap:var(--s-6); min-height:44px; flex:none; user-select:none; -webkit-user-select:none; }
.brand-logo{ height:calc(34px*var(--ui)); min-height:24px; width:auto; object-fit:contain; }
.shell-nav{ display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.shell-nav a, .shell-btn{
  display:inline-flex; align-items:center; gap:var(--s-3); min-height:44px;
  font-family:var(--f-text); font-weight:500; font-size:var(--t-navlink); letter-spacing:.005em; color:#D2D8E2;
  padding:var(--s-3) var(--s-6); border-radius:var(--r-pill); white-space:nowrap; cursor:pointer;
  transition:background-color .18s ease;
}
.shell-nav a:hover, .shell-btn:hover{ background-color:var(--fill-pill); }
.shell-btn.accent{ background-color:rgba(var(--brand-rgb),.16); color:#CFE9F8; }
button.shell-btn{ border:0; background-color:var(--fill-pill); font:inherit; }
button.shell-btn:disabled{ opacity:.6; cursor:progress; }
.shell-btn.accent:hover{ background-color:rgba(var(--brand-rgb),.24); }
.shell-nav a:focus-visible, .shell-btn:focus-visible, .shell-foot a:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }

/* ---------- 4. page column ---------- */
.shell-body{ position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.page{
  flex:1; width:100%; max-width:calc(var(--page-w) + 2*var(--shell-x)); margin:0 auto;
  padding:clamp(28px,5vw,64px) var(--shell-x) clamp(40px,6vw,80px);
  display:flex; flex-direction:column; gap:var(--s-10);
}
.page-head{ padding:0 var(--s-2) var(--s-3); }
.eyebrow{
  font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase;
  color:var(--brand); margin-bottom:var(--s-5);
}
.updated{ margin-top:var(--s-4); font-size:var(--t-meta); letter-spacing:.01em; color:var(--ink-2); }
.lede{ margin-top:var(--s-7); font-size:max(16px,calc(19px*var(--ui))); line-height:1.5; color:var(--ink-2); max-width:56ch; }

/* ---------- 5. glass panel (language §3.1) ---------- */
.panel{
  position:relative; border-radius:var(--r-panel); overflow:hidden;
  background-color:var(--glass-fill);
  background-image:var(--grain); background-repeat:repeat;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-panel);
}
.page .panel{ display:block; min-height:0; padding:clamp(20px,3vw,32px) clamp(18px,3.4vw,36px) clamp(22px,3vw,34px); }
.panel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s-7); }
.panel-grid.four{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.tile{ padding:var(--s-9) var(--s-9) var(--s-10); border-radius:var(--r-col); background-color:var(--fill-row); display:flex; flex-direction:column; gap:var(--s-4); }
.tile.tinted{ background:radial-gradient(122% 80% at 50% 0%, rgba(var(--tc-rgb),.15), rgba(0,0,0,0) 74%), var(--fill-row); }
.tile .t-ic{ width:30px; height:30px; color:var(--tc,var(--brand)); }
.tile .t-kicker{ font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--ink-2); }
.tile h3{ color:var(--tc,var(--ink)); }
.tile p{ font-size:max(13px,calc(14px*var(--ui))); line-height:1.45; color:var(--ink-2); margin:0; }
.bar{ height:5px; border-radius:var(--r-bar); background-color:var(--fill-track); overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--tc,var(--brand)); }
.tc-technique{ --tc:var(--m-technique); --tc-rgb:var(--m-technique-rgb); }
.tc-guard{ --tc:var(--m-guard); --tc-rgb:var(--m-guard-rgb); }
.tc-speed{ --tc:var(--m-speed); --tc-rgb:var(--m-speed-rgb); }
.tc-precision{ --tc:var(--m-precision); --tc-rgb:var(--m-precision-rgb); }
.tc-complete{ --tc:var(--m-complete); --tc-rgb:var(--m-complete-rgb); }

/* ---------- 6. prose (Barlow text, Barlow Condensed headings) ---------- */
.page{ font-family:var(--f-text); font-size:var(--t-body); color:var(--ink); }
.page h1, .page h2, .page h3{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; margin:0;
}
.page h1{ font-size:var(--t-h1); letter-spacing:.01em; }
.page h2{ font-size:var(--t-h2s); letter-spacing:.03em; margin:var(--s-12) 0 var(--s-4); }
.page h3{ font-size:max(18px,calc(22px*var(--ui))); letter-spacing:.02em; }
.page .panel > h2:first-child, .page h1 + h2, .page .eyebrow + h2{ margin-top:0; }
.page p, .page ul, .page ol{ margin:0 0 var(--s-6); color:#D2D8E2; }
.page p:last-child, .page ul:last-child, .page ol:last-child{ margin-bottom:0; }
.page ul, .page ol{ padding-left:1.3em; }
.page li{ margin:var(--s-2) 0; }
.page li::marker{ color:var(--ink-2); }
.page strong{ font-weight:700; color:var(--ink); }
.page p a, .page li a{ color:#CFE9F8; font-weight:500; background-color:rgba(var(--brand-rgb),.12); padding:.02em .22em; margin:0 -.1em; border-radius:var(--r-chip); transition:background-color .18s ease; }
.page p a:hover, .page li a:hover{ background-color:rgba(var(--brand-rgb),.24); }
.actions{ display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-9); }
.big{ font-family:var(--f-display); font-weight:700; font-size:clamp(96px,18vw,160px); line-height:.9; letter-spacing:.02em; color:var(--brand); text-shadow:0 0 60px rgba(var(--brand-rgb),.35); }
.center{ text-align:center; align-items:center; justify-content:center; }
.center .actions{ justify-content:center; }
.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- 7. footer ---------- */
.shell-foot{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5) var(--s-9);
  padding:var(--s-9) var(--shell-x) calc(var(--s-11) + env(safe-area-inset-bottom));
}
.shell-foot nav{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-3); }
.shell-foot a{
  display:inline-flex; align-items:center; min-height:44px; padding:var(--s-2) var(--s-4); border-radius:var(--r-pill);
  font-family:var(--f-text); font-weight:500; font-size:var(--t-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  transition:background-color .18s ease, color .18s ease;
}
.shell-foot a:hover{ color:var(--ink); background-color:var(--fill-pill); }
.board .shell-foot{ padding:var(--s-3) 0 0; }              /* index: the board already carries the page gutter */
.shell-foot .fmeta{ font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- 8. phones ---------- */
@media (max-width:767px){
  .shell-top{ padding:6px 16px 4px; gap:0 var(--s-5); flex-wrap:wrap; }
  .brand{ min-height:40px; }
  .brand-logo{ height:26px; }
  .shell-nav{ flex:1 0 100%; justify-content:flex-start; margin-left:-10px; gap:2px; }   /* the three links take their own row under the logo */
  .shell-nav a{ min-height:38px; padding:6px 10px; font-size:14px; }
  .page{ padding:24px 16px 40px; gap:16px; }
  .page .panel{ padding:20px 16px 22px; }
  .shell-foot{ padding:18px 16px calc(24px + env(safe-area-inset-bottom)); justify-content:center; text-align:center; }
  .shell-foot nav{ justify-content:center; }
  .board .shell-foot{ padding:6px 0 44px; }              /* clears the board's sticky buttons */
}

/* ---------- 9. card page (/card?n=003, cardpage.ts owns #cardPanel's children) ---------- */
.card-page{ max-width:calc(1040px + 2*var(--shell-x)); justify-content:center; }
.page .card-panel{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(24px,4vw,56px); padding:clamp(24px,3.4vw,44px) clamp(20px,3.8vw,48px); }
.card-stage{ display:flex; justify-content:center; min-width:0; }
.card-stage .acard{ width:340px; max-width:100%; zoom:1.2; }
/* athlete card on the shell (language §9.1): glass fill, grain, no inset ring. Mirrors #cardReveal .acard in board.css */
.card-stage .acard{
  --r-tint:.10; border-radius:var(--r-panel);
  background-color:var(--glass-fill);
  background-image:
    radial-gradient(122% 80% at 50% 0%, rgba(var(--ac-rgb), var(--r-tint)), rgba(0,0,0,0) 74%),
    var(--grain);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-panel);
}
.card-stage .acard[data-arch="fast"]     { --ac-rgb:var(--m-speed-rgb); }
.card-stage .acard[data-arch="counter"]  { --ac-rgb:var(--m-precision-rgb); }
.card-stage .acard[data-arch="iron"]     { --ac-rgb:var(--m-guard-rgb); }
.card-stage .acard[data-arch="heavy"]    { --ac-rgb:var(--m-technique-rgb); }
.card-stage .acard[data-arch="complete"] { --ac-rgb:var(--m-complete-rgb); }
.card-stage .acard-name{ text-transform:uppercase; letter-spacing:.015em; }

.card-info{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4); min-width:0; }
.card-info .eyebrow{ margin-bottom:var(--s-2); }
.card-namerow{ display:flex; align-items:center; gap:var(--s-5); min-width:0; }
.card-archdisc{ flex:none; }                              /* .avatar from board.css: tinted disc with the archetype's metric icon */
.card-info .card-name{ overflow-wrap:anywhere; min-width:0; }
.card-id{ font-family:var(--f-text); font-weight:500; font-size:var(--t-body); letter-spacing:.02em; color:var(--ink-2); }
.card-qr{ display:flex; align-items:center; gap:var(--s-7); margin-top:var(--s-9); }
.card-qr .qrbox{ width:148px; height:148px; padding:10px; border-radius:var(--r-col); background:#fff; flex:none; }   /* white padding is the QR quiet zone */
.card-qr .qrbox svg{ width:100%; height:100%; display:block; }
.card-qr .qrcap{ font-family:var(--f-text); font-weight:500; font-size:var(--t-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); max-width:12ch; }
.card-info .actions{ margin-top:var(--s-9); }
.card-state{ align-items:flex-start; padding:var(--s-6) 0; }
.page .card-panel:has(.card-state){ grid-template-columns:1fr; }

@media (max-width:900px){
  .page .card-panel{ grid-template-columns:minmax(0,1fr); justify-items:stretch; text-align:center; }
  .card-stage{ width:100%; }                       /* the card shrinks to the panel, never clips */
  .card-stage .acard{ zoom:1; }
  .card-info{ align-items:center; }
  .card-namerow{ justify-content:center; }
  .card-qr{ flex-direction:column; }
  .card-qr .qrcap{ max-width:none; }
  .card-state{ align-items:center; }
}

/* share image (cardpage.ts renderShareCanvas): a 1080x1350 stage laid out off screen for html2canvas.
   No backdrop-filter (html2canvas cannot render it): the card gets a near-solid fill instead of glass. */
#shareCard{ position:fixed; left:-9999px; top:0; width:1080px; height:1350px; overflow:hidden; background:#0B0D10; color:var(--ink); pointer-events:none; }
#shareCard .share-smoke{ position:absolute; inset:0; opacity:.92; }
#shareCard .share-smoke canvas{ display:block; width:100%; height:100%; }
#shareCard.nosmoke .share-smoke{                              /* no WebGL: gradient smoke */
  opacity:1;
  background:
    radial-gradient(60% 40% at 18% 22%, rgba(150,158,170,.34), rgba(0,0,0,0) 70%),
    radial-gradient(55% 45% at 82% 30%, rgba(120,128,140,.30), rgba(0,0,0,0) 70%),
    radial-gradient(70% 40% at 50% 70%, rgba(100,108,120,.28), rgba(0,0,0,0) 70%),
    radial-gradient(50% 35% at 12% 88%, rgba(140,148,160,.26), rgba(0,0,0,0) 70%),
    radial-gradient(45% 30% at 88% 92%, rgba(90,98,110,.30), rgba(0,0,0,0) 70%);
}
#shareCard .share-mark{ position:absolute; top:56px; left:50%; transform:translateX(-50%); height:64px; width:auto; }
#shareCard .share-stage{ position:absolute; top:172px; left:50%; width:340px; transform:translateX(-50%) scale(2); transform-origin:50% 0; }
#shareCard .share-url{ position:absolute; left:0; right:0; bottom:60px; text-align:center; font-family:var(--f-text); font-weight:500; font-size:26px; letter-spacing:.06em; color:#B9C1CC; }
#shareCard .acard{
  border-radius:var(--r-panel); box-shadow:none;
  background-color:rgba(12,14,18,.72);
  background-image:radial-gradient(122% 80% at 50% 0%, rgba(var(--ac-rgb), .14), rgba(0,0,0,0) 74%);
}
#shareCard .acard[data-arch="fast"]     { --ac-rgb:var(--m-speed-rgb); }
#shareCard .acard[data-arch="counter"]  { --ac-rgb:var(--m-precision-rgb); }
#shareCard .acard[data-arch="iron"]     { --ac-rgb:var(--m-guard-rgb); }
#shareCard .acard[data-arch="heavy"]    { --ac-rgb:var(--m-technique-rgb); }
#shareCard .acard[data-arch="complete"] { --ac-rgb:var(--m-complete-rgb); }
#shareCard .acard-name{ text-transform:uppercase; letter-spacing:.015em; }
/* html2canvas cannot parse the oklab colours color-mix() computes to: plain rgba equivalents */
#shareCard .acard-tag{ color:rgba(var(--ac-rgb), .92); }
#shareCard .acard-arch.badge{ background:rgba(var(--ac-rgb), .14); }
#shareCard .acard-mrow .mbar i{ transition:none; }
#shareCard .acard-laurel{ width:28px; height:84px; }

/* ---------- 10. all scores (/allscores, allscores.ts owns the controls and #asList) ---------- */
.as-page{ max-width:calc(1040px + 2*var(--shell-x)); gap:var(--s-7); }
.as-page .page-head{ padding-bottom:0; }
.as-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5); padding:0 var(--s-2); }
.as-controls .searchwrap, .as-search{ flex:1 1 260px; width:auto; }
.as-search input{ border:0; outline:none; }
.page .as-panel{ padding:clamp(14px,2vw,22px) clamp(10px,1.6vw,18px) clamp(16px,2vw,24px); }
.as-count{ padding:0 var(--s-5) var(--s-5); font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--ink-2); }
.as-count:empty{ display:none; }
.as-list{ display:flex; flex-direction:column; }
.as-list .row{ flex:none; min-height:calc(64px*var(--ui)); padding:var(--s-3) var(--s-5); }
.as-list[data-sort="recent"] .row{ grid-template-columns:calc(32px*var(--ui)) calc(44px*var(--ui)) minmax(0,1fr) auto auto; }
.as-list .ta{ font-family:var(--f-text); font-size:var(--t-meta); letter-spacing:.01em; color:var(--ink-2); white-space:nowrap; text-align:right; }
.as-empty{ padding:var(--s-11) var(--s-5) var(--s-9); text-align:center; }
.as-empty h2{ margin:0; color:var(--ink-2); }
@media (max-width:767px){
  .as-controls{ padding:0; }
  .as-controls .day-toggle{ flex:1 1 auto; }
  .as-controls .day-btn{ padding:6px 12px; }
  .as-list .row{ padding:10px 8px; gap:10px; }
  .as-list .row .nameline{ flex-wrap:wrap; gap:2px 8px; }
  .as-list .ta{ font-size:11px; }
}

/* ---------- 11. partners (/partners): glass tiles, whole tile is the link ---------- */
.partners-page{ max-width:calc(1040px + 2*var(--shell-x)); }
.partner-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-7); }
.page .partner{
  display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-5) var(--s-5) var(--s-8);
  transition:transform .18s ease, background-color .18s ease;
}
.page .partner:hover{ transform:translateY(-2px); background-color:var(--fill-pill); }
.page .partner:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); outline:none; }
.p-logo{
  display:flex; align-items:center; justify-content:center; height:150px; padding:var(--s-6);
  border-radius:var(--r-col); background-color:rgba(255,255,255,.07); margin-bottom:var(--s-3);
}
.p-logo img{ width:100%; height:100%; object-fit:contain; }
.page .partner h2{ font-size:max(20px,calc(26px*var(--ui))); margin:0 var(--s-2); }
.page .partner p{ font-size:max(13px,calc(14px*var(--ui))); line-height:1.45; color:var(--ink-2); margin:0 var(--s-2); }
@media (max-width:900px){ .partner-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .partner-grid{ grid-template-columns:minmax(0,1fr); gap:12px; } .p-logo{ height:130px; } }