/* 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;
  --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;
}
*{box-sizing:border-box;}
html,body{margin:0;}
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;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}
.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);}

.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:12px;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;}
.lifts .le1rm{font-family:var(--mono);font-weight:700;color:var(--teal);white-space:nowrap;}

/* ── 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:rgba(45,212,191,0.42);}
.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;}
}

/* ── 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%;}
}

.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{ --bg:#fff; --surface:#fff; --text:#0b0d12; --muted:#3a4150; --dim:#5a6272;
    --line:#c9d0da; --line-strong:#aab2be; --ink:#1d4ed8; --teal:#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 { 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; }
}