/* Layout: phone-first training app. Neutral near-black ground, dark cards, white type.
   One accent, Volt, and it is rationed: it marks what you act on (the main button, the +) and what you won
   (the ring, trained days, gains, time is up, well done). Everything else is black, white and grey.
   Orange is for delete, errors and losses only. Single deliberate dark look, per the brief. */
:root{
  --bg:#0A0A0A;          /* neutral near-black ground */
  --card:#161616;        /* cards */
  --panel:#161616;
  --ink-2:#222222;       /* raised control inside a card */
  --ink:#FFFFFF;         /* text, and the fill of selected states */
  --on-ink:#0A0A0A;      /* text on Volt and on white */
  --accent:#CEFF00;      /* Volt: only where you act or win */
  --pop:#CEFF00;
  --heat:#FF4D00;        /* orange: delete, errors, losses */
  --muted:#8A8A8A;
  --muted-ink:#8A8A8A;
  --line:rgba(255,255,255,.08);
  --line-ink:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --shadow:none;
  --display:"Urbanist","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Urbanist","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Urbanist","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r-lg:26px; --r:20px; --r-sm:14px;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.4;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
.app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-inline:16px}
p{margin:0}
button{font-family:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* type roles */
.disp{font-family:var(--display);font-stretch:68%;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.88}
.label{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.label.hot{color:var(--accent)}
.muted{color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:3;display:flex;align-items:center;gap:12px;min-height:64px;padding-block:10px;background:var(--bg)}
header h1{flex:1;min-width:0;margin:0;font-family:var(--display);font-stretch:68%;font-weight:900;font-size:28px;line-height:1;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:anywhere}
.back{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--card);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 0 var(--line)}
.back svg{width:20px;height:20px}
.brand{flex:1;display:flex;align-items:center;gap:8px;font-family:var(--display);font-stretch:68%;font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:.01em}
.brand i{width:22px;height:22px;border-radius:7px;background:var(--accent);display:grid;place-items:center;transform:skewX(-10deg)}
.brand i::after{content:"";width:10px;height:3px;background:var(--on-ink);border-radius:2px;box-shadow:0 -5px 0 var(--on-ink),0 5px 0 var(--on-ink)}
.pill{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:var(--card);color:var(--ink);white-space:nowrap}
.pill.dark{background:var(--ink);color:var(--on-ink)}
.pill.hot{background:var(--accent);color:var(--on-ink)}

main{flex:1;display:flex;flex-direction:column;gap:12px;padding-block:4px 20px}
.bottom{display:flex;flex-direction:column;gap:10px;padding-block:14px 16px;margin-top:auto}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border-radius:var(--r);border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--display);font-stretch:75%;font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;padding:0 20px;transition:transform .12s ease,background .15s,filter .15s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-ink)}
.btn.primary::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn.ghost{border-color:transparent;min-height:46px;font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted)}
.btn.danger{color:#C23B0A;border-color:#C23B0A}
.btn:disabled{opacity:.35;cursor:default}
.btn:active:not(:disabled){transform:scale(.98);filter:brightness(1.05)}
.btn small{font:500 11px var(--mono);letter-spacing:.06em;opacity:.75;text-transform:none}
.btn.two{flex-direction:column;gap:2px;min-height:66px}

/* cards */
.card{background:var(--card);border-radius:var(--r-lg);padding:18px}
.card.dark{background:var(--ink);color:var(--on-ink)}
.card.dark .label{color:var(--muted-ink)}
.card.dark .label.hot{color:var(--accent)}

/* home */
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:22px 20px 20px}
.hero .ghostnum{position:absolute;right:-14px;top:-30px;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:230px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line-ink);pointer-events:none;user-select:none}
.hero h2{font-size:clamp(58px,19vw,84px);margin:0;position:relative}
.hero h2 em{font-style:normal;color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-ink);padding-top:14px;position:relative}
.stats div{display:flex;flex-direction:column;gap:4px;min-width:0;padding-inline:4px}
.stats div + div{border-left:1px solid var(--line-ink);padding-left:12px}
.stats b{font-family:var(--display);font-stretch:68%;font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-ink);overflow-wrap:anywhere}
.action{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;border-radius:var(--r-lg);padding:22px 20px;cursor:pointer;background:var(--card);color:var(--ink);transition:transform .12s ease}
.action:active{transform:scale(.985)}
.action.go{background:var(--accent);color:var(--on-ink)}
.action b{display:block;font-family:var(--display);font-stretch:68%;font-weight:900;font-size:40px;line-height:.9;text-transform:uppercase}
.action small{display:block;margin-top:6px;font:500 12px var(--mono);letter-spacing:.04em;opacity:.8}
.action .arrow{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink)}
.action.go .arrow{background:var(--on-ink);color:var(--accent)}
.action .arrow svg{width:22px;height:22px}
.weeklog{display:flex;flex-direction:column;gap:14px;padding:16px}
.wkhead{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;text-align:center}
.wkhead .disp{font-size:30px}
.wkhead .label{margin-top:4px;font-size:10px}
.wknav{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);display:grid;place-items:center;cursor:pointer}
.wknav svg{width:18px;height:18px}
.wknav:disabled{opacity:.3;cursor:default}
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border-radius:var(--r-sm);background:var(--bg);font-family:var(--mono)}
.day span{font-size:10px;color:var(--muted);letter-spacing:.06em}
.day b{font-family:var(--display);font-stretch:68%;font-weight:900;font-size:22px;line-height:1}
.day i{font-style:normal;font-size:10px;height:12px;line-height:12px}
.day.on{background:var(--ink);color:var(--on-ink)}
.day.on span{color:var(--muted-ink)}
.day.on i{color:var(--accent)}
.day.today{box-shadow:inset 0 0 0 2px var(--accent)}
.log{display:flex;flex-direction:column;gap:6px}
.dayhead{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:6px 2px 0}
.logrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 10px 12px 14px;border:0;border-radius:var(--r-sm);background:var(--bg);text-align:left;cursor:pointer;transition:transform .12s ease}
.logrow:active{transform:scale(.985)}
.logrow .name{display:block;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:19px;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.logrow .meta{display:block;margin-top:4px;font:500 11px var(--mono);letter-spacing:.02em;color:var(--muted)}
.logrow .go{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center}
.logrow .go svg{width:15px;height:15px}
.restnote{font:500 12px var(--mono);color:var(--muted);text-align:center;padding:6px 0 4px}
.status{display:flex;justify-content:center;align-items:center;gap:6px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* lists */
.list{display:flex;flex-direction:column;gap:8px}
.list .row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;padding:14px 14px 14px 18px;border:0;border-radius:var(--r);background:var(--card);text-align:left;cursor:pointer;transition:transform .12s ease}
.list .row:active{transform:scale(.985)}
.list .row .name{display:block;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:23px;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.list .row .meta{display:block;margin-top:5px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.list .row .go{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center}
.list .row .go svg{width:18px;height:18px}
.list .row.rm{cursor:default}
.list .row.rm .btn{width:auto;min-height:40px;font-size:15px;padding:0 14px}
.addrow{display:flex;gap:8px;background:var(--card);border-radius:var(--r);padding:6px}
.addrow input{flex:1;min-width:0;min-height:48px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:500 16px var(--body);padding:0 12px}
.addrow input::placeholder{color:var(--muted)}
.addrow .btn{width:auto;min-height:48px;border-radius:var(--r-sm);font-size:17px;padding:0 18px}
.err{font:500 12px var(--mono);color:#C23B0A;padding-inline:6px}
.empty{display:flex;flex-direction:column;gap:8px}
.empty .disp{font-size:40px}

/* plan cards */
.sets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font:500 13px var(--mono);font-variant-numeric:tabular-nums;padding:7px 11px;border-radius:999px;background:var(--bg);color:var(--ink)}
.card.dark .chip{background:var(--ink-2);color:var(--on-ink)}
.card.dark .chip.hot{background:var(--accent);color:var(--on-ink)}

/* stepper */
.stepwrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bars i{height:5px;border-radius:3px;background:rgba(24,39,48,.15)}
.bars i.on{background:var(--accent)}
.stepwrap h2{font-size:clamp(56px,17vw,76px);margin:0}
.stepper{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:8px;background:var(--ink);color:var(--on-ink);border-radius:var(--r-lg);padding:12px}
.stepper button{height:64px;border-radius:var(--r);border:0;background:var(--ink-2);color:var(--on-ink);font:500 30px var(--mono);cursor:pointer;line-height:1;transition:transform .1s}
.stepper button:active{transform:scale(.94);background:var(--accent)}
.stepper input{width:100%;min-width:0;border:0;background:none;text-align:center;color:var(--on-ink);font-family:var(--display);font-stretch:62%;font-weight:900;font-size:96px;line-height:1;font-variant-numeric:tabular-nums;padding:0}
.stepper.small{padding:8px}
.stepper.small input{font-size:60px}
.stepper.small button{height:52px;font-size:24px}
.unitrow{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* active set */
.setcard{display:flex;flex-direction:column;gap:14px;padding:20px}
.segs{display:flex;gap:5px}
.segs i{flex:1;height:5px;border-radius:3px;background:var(--line-ink)}
.segs i.done{background:var(--accent)}
.segs i.now{background:var(--on-ink)}
.lift{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.lift .n{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:clamp(96px,30vw,128px);line-height:.82;font-variant-numeric:tabular-nums}
.lift .u{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-ink);display:block;margin-top:6px}
.lift .x{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:48px;color:var(--accent);line-height:1;padding-bottom:22px}
.hype{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:20px;text-transform:uppercase;color:var(--accent)}
.clock{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:56px;line-height:.9;font-variant-numeric:tabular-nums;color:var(--accent)}
.clock.idle{color:var(--muted-ink)}
.clock.rest{font-size:clamp(120px,40vw,168px);line-height:.85;color:var(--on-ink);transition:color .3s}
.clock.rest.late{color:var(--accent)}
.unitrow.cl{border-top:1px solid var(--line-ink);padding-top:12px;align-items:flex-end}
.setlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.setlist li{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--r-sm);background:var(--card);font:500 13px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.setlist li.now{background:var(--ink);color:var(--on-ink)}
.setlist li.done{color:var(--ink)}
.setlist li.done .t{color:var(--accent)}
.confirm{display:flex;flex-direction:column;gap:12px}
.confirm .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.confirm .btn{min-height:50px;font-size:17px}
.confirm .btn.keep{border-color:var(--on-ink);color:var(--on-ink)}
.edit{display:flex;flex-direction:column;gap:12px}

/* feedback */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:150px;padding:16px;border:0;border-radius:var(--r-lg);background:var(--card);text-align:left;cursor:pointer;transition:transform .12s ease,background .15s}
.opt:active{transform:scale(.97);background:var(--accent);color:var(--on-ink)}
.opt .sym{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:44px;line-height:.9;color:var(--accent)}
.opt:active .sym{color:var(--on-ink)}
.opt.wide{grid-column:1/-1;min-height:auto;flex-direction:row;align-items:center;background:var(--ink);color:var(--on-ink);padding:18px}
.opt.wide .arrow{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-ink);display:grid;place-items:center}
.opt.wide .arrow svg{width:20px;height:20px}
.opt b{display:block;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:21px;line-height:1;text-transform:uppercase}
.opt small{display:block;margin-top:5px;font:500 11px var(--mono);letter-spacing:.03em;opacity:.75}

/* done */
.donecard{position:relative;overflow:hidden;background:var(--accent);color:var(--on-ink);display:flex;flex-direction:column;gap:14px;padding:26px 20px 22px}
.donecard h2{font-size:clamp(84px,27vw,120px);margin:0;position:relative}
.donecard .ghostnum{position:absolute;right:-18px;bottom:-40px;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:220px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(243,245,240,.3);pointer-events:none}
.donecard p{position:relative;font:500 13px var(--mono);letter-spacing:.03em}
.donecard .chip{background:var(--ink);color:var(--on-ink);align-self:flex-start;position:relative}
.note{font:500 12px var(--mono);line-height:1.5;padding:12px 14px;border-radius:var(--r-sm);background:var(--card)}
.note.warn{background:var(--ink);color:var(--on-ink)}

/* progress */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{padding:16px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);display:flex;flex-direction:column;gap:6px;min-width:0}
.tile .label{color:var(--muted-ink)}
.tile b{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:46px;line-height:.9;font-variant-numeric:tabular-nums}
.tile b.up{color:var(--accent)}
.chartcard{position:relative;padding:16px 8px 12px}
.chartcard .top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 10px 6px}
.chartcard svg{display:block;width:100%;height:auto}
.chartcard svg text{font-family:var(--mono)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 10px 0;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .dot{width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:9px;display:inline-grid;place-items:center}
.legend .dot.hot{background:var(--accent)}
.tablecard{padding:6px 6px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font:500 13px var(--mono);font-variant-numeric:tabular-nums}
th,td{padding:11px 10px;text-align:right;white-space:nowrap}
th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
td{border-top:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
tr.latest td{color:var(--accent);font-weight:500}
table.sess td,table.sess th{padding:10px 5px;font-size:12px}
table.sess th{font-size:9.5px;letter-spacing:.06em;vertical-align:bottom}
table.sess td:last-child{padding:0}
table.sess tr.band td{background:rgba(24,39,48,.045)}
table.sess tr.wk td{border-top:1.5px solid rgba(24,39,48,.28)}
table.sess td:first-child{font-weight:500;color:var(--ink)}
table.sess td:nth-child(2){text-align:center}
table.sess th:nth-child(2){text-align:center}
table.sess .x{border:0;background:none;color:var(--muted);font:500 18px var(--mono);width:30px;height:30px;border-radius:50%;cursor:pointer;line-height:1}
table.sess .x:active{background:var(--ink);color:var(--on-ink)}
tr.delrow td{padding:4px 0}
tr.delrow .delbox{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--ink);color:var(--on-ink);border-radius:10px;padding:6px 6px 6px 12px}
tr.delrow button{border:0;background:none;color:var(--on-ink);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 10px;border-radius:8px;cursor:pointer}
tr.delrow button.yes{background:var(--accent)}
.seg{display:inline-flex;background:var(--card);border-radius:999px;padding:4px;align-self:flex-start}
.seg button{border:0;background:none;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--ink);color:var(--on-ink)}
.hist{display:flex;flex-direction:column;gap:6px}
.hist .h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:var(--r-sm);background:var(--card);font:500 13px var(--mono)}
.hist .h div{min-width:0}
.hist .h b{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:17px;text-transform:uppercase;margin-right:6px}
.hist .h button{border:0;background:none;color:var(--muted);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 8px;cursor:pointer;border-radius:8px}
.hist .h.del{background:var(--ink);color:var(--on-ink)}
.hist .h.del button{color:var(--on-ink)}
.hist .h.del button.yes{background:var(--accent)}
.sectionhead{display:flex;justify-content:space-between;align-items:baseline;padding:10px 4px 0}
.sectionhead .disp{font-size:26px}

