/* ============================================================
   Training — design system
   Type:  Barlow Condensed (display/UI chrome) + Barlow (body/data)
   Tone:  dark, high-contrast, athletic. Volt accent used sparingly.
   ============================================================ */

@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-700.woff2)format('woff2');font-weight:700;font-display:swap}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  /* surfaces, dark to light */
  --bg:#0b0d10; --surface:#14181e; --surface2:#1c2229; --surface3:#242c35;
  --line:#272f39; --line2:#323c48;
  /* ink */
  --txt:#eef2f6; --dim:#8d98a7; --dim2:#5d6876;
  /* semantic */
  --accent:#d3f34b;          /* volt: primary actions, active nav, next-up */
  --accent-ink:#12180a;      /* text on volt */
  --good:#2ddf8f; --warn:#ffb020; --bad:#ff5a52;
  /* type */
  --display:'Barlow Condensed',Barlow,system-ui,sans-serif;
  --body:Barlow,system-ui,-apple-system,sans-serif;
  --r:12px; --pad:16px;
}

html,body{margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--body);font-size:16px;line-height:1.45;font-weight:400;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;overflow-x:hidden}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
#app{padding:var(--pad);max-width:660px;margin:0 auto;width:100%}
.load{text-align:center;color:var(--dim);padding:80px 0;font-family:var(--display);
  text-transform:uppercase;letter-spacing:1.5px}

/* ---------- type ---------- */
h1{font-family:var(--display);font-weight:700;font-size:32px;line-height:1.03;
  text-transform:uppercase;letter-spacing:.2px;margin:6px 0 4px}
h2{font-family:var(--display);font-weight:700;font-size:14px;line-height:1;
  text-transform:uppercase;letter-spacing:1.4px;color:var(--dim);
  margin:26px 0 10px;display:flex;align-items:center;gap:9px}
h2::before{content:'';width:14px;height:2px;background:var(--accent);
  border-radius:2px;flex:0 0 auto}
.sub{color:var(--dim);font-size:14.5px;margin:0 0 18px;line-height:1.4}
.muted{color:var(--dim);font-size:13.5px}
.tiny{font-size:12.5px;color:var(--dim2);line-height:1.4}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
b,strong{font-weight:700}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-bottom:11px;position:relative}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);pointer-events:none}
.card.tight{padding:13px}
.row{display:flex;align-items:center;gap:10px}
.row.sb{justify-content:space-between}
.grow{flex:1;min-width:0}

/* ---------- buttons ---------- */
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.btn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.9px;
  font-size:15px;background:var(--accent);color:var(--accent-ink);
  border-radius:10px;padding:14px 18px;width:100%;text-align:center;line-height:1}
.btn.sec{background:var(--surface2);color:var(--txt);border:1px solid var(--line2)}
.btn.sm{padding:10px 13px;width:auto;font-size:13px;border-radius:8px;letter-spacing:.7px}
.btn:active{transform:translateY(1px);opacity:.85}
.btn[disabled]{opacity:.32;pointer-events:none}
.link{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  font-size:12.5px;color:var(--accent);padding:5px 0}

/* ---------- pills ---------- */
.pill{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.9px;
  font-size:11px;line-height:1;padding:5px 9px 4px;border-radius:5px;display:inline-block;
  white-space:nowrap}
.pill.g{background:rgba(45,223,143,.14);color:var(--good)}
.pill.w{background:rgba(255,176,32,.14);color:var(--warn)}
.pill.b{background:rgba(255,90,82,.14);color:var(--bad)}
.pill.n{background:var(--surface2);color:var(--dim)}
.pill.a{background:var(--accent);color:var(--accent-ink)}

/* ---------- meters ---------- */
.bar{height:6px;background:var(--surface3);border-radius:99px;overflow:hidden;margin-top:9px}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--good);transition:width .35s ease}
.bar>i.w{background:var(--warn)} .bar>i.b{background:var(--bad)}
.big{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums}

/* ---------- exercise cards ---------- */
.exname{font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-.1px}
.cue{color:var(--dim);font-size:13.5px;margin-top:4px;line-height:1.35}
.rx{font-weight:600;font-size:13.5px;margin-top:7px;color:#b9cf6a;
  font-variant-numeric:tabular-nums}
