/* ===================================================================
   Ironman Performance Hub — visual system v3 (minimal, calm, dark)
   Restrained monochrome + one quiet accent. Hairlines, whitespace, no glow.
   =================================================================== */
:root{
  --bg:#0a0c0f; --bg2:#0e1114; --card:#121519; --card2:#171b20; --card3:#1d2229;
  --line:rgba(255,255,255,.06); --line2:rgba(255,255,255,.11);
  --ink:#e7e9ec; --ink2:#9aa2ac; --ink3:#606772;
  --accent:#6cb8ff; --accent-d:#3f83c9; --accent-soft:rgba(108,184,255,.11);
  --green:#4ec99a; --amber:#e8b552; --red:#e97a7a;
  --sidebar-w:244px;
  --r:12px; --r-sm:8px;
  --shadow:none;
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- LIGHT THEME (added 18 Aug 2026) ----------
   Every value below verified against WCAG AA (>=4.5:1 for body text) on
   white card, page bg and card2. Applied when html[data-theme="light"], or
   under data-theme="auto"/unset when the OS asks for light.                */
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]){
    --bg:#f6f8fa; --bg2:#eef1f5; --card:#ffffff; --card2:#f0f3f6; --card3:#e6ebf0;
    --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.18);
    --ink:#11161c; --ink2:#4c555f; --ink3:#5f6a75;
    --accent:#1668c4; --accent-d:#0f4e96; --accent-soft:rgba(22,104,196,.10);
    --green:#136b48; --amber:#8a6114; --red:#c02a1e;
    --shadow-lg:0 20px 60px rgba(20,30,45,.18);
    --ov:rgba(240,243,246,.78);
  }
}
html[data-theme="light"]{
  --bg:#f6f8fa; --bg2:#eef1f5; --card:#ffffff; --card2:#f0f3f6; --card3:#e6ebf0;
  --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.18);
  --ink:#11161c; --ink2:#4c555f; --ink3:#5f6a75;
  --accent:#1668c4; --accent-d:#0f4e96; --accent-soft:rgba(22,104,196,.10);
  --green:#136b48; --amber:#8a6114; --red:#c02a1e;
  --shadow-lg:0 20px 60px rgba(20,30,45,.18);
  --ov:rgba(240,243,246,.78);
}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* theme switcher in the sidebar */
.themebar{margin:14px 12px 4px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card)}
.themebar .lbl{font-size:9px;font-weight:600;letter-spacing:.22em;color:var(--ink3);
  text-transform:uppercase;margin-bottom:8px}
.themebar .opts{display:flex;gap:4px}
.themebar button{flex:1;font-family:inherit;font-size:11px;padding:5px 0;cursor:pointer;
  background:transparent;color:var(--ink3);border:1px solid var(--line);
  border-radius:6px;transition:color .12s,border-color .12s,background .12s}
.themebar button:hover{color:var(--ink2);border-color:var(--line2)}
.themebar button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);
  border-color:var(--accent-d);font-weight:600}
.themebar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}



*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.num,td .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft)}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--bg);
  border-right:1px solid var(--line);position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;padding:22px 0 24px;overflow-y:auto;z-index:10}
.brand{padding:2px 22px 18px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.brand .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .logo img{width:30px;height:26px;display:block;flex:0 0 auto}
.brand .logo-text{display:flex;flex-direction:column;line-height:.9;font-family:'Archivo',var(--sans)}
.brand .logo-text small{font-size:9px;font-weight:600;letter-spacing:.32em;color:var(--ink3);margin-bottom:4px}
.brand .logo-text strong{font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--ink)}
.brand .sub{font-size:11px;color:var(--ink3);margin-top:10px}
.nav{display:flex;flex-direction:column;gap:1px;padding:10px 12px}
.nav a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;
  color:var(--ink2);font-size:13.5px;font-weight:450;transition:background .13s,color .13s}