@keyframes up{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:none}}
main > *{animation:up .32s cubic-bezier(.2,.7,.2,1) both}
main > *:nth-child(2){animation-delay:.04s} main > *:nth-child(3){animation-delay:.08s} main > *:nth-child(4){animation-delay:.12s}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- installed-app shell ---------- */
html{background:var(--bg)}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button{touch-action:manipulation;-webkit-user-select:none;user-select:none}
#hdr .back#acct{margin-left:4px}

/* sign-in + account */
.authform{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field input,textarea{width:100%;box-sizing:border-box;min-height:52px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:500 16px var(--body);padding:0 14px}
textarea{min-height:96px;padding:12px 14px;font:500 13px var(--mono);resize:vertical}
.field input:focus,textarea:focus{border-color:var(--ink);outline:none}
.authlinks{display:flex;flex-direction:column;align-items:center}
.err.ok{color:var(--ink)}
.syncline{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:22px;text-transform:uppercase;margin-top:6px}

/* edit / log a past workout */
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pillbtn{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:10px 14px;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:16px;text-transform:uppercase;cursor:pointer}
.pillbtn.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.setrows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.setrow{display:grid;grid-template-columns:48px 1fr auto 1fr 40px;align-items:center;gap:8px}
.setrow input{width:100%;min-width:0;box-sizing:border-box;height:50px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);text-align:center;font-family:var(--display);font-stretch:68%;font-weight:900;font-size:26px;font-variant-numeric:tabular-nums;padding:0 6px}
.setrow input:focus{border-color:var(--ink);outline:none}
.setrow .x{font-family:var(--display);font-weight:900;font-size:20px;color:var(--accent)}
.rmset{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);color:var(--muted);font:500 20px var(--mono);line-height:1;cursor:pointer}
.rmset:disabled{opacity:.3;cursor:default}
.rmset:active:not(:disabled){background:var(--ink);color:var(--on-ink)}
.field input[type="date"]{-webkit-appearance:none;appearance:none;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:20px;text-transform:uppercase}
.pillbtn.new{border-style:dashed;border-color:var(--muted);color:var(--muted)}
.pillbtn.new.on{border-style:solid;border-color:var(--accent);background:var(--accent);color:var(--on-ink)}

