/* CalmFit app (D51). Mobile-first, system fonts, light + dark (gyms are dim). Tap targets ≥ 48 px. */
:root {
  --green: #166534; --green-2: #15803d; --soft: #dcfce7; --ink: #18181b; --muted: #52525b;
  --bg: #f4f4f5; --card: #ffffff; --line: #e4e4e7; --warn: #b45309; --err: #b91c1c; --on-green: #ffffff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --green: #22c55e; --green-2: #4ade80; --soft: #14532d; --ink: #f4f4f5; --muted: #a1a1aa;
    --bg: #09090b; --card: #18181b; --line: #27272a; --warn: #fbbf24; --err: #f87171; --on-green: #052e16;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
body.full { padding-bottom: env(safe-area-inset-bottom); }
main { max-width: 36rem; margin: 0 auto; padding: 1rem 1rem 0; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
a { color: var(--green-2); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.err { color: var(--err); }
.center { text-align: center; }
.loading { color: var(--muted); text-align: center; padding: 3rem 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin: 0 0 1rem; }
a.card { display: block; color: inherit; text-decoration: none; }
.eyebrow { color: var(--green-2); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.tile-main { font-weight: 600; }

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .5; cursor: default; }
.primary, .secondary, .choice, .step, .check, .ghost {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); padding: 0 1rem;
}
.primary { background: var(--green); color: var(--on-green); border-color: var(--green); font-weight: 600; }
.wide { width: 100%; margin-top: .5rem; }
.ghost { background: transparent; border-color: transparent; color: var(--green-2); }
.danger { color: var(--err); }
:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }

.choices { display: flex; gap: .6rem; justify-content: center; margin: 1rem 0; flex-wrap: wrap; }
.choice { min-width: 56px; font-size: 1.3rem; font-weight: 700; }
.explainer { background: var(--soft); color: var(--ink); border-radius: 10px; padding: .75rem; margin: .5rem 0 1rem; font-size: .95rem; }

.hero { text-align: center; padding: 2.5rem 0 1rem; }
.hero .logo { border-radius: 14px; }
.lead { color: var(--muted); font-size: 1.1rem; }
.gsi { display: flex; justify-content: center; min-height: 48px; margin: 1.5rem 0 .5rem; }

.ex-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.ex-row { padding: .6rem 0; border-top: 1px solid var(--line); }
.ex-row:first-child { border-top: 0; }
.ex-name { font-weight: 600; }
.ex-target { font-variant-numeric: tabular-nums; }
.why { color: var(--muted); font-size: .92rem; }

.stepper { display: inline-flex; align-items: center; gap: .25rem; }
.step { width: 48px; padding: 0; font-size: 1.4rem; line-height: 1; }
.val { min-width: 4.6rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

#install { max-width: 36rem; margin: 0 auto 1rem; padding: 0 1rem; display: none; }
body[data-route="today"] #install:not([hidden]) { display: block; }
#install h2 { font-size: 1rem; }
#install details { margin: .3rem 0; }
#install ol { padding-left: 1.25rem; margin: .25rem 0; }
#install button { min-height: 48px; border-radius: 12px; border: 0; background: var(--green); color: var(--on-green); padding: 0 1rem; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10;
}
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; font-size: .78rem; color: var(--muted); text-decoration: none;
}
.tabs a span { font-size: 1.25rem; }
.tabs a[aria-current] { color: var(--green-2); font-weight: 600; }
body.full .tabs, body[data-route="loading"] .tabs { display: none; }

#toast {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20;
  max-width: 34rem; margin: 0 auto; background: var(--ink); color: var(--bg); padding: .8rem 1rem; border-radius: 12px;
}
body.full #toast { bottom: calc(16px + env(safe-area-inset-bottom)); }