.nav a:hover{background:var(--card);color:var(--ink);text-decoration:none}
.nav a.active{background:var(--card);color:var(--ink);font-weight:550}
.nav a.active .ic{color:var(--accent)}
.nav .ic{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink3);transition:color .13s;flex:0 0 17px}
.nav .ic svg{width:16px;height:16px;display:block}
.nav a:hover .ic{color:var(--ink2)}
.nav .sec{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3);
  padding:16px 12px 6px;margin-top:4px;font-weight:600;opacity:.75}
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:40px 32px 100px;max-width:none;
  display:flex;flex-direction:column;align-items:center}
.main>*{width:100%;max-width:1080px}
@keyframes pgfade{from{opacity:0}to{opacity:1}}
.shell{animation:pgfade .5s ease both}

/* ---------- topbar / search ---------- */
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.search{flex:1;position:relative;max-width:420px}
.search input{width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:9px 13px 9px 35px;color:var(--ink);font-size:13.5px;font-family:var(--sans);
  transition:border-color .15s}
.search input::placeholder{color:var(--ink3)}
.search input:focus{outline:none;border-color:var(--line2)}
.search .mag{position:absolute;left:12px;top:9px;color:var(--ink3);font-size:14px}

/* ---------- page head ---------- */
.pagehead{margin-bottom:34px}
.pagehead h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.4px;color:var(--ink)}
.pagehead .lead{color:var(--ink2);font-size:14px;margin-top:9px;max-width:760px;line-height:1.65}
.stamp{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--ink3);
  background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 10px;
  font-family:var(--mono);margin-top:14px}
.stamp::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.stamp.stale{color:var(--amber);border-color:var(--line2)}
.stamp.stale::before{background:var(--amber)}

/* ---------- sections & cards ---------- */
.section{margin:44px 0 10px}
.section>h2{font-size:16px;font-weight:650;margin:0 0 6px;letter-spacing:-.1px;color:var(--ink)}
.section .desc{color:var(--ink2);font-size:13.5px;margin:0 0 18px;max-width:800px;line-height:1.65}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;margin-bottom:12px}
.card strong{color:var(--ink);font-weight:600}
.grid{display:grid;gap:12px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}

.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;position:relative;transition:border-color .14s,background .14s}
.metric .k{font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px;font-weight:550}
.metric .v{font-family:var(--mono);font-size:24px;font-weight:500;margin-top:7px;line-height:1.05;color:var(--ink)}
.metric .v.st-green{color:var(--green)}
.metric .v.st-amber{color:var(--amber)}
.metric .v.st-red{color:var(--red)}
.metric .n{font-size:12px;color:var(--ink2);margin-top:7px;line-height:1.5}
.metric .as{font-size:10.5px;color:var(--ink3);font-family:var(--mono);margin-top:8px}

/* ---------- tables ---------- */
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.t th{background:transparent;color:var(--ink3);text-align:left;font-weight:600;
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  padding:6px 12px;border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:1}
table.t td{padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
table.t tbody tr{transition:background .12s}
table.t tbody tr:hover td{background:var(--card2)}
table.t td.mono,table.t th.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.tablewrap table.t th{background:var(--bg2)}
.tablewrap table.t th:first-child,.tablewrap table.t td:first-child{padding-left:18px}
.tablewrap table.t tr:last-child td{border-bottom:none}


/* ---------- tags ---------- */
.tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.4px;
  padding:2px 8px;border-radius:5px;text-transform:uppercase;vertical-align:middle;line-height:1.35}
.tag.prov{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 34%,transparent)}
.tag.ok{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 34%,transparent)}
.tag.warn{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 34%,transparent)}
.tag.info{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.tag.muted{background:var(--card3);color:var(--ink3);border:1px solid var(--line2)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.g{background:var(--green)}.dot.a{background:var(--amber)}.dot.r{background:var(--red)}
.pill{font-family:var(--mono);font-size:12px}
.st-green{color:var(--green)}.st-amber{color:var(--amber)}.st-red{color:var(--red)}

/* ---------- notes ---------- */
.note{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--accent-d);
  border-radius:0 9px 9px 0;padding:13px 17px;font-size:13px;color:var(--ink2);margin:14px 0;line-height:1.6}
.note strong{color:var(--ink)}
.note.warn{border-left-color:var(--red)}
.note.warn strong{color:var(--red)}
.note.amber{border-left-color:var(--amber)}
ul.clean{margin:8px 0;padding-left:18px}
ul.clean li{margin:6px 0;color:var(--ink);line-height:1.55}
ul.clean li::marker{color:var(--ink3)}
.kbd{font-family:var(--mono);font-size:11px;background:var(--card2);border:1px solid var(--line2);
  border-radius:5px;padding:1px 6px;color:var(--ink2)}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- editable action queue ---------- */
.action-editor{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:0 0 14px}
.action-editor>summary{cursor:pointer;padding:11px 15px;color:var(--accent);font-size:13px;font-weight:600}
.action-editor>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.action-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:4px 15px 15px}
.action-form .wide{grid-column:1/-1}
.action-form label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--ink3);font-weight:600;
  letter-spacing:.35px;text-transform:uppercase}