/* home, compact: hero + three menu buttons + status fit one iPhone screen */
.hero.compact{gap:12px;padding:18px 18px 16px}
.hero.compact h2{font-size:clamp(44px,13.5vw,56px)}
.hero.compact .ghostnum{font-size:170px;top:-24px;right:-10px}
.hero.compact .stats{padding-top:12px}
.hero.compact .stats b{font-size:28px}
.action{padding:15px 16px 15px 18px;border-radius:20px}
.action b{font-size:30px;white-space:nowrap}
.action small{margin-top:5px;font-size:11.5px}
.action .arrow{width:44px;height:44px}
.action .arrow svg{width:20px;height:20px}

/* celebration on the Well Done screen (only after a workout you just finished) */
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
.donecard.party{animation:pop .55s cubic-bezier(.2,1.4,.4,1) both}
.donecard.party .slam{display:inline-block;transform-origin:left bottom;animation:slam .6s cubic-bezier(.2,1.5,.4,1) both}
.donecard.party .slam.s2{animation-delay:.16s}
.donecard.party .ghostnum{animation:spinin 1s .1s cubic-bezier(.2,.9,.3,1) both}
.donecard.party::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);transform:translateX(-130%);animation:shine 1.1s .45s ease-out both}
@keyframes pop{0%{transform:scale(.9)}100%{transform:none}}
@keyframes slam{0%{transform:translateY(-45%) scale(1.6) rotate(-5deg);opacity:.25}100%{transform:none;opacity:1}}
@keyframes spinin{0%{transform:rotate(-50deg) scale(.3);opacity:.2}100%{transform:none;opacity:1}}
@keyframes shine{to{transform:translateX(130%)}}