/* Workout */
.wo-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.wo-head h1 { margin: 0; }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ex-head h2 { margin: 0; flex: 1; }
.ex-head button { white-space: nowrap; }
.exercise.complete { border-color: var(--green); }
.small.ghost { min-height: 40px; font-size: .9rem; }
.set { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.set-n { font-weight: 600; min-width: 4.2rem; }
.set-val { font-variant-numeric: tabular-nums; flex: 1; white-space: nowrap; }
.set-note { flex-basis: 100%; text-align: left; padding-left: 0; min-height: 40px; }
.set.done .set-n { color: var(--green-2); }
.set.pending { color: var(--warn); }
.set.current { display: block; background: var(--soft); margin: .4rem -.5rem; padding: .7rem .5rem; border-radius: 12px; border-top: 0; }
.set-head { display: flex; justify-content: space-between; align-items: baseline; }
.set-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .2rem; }
.set.current .step { background: var(--card); }
.log { font-size: 1.05rem; }
.cold { background: var(--soft); border-radius: 12px; padding: .75rem; margin-top: .5rem; }
.cold p { margin: 0 0 .5rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.howto { margin: .3rem 0 .5rem; }
.howto summary { color: var(--green-2); cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.imgs img { width: 100%; border-radius: 10px; background: #fff; }
.howto ul, .howto ol { padding-left: 1.25rem; margin: .25rem 0 .6rem; }
.finish { padding: .5rem 0 1.5rem; }
.voice-bar { margin-bottom: 1rem; }
.warn { color: var(--warn); }

/* Next time */
.cmp { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-variant-numeric: tabular-nums; }
.next-sets { color: var(--green-2); }

/* Plate */
.score { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0 .6rem; }
.big { font-size: 2.6rem; font-weight: 800; color: var(--green-2); font-variant-numeric: tabular-nums; }
.meal { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.meal-name { font-weight: 600; }
.meal-checks { display: flex; gap: .5rem; }
.check { min-width: 6.4rem; }
.check.on { background: var(--green); color: var(--on-green); border-color: var(--green); font-weight: 600; }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin: .5rem 0; }
.dot { display: flex; flex-direction: column; align-items: center; padding: .4rem 0; border-radius: 10px; border: 1px solid var(--line); font-size: .8rem; }
.dot.logged { background: var(--card); }
.dot.good { background: var(--soft); border-color: var(--green); }
.dot-day { color: var(--muted); }
.dot-val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Progress */
.week-nav { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; }
.week-nav h1 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .8rem 0; }
.stat { background: var(--soft); border-radius: 12px; padding: .6rem; text-align: center; }
.stat-val { font-size: 1.5rem; font-weight: 800; color: var(--green-2); font-variant-numeric: tabular-nums; }
ul.plain { list-style: none; padding: 0; margin: 0 0 .6rem; }
ul.plain li { padding: .25rem 0; }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .4rem; }
.chip { flex: none; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); padding: 0 .9rem; font-size: .9rem; }
.chip.on { background: var(--green); color: var(--on-green); border-color: var(--green); }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .axis { stroke: var(--line); }
svg.chart .label { font: 10px system-ui, sans-serif; fill: var(--muted); }
svg.chart .line { fill: none; stroke: var(--green-2); stroke-width: 2.5; }
svg.chart .pt { fill: var(--green-2); }
svg.chart .bar-done { fill: var(--green-2); }
svg.chart .bar-planned { fill: var(--line); }
.share-img { width: 60%; display: block; margin: .8rem auto; border-radius: 12px; border: 1px solid var(--line); }
.btnlink { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.center-row { justify-content: center; margin-bottom: .6rem; }

/* Account */
.choices.left { justify-content: flex-start; margin: .5rem 0; }
.choice.on { background: var(--green); color: var(--on-green); border-color: var(--green); }
details.card summary { cursor: pointer; font-weight: 600; min-height: 32px; }
input[type="text"] {
  display: block; width: 100%; min-height: 48px; margin: .3rem 0 .6rem; padding: 0 .8rem; font: inherit;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.secondary.danger { border-color: var(--err); }