.action-form input,.action-form select,.action-form textarea{width:100%;background:var(--card2);border:1px solid var(--line2);
  border-radius:7px;color:var(--ink);font:400 13px/1.45 var(--sans);padding:8px 10px;text-transform:none;letter-spacing:0}
.action-form textarea{resize:vertical;min-height:72px}
.action-form input:focus,.action-form select:focus,.action-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.action-form-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.action-form button,.action-remove{border:1px solid var(--line2);border-radius:7px;background:var(--accent-soft);color:var(--accent);
  font:600 12px var(--sans);padding:7px 11px;cursor:pointer}
.action-form button:disabled,.action-remove:disabled{cursor:not-allowed;opacity:.45}
.action-form button:focus-visible,.action-remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.action-remove{background:transparent;color:var(--ink3);padding:5px 8px}
.action-remove:not(:disabled):hover{color:var(--red);border-color:var(--red)}
.action-editor-status{font-size:11.5px;color:var(--ink3)}
.action-editor-status.ok{color:var(--green)}.action-editor-status.warn{color:var(--amber)}

/* ---------- clickable metrics + modal ---------- */
.metric.clk{cursor:pointer}
.metric.clk:hover{border-color:var(--line2);background:var(--card2)}
.metric.clk::after{content:"›";position:absolute;top:14px;right:15px;color:var(--ink3);font-size:16px;transition:color .14s}
.metric.clk:hover::after{color:var(--accent)}
.modal-ov{position:fixed;inset:0;background:var(--ov,rgba(6,8,10,.7));backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;z-index:50;overflow-y:auto}
.modal-ov.hidden{display:none!important}
.modal{background:var(--card2);border:1px solid var(--line2);
  border-radius:14px;max-width:640px;width:100%;padding:24px 26px 28px;box-shadow:var(--shadow-lg)}
.modal h3{margin:0 0 3px;font-size:19px;font-weight:650}
.modal .msrc{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:18px}
.modal .big{font-family:var(--mono);font-size:34px;font-weight:500;line-height:1;margin:6px 0 6px;color:var(--ink)}
.modal .close{float:right;background:transparent;border:1px solid var(--line2);color:var(--ink3);
  border-radius:8px;width:31px;height:31px;cursor:pointer;font-size:14px;line-height:1;transition:.14s}
.modal .close:hover{color:var(--ink);border-color:var(--ink3)}
.modal .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.modal .row:last-child{border-bottom:none}
.modal .row .lbl{color:var(--ink3)}
.modal .row .val{font-family:var(--mono);text-align:right;color:var(--ink)}
.modal .blk{margin-top:16px}
.modal .blk h4{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3);margin:0 0 6px;font-weight:600}
.modal .blk p{margin:0;font-size:13px;color:var(--ink2);line-height:1.6}

/* ---------- countdown ---------- */
.countdown{display:flex;gap:12px;flex-wrap:wrap}
.cd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 20px;min-width:184px}
.cd .race{font-size:13px;color:var(--ink2);font-weight:550}
.cd .days{font-family:var(--mono);font-size:30px;font-weight:550;margin:6px 0 3px;color:var(--ink)}
.cd .date{font-size:11px;color:var(--ink3);font-family:var(--mono)}
.cd .badge{font-size:10px;margin-top:9px}
footer.foot{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--ink3);font-size:11.5px;font-family:var(--mono);line-height:1.7}

