/* dashboard.css — extracted from dashboard.html. Training Dashboard surface. */
@font-face{font-family:'Space Grotesk';font-weight:500 800;font-display:swap;src:url('./fonts/space-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url('./fonts/jetbrains-mono-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url('./fonts/inter-400.woff2') format('woff2');}
:root{
--bg:#0d0e12; --surface:#11131a; --surface-2:#0a0b0e; --panel:#0f1218;
--text:#eef2f8; --muted:#9aa6b8; --dim:#8391a5;
--line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16);
--action:#2563eb; --action-hover:#1d4ed8; --ink:#60a5fa; --teal:#2dd4bf;
/* semantic chip + sparkline inks (per-theme so they stay legible on every shell) */
--warn:#f59e0b; --warn-line:rgba(245,158,11,0.4); --warn-bg:rgba(245,158,11,0.08);
--push-line:rgba(45,212,191,0.4); --push-bg:rgba(45,212,191,0.08); --seg-done:rgba(45,212,191,0.42);
--spark-up:#2dd4bf; --spark-down:#60a5fa;
--serif:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
--sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
--mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
/* ── 4-theme system (#332) — same canonical palette as home.css, keyed on the
[data-theme] attribute the toggle sets on (NOT body classes). Accent inks
map to this surface's names: --ink = home --action-ink, --teal = home --teal-ink.
All pairs computed >= AA in dashboard_theme_polarity_contract_test.js. */
[data-theme="light"]{
--bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef1f6; --panel:#ffffff;
--text:#0e1116; --muted:#4a5568; --dim:#5a6577;
--line:rgba(8,12,20,0.10); --line-strong:rgba(8,12,20,0.18);
--action:#2563eb; --action-hover:#1d4ed8; --ink:#1e40af; --teal:#0f766e;
--warn:#92400e; --warn-line:rgba(146,64,14,0.45); --warn-bg:rgba(146,64,14,0.08);
--push-line:rgba(15,118,110,0.5); --push-bg:rgba(15,118,110,0.08); --seg-done:rgba(15,118,110,0.45);
--spark-up:#0f766e; --spark-down:#1e40af;
}
/* obsidian — deepest premium black + gold plasma ink (a DARKER dark variant). */
[data-theme="obsidian"]{
--bg:#050506; --surface:#0d0d0f; --surface-2:#141416; --panel:#0d0d0f;
--text:#f5f5f7; --muted:#a1a1aa; --dim:#8b8b93;
--line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14);
--action:#2563eb; --action-hover:#1d4ed8; --ink:#ffba08; --teal:#f5b301;
--warn:#f59e0b; --warn-line:rgba(245,158,11,0.4); --warn-bg:rgba(245,158,11,0.08);
--push-line:rgba(255,186,8,0.45); --push-bg:rgba(255,186,8,0.08); --seg-done:rgba(255,186,8,0.5);
--spark-up:#ffba08; --spark-down:#60a5fa;
}
/* clinical — clean instrument WHITE + green accent (a LIGHT variant, not black). */
[data-theme="clinical"]{
--bg:#f7faf9; --surface:#ffffff; --surface-2:#eef4f2; --panel:#ffffff;
--text:#0d1512; --muted:#3f4f49; --dim:#52645d;
--line:rgba(4,120,87,0.12); --line-strong:rgba(4,120,87,0.20);
--action:#047857; --action-hover:#036249; --ink:#046a4e; --teal:#047857;
--warn:#92400e; --warn-line:rgba(146,64,14,0.45); --warn-bg:rgba(146,64,14,0.08);
--push-line:rgba(4,120,87,0.5); --push-bg:rgba(4,120,87,0.08); --seg-done:rgba(4,120,87,0.45);
--spark-up:#047857; --spark-down:#1e40af;
}
*{box-sizing:border-box;}
html,body{margin:0;}
html{color-scheme:dark;} [data-theme="light"],[data-theme="clinical"]{color-scheme:light;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;
background-image:radial-gradient(58% 40% at 50% 0%, rgba(37,99,235,.10), transparent 60%), radial-gradient(70% 50% at 50% 120%, rgba(45,212,191,.05), transparent 55%);
min-height:100svh;}
/* per-theme ambient tint: gold plasma on obsidian, green instrument wash on clinical */
[data-theme="obsidian"] body{background-image:radial-gradient(58% 40% at 50% 0%, rgba(255,186,8,.06), transparent 60%), radial-gradient(70% 50% at 50% 120%, rgba(255,186,8,.03), transparent 55%);}
[data-theme="clinical"] body{background-image:radial-gradient(58% 40% at 50% 0%, rgba(4,120,87,.06), transparent 60%), radial-gradient(70% 50% at 50% 120%, rgba(4,120,87,.03), transparent 55%);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}
/* Skip link (A11Y-D1). dashboard.css does not load styles.css, so the canonical .skip-link rule
there is unavailable here and is restated against this sheet's own tokens rather than importing
a second stylesheet for one control. Off-screen until focused — never display:none, which would
remove it from the tab order and defeat the purpose. */
/* #fff, not var(--bg): --bg is near-black in the dark theme and pairs with --action (#2563eb) at
~3.8:1, under AA's 4.5:1. White on the same blue measures ~5.1:1 and matches the canonical
styles.css .skip-link, so both surfaces stay identical AND pass. A literal is correct here —
the pairing must hold in every theme, and --bg inverts between them. */
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;padding:12px 20px;background:var(--action);color:#fff;font-family:var(--sans);font-weight:700;text-decoration:none;border-radius:6px;transition:top .18s;}
.skip-link:focus{top:16px;}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none;}}
.shell{max-width:940px;margin:0 auto;padding:22px 20px 64px;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:26px;}
.wordmark{font-family:var(--mono);font-weight:700;letter-spacing:.2em;font-size:.8rem;text-transform:uppercase;}
.wordmark b{color:var(--ink);}
.topbar a{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;}
.topbar a:hover{color:var(--text);}
.topbar-links{display:flex;align-items:center;gap:14px;}
.theme-toggle{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;background:transparent;color:var(--muted);border:1px solid var(--line-strong);border-radius:10px;padding:8px 16px;min-height:44px;cursor:pointer;transition:color 160ms,border-color 160ms;flex:none;}
.theme-toggle:hover{color:var(--text);border-color:var(--ink);}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;}
h1{font-family:var(--serif);font-weight:800;font-size:clamp(2rem,6vw,3rem);line-height:1;letter-spacing:-.02em;margin:0 0 10px;}
.lede{color:var(--muted);font-size:1rem;max-width:56ch;margin:0 0 26px;}
.empty{border:1px dashed var(--line-strong);border-radius:14px;padding:34px 22px;text-align:center;color:var(--muted);}
.empty a{color:var(--ink);}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:26px;}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.tile b{display:block;font-family:var(--mono);font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1.1;}
.tile.teal b{color:var(--teal);}
.tile span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
.sec-head{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
.lifts{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:10px;}
.lifts li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;}
.lifts .lname{font-weight:600;text-transform:capitalize;min-width:120px;flex:1;}
.lifts .lmeta{font-family:var(--mono);font-size:.72rem;color:var(--dim);}
.lifts svg{display:block;flex:0 0 auto;}
/* Sparkline re-theming: dashboard.js writes the DARK palette as presentation attributes
(up=#2dd4bf, down=#60a5fa). Author CSS beats presentation attributes, so these
attribute-keyed overrides re-ink both trends per theme without touching the JS. */
.lifts svg path[stroke="#2dd4bf"]{stroke:var(--spark-up);}
.lifts svg circle[fill="#2dd4bf"]{fill:var(--spark-up);}
.lifts svg path[stroke="#60a5fa"]{stroke:var(--spark-down);}
.lifts svg circle[fill="#60a5fa"]{fill:var(--spark-down);}
.lifts .le1rm{font-family:var(--mono);font-weight:700;color:var(--teal);white-space:nowrap;}
/* 28-day overload rate: the one progress number per lift (engine-derived; absent = UNKNOWN) */
.lifts .lrate{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--dim);white-space:nowrap;}
.lifts .lrate.up{color:var(--spark-up);}
.lifts .lrate.down{color:var(--warn);}
/* Per-lift progressive-overload forecast chip (push / hold / back off / more data). */
.lifts .lfc{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);}
.lifts .lfc.push{color:var(--teal);border-color:var(--push-line);background:var(--push-bg);}
.lifts .lfc.hold{color:var(--muted);}
.lifts .lfc.back{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg);}
.lifts .lfc.unknown{color:var(--dim);border-style:dashed;}
/* ── WHERE YOU STAND: one tier track per lift ──
Five bands (beginner→elite) read left-to-right: cleared bands filled, the current one lit.
The track is the whole story at a glance; the ratio and the next milestone sit beneath it. */
.stand{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;}
.srow{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.sname{font-weight:600;text-transform:capitalize;}
.slvl{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--teal);white-space:nowrap;}
.track{display:flex;gap:3px;margin:10px 0 8px;}
.seg{flex:1;height:6px;border-radius:3px;background:var(--line);}
.seg.done{background:var(--seg-done);}
.seg.at{background:var(--teal);}
.sfoot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.sratio{font-family:var(--mono);font-size:.72rem;color:var(--dim);}
.snext{font-family:var(--mono);font-size:.72rem;color:var(--muted);}
.snote{margin:0;color:var(--muted);font-size:.9rem;}
.snote a{color:var(--ink);}
/* small phones: stack the head/foot pairs rather than squeezing them onto one line */
@media (max-width:420px){
.shead,.sfoot{flex-direction:column;align-items:flex-start;gap:2px;}
}
/* ── MUSCLE VOLUME: last 7 days of logged sets vs the volume landmarks ──
One row per trained group, urgency-ordered by the engine. The bar is share of the
recoverable ceiling (MRV); the tick marks MEV — left of the tick means under-trained. */
.muscles{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;}
.mrow{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;}
.mhead{display:flex;align-items:baseline;gap:10px;}
.mname{font-weight:600;text-transform:capitalize;}
.msets{font-family:var(--mono);font-size:.72rem;color:var(--dim);}
.mzone{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;white-space:nowrap;}
.mzone.zadd,.mzone.zreduce{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg);}
.mzone.zprog{color:var(--teal);border-color:var(--push-line);background:var(--push-bg);}
.mzone.zhold{color:var(--muted);}
.mbar{position:relative;height:6px;border-radius:3px;background:var(--line);margin:10px 0 8px;overflow:hidden;}
.mfill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--seg-done);}
.mfill.under,.mfill.over{background:var(--warn);}
.mtick{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--line-strong);}
.mlabel{margin:0;font-size:.85rem;color:var(--muted);}
.mnote{margin:0;color:var(--muted);font-size:.9rem;}
/* ── TRAINING LOAD: acute:chronic card + monotony line ── */
.loadcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:0 0 26px;}
.load-nums{margin:8px 0 6px;font-family:var(--mono);font-size:.78rem;color:var(--dim);}
.load-mono{margin:6px 0 0;font-family:var(--mono);font-size:.72rem;color:var(--muted);}
/* ── PR TIMELINE: every earned record, newest first ──
One line per genuine beat: date · lift · new e1RM · +gain · the set that did it. */
.prtl{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:10px;}
.prtl-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;}
.prtl-date{font-family:var(--mono);font-size:.72rem;color:var(--dim);white-space:nowrap;margin-left:auto;}
.prtl-lift{font-weight:600;}
.prtl-e1{font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--ink);white-space:nowrap;}
.prtl-delta{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--teal);white-space:nowrap;}
.prtl-how{font-family:var(--mono);font-size:.72rem;color:var(--dim);white-space:nowrap;}
.prtl-empty{color:var(--muted);font-size:.9rem;padding:4px 2px;}
@media (max-width:420px){
.prtl-row{gap:6px 10px;}
.prtl-date{margin-left:0;}
}
/* ── YOUR PLAN: what you're going to train ──
Sits above the computed history because it answers the first question a lifter opens this
page with ("what am I doing today?"). One card per day, the prescription right-aligned in
mono so the numbers column-scan; the phase tag only appears when it isn't the main work. */
.plan{display:flex;flex-direction:column;gap:12px;}
.plan-day{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.plan-day-h{margin:0 0 10px;font-family:var(--serif);font-size:1rem;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.plan-day-n{font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.plan-lifts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.plan-lifts li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.plan-lift-name{font-weight:600;flex:1;min-width:120px;}
.plan-phase{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:2px 6px;}
.plan-rx{font-family:var(--mono);font-size:.74rem;color:var(--teal);white-space:nowrap;}
.plan-foot{font-family:var(--mono);font-size:.66rem;color:var(--dim);margin:10px 0 26px;}
/* small phones: let the prescription drop under the lift name instead of crushing both */
@media (max-width:420px){
.plan-lifts li{gap:2px 8px;}
.plan-lift-name{flex:1 0 100%;}
}
/* ── ENGAGEMENT: honest habit-loop surfaces ──
Every ink below is an existing theme token (--teal/--ink/--muted/--dim on --surface/--bg),
so all 4 shells inherit the AA pairs dashboard_theme_polarity already proves. */
/* Zeigarnik pending card — the open loop at the top of the page. */
.pending{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:12px;padding:16px 18px;margin:0 0 18px;}
.pending h3{margin:0 0 4px;font-family:var(--serif);font-size:1.05rem;}
.pending p{margin:0 0 12px;color:var(--muted);font-size:.9rem;}
/* Real-PR celebration strip — exists only when a genuine new best rendered. One subtle
shine pass (::after sweep), then static. The global reduced-motion rule above uses `*`,
which does NOT match pseudo-elements — hence the explicit gate below. */
#prStrip{position:relative;overflow:hidden;border:1px solid var(--push-line);background:var(--push-bg);border-radius:12px;padding:12px 16px;margin:0 0 18px;}
#prStrip .pr-line{margin:0;font-family:var(--mono);font-size:.85rem;color:var(--text);}
#prStrip .pr-line b{color:var(--teal);letter-spacing:.08em;}
#prStrip::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.10) 50%,transparent 60%);transform:translateX(-100%);animation:prShine 1.1s ease-out .3s 1 forwards;pointer-events:none;}
@keyframes prShine{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){#prStrip::after{animation:none;display:none;}}
/* light shells: the white sweep is invisible on white — use the ink at low alpha instead */
[data-theme="light"] #prStrip::after{background:linear-gradient(105deg,transparent 40%,rgba(30,64,175,0.08) 50%,transparent 60%);}
[data-theme="clinical"] #prStrip::after{background:linear-gradient(105deg,transparent 40%,rgba(4,120,87,0.08) 50%,transparent 60%);}
/* Streak line — quiet mono, comeback framing when broken; the CTA is a full 44px target. */
.streak-line{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:0 0 22px;}
.streak-line .streak-cta{color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
.streak-line .streak-cta:hover{text-decoration:underline;}
/* Achievement momentum — thin goal-gradient bars, each row one 44px+ link to the vault. */
.achv{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;}
.achv-row{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-height:44px;text-decoration:none;color:var(--text);}
.achv-row:hover{border-color:var(--ink);}
.achv-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.achv-name{font-weight:600;}
.achv-count{font-family:var(--mono);font-size:.72rem;color:var(--dim);white-space:nowrap;}
.achv-bar{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden;}
.achv-fill{display:block;height:100%;border-radius:3px;background:var(--teal);}
/* Confetti canvas (fired by achievement-vault.js only on a genuinely NEW unlock; it toggles
display itself and honors prefers-reduced-motion internally). Fixed overlay, no hit target. */
#confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;display:none;}
.card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--action);border-radius:12px;padding:18px 20px;margin-bottom:16px;}
.card h3{margin:0 0 6px;font-family:var(--serif);font-size:1.1rem;}
.card p{margin:0 0 12px;color:var(--muted);font-size:.9rem;}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:10px;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;}
.btn-primary{background:var(--action);color:#fff;}
.btn-primary:hover{background:var(--action-hover);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;}
.foot{margin-top:30px;color:var(--dim);font-size:.72rem;line-height:1.5;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* ── PRINT: the dashboard becomes a clean training report (the art of documentation) ──
Ink on white, no chrome/buttons, sparklines survive as vector, page-break-safe rows. */
@media print {
:root, [data-theme="light"], [data-theme="obsidian"], [data-theme="clinical"]{
--bg:#fff; --surface:#fff; --text:#0b0d12; --muted:#3a4150; --dim:#5a6272;
--line:#c9d0da; --line-strong:#aab2be; --ink:#1d4ed8; --teal:#0f766e;
--warn:#92400e; --warn-line:#c9d0da; --warn-bg:transparent;
--push-line:#c9d0da; --push-bg:transparent; --seg-done:#99e2d8;
--spark-up:#0f766e; --spark-down:#0f766e; }
body{ background:#fff !important; background-image:none !important; color:#0b0d12; }
.shell{ max-width:none; padding:0; }
.topbar a, .btn, .card .btn-row, #dashStatus a, .streak-cta, #confetti-canvas { display:none !important; }
.card:last-of-type, .card:nth-of-type(1){ break-inside:avoid; }
.tile, .lifts li, .srow{ break-inside:avoid; box-shadow:none !important; }
.slvl{ color:#0f766e; }
.seg{ background:#e3e8ef; } .seg.done{ background:#99e2d8; } .seg.at{ background:#0f766e; }
.tile b{ color:#1d4ed8; } .tile.teal b{ color:#0f766e; }
.lifts .le1rm{ color:#0f766e; }
.lifts svg path, .lifts svg circle{ stroke:#0f766e; fill:#0f766e; }
.lifts svg path{ fill:none; }
h1{ font-size:1.8rem; }
.lede{ color:#3a4150; }
/* a printed report is a document — stamp it as one */
.topbar::after{ content:"Eccentryx training report · printed from your own logged data"; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#5a6272; }
@page{ margin:14mm; }
}
/* --- UX ratchet 2026-07-22 (additive): raise sub-10px uppercase mono labels to a legible floor --- */
.plan-phase, .plan-day-n{font-size:.7rem;}
.tile span{font-size:.68rem;}