/* ---------- dark theme: panels, warnings, glow ---------- */
/* panels: large emphasised surfaces stay dark (only chips, pills and round buttons invert to light) */
.card{border:1px solid var(--line)}
.card.dark{background:var(--panel);color:var(--ink)}
.card.dark .chip{background:var(--ink-2);color:var(--ink)}
.stepper{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.stepper button,.stepper input{color:var(--ink)}
.stepper button:active{color:var(--on-ink)}
.tile{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.opt{border:1px solid var(--line)}
.opt.wide{background:var(--panel);color:var(--ink)}
.note.warn{background:var(--panel);color:var(--ink);border:1px solid var(--heat)}
tr.delrow .delbox{background:var(--ink-2);color:var(--ink)}
tr.delrow button{color:var(--ink)}
tr.delrow button.yes{color:var(--on-ink)}
.segs i.now{background:var(--ink)}
.confirm .btn.keep{border-color:var(--ink);color:var(--ink)}
.action,.list .row,.setlist li,.addrow,.pill,.back{border:1px solid var(--line)}
.back{box-shadow:none}
.pill.dark,.pill.hot,.action.go,.setlist li.now{border-color:transparent}
table.sess tr.band td{background:rgba(255,255,255,.035)}
table.sess tr.wk td{border-top-color:rgba(255,255,255,.2)}
.bars i{background:rgba(255,255,255,.14)}
/* heat: orange for anything that warns */
.btn.danger{color:var(--heat);border-color:var(--heat)}
.err{color:var(--heat)}
.err.ok{color:var(--accent)}
.clock.rest{color:var(--ink)}
.clock.rest.late{color:var(--heat)}
/* trained days light up orange */
.day.on{background:var(--accent);color:var(--on-ink)}
.day.on span{color:rgba(18,19,21,.66)}
.day.on i{color:var(--on-ink)}
.day.today{box-shadow:inset 0 0 0 2px var(--ink)}
/* Well Done: dark on orange */
.donecard{border:0}
.donecard .ghostnum{-webkit-text-stroke:1.5px rgba(18,19,21,.22)}
.donecard .chip{background:var(--on-ink);color:var(--accent)}
/* orange glow under the main actions */
.action.go{box-shadow:0 14px 34px -16px rgba(245,93,1,.6)}
.btn.primary{box-shadow:0 12px 30px -16px rgba(245,93,1,.55)}

/* forward lean: display type in italics */
.disp,header h1,.brand,.action b,.btn,.lift .n,.lift .x,.clock,.stepper input,.stats b,.tile b,.opt .sym,.opt b,.hype,
.list .row .name,.logrow .name,.syncline,.day b,.pillbtn,.setrow input,.field input[type="date"]{font-style:italic}
.btn.ghost,.btn small{font-style:normal}
.brand i{transform:skewX(-14deg)}


/* June21: wordmark and the countdown in the home hero */
.brand em{font-style:inherit;color:var(--accent)}
.countdown{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line-ink);padding-top:11px}
.cdrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cdrow span{display:inline-flex;align-items:baseline;gap:4px}
.cdrow b{font-family:var(--display);font-stretch:68%;font-weight:900;font-style:italic;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.cdrow span:first-child b{color:var(--accent);font-size:38px}
.cdrow i{font:500 10px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-ink)}
.cdday{font-family:var(--display);font-stretch:75%;font-weight:900;font-style:italic;font-size:24px;text-transform:uppercase;color:var(--accent)}
/* make room for it so the home screen still fits one iPhone screen */
.hero.compact{gap:10px;padding:16px 18px 14px}
.hero.compact h2{font-size:clamp(38px,11.5vw,46px)}
.hero.compact .stats{padding-top:10px}
.hero.compact .stats b{font-size:24px}
.hero.compact{gap:9px;padding:15px 18px 13px}
.action{padding-block:12px}
.status{padding-top:2px}

/* hero: motto on a graphite panel, with an outlined "21" behind it */
.hero{background:var(--panel)}
.hero .ghostnum{right:-6px;top:-22px;font-size:210px;font-style:italic;letter-spacing:-.02em;-webkit-text-stroke:1.5px rgba(255,255,255,.1)}
.hero.compact .ghostnum{font-size:150px;top:-16px;right:-4px}
.motto2{position:relative;font-family:var(--display);font-stretch:75%;font-weight:800;font-style:italic;font-size:22px;line-height:1;text-transform:uppercase;color:var(--ink);opacity:.92}
.hero.compact .motto2{font-size:18px}
.hero:not(.compact) h2{font-size:clamp(50px,16vw,72px)}

/* rest target + beep */
.bars{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column}
.unitrow{flex-wrap:wrap}
.snd{flex:none;border:1px solid var(--line-ink);background:transparent;color:var(--muted-ink);border-radius:999px;padding:7px 11px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.snd[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.sndhint{font:500 11px var(--mono);line-height:1.5;color:var(--muted-ink)}
/* time's up: the rest card flashes red three times (works with sound off or the phone on silent) */
.setcard.timeup{animation:timeup 1.6s ease-out both}
@keyframes timeup{
  0%,36%,72%{box-shadow:0 0 0 3px var(--heat),0 0 44px rgba(255,69,58,.55);background:#3A2224}
  18%,54%,100%{box-shadow:0 0 0 0 transparent,0 0 0 transparent;background:var(--panel)}
}


/* =====================================================================
   Acid green on charcoal. Everything below restyles the app;
   no screen or feature is removed.
   ===================================================================== */
/* type: bold geometric sans, sentence case */
.disp,header h1,.brand,.action b,.btn,.lift .n,.lift .x,.clock,.stepper input,.stats b,.tile b,.opt .sym,.opt b,.hype,
.list .row .name,.logrow .name,.syncline,.day b,.pillbtn,.setrow input,.field input[type="date"],.cdday,.motto2,
.sectionhead .disp,.wkhead .disp,.empty .disp,.stepwrap h2,.donecard h2,.hero h2{
  font-family:var(--display);font-style:normal;font-stretch:normal;text-transform:none;letter-spacing:-.02em;font-weight:800}
.disp{line-height:1.05}
.pill,.status,.dayhead,.btn.ghost,.snd,th,.legend,.stats span,.lift .u,.list .row .meta,.logrow .meta,
.action small,.opt small,.btn small,.restnote,.sndhint,.note,.donecard p,.day span,.setlist li,.chip,.err{
  font-family:var(--body);text-transform:none;letter-spacing:0}
/* micro labels stay in tracked capitals: the sporty detail */
.label{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.label.hot,.card.dark .label.hot{color:var(--accent)}
.card.dark .label{color:var(--muted)}
.dayhead{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pill,.status,.legend,.snd,.btn.ghost{font-size:13px;font-weight:700}
th{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.stats span,.lift .u{font-size:12.5px;font-weight:700;font-style:normal;color:var(--muted)}

/* header */
header{background:var(--bg)}
header h1{font-size:22px;letter-spacing:-.02em}
.brand{font-size:22px;gap:9px;letter-spacing:-.03em;font-weight:900}
.brand em{font-style:normal;color:var(--accent)}
.brand i{width:15px;height:16px;border-radius:0;background:none;transform:none;display:block;position:relative;overflow:hidden}
.brand i::after{content:"";position:absolute;left:0;top:0;width:3.4px;height:16px;border-radius:2px;background:var(--accent);box-shadow:5.8px 6px 0 var(--accent),11.6px 2.5px 0 var(--accent)}
.back{background:var(--card);border:0;border-radius:14px;box-shadow:none;color:var(--ink)}
.wknav{background:var(--ink-2);border:0;border-radius:12px;color:var(--ink)}
.pill{background:var(--card);border:0;color:var(--muted);box-shadow:none}
.pill.dark{background:var(--ink-2);color:var(--ink)}
.pill.hot{background:var(--accent);color:var(--on-ink)}

/* buttons: full pills; green for the forward action */
.btn{min-height:58px;border-radius:999px;border:0;background:var(--ink-2);color:var(--ink);font-size:17px;letter-spacing:-.01em;box-shadow:none}
.btn.primary{background:var(--accent);color:var(--on-ink);box-shadow:0 14px 34px -18px rgba(206,255,0,.7)}
.btn.dark{background:var(--ink-2);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.danger{background:rgba(255,77,0,.14);color:var(--heat)}
.btn.ghost.danger{background:transparent}
.btn.two{min-height:66px}
.btn.two::after{display:none}
.btn small{font-size:12.5px;font-weight:600;opacity:.72}
.addrow .btn{border-radius:999px;background:var(--accent);color:var(--on-ink)}
.confirm .btn.keep{background:var(--ink-2);color:var(--ink)}
.confirm .btn.primary{box-shadow:none}

/* surfaces: rounded charcoal cards */
.card,.card.dark,.action,.list .row,.setlist li,.addrow,.opt,.opt.wide,.tile,.stepper,.note{
  background:var(--card);border:0;box-shadow:none;color:var(--ink)}
.card,.action,.opt,.tile,.stepper{border-radius:var(--r-lg)}
.list .row,.setlist li,.addrow{border-radius:var(--r)}
.note.warn{box-shadow:inset 0 0 0 1.5px var(--heat)}
.logrow,.day,.chip,.card.dark .chip,.pillbtn,.rmset,.field input,textarea,.setrow input{background:var(--ink-2);border:0;box-shadow:none;color:var(--ink)}
.card.dark .chip.hot{background:var(--accent);color:var(--on-ink)}
.field input:focus,textarea:focus,.setrow input:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.seg{background:var(--card);border:0;box-shadow:none}
.seg button.on{background:var(--accent);color:var(--on-ink)}
.chip{font-size:13px;font-weight:700}

/* small square-ish controls with a chevron, like the reference */
.action .arrow,.list .row .go,.logrow .go,.opt.wide .arrow{background:var(--ink-2);border:0;border-radius:12px;color:var(--ink)}
.logrow .go{background:#2E2E2E}

/* home */
.hero,.card.dark.hero{background:var(--card);border:0;border-radius:var(--r-lg);padding:20px;overflow:hidden;gap:14px}
.hero .ghostnum,.hero.compact .ghostnum,.donecard .ghostnum{display:none}
.hero h2,.hero:not(.compact) h2{font-size:clamp(30px,8.8vw,38px);color:var(--ink);text-shadow:none;letter-spacing:-.03em}
.hero h2 em{font-style:normal;color:var(--accent)}
.hero.compact{padding:18px 18px 16px;gap:14px}
.hero.compact h2{margin-top:8px;font-size:clamp(25px,7.2vw,29px);line-height:1.06}
.motto2,.hero.compact .motto2{margin-top:7px;font-size:15px;font-weight:600;color:var(--muted);opacity:1;letter-spacing:0}
.herotop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ringcol{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
.ring{position:relative;flex:none;width:112px;height:112px}
.ring svg{display:block;width:100%;height:100%;overflow:visible}
.ring .trk{stroke:var(--ink-2);stroke-width:9}
.ring .arc{stroke:var(--accent);stroke-width:9;filter:drop-shadow(0 0 5px rgba(206,255,0,.55))}
.ring .trk2{stroke:var(--ink-2);stroke-width:4}
.ring .arc2{stroke:var(--ink);stroke-width:4}
.ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.ringtxt b{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ringtxt i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.ringtime{display:flex;align-items:baseline;justify-content:center;font-variant-numeric:tabular-nums;margin-top:3px}
.ringtime b{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.ringtime i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);margin:0 7px 0 1.5px}
.ringtime i:last-child{margin-right:0}
.ringcap{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1}
.stats{border-top-color:var(--line)}
.stats div + div{border-left-color:var(--line)}
.stats b,.hero.compact .stats b{font-size:21px}
.action{padding:15px 15px 15px 22px}
.action b{font-size:21px;line-height:1.1}
.action small{font-size:13px;font-weight:600;color:var(--muted);opacity:1;margin-top:2px}
.action.go{background:var(--accent);border:0;color:var(--on-ink);box-shadow:0 18px 40px -22px rgba(206,255,0,.75)}
.action.go small{color:rgba(20,23,12,.66)}
.action.go .arrow{width:48px;height:48px;border-radius:50%;background:var(--on-ink);color:var(--accent)}
.recent{padding:16px;display:flex;flex-direction:column;gap:10px}
.cardtitle{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em}
.seeall{border:0;background:none;color:var(--accent);font:700 13px var(--body);padding:6px 2px;cursor:pointer}
.logrow .badge{flex:none;width:36px;height:36px;border-radius:12px;background:var(--accent);color:var(--on-ink);display:grid;place-items:center}
.logrow .badge svg{width:18px;height:18px}
.logrow .grow{flex:1;min-width:0}
.logrow .when{flex:none;font:700 12.5px var(--body);color:var(--muted)}
.recent .logrow{justify-content:flex-start;padding:10px 12px;border-radius:16px}
.restnote{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--muted)}
.status i{background:var(--accent)}

/* bottom tab bar */
.app.has-nav main{padding-bottom:104px}
#nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:5;width:100%;max-width:520px;box-sizing:border-box;
  display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(14,14,14,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-radius:26px 26px 0 0}
#nav button{border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;cursor:pointer;font:700 11px var(--body)}
#nav button svg{width:22px;height:22px}
#nav button.on{color:var(--accent)}
#nav .plus{justify-self:center;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--on-ink);margin-top:-26px;
  box-shadow:0 0 0 6px var(--bg),0 14px 30px -10px rgba(206,255,0,.7);justify-content:center;transition:transform .12s ease}
#nav .plus svg{width:26px;height:26px}
#nav .plus:active{transform:scale(.94)}

/* lists */
.list .row .name{font-size:19px}
.list .row .meta,.logrow .meta{font-size:12.5px;font-weight:600;color:var(--muted)}
.logrow .name{font-size:16px}
.empty .disp{font-size:28px}
.pillbtn{font-size:14px}
.pillbtn.new{box-shadow:inset 0 0 0 1.5px var(--line-strong);background:transparent;color:var(--muted)}
.pillbtn.on,.pillbtn.new.on{background:var(--accent);color:var(--on-ink);box-shadow:none}
.setrow input{font-size:19px}
.setrow .x{color:var(--muted);font-weight:600}
.field input[type="date"]{font-size:17px}

/* workout: the numbers are the screen */
.bars i{background:var(--ink-2)}
.bars i.on{background:var(--accent)}
.stepwrap h2{font-size:clamp(32px,9.5vw,42px);letter-spacing:-.03em}
.stepper button{background:var(--ink-2);border:0;border-radius:50%;width:56px;height:56px;justify-self:center;color:var(--ink);font-weight:500}
.stepper button:active{background:var(--accent);color:var(--on-ink)}
.stepper input{font-size:72px;font-weight:900;letter-spacing:-.05em;color:var(--accent)}
.stepper.small button{width:44px;height:44px}
.stepper.small input{font-size:42px;color:var(--ink)}
.segs i{background:var(--ink-2)}
.segs i.done{background:var(--accent)}
.segs i.now{background:var(--ink)}
.lift .n{font-size:clamp(68px,23vw,96px);font-weight:900;line-height:.95;letter-spacing:-.06em;color:var(--accent)}
.lift .x{font-size:28px;font-weight:600;color:var(--muted);padding-bottom:18px}
.hype{font-size:13.5px;font-weight:800;letter-spacing:0;color:var(--ink)}
.clock{font-size:40px;font-weight:900;letter-spacing:-.04em;color:var(--ink)}
.clock.idle{color:var(--muted)}
.clock.rest{font-size:clamp(88px,29vw,120px);font-weight:900;line-height:.95;letter-spacing:-.06em;color:var(--ink)}
.clock.rest.late{color:var(--heat)}
.unitrow.cl{border-top-color:var(--line)}
.setlist li{font-size:14px;font-weight:700;color:var(--muted)}
.setlist li.now{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.setlist li.done{color:var(--ink)}
.setlist li.done .t{color:var(--accent)}
.snd{border-color:var(--line-strong);color:var(--muted)}
.snd[aria-pressed="true"]{color:var(--on-ink);background:var(--accent);border-color:var(--accent)}
.opt .sym{font-size:34px;font-weight:900;color:var(--accent);letter-spacing:-.04em}
.opt b{font-size:17px}
.opt small{font-size:12.5px;font-weight:600;color:var(--muted);opacity:1}
.opt:active{background:var(--accent);color:var(--on-ink)}
.opt:active .sym,.opt:active small{color:var(--on-ink)}
.opt.wide .arrow{background:var(--accent);color:var(--on-ink);border-radius:50%}
@keyframes timeup{
  0%,36%,72%{box-shadow:0 0 0 3px var(--heat),0 0 44px rgba(255,77,0,.5);background:#3A1E10}
  18%,54%,100%{box-shadow:0 0 0 0 transparent;background:var(--card)}
}
/* a green flash when the workout starts */
.getready{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--accent);color:var(--on-ink);pointer-events:none;animation:getready 1.1s cubic-bezier(.6,0,.3,1) both}
.getready span{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-.03em;animation:getreadytxt 1.1s ease-out both}
@keyframes getready{0%{clip-path:circle(0% at 50% 100%)}28%{clip-path:circle(150% at 50% 100%)}72%{clip-path:circle(150% at 50% 100%);opacity:1}100%{clip-path:circle(150% at 50% 100%);opacity:0}}
@keyframes getreadytxt{0%{transform:scale(.7);opacity:0}30%{transform:scale(1);opacity:1}100%{transform:scale(1.08);opacity:1}}

/* well done: the full green moment */
.donecard{background:var(--accent);border:0;color:var(--on-ink);box-shadow:none;align-items:flex-start}
.donecard h2{font-size:clamp(48px,15vw,64px);font-weight:900;letter-spacing:-.05em;line-height:.98}
.donecard p{font-size:14.5px;font-weight:700;opacity:.82}
.donecard .chip{background:var(--on-ink);border:0;color:var(--accent)}
.checkring{width:74px;height:74px;border-radius:50%;background:var(--on-ink);color:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 9px rgba(20,23,12,.16)}
.checkring svg{width:36px;height:36px}
.donecard.party .checkring{animation:spinin .9s .05s cubic-bezier(.2,.9,.3,1) both}
.donecard.party::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%)}

/* progress + history */
.tile b{font-size:36px;font-weight:900;letter-spacing:-.04em;color:var(--ink)}
.tile b.up{color:var(--accent)}
.tile .label{color:var(--muted)}
.sectionhead .disp{font-size:20px}
.wkhead .disp{font-size:21px}
.day span{font-size:11.5px;font-weight:700;color:var(--muted)}
.day b{font-size:16px}
.day.on{background:var(--accent);color:var(--on-ink)}
.day.on span{color:rgba(20,23,12,.62)}
.day.on i{color:var(--on-ink)}
.day.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.legend .dot{background:var(--ink);color:var(--on-ink)}
.legend .dot.hot{background:var(--accent)}
.syncline{font-size:19px}
table{font-family:var(--body);font-weight:700}
tr.latest td{color:var(--accent);font-weight:800}
table.sess tr.band td{background:rgba(255,255,255,.03)}
table.sess tr.wk td{border-top-color:rgba(255,255,255,.16)}
table.sess td:first-child{color:var(--ink)}
table.sess .x:active{background:var(--accent);color:var(--on-ink)}
tr.delrow .delbox{background:var(--ink-2);color:var(--ink)}
tr.delrow button{color:var(--ink)}
tr.delrow button.yes{background:var(--heat);color:#fff}
.err{font-size:13px;font-weight:700;color:var(--heat)}
.err.ok{color:var(--accent)}
[hidden]{display:none!important}
.app.has-nav main{padding-bottom:98px}

/* Recent: date in the green badge, change versus last time on the right */
.logrow .badge.date{width:42px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1}
.badge.date b{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.03em;line-height:1}
.badge.date i{font-style:normal;font:800 9.5px var(--body);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.deltas{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.deltas b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.deltas i{font-style:normal;font:700 11.5px var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.deltas .up{color:var(--accent)}
.deltas .down{color:var(--heat)}

/* Account: rest sound picker, volume and test */
.soundcard{display:flex;flex-direction:column;gap:12px}
.sndlist{display:flex;flex-direction:column;gap:6px}
.sndopt{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:16px;background:var(--ink-2);color:var(--ink);text-align:left;cursor:pointer;transition:transform .12s ease}
.sndopt:active{transform:scale(.985)}
.sndopt .grow{flex:1;min-width:0}
.sndopt .name{display:block;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.sndopt .meta{display:block;margin-top:2px;font:600 12.5px var(--body);color:var(--muted)}
.sndopt .radio{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-strong)}
.sndopt .playico{flex:none;width:32px;height:32px;border-radius:10px;background:#2E2E2E;display:grid;place-items:center;color:var(--ink)}
.sndopt .playico svg{width:15px;height:15px}
.sndopt.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.sndopt.on .radio{box-shadow:inset 0 0 0 6px var(--accent)}
.sndopt.on .playico{background:var(--accent);color:var(--on-ink)}
.volrow{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.volnum{font:800 14px var(--body);font-variant-numeric:tabular-nums}
input[type="range"]{width:100%;height:32px;margin:0;accent-color:var(--accent);background:transparent}
.pill .sep{font-style:normal;opacity:.45;margin:0 3px}

/* motto as a campaign line: outlined "Progress", solid "has a", and "date." on a slanted green block */
.hero h2.motto,.hero.compact h2.motto,.hero:not(.compact) h2.motto{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;font-size:clamp(25px,7.3vw,29px);color:var(--ink)}
.hero:not(.compact) h2.motto{font-size:clamp(34px,10.5vw,44px);gap:7px}
.motto .m1{color:transparent;-webkit-text-stroke:1.4px var(--ink);padding-right:.08em}
.motto .m2{display:flex;align-items:center;gap:.22em;white-space:nowrap}
.motto .m2 b{display:inline-block;font-weight:900;background:var(--accent);color:var(--on-ink);padding:.12em .3em .08em .22em;border-radius:.2em;transform:skewX(-9deg);box-shadow:0 8px 22px -10px rgba(206,255,0,.8)}
.hero .motto2,.hero.compact .motto2{display:flex;align-items:center;gap:9px;margin-top:13px;font-family:var(--body);font-size:10.5px;font-weight:800;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:1}
.hero:not(.compact) .motto2{font-size:12px;margin-top:16px}
.motto2 i{flex:none;width:20px;height:3px;border-radius:2px;background:var(--accent)}
/* "This week" heads the three stats */
.statslabel{border-top:1px solid var(--line);padding-top:13px;margin-bottom:-4px}
.hero .stats,.hero.compact .stats{border-top:0;padding-top:0}

/* rest time is up: the card flips to green (green means go), with a short pulse instead of a red flash */
.setcard.over{background:var(--accent);color:var(--on-ink);box-shadow:0 22px 54px -26px rgba(206,255,0,.85);transition:background .25s ease,color .25s ease}
.setcard.over .label{color:rgba(20,23,12,.68)}
.setcard.over .label.hot{color:var(--on-ink)}
.setcard.over .clock.rest,.setcard.over .clock.rest.late{color:var(--on-ink)}
.setcard.over .hype{color:var(--on-ink)}
.setcard.over .segs i{background:rgba(20,23,12,.2)}
.setcard.over .segs i.done{background:var(--on-ink)}
.setcard.over .snd{border-color:rgba(20,23,12,.45);background:transparent;color:var(--on-ink)}
.setcard.over .snd[aria-pressed="true"]{background:var(--on-ink);border-color:var(--on-ink);color:var(--accent)}
.setcard.over .sndhint{color:rgba(20,23,12,.72)}
.setcard.over .confirm .btn.primary{background:var(--on-ink);color:var(--accent);box-shadow:none}
.setcard.over .confirm .btn.keep{background:rgba(20,23,12,.14);color:var(--on-ink)}
.clock.rest.late{color:var(--ink)}
@keyframes timeup{
  0%{transform:scale(1);filter:none}
  12%{transform:scale(1.04);filter:brightness(1.18)}
  26%{transform:scale(1);filter:none}
  44%{transform:scale(1.03);filter:brightness(1.12)}
  58%{transform:scale(1);filter:none}
  76%{transform:scale(1.02);filter:brightness(1.08)}
  100%{transform:none;filter:none}
}

/* equipment: the first setup question, the bar + plates line during a set, and the picker in the History editor */
.stepwrap.top{justify-content:flex-start;padding-top:8px}
.eqlist{display:flex;flex-direction:column;gap:8px}
.eqlist .sndopt{padding:14px 14px;background:var(--card);border-radius:var(--r)}
.eqline{font:700 13px var(--body);color:var(--muted);margin-top:-4px}
.setcard.over .eqline{color:rgba(20,23,12,.7)}
.eqnote{font-size:13px;margin-top:10px}

/* History: merge two sessions of the same lift from one day */
.mergebtn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--accent);font:700 13px var(--body);text-align:left;cursor:pointer}
.mergebtn svg{flex:none;width:16px;height:16px}
.mergebox{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--ink-2);font:700 13px var(--body)}
.mergebox span:first-child{min-width:0}
.mergebox span:last-child{flex:none;display:flex;gap:4px}
.mergebox button{border:0;border-radius:999px;background:transparent;color:var(--ink);font:800 12.5px var(--body);padding:9px 12px;cursor:pointer}
.mergebox button.yes{background:var(--accent);color:var(--on-ink)}

/* Account: add to Home Screen */
.installcard{display:flex;flex-direction:column;gap:12px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.steps li{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:16px;background:var(--ink-2);font:600 14px/1.4 var(--body)}
.steps b{font-weight:800}
.stepno{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-ink);display:grid;place-items:center;font:900 13px var(--display)}
.glyph{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#2E2E2E;vertical-align:-5px;margin:0 2px}
.glyph svg{width:14px;height:14px}
.installed{display:flex;align-items:center;gap:10px;font:700 14px var(--body)}
.installed .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-ink);display:grid;place-items:center}
.installed .tick svg{width:15px;height:15px}

/* home card: this week on the left, growth against last week on the right */
.wkgrid{display:grid;grid-template-columns:1fr 1.15fr;border-top:1px solid var(--line);padding-top:13px}
.wkgroup{min-width:0;display:flex;flex-direction:column;gap:8px}
.wkgroup + .wkgroup{border-left:1px solid var(--line);padding-left:14px}
.wkgroup .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .stats.two,.hero.compact .stats.two{grid-template-columns:1fr 1fr;border-top:0;padding-top:0}
.stats.two div{padding-inline:0}
.stats.two div + div{border-left:0;padding-left:10px}
.stats b small{font-size:.52em;font-weight:800;margin-left:2px;letter-spacing:0;color:var(--muted)}
.stats b.up{color:var(--accent)}
.stats b.down{color:var(--heat)}
.stats b.up small,.stats b.down small{color:inherit;opacity:.75}
.growthnote{font:600 11.5px/1.3 var(--body);color:var(--muted);margin-top:-2px}
.wkgroup .label{font-size:10.5px;letter-spacing:.06em}
@media (max-width:380px){.wkgroup .label{font-size:9.8px;letter-spacing:.04em}.wkgroup + .wkgroup{padding-left:11px}}

/* home: the week in one compact row. Tick = trained, empty ring = not trained, outlined = today, faded = still to come */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;width:100%;border:0;border-radius:var(--r);background:var(--card);padding:9px 8px;cursor:pointer;color:var(--ink)}
.wd{display:flex;flex-direction:column;align-items:center;gap:5px}
.wd i{font:800 10.5px var(--body);font-style:normal;letter-spacing:.06em;color:var(--muted)}
.wd b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.wd b svg{width:14px;height:14px}
.wd.on b{background:var(--accent);color:var(--on-ink);box-shadow:none}
.wd.future b{box-shadow:inset 0 0 0 1.5px var(--line)}
.wd.future i{opacity:.55}
.wd.today i{color:var(--ink)}
.wd.today b{box-shadow:inset 0 0 0 2px var(--ink)}
.wd.today.on b{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
/* keep the home screen on one iPhone screen now that the week row is there */
.weekstrip{padding:7px 8px}
.wd{gap:4px}
.wd b{width:24px;height:24px}
.app.has-nav main{gap:10px}
.hero.compact{padding:16px 18px 14px;gap:12px}
.recent{padding:13px 14px;gap:8px}
.recent .logrow{padding:8px 12px}
.recent .log{gap:5px}
.status{padding-top:0}

/* =====================================================================
   Restraint: Volt only where you act or win. Everything below turns
   decorative or merely "selected" uses of the accent to white.
   ===================================================================== */
/* big numbers are white: the screen is the number, it doesn't need colour */
.lift .n,.stepper input{color:var(--ink)}
/* headline: "date." sits on a white block; the dash is white */
.motto .m2 b{background:var(--ink);color:var(--on-ink);box-shadow:none}
.motto2 i{background:var(--ink)}
/* labels and small links */
.label.hot,.card.dark .label.hot,.dayhead,.seeall,.mergebtn,.err.ok{color:var(--ink)}
.setcard.over .label.hot{color:var(--on-ink)}
/* date badges in Recent are neutral */
.logrow .badge{background:var(--ink-2);color:var(--ink)}
/* selected states are white, not Volt */
.pillbtn.on,.pillbtn.new.on,.seg button.on,.card.dark .chip.hot,.snd[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.sndopt.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sndopt.on .radio{box-shadow:inset 0 0 0 6px var(--ink)}
.sndopt.on .playico{background:var(--ink);color:var(--on-ink)}
.setlist li.now{box-shadow:inset 0 0 0 1.5px var(--ink)}
.field input:focus,textarea:focus,.setrow input:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
#nav button.on{color:var(--ink)}
.bars i.on{background:var(--ink)}
/* feedback options and step numbers */
.opt .sym{color:var(--ink)}
.opt.wide .arrow{background:var(--ink-2);color:var(--ink);border-radius:12px}
.stepno{background:var(--ink);color:var(--on-ink)}
tr.latest td{color:var(--ink)}
/* the time's-up card keeps its Volt; its inner toggle follows the dark-on-Volt scheme */
.setcard.over .snd[aria-pressed="true"]{background:var(--on-ink);border-color:var(--on-ink);color:var(--accent)}