/* ---------- mobile ----------
   The old standalone/full-width sidebar this block targeted (.sidebar,
   .brand, .main below) was replaced by the always-on top-bar + dropdown
   menu appended further down this file, which now applies at every width.
   Those three rules are dead (fully overridden) and removed rather than
   left to look live. .nav previously got a horizontal wrapped-chip layout
   here for that old full-width bar; inside the narrow dropdown panel that
   produced a cramped, unlabelled grid, so .nav now just keeps the same
   vertical list + visible section headers it uses on desktop. */
@media(max-width:820px){
  .nav a{padding:7px 11px;font-size:13px}
  .pagehead h1{font-size:23px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .tablewrap{overflow-x:auto}
  .action-form{grid-template-columns:1fr}.action-form .wide{grid-column:auto}
}

/* ============ TOP BAR + RIGHT-CORNER MENU (18 Aug 2026) ============
   Appended LAST on purpose: overrides the earlier sidebar/main rules,
   which sit at equal specificity and would otherwise win.            */
.shell{display:block}
.main{margin-left:0;padding:0 clamp(16px,4vw,40px) 100px;display:flex;flex-direction:column;align-items:center}
.main>*{width:100%;max-width:1080px}

.appbar{position:sticky;top:0;z-index:65;display:flex;align-items:center;justify-content:space-between;
  gap:16px;width:100%;max-width:none;margin:0 0 26px;padding:11px clamp(16px,4vw,40px);
  background:var(--bg);border-bottom:1px solid var(--line)}
.appbar .brand{padding:0;margin:0;border:none}
.appbar .brand .sub{display:none}
.appbar .brand .logo{gap:11px}
.appbar .brand .logo-text strong{font-size:17px}
.offline-status{display:none;position:sticky;top:59px;z-index:64;align-items:center;justify-content:center;
  gap:6px;min-height:34px;margin:-14px 0 14px;padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--amber) 45%,var(--line));border-radius:8px;
  color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);
  font:600 10.5px var(--mono)}
.offline-status.show{display:inline-flex}
.offline-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
html.is-offline [data-offline-disabled="1"]{opacity:.45;cursor:not-allowed}

.menubtn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:13px;
  font-weight:600;color:var(--ink2);cursor:pointer;background:var(--card);
  border:1px solid var(--line2);border-radius:10px;padding:8px 14px;flex:0 0 auto;
  transition:color .12s,border-color .12s}
.menubtn:hover{color:var(--ink);border-color:var(--accent-d)}
.menubtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menubtn .bars{display:inline-flex;flex-direction:column;gap:3px}
.menubtn .bars i{display:block;width:15px;height:1.5px;background:currentColor;border-radius:2px}

.sidebar{position:fixed;top:58px;right:clamp(12px,3vw,28px);left:auto;bottom:auto;
  width:min(288px,90vw);max-height:calc(100vh - 78px);overflow-y:auto;
  flex:none;display:block;z-index:80;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:12px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;
  transition:opacity .15s ease,transform .15s ease,visibility .15s}
.sidebar.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sidebar .brand{display:none}
.sidebar .nav{padding:4px 10px}
@media(max-width:820px){ .sidebar{top:54px;right:10px} }
@media(max-width:600px){
  .offline-status{top:55px;line-height:1.25;padding:6px 8px}
  .menubtn{padding-left:11px;padding-right:11px}
}

/* collapsed explanatory notes — hidden until asked for */
.notefold{margin:10px 0 0}
.notefold>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--ink3);padding:5px 11px;border:1px solid var(--line);
  border-radius:20px;transition:color .12s,border-color .12s}
.notefold>summary::-webkit-details-marker{display:none}
.notefold>summary::before{content:"i";font-family:var(--mono);font-size:10px;width:14px;height:14px;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%}
.notefold>summary:hover{color:var(--ink2);border-color:var(--line2)}
.notefold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.notefold[open]>summary{color:var(--accent);border-color:var(--accent-d)}

/* full evidence sections that stay available without dominating the page */
.section[data-collapse]{margin-top:16px}
.healthfold{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.healthfold>summary{cursor:pointer;list-style:none;padding:13px 16px;color:var(--ink);font-size:14px;font-weight:650;display:flex;align-items:center;gap:9px}
.healthfold>summary::-webkit-details-marker{display:none}
.healthfold>summary::before{content:"▸";color:var(--accent);font-size:11px;flex:0 0 auto}
.healthfold[open]>summary{border-bottom:1px solid var(--line)}
.healthfold[open]>summary::before{content:"▾"}
.healthfold>.fbody{padding:15px 16px 2px}
.healthfold>.fbody>.desc:first-child{margin-top:0}

.zmini{max-width:560px}
.zmini td:first-child{color:var(--ink2)}

/* provenance stamp, now at the foot of the page rather than the head */
.pagestamp{margin:44px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--ink3);letter-spacing:.02em}

/* live data-freshness chip (dashboard head) */
.pagehead-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pagehead-row h1{margin-bottom:0}
.fresh{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink3);
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:4px 11px 4px 9px}
.fresh i{width:6px;height:6px;border-radius:50%;background:var(--ink3);flex:0 0 auto}
.fresh em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  padding-left:8px;margin-left:2px;border-left:1px solid var(--line2)}
.fresh.ok i{background:var(--green)}
.fresh.ok{color:var(--ink2)}
.fresh.warn i{background:var(--amber)}
.fresh.old i{background:var(--red)}
.sync-btn{border:1px solid var(--line2);border-radius:20px;background:var(--accent-soft);color:var(--accent);font:600 11.5px var(--sans);padding:5px 13px;cursor:pointer}
.sync-btn:disabled{cursor:not-allowed;opacity:.5}
.sync-btn:not(:disabled):hover{border-color:var(--accent-d)}
.sync-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   PRINT — added 21 Aug 2026.
   Any page prints as a clean PDF (⌘P → Save as PDF), which is
   what makes the site able to replace the standalone PDFs.
   assets/app.js opens every <details> before printing, so the
   week-by-week accordions print expanded rather than as headers.
   ============================================================ */
@media print{
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --bg:#fff; --card:#fff; --card2:#fff;
    --ink:#000; --ink2:#1a1a1a; --ink3:#555;
    --line:#c4c4c4; --accent:#14568f;
  }
  html,body{background:#fff !important; color:#000 !important}
  /* chrome that has no meaning on paper */
  .sidebar,.appbar,.menubtn,.themebar,.topbar,.search,.nav,.modal,.modal-ov,.kbd,.pill{display:none !important}
  .shell{display:block !important; animation:none !important}
  .main{margin-left:0 !important; padding:0 !important; max-width:none !important; display:block !important}
  .main>*{max-width:none !important; width:auto !important}
  /* accordions print open (see app.js beforeprint hook) */
  details{break-inside:avoid; page-break-inside:avoid}
  details>summary{list-style:none}
  details>summary::-webkit-details-marker{display:none}
  .notefold{display:block !important}
  /* keep blocks whole where it matters */
  .section{border:0 !important; background:#fff !important; break-inside:auto; page-break-inside:auto}
  .card,.note,.wknote,.metric{background:#fff !important; border:1px solid #c4c4c4 !important}
  h1,h2,h3{color:#000 !important; break-after:avoid; page-break-after:avoid}
  tr,.wk,.grid>*{break-inside:avoid; page-break-inside:avoid}
  thead{display:table-header-group}
  .tablewrap{overflow:visible !important}
  table{width:100% !important; border-collapse:collapse}
  /* links: keep them readable, drop the arrow affordances */
  a{color:#14568f !important; text-decoration:none !important}
  .go{display:none !important}
  @page{margin:14mm}
}

/* live values injected by assets/live.js */
.is-live{transition:background .5s}
.is-live::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);vertical-align:super;margin-left:3px;opacity:.75}
@media print{.is-live::after{display:none}}

/* ---- HRV drill-down (dashboard + recovery snapshot cards) --------------- */
.metric .v .sub{font-size:13px;color:var(--ink2);font-weight:400;margin-left:6px;letter-spacing:0}
.metric .v .sub b{font-weight:500;color:var(--ink)}
.drill{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);
       background:var(--card);overflow:hidden}
.drill[hidden]{display:none}
.drill .dhd{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;
            align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.drill .dhd h3{font-size:13px;margin:0;font-weight:650;color:var(--ink)}
.drill .dhd .close{cursor:pointer;background:none;border:1px solid var(--line);
                   color:var(--ink3);border-radius:var(--r-sm);font-size:11px;
                   padding:3px 9px;font-family:inherit}
.drill .dhd .close:hover{color:var(--ink);border-color:var(--line2)}
.drill .dbody{padding:14px 15px}
.drill .drow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.drill .drow .c{background:var(--card2);border:1px solid var(--line);
                border-radius:var(--r-sm);padding:10px 12px}
.drill .drow .c .kk{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:550}
.drill .drow .c .vv{font-family:var(--mono);font-size:19px;margin-top:5px;color:var(--ink)}
.drill .drow .c .nn{font-size:11px;color:var(--ink3);margin-top:4px;line-height:1.4}
.drill table{width:100%;border-collapse:collapse;font-size:12px}
.drill table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
                color:var(--ink3);font-weight:550;padding:5px 8px;border-bottom:1px solid var(--line)}
.drill table td{padding:5px 8px;border-bottom:1px solid var(--line);font-family:var(--mono);color:var(--ink2)}
.drill table tr:last-child td{border-bottom:none}
.drill table td.gap{color:var(--amber)}
.drill .verdict{margin-top:13px;padding:10px 12px;border-radius:var(--r-sm);
                font-size:12.5px;line-height:1.55;border:1px solid var(--line);background:var(--card2);color:var(--ink2)}
.drill .verdict.ok{border-color:var(--green)}
.drill .verdict.warn{border-color:var(--amber)}
.drill .verdict.bad{border-color:var(--red)}
.drill .thin{font-size:11.5px;color:var(--amber);margin-top:9px;line-height:1.5}
@media(max-width:760px){.drill .drow{grid-template-columns:repeat(2,1fr)}}

/* ---- collapsible banner (dashboard restriction notices) ---------------- */
.bannerfold{font-size:12px;color:var(--accent);background:var(--accent-soft);
            border:1px solid var(--line);border-radius:8px;padding:8px 11px;margin-bottom:11px}
.bannerfold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.bannerfold>summary::-webkit-details-marker{display:none}
.bannerfold>summary::after{content:"▸";margin-left:auto;font-size:10px;opacity:.7}
.bannerfold[open]>summary::after{content:"▾"}
.bannerfold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bannerfold .bfbody{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
                    color:var(--ink2);line-height:1.6}

/* ---- action queue: later-actions fold --------------------------------- */
tr.aq-later[hidden]{display:none}
tr.aq-toggle td{padding:9px 12px;background:var(--card2);cursor:pointer;
                color:var(--accent);font-size:12px;font-weight:600;border-top:1px solid var(--line)}
tr.aq-toggle td:hover{color:var(--ink)}

/* ---- equipment page: collapsible gear items --------------------------- */
.gsub{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3);
      font-weight:650;margin:18px 0 8px}
.gsub:first-of-type{margin-top:4px}
.gearlist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.gearfold{border-bottom:1px solid var(--line)}
.gearfold:last-child{border-bottom:none}
.gearfold>summary{cursor:pointer;list-style:none;padding:11px 14px;font-size:13.5px;
                  color:var(--ink);display:flex;align-items:center;gap:9px}
.gearfold>summary::-webkit-details-marker{display:none}
.gearfold>summary::before{content:"▸";color:var(--ink3);font-size:10px;flex:0 0 auto}
.gearfold[open]>summary::before{content:"▾";color:var(--accent)}
.gearfold>summary:hover{background:var(--card2)}
.gearfold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gearfold[open]>summary{color:var(--accent);font-weight:600}
.gearfold .gbody{padding:2px 14px 14px 33px;font-size:12.5px;color:var(--ink2);line-height:1.65}
.gearfold .gbody .k{display:block;margin-top:7px;font-size:11px;text-transform:uppercase;
                    letter-spacing:.5px;color:var(--ink3);font-weight:600}
