/* The Forest palette and the measures of docs/prototype/fitness-forest.html. One accent colour, the deep green
   (--acc on --accbg), spent only on the "repeat set" chip and a form's primary action; everything logged is ink. */
:root{--bg:#f2f5f1;--card:#fff;--ink:#14201a;--mute:#657068;--line:#e1e7e0;--acc:#1a7445;--accbg:#e2f2e8;--edge:#c9d2c8;--r:4px;color-scheme:light}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{font:15px/1.4 -apple-system,"Segoe UI",Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* 16px: below that, iOS zooms the page when a field is focused */
input{font:inherit;font-size:16px;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[x-cloak]{display:none!important}
.pending{visibility:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* one column: the phone's width, centred on anything wider. The space under it is the toast's */
.wrap{max-width:430px;margin:0 auto;padding:22px 16px 96px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}
h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
/* the date between its two arrows: a line of text, so it sits on the title's baseline; the arrows reach well past
   their glyph for a thumb, without moving anything */
.days{display:flex;align-items:baseline;margin-right:-14px;color:var(--mute);font-size:13px;white-space:nowrap}
.days span{min-width:74px;text-align:center}
.days button{padding:14px;margin:-14px 0;line-height:1}
.days svg{display:inline-block;width:7px;height:10.5px;vertical-align:-1px}
.days button:disabled{opacity:.3;cursor:default}

.meters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.meters.open{margin-bottom:12px}
.meter{display:block;min-width:0;text-align:left}
.meter b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.meter small{color:var(--mute);font-size:13px}
.meter i{display:block;height:5px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.meter u{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .25s}

h2{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 4px 8px;display:flex;justify-content:space-between}
.card{background:var(--card);border-radius:var(--r);margin-bottom:24px;overflow:hidden}
.row{padding:13px 14px;border-bottom:1px solid var(--line)}
.rows .row:last-child,.row.adder{border-bottom:0}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.name{font-weight:600;min-width:0;overflow-wrap:anywhere}      /* a long name wraps in its column; what's beside it stays whole */
.side{color:var(--mute);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* a food entry is one button, as wide and tall as its row */
.row.tap{padding:0}
.row.tap>.top{width:100%;padding:13px 14px;text-align:left}
.row.tap>.form{margin:0;padding:13px 14px}
.row.saving,.chip.saving{opacity:.55}

.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.chip{height:36px;padding:0 12px;border-radius:var(--r);font-size:14px;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .08s}
.chip:active{transform:scale(.96)}
.chip.done{background:var(--bg)}
.chip.done[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip.add{background:var(--accbg);color:var(--acc);font-weight:600}
.drop{margin-left:auto;height:36px;padding:0 4px;color:var(--mute);font-size:13px}
.addrow{display:block;width:100%;text-align:left;padding:14px;color:var(--mute);min-height:48px}
.quick{display:flex;gap:6px;overflow-x:auto;padding:0 14px 14px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick .chip{background:var(--bg);flex:none;max-width:none}
/* a pointer has no thumb to scroll the strip with: there, the quick foods wrap */
@media (hover:hover){.quick{flex-wrap:wrap}}

/* forms — the targets, a set, a food, a new exercise: fields are white and outlined, the one action green */
.form{display:grid;gap:10px;margin-top:12px}
.card.form{margin-top:0;padding:14px}
.row.form{margin-top:0}
.addrow[aria-expanded=true]~.adder{padding-top:0}
.form .chips{margin-top:0}
.hint{color:var(--mute);font-size:14px}
.form input,.auth input:not([type=checkbox]){height:44px;min-width:0;width:100%;padding:0 12px;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);outline:0}
.form input:focus,.auth input:not([type=checkbox]):focus,.unit:focus-within{border-color:var(--ink)}
.form input::placeholder{color:var(--mute)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.targets .pair{gap:12px}    /* each target under its meter */
.unit{display:flex;align-items:center;gap:6px;height:44px;min-width:0;padding:0 12px;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);cursor:text}
.unit input{flex:1;height:100%;padding:0;border:0;border-radius:0;background:none;font-variant-numeric:tabular-nums}
.unit span{flex:none;color:var(--mute);font-size:13px;white-space:nowrap}
.namer{display:flex;gap:8px;align-items:center}
.stepper{display:flex;align-items:center;gap:8px}
.lbl{flex:1;min-width:0;font-size:14px}
.lbl small{color:var(--mute);font-size:13px}
.stepper button{flex:none;width:44px;height:44px;border-radius:var(--r);background:var(--bg);font-size:20px;line-height:1}
.stepper button:active{transform:scale(.94)}
.stepper input{flex:none;width:72px;padding:0 4px;text-align:center;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.acts{display:flex;align-items:center;gap:4px;min-height:40px}
.sp{flex:1;min-width:0}
.btn{flex:none;height:40px;padding:0 18px;border-radius:var(--r);background:var(--acc);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .08s,opacity .15s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default}
.quiet{flex:none;height:40px;padding:0 12px;border-radius:var(--r);color:var(--mute);font-size:14px}
.quiet.lead{margin-left:-12px}      /* its text flush with the fields above it */

/* the rows on their way: a quiet ring where they go. It fades in only once the wait is noticeable, so a quick answer
   never shows it */
.hold{display:flex;justify-content:center;align-items:center;min-height:118px}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--mute);animation:spin .9s linear infinite,fade .3s .18s both}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes fade{from{opacity:0}}

.who{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:13px;color:var(--mute)}
.who button,.who a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* an exercise's name on the day: a way to its page, quietly — ink, like the name it is */
a.name{color:inherit;text-decoration:none}
a.name[href]:hover{text-decoration:underline;text-underline-offset:3px}

/* Exercises: the list, and one exercise — its chart in ink and grey (the green stays the day's), its sessions */
.back{display:inline-flex;align-items:center;gap:7px;padding:12px 16px 12px 0;margin:-12px 0 2px;color:var(--mute);font-size:13px;text-decoration:none}
.back svg{width:7px;height:10.5px}
header>.side{flex:none}
ul.rows,.list{list-style:none;padding:0}
.list li+li{border-top:1px solid var(--line)}
.list .row{display:block;border-bottom:0;color:inherit;text-decoration:none}
.list small,.hint.note{display:block;margin-top:2px;color:var(--mute);font-size:13px}
.hint a{color:var(--ink);text-underline-offset:3px}
span.chip{display:inline-flex;align-items:center}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
/* the day picked (the latest, untapped) over the chart: its date and the range on one line, its numbers under */
.readout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2px 12px;padding:12px 14px 2px}
.readout .on{grid-column:1/-1;color:var(--mute);font-size:13px}
/* the view and the range on a row of their own, the date under them; with neither shown, the date leads */
.views{grid-row:1;grid-column:1;display:flex;gap:2px;margin-left:-6px}
.ranges{grid-row:1;grid-column:2;justify-self:end;display:flex;gap:2px;margin-right:-6px}
.views button,.ranges button{height:32px;padding:0 9px;border-radius:var(--r);color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.views button[aria-pressed=true],.ranges button[aria-pressed=true]{background:var(--bg);color:var(--ink);font-weight:600}
.stat{min-width:0}
.stat b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat>small{display:block;color:var(--mute);font-size:13px;white-space:nowrap}
.stat b small{color:var(--mute);font-size:13px;font-weight:400}
.key{display:inline-block;width:14px;margin-right:6px;vertical-align:middle;border-top:2px solid var(--ink)}
.key.top{border-top:1.5px dashed var(--mute)}
.chart{padding:4px 0 6px}
.chart:focus-visible{outline-offset:-2px}
.chart svg{display:block;width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:crosshair}
.chart text{fill:var(--mute);font-size:11px;font-variant-numeric:tabular-nums}
.chart .grid{stroke:var(--line)}
.chart .guide{stroke:var(--edge)}
.chart .line{fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .line.max,.chart .line.reps,.chart .line.vol{stroke:var(--ink);stroke-width:2}
.chart .line.top{stroke:var(--mute);stroke-width:1.5;stroke-dasharray:4 3}
.chart .dot.max,.chart .dot.reps,.chart .dot.vol{fill:var(--ink)}
.chart .dot.top{fill:var(--card);stroke:var(--mute);stroke-width:1.5}
.chart .dot.on{stroke:var(--card);stroke-width:2}
.chart .dot.top.on{fill:var(--mute)}
.progress .hint.note{padding:0 14px 12px}
.card>p.row{border-bottom:0}

/* Connect Claude, under the account line: the command shown once, in type to copy, and the tokens there are */
.connect{margin-top:14px}
.made{display:grid;gap:10px}
.cmd{display:block;padding:10px 12px;border-radius:var(--r);background:var(--bg);font:13px/1.5 ui-monospace,Consolas,monospace;overflow-wrap:anywhere;user-select:all}
.connect .hint code{font:12px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.tokens{display:grid;gap:6px}
.tokens ul{list-style:none;padding:0}
.tokens li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.tokens .what{flex:1;min-width:0}
.tokens small{display:block;color:var(--mute);font-size:13px}
.tokens .quiet{margin-right:-12px}      /* its text flush with the card's edge, as .lead on the other side */

/* centred by its margins, not by left:50% — that would leave it half the screen to fit its text in */
.toast{position:fixed;left:16px;right:16px;bottom:24px;margin:0 auto;width:fit-content;max-width:398px;transform:translateY(20px);opacity:0;display:flex;align-items:center;gap:14px;overflow:hidden;background:var(--ink);color:var(--bg);padding:9px 9px 9px 16px;border-radius:var(--r);font-size:14px;transition:all .25s;pointer-events:none;z-index:20}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast .msg{display:flex;align-items:baseline;gap:8px;min-width:0;padding:4px 7px 4px 0}
.toast .msg b{font-weight:600}
.toast .what{opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.toast button{flex:none;display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:3px;font-weight:700;color:#fff}
.toast kbd{font:600 11px/1 ui-monospace,monospace;padding:2px 5px;border-radius:4px;border:1px solid rgba(255,255,255,.35)}
.toast .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.4);transform-origin:left;animation:countdown var(--ms) linear forwards}
.toast.held .bar{animation-play-state:paused}
.toast :focus-visible{outline-color:#fff}
@keyframes countdown{to{transform:scaleX(0)}}
@media (hover:none){.toast kbd{display:none}}

/* Log in, Create account, and the page for an API that can't be reached */
.auth{max-width:380px;margin:0 auto;padding:56px 16px 80px}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:26px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.brand svg{width:18px;height:18px}
.sub{margin-top:4px;color:var(--mute)}
.auth .card{margin:24px 0 0;padding:0;background:none;border-radius:0;overflow:visible}    /* flat: the form sits on the page, no box around it */
.field{display:block;margin-bottom:14px}
.field span{display:block;margin-bottom:5px;font-size:13px;font-weight:600;color:var(--mute)}
.field .err{display:block;margin-top:5px;font-size:13px;font-style:normal;font-weight:600}
.check{display:flex;align-items:center;gap:8px;margin:4px 0 18px;font-size:14px;color:var(--mute)}
.check input{width:16px;height:16px;accent-color:var(--acc)}
.auth .btn{width:100%;height:48px;margin-top:4px;font-size:15px}
.auth input:not([type=checkbox]){height:48px}
.auth h1{font-size:28px;letter-spacing:-.02em}
.auth .alt{margin-top:18px;font-size:14px;color:var(--mute)}
.auth .alt a{color:var(--ink);font-weight:600;text-underline-offset:3px}

@media (min-width:600px){.wrap{padding-top:48px}.auth{padding-top:96px}}
/* last, so it beats every transition declared above */
@media (prefers-reduced-motion:reduce){
  .meter u,.chip,.btn,.toast{transition:none}
  .spin{animation:fade .3s .18s both}
}