.last{color:var(--dim2);font-size:12.5px;margin-top:4px;font-variant-numeric:tabular-nums}

/* ---------- set rows ---------- */
.sets{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.set{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 50px 34px;
  gap:7px;align-items:center}
.set>.n{font-family:var(--display);font-weight:700;color:var(--dim2);font-size:14px;text-align:center}
input,select{font-family:var(--body);font-size:16px;font-weight:600;
  background:var(--surface2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:11px 7px;width:100%;text-align:center;
  font-variant-numeric:tabular-nums;min-width:0}
input:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(211,243,75,.1)}
input::placeholder{color:var(--dim2);font-weight:400}
.chk{width:34px;height:41px;border-radius:8px;border:1px solid var(--line2);
  background:var(--surface2);display:grid;place-items:center}
.chk::before{content:'';width:9px;height:9px;border-radius:50%;border:1.5px solid var(--dim2)}
.chk.on{background:var(--accent);border-color:var(--accent)}
.chk.on::before{width:13px;height:8px;border:0;border-left:2.5px solid var(--accent-ink);
  border-bottom:2.5px solid var(--accent-ink);border-radius:0;transform:rotate(-45deg) translate(1px,-2px)}

/* ---------- tab bar ---------- */
#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;
  background:rgba(11,13,16,.93);backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:20}
#tabs button{flex:1;padding:10px 2px 8px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--dim2);
  font-family:var(--display);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.9px;line-height:1}
#tabs svg{width:23px;height:23px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabs button.on{color:var(--accent)}

/* ---------- flags ---------- */
.flag{border-radius:9px;padding:11px 13px;font-size:13.5px;margin-bottom:9px;line-height:1.4;
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.26);color:#ffd89b}
.flag.b{background:rgba(255,90,82,.08);border-color:rgba(255,90,82,.26);color:#ffb5b0}
.flag.g{background:rgba(45,223,143,.08);border-color:rgba(45,223,143,.26);color:#9aeecb}
.flag b{color:#fff}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed}
td,th{padding:8px 4px;text-align:left;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
tr:last-child td{border-bottom:none}
th{font-family:var(--display);font-weight:700;color:var(--dim);font-size:11.5px;
  text-transform:uppercase;letter-spacing:1px}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 0-10 scale ---------- */
.scale{display:flex;gap:4px;margin-top:10px}
.scale button{flex:1;padding:11px 0;border-radius:7px;background:var(--surface2);
  border:1px solid var(--line);font-family:var(--body);font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums;min-width:0;color:var(--dim)}
.scale button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

/* ---------- session list rows ---------- */
.dayitem{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.dayitem:last-child{border-bottom:none}
.dayitem.today{background:rgba(211,243,75,.05);margin:0 -15px;padding:13px 15px;
  border-left:2px solid var(--accent)}
.dayitem .btn{flex:0 0 auto}
.slot{font-family:var(--display);font-weight:700;font-size:13px;color:var(--dim2);
  width:19px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.dayname{font-weight:600;font-size:16px;line-height:1.2}

/* ---------- narrow phones ---------- */
@media (max-width:400px){
  #app{padding:13px}
  h1{font-size:28px}
  .set{grid-template-columns:19px minmax(0,1fr) minmax(0,1fr) 44px 32px;gap:5px}
  input{padding:11px 4px;font-size:15px}
  .scale{gap:3px}
  .scale button{padding:10px 0;font-size:13px}
  #tabs button{font-size:9.5px;letter-spacing:.6px}
  #tabs svg{width:21px;height:21px}
}

/* ---------- column header above set rows ---------- */
.set.head{margin-top:11px;margin-bottom:-2px}
.set.head span{font-family:var(--display);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:1.1px;color:var(--dim2);text-align:center}

/* ---------- video link ---------- */
a.vid{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px 5px;border-radius:7px;background:var(--surface2);
  border:1px solid var(--line2);text-decoration:none;color:var(--accent);
  font-family:var(--display);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.9px;line-height:1;white-space:nowrap}
a.vid svg{width:11px;height:11px;fill:var(--accent);stroke:none;flex:0 0 auto}
a.vid:active{opacity:.6}
.rx b{color:var(--accent);font-weight:700}