.want{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--amber);
      border:1px solid var(--amber);border-radius:4px;padding:1px 6px;font-weight:650;margin-left:auto;flex:0 0 auto}

/* ---- routes: compact reference cards (4 Sep 2026) --------------------- */
.routes-page .routehead{margin-bottom:22px}
.routes-page .routehead .lead strong{font-family:var(--mono);color:var(--amber)}
.routegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.routecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:17px;display:flex;flex-direction:column;min-width:0}
.routecard.featured{border-color:color-mix(in srgb,var(--accent) 36%,var(--line));
  background:linear-gradient(145deg,var(--accent-soft),var(--card) 42%)}
.routecard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.routecard h2{font-size:16px;line-height:1.25;margin:0;color:var(--ink);font-weight:650}
.routecard-head p{font-size:11.5px;color:var(--ink3);margin:4px 0 0}
.route-distance{font:600 11px/1.3 var(--mono);color:var(--amber);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);border-radius:5px;padding:4px 7px}
.route-tags{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0 10px}
.routecard>p{font-size:13px;line-height:1.55;color:var(--ink2);margin:0 0 10px}
.routecard .route-watch{font-size:12px;color:var(--ink3);margin-top:auto}
.routecard .route-watch strong{color:var(--ink2);font-weight:600}
.routeactions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:3px}
.routeactions a{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;
  border:1px solid var(--line2);border-radius:7px;background:var(--card2);
  color:var(--ink2);font-size:11.5px;font-weight:600;text-decoration:none}
.routeactions a:hover{border-color:var(--accent-d);color:var(--accent);text-decoration:none}
.routeactions a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.routes-page .route-notes{margin-top:28px;padding:17px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.routes-page .route-notes p{font-size:13px;color:var(--ink2);margin:8px 0 12px;line-height:1.65}
.route-sources{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;color:var(--ink2)}
.route-sources>summary{cursor:pointer;color:var(--ink3);font-size:12px;font-weight:600;
  list-style:none;display:flex;align-items:center;gap:8px;width:max-content;max-width:100%}
.route-sources>summary::-webkit-details-marker{display:none}
.route-sources>summary::before{content:"▸";font-size:10px}.route-sources[open]>summary::before{content:"▾"}
.route-sources>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.route-sources>div{max-width:800px;font-size:12.5px;line-height:1.65;padding:7px 0}
.route-sources p{margin:8px 0}

/* ---- code blocks (updating.html) -------------------------------------- */
code{font-family:var(--mono);font-size:.92em;background:var(--card2);
     border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
pre.code{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);
         padding:13px 15px;overflow-x:auto;margin:10px 0}
pre.code code{background:none;border:none;padding:0;font-size:13px;line-height:1.6;white-space:pre}

/* ---- dashboard sync bar (moved out of the page header, 2 Sep 2026) ----- */
.syncbar{display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:16px;
         border-top:1px solid var(--line)}

/* ---- centred race countdown + goal card (3 Sep 2026) ------------------- */
.countdown{justify-content:center}
.cd{text-align:center}
.cd .badge{display:flex;justify-content:center}
.card > strong.ctr{display:block;text-align:center}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE TIERS — phone + iPad (3 Sep 2026)
   Rule set by Jai: nothing may require horizontal scrolling, on any device.
   Touch targets deliberately left alone.
   Tiers: 1024 = iPad landscape · 900 = iPad portrait (834pt) · 600 = phone
   ═══════════════════════════════════════════════════════════════════════ */

/* Nothing anywhere is allowed to push the page sideways.
   `clip` not `hidden`: overflow-x:hidden turns the element into a scroll
   container, which silently breaks position:sticky on .appbar. */
html,body{overflow-x:clip}
.main,.main>*{min-width:0}
table.t td,table.t th{overflow-wrap:anywhere}

/* ---------- iPad landscape ---------- */
@media(max-width:1024px){
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .countdown{gap:10px}
  .cd{min-width:0;flex:1 1 200px}
}

/* ---------- iPad portrait (834pt lands here, not in the old 820 tier) ---- */
@media(max-width:900px){
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .routegrid{grid-template-columns:1fr}
  .main{padding-left:clamp(14px,3vw,24px);padding-right:clamp(14px,3vw,24px)}
  .appbar{padding-left:clamp(14px,3vw,24px);padding-right:clamp(14px,3vw,24px)}
  .drill .drow{grid-template-columns:repeat(2,1fr)}
}

/* ---------- phone ---------- */
@media(max-width:600px){
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .pagehead h1{font-size:21px}
  .section h2{font-size:15px}
  .cd{flex:1 1 100%;min-width:0}
  .drill .drow{grid-template-columns:1fr}
  .drill .dbody,.drill .dhd{padding-left:13px;padding-right:13px}
  .zmini{max-width:100%}
  .routecard{padding:15px}
  .routecard-head{gap:10px;flex-wrap:wrap}
  .route-distance{white-space:normal}
  .routeactions a{min-height:40px}

  /* week cards */
  .lastwk{padding:16px 15px}
  .lastwk .tot{gap:16px;flex-wrap:wrap}
  .lastwk .tot .big{font-size:26px}
  .lastwk .brk{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .lastwk .brk .c{padding:0 12px}
  .lastwk .brk .c:nth-child(odd){padding-left:0;border-left:none}

  /* ---- TABLES: stack, never scroll sideways ---- */
  .tablewrap{overflow:visible;background:none;border:none;border-radius:0}
  table.t{display:block;font-size:13px}
  table.t thead{display:none}
  table.t tbody{display:block}
  table.t tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);padding:11px 13px;margin-bottom:9px}
  table.t td{display:grid;grid-template-columns:minmax(84px,38%) 1fr;gap:10px;
    border:none!important;padding:5px 0!important;align-items:baseline}
  table.t td::before{content:attr(data-label);font-size:10px;text-transform:uppercase;
    letter-spacing:.6px;color:var(--ink3);font-weight:650;line-height:1.5}
  table.t td.is-empty{display:none}
  table.t td:first-child{padding-top:0!important}
  table.t tr:last-child td{border-bottom:none}

  /* the action queue's title cell holds a <details>; let it use full width */
  [data-action-queue] td:nth-child(2){grid-template-columns:1fr}
  [data-action-queue] td:nth-child(2)::before{display:none}
  tr.aq-toggle td{display:block!important;grid-template-columns:none}
  tr.aq-toggle td::before{display:none}

  /* speed calculator */
  .calcgrid,.readout{grid-template-columns:1fr!important}
}

/* ---- action queue: per-row tools + inline editor (3 Sep 2026) ---------- */
.aq-tools{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.aq-btn{background:var(--card2);border:1px solid var(--line2);color:var(--ink2);
  border-radius:7px;font:600 11px var(--sans);padding:4px 9px;cursor:pointer;white-space:nowrap}
.aq-btn:hover:not(:disabled){color:var(--ink);border-color:var(--accent-d)}
.aq-btn:disabled{opacity:.45;cursor:not-allowed}
.aq-btn.primary{background:var(--accent);border-color:var(--accent);color:#05243d}
.aq-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
tr.aq-editrow>td{background:var(--card2);padding:14px 16px!important}
.aq-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.aq-edit label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:650}
.aq-edit label.wide{grid-column:1/-1}
.aq-edit input,.aq-edit select,.aq-edit textarea{background:var(--card);border:1px solid var(--line2);
  color:var(--ink);border-radius:8px;padding:8px 10px;font:400 13px var(--sans);width:100%;
  text-transform:none;letter-spacing:0}
.aq-edit input:focus,.aq-edit select:focus,.aq-edit textarea:focus{outline:none;border-color:var(--accent)}
.aq-edit textarea{resize:vertical;line-height:1.55}
.aq-edit-actions{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.aq-edit-note{font-size:11px;color:var(--ink3)}
@media(max-width:600px){
  .aq-tools{justify-content:flex-start}
  .aq-edit{grid-template-columns:1fr}
  [data-action-queue] td.aq-tools{grid-template-columns:1fr}
  [data-action-queue] td.aq-tools::before{display:none}
  tr.aq-editrow>td{display:block!important;grid-template-columns:none}
  tr.aq-editrow>td::before{display:none}
}