@import url('tokens.css');

/* Coach Violet — app stylesheet. Every colour, radius and shadow is a token from tokens.css. */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* No zoom, like a native app: iOS zooms into any field with text under 16px, and double-tap zooms the page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { touch-action: manipulation; }
input, select, textarea { font-size: 16px; }
button, a, .item, .nav, .seg, .chip, .pmap .pip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
h1 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
ul { padding-left: 18px; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--primary-tint); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* type scale helpers */
.readout { font-weight: 600; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.mono.paused { opacity: 0.55; text-decoration: line-through; }
.label { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-faint); }
.small { font-size: 13.5px; line-height: 20px; }
.tiny { font-size: 12.5px; line-height: 18px; font-weight: 300; }
.hit { color: var(--success); }
.warn { color: var(--warning); }
.bad { color: var(--danger); }
.ember { color: var(--primary); }
.center { text-align: center; }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.truncate { overflow-wrap: anywhere; }

/* ---- shell ---- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 10px; min-height: 56px;
}
.topbar h1 { font-size: 19px; line-height: 26px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.view { flex: 1; padding: 8px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 720px; width: 100%; margin: 0 auto; overflow-x: hidden; }
.view > * + * { margin-top: 16px; }
body.has-rest .view { padding-bottom: calc(var(--nav-h) + 120px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .view { padding-left: 28px; padding-right: 28px; } }

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  gap: 4px;
  background: var(--nav);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--radius-md);
  text-decoration: none; color: var(--nav-fg); font-size: 11px; line-height: 14px; font-weight: 500;
}
.nav a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current="page"] { background: var(--grad-primary); color: var(--on-primary); font-weight: 600; }

/* ---- cards ---- */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-card); min-width: 0; }
.card.tight { padding: 12px 14px; }
.card.flat { box-shadow: none; border: 1px solid var(--border); }
.card.accent { box-shadow: var(--shadow-card), 0 0 0 2px var(--primary); }
.card.hit { box-shadow: var(--shadow-card), 0 0 0 2px var(--success); }
.card > * + * { margin-top: 10px; }
.card .label + * { margin-top: 6px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-head h2, .card-head h3 { flex: 1; min-width: 0; }
.card-head select.input { width: auto; max-width: 55%; height: 36px; min-height: 36px; padding: 0 10px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px; border: 0; border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: var(--shadow-button);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), opacity 120ms ease; text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { color: var(--fg-faint); box-shadow: none; cursor: default; }
.btn.primary { background: var(--grad-primary); color: var(--on-primary); box-shadow: var(--shadow-primary); font-weight: 600; }
.btn.big { min-height: 56px; font-size: 16px; width: 100%; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--fg-muted); }
.btn.quiet { background: var(--primary-tint); color: var(--primary-deep); box-shadow: none; font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.danger.quiet { background: var(--danger-soft); }
.btn.sm { min-height: 38px; padding: 0 14px; }
.btn.video { background: var(--video-red); color: #fff; font-weight: 600; min-height: 52px; width: 100%; font-size: 16px; box-shadow: none; text-decoration: none; }
.btn.video:active { background: var(--video-red-press); }
.btn.video svg { fill: #fff; stroke: none; }
.btn.icon { width: var(--tap); padding: 0; }
.btn.block { width: 100%; }
.btn.hit { background: var(--success); color: var(--on-primary); }

/* ---- chips & pills ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0;
  border-radius: var(--radius-pill); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-button); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.chip[aria-pressed="true"], .chip.on { background: var(--grad-primary); color: var(--on-primary); font-weight: 600; box-shadow: var(--shadow-primary); }
.chip.tag { height: 24px; padding: 0 10px; font-size: 12px; line-height: 16px; font-weight: 700; box-shadow: none; background: var(--primary-tint); color: var(--primary-deep); }
.chip.tag.hit { background: var(--success-soft); color: var(--success); }
.chip.tag.warn { background: var(--warning-soft); color: var(--warning); }
.chip.tag.ember { background: var(--primary-tint); color: var(--primary-deep); }
.chip.tag.quiet { background: var(--surface-sunken); color: var(--fg-muted); }
.chip.tag.grade-A { background: var(--success-soft); color: var(--success); }
.chip.tag.grade-B { background: var(--warning-soft); color: var(--warning); }
.chip.tag.grade-C { background: var(--surface-sunken); color: var(--fg-muted); }

/* ---- forms ---- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font-size: 16px; line-height: 22px;
}
.input::placeholder { color: var(--fg-muted); }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-tint); }
.input.num { font-weight: 600; font-size: 20px; text-align: center; padding: 0 8px; }
.input.changed { border-color: var(--primary); }
textarea.input { min-height: 88px; padding: 10px 14px; resize: vertical; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.unit { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-muted); text-transform: uppercase; }
.seg { display: inline-flex; background: var(--surface); border-radius: var(--radius-lg); padding: 4px; gap: 2px; box-shadow: var(--shadow-button); }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg); font-size: 14px; font-weight: 500; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.seg button[aria-pressed="true"] { background: var(--grad-primary); color: var(--on-primary); font-weight: 600; box-shadow: var(--shadow-primary); }
.stepper { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); gap: 6px; align-items: center; }

/* ---- lists ---- */
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.item {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-button); text-align: left; border: 0; width: 100%; color: inherit; text-decoration: none;
}
.item .grow { min-width: 0; }
.item .title { font-weight: 600; overflow-wrap: anywhere; }
.item .sub { color: var(--fg-muted); font-size: 13.5px; line-height: 20px; overflow-wrap: anywhere; }
.item .chev { color: var(--fg-faint); font-size: 20px; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--surface); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-card); min-width: 0; }
.stat .v { font-size: 22px; line-height: 28px; font-weight: 600; }
.stat .k { margin-top: 2px; }
.bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--grad-primary); border-radius: 3px; }
.bar.ember > span { background: var(--grad-primary); }
.hero-num { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }

/* ---- sheet / modal ---- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(20 23 43 / 0.45); display: flex; align-items: flex-end; justify-content: center; animation: fade 120ms ease; }
.sheet {
  width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lift); animation: up 0.3s cubic-bezier(.34,1.3,.64,1);
}
.sheet > * + * { margin-top: 12px; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 6px; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: var(--radius-md); background: var(--nav); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lift);
  animation: up 0.3s cubic-bezier(.34,1.3,.64,1); max-width: calc(100% - 32px);
}
.toast button { border: 0; background: transparent; color: var(--violet-end); font-weight: 700; font-size: 14px; padding: 4px 2px; }

/* ---- rest timer bar ---- */
.rest {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px 12px 10px 16px;
  background: var(--grad-primary); color: var(--on-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-primary);
}
.rest .label { color: inherit; opacity: 0.85; }
.rest .t { font-size: 28px; line-height: 32px; font-weight: 600; }
.rest .btn { background: rgb(70 60 200 / 0.45); color: inherit; box-shadow: none; min-height: 38px; }
.rest .track { grid-column: 1 / -1; height: 3px; background: rgb(255 255 255 / 0.25); border-radius: 2px; overflow: hidden; }
.rest .track span { display: block; height: 100%; background: rgb(255 255 255 / 0.9); transition: width 1s linear; }

/* ---- session ---- */
.ex-card .ex-title { font-size: 17px; line-height: 24px; font-weight: 600; }
.ex-card .target { color: var(--fg-muted); font-size: 13.5px; }
.ex-card.done { opacity: 0.7; }
.set-row { display: grid; grid-template-columns: 34px 1fr 1fr 48px; gap: 8px; align-items: center; }
.set-row .n { font-size: 13.5px; font-weight: 600; color: var(--fg-muted); text-align: center; }
.set-row .n .side { display: block; font-size: 11px; font-weight: 600; color: var(--fg-faint); }
.set-row.done .input { opacity: 0.7; }
.set-row .check { min-height: 42px; width: 48px; padding: 0; border-radius: var(--radius-md); }
.set-row .check[aria-pressed="true"] { background: var(--grad-primary); color: var(--on-primary); box-shadow: var(--shadow-primary); }
.set-head { display: grid; grid-template-columns: 34px 1fr 1fr 48px; gap: 8px; }
.set-head span { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); text-align: center; }
.last { font-size: 12.5px; line-height: 18px; color: var(--fg-muted); }
.nudge { padding: 10px 12px; border-radius: var(--radius-md); background: var(--primary-tint); color: var(--primary-deep); font-size: 14px; font-weight: 500; }
.nudge.hit { background: var(--success-soft); color: var(--success); }
.nudge.warn { background: var(--warning-soft); color: var(--warning); }
.cue { font-size: 13.5px; line-height: 20px; color: var(--fg-muted); }
.celebrate { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.pr-list .item { min-height: 48px; }

/* ---- timers ---- */
.timer-display { padding: 24px 16px; }
.timer-display .timer-big { font-size: 64px; line-height: 72px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.timer-display[data-kind="work"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--primary); }
.timer-display[data-kind="rest"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--today); }
.timer-display[data-kind="rest"] .bar > span { background: var(--today); }
.timer-display[data-kind="prep"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--warning); }
.timer-display[data-kind="done"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--success); }
.timer-display .bar { margin-top: 14px; }
.chips.scroll .chip { flex: 0 0 auto; }

/* ---- charts ---- */
.chart { width: 100%; height: auto; }
.chart text { font-family: var(--font-sans); font-size: 10px; font-weight: 500; fill: var(--fg-muted); }
.chart .grid line, .chart .axis line { stroke: var(--chart-grid); }
.chart .series path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series circle { stroke-width: 0; }
.chart .area { opacity: 0.12; }
.chart .bars rect { rx: 3; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-muted); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart-empty { padding: 24px; text-align: center; color: var(--fg-faint); font-size: 13.5px; }

/* ---- program map ---- */
.pmap { display: grid; gap: 6px; }
.pmap .wk { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 4px; align-items: center; }
.pmap .wk .lbl { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); }
.pmap .pip { height: 30px; border-radius: var(--radius-sm); background: var(--surface-sunken); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg-faint); border: 0; padding: 0; }
.pmap .pip.completed { background: var(--primary-tint); color: var(--primary-deep); }
.pmap .pip.skipped { background: var(--warning-soft); color: var(--warning); text-decoration: line-through; }
.pmap .pip.optional { border: 1.5px dashed var(--border-strong); background: transparent; }
.pmap .pip.optional.completed { border: 0; background: var(--primary-tint); color: var(--primary-deep); }
.pmap .pip.next { background: var(--grad-primary); color: var(--on-primary); box-shadow: 0 6px 14px -6px rgb(108 99 255 / .45); }
.pmap .phase { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-top: 8px; }

/* ---- body map ---- */
.bodymap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 320px; margin: 0 auto; }
.bodymap svg { width: 100%; height: auto; }
.bodymap .m { fill: var(--border-strong); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; transition: fill 120ms ease; }
.bodymap .m:hover { fill: var(--fg-faint); }
.bodymap .m.on { fill: var(--primary); }
.bodymap .body { fill: var(--surface-sunken); stroke: var(--border); }

/* ---- misc ---- */
.divider { height: 1px; background: var(--border); margin: 4px 0; }
.empty { padding: 28px 16px; text-align: center; color: var(--fg-muted); }
.empty .big { display: none; }
details > summary { cursor: pointer; list-style: none; color: var(--fg-muted); font-size: 14px; font-weight: 500; min-height: 32px; display: flex; align-items: center; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.9px solid currentColor; border-bottom: 1.9px solid currentColor; transform: rotate(-45deg); margin: 0 10px 0 2px; transition: transform 0.2s; }
details[open] > summary::before { transform: rotate(45deg); }
.symm { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.symm .v { font-size: 22px; line-height: 28px; font-weight: 600; }
.symm .mid { text-align: center; }
.delta { font-size: 12.5px; font-weight: 600; }
.delta.up { color: var(--success); } .delta.down { color: var(--danger); } .delta.flat { color: var(--fg-muted); }
.update-banner { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 70; display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--nav); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lift); font-size: 14px; }
.update-banner .btn { min-height: 36px; }

@media (min-width: 600px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- gamification ---- */
.topstrip { display: flex; align-items: center; gap: 10px; }
.streak-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-button); font-weight: 600; }
.streak-pill svg { color: var(--match); }
.streak-pill.dead svg { color: var(--fg-faint); }
.streak-pill .freeze { font-size: 12px; color: var(--today); font-weight: 600; margin-left: 4px; }
.level-pill { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-button); font-size: 13px; font-weight: 600; }
.level-pill .bar { height: 6px; }
.xp-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--grad-primary); color: var(--on-primary); font-weight: 700; margin: 0 auto; }
.rings { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.rings svg { width: 96px; height: 96px; }
.rings .legend { display: grid; gap: 6px; font-size: 13.5px; }
.rings .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.quest { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.quest .box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border-strong); display: grid; place-items: center; color: var(--on-primary); flex: 0 0 auto; }
.quest.done .box { background: var(--grad-primary); border-color: transparent; }
.quest.done .t { text-decoration: line-through; color: var(--fg-muted); }
.quest .xp { font-size: 12px; font-weight: 700; color: var(--primary-deep); }
.readiness { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.readiness .score { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--on-primary); }
.readiness .score.high { background: var(--success); } .readiness .score.moderate { background: var(--warning); } .readiness .score.low { background: var(--danger); }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge { background: var(--surface); border-radius: var(--radius-lg); padding: 12px 8px; text-align: center; box-shadow: var(--shadow-button); }
.badge .ic { width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: var(--on-primary); }
.badge.locked { opacity: 0.45; } .badge.locked .ic { background: var(--border-strong); color: var(--fg-muted); }
.badge .n { font-size: 13px; font-weight: 600; line-height: 1.2; }
.badge .d { font-size: 11.5px; color: var(--fg-muted); line-height: 1.3; margin-top: 2px; }
.badge-big { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: var(--on-primary); box-shadow: var(--shadow-primary); }
.heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.heat i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--surface-sunken); }
.heat i.l1 { background: var(--primary-tint); } .heat i.l2 { background: var(--violet-end); } .heat i.l3 { background: var(--primary); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; } }

/* ---- program path (Duolingo-style) ---- */
.path { position: relative; display: grid; gap: 14px; padding: 8px 0; }
.path .unit { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); padding: 10px 0 2px; }
.path .node { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; text-align: left; width: 100%; color: inherit; }
.path .node .dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface-sunken); color: var(--fg-faint); box-shadow: inset 0 0 0 2px var(--border); flex: 0 0 auto; }
.path .node.completed .dot { background: var(--primary-tint); color: var(--primary-deep); box-shadow: none; }
.path .node.skipped .dot { background: var(--warning-soft); color: var(--warning); box-shadow: none; }
.path .node.next .dot { background: var(--grad-primary); color: var(--on-primary); box-shadow: var(--shadow-primary); animation: pulse 1.6s ease-in-out infinite; }
.path .node.optional .dot { border-radius: 16px; width: 44px; height: 44px; margin-left: 6px; }
.path .node .t { font-weight: 600; } .path .node .s { font-size: 13px; color: var(--fg-muted); }
.path .node:nth-child(odd) { padding-left: 24px; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---- routine runner ---- */
.ritem { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ritem:last-child { border-bottom: 0; }
.ritem .check { width: 44px; height: 44px; border-radius: var(--radius-md); border: 2px solid var(--border-strong); background: transparent; display: grid; place-items: center; color: var(--on-primary); padding: 0; }
.ritem.done .check { background: var(--grad-primary); border-color: transparent; }
.ritem.done .n { color: var(--fg-muted); text-decoration: line-through; }
.ritem .n { font-weight: 500; } .ritem .d { font-size: 12.5px; color: var(--fg-muted); }
.gradeA, .gradeB, .gradeC, .gradeD { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.gradeA { background: var(--success-soft); color: var(--success); } .gradeB { background: var(--warning-soft); color: var(--warning); } .gradeC, .gradeD { background: var(--surface-sunken); color: var(--fg-muted); }
.hurts { position: fixed; right: 14px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 35; height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 0; background: var(--surface); color: var(--danger); font-weight: 600; box-shadow: var(--shadow-lift); display: inline-flex; align-items: center; gap: 6px; }
body.has-rest .hurts { bottom: calc(var(--nav-h) + 110px + env(safe-area-inset-bottom)); }
.milestones { display: flex; gap: 6px; flex-wrap: wrap; }
.milestones i { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--fg-faint); }
.milestones i.on { background: var(--grad-primary); color: var(--on-primary); }
.milestones i.goal { width: 28px; height: 28px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid .ph { aspect-ratio: 3 / 4; border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; display: grid; place-items: center; color: var(--fg-faint); font-size: 12px; position: relative; }
.photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid .ph .lbl { position: absolute; bottom: 6px; left: 6px; font-size: 11px; font-weight: 600; background: rgb(20 23 43 / 0.6); color: #fff; padding: 2px 6px; border-radius: 6px; }
.recovery-map .m.fatigued { fill: var(--match); } .recovery-map .m.recovering { fill: var(--warning); } .recovery-map .m.fresh { fill: var(--success-soft); }
.sets-bar { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; }
.sets-bar .bar { height: 8px; } .sets-bar .bar span.under { background: var(--warning); } .sets-bar .bar span.in { background: var(--success); } .sets-bar .bar span.over { background: var(--match); }
.onboard-step { min-height: 40vh; }

/* Home health card */
.health-card .label { margin-bottom: 10px; }
.hc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hc-tile { display: grid; gap: 8px; padding: 10px 10px 9px; border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.hc-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.hc-ico.violet { background: linear-gradient(135deg, var(--violet-start), var(--violet-end)); }
.hc-ico.indigo { background: var(--nav); }
.hc-ico.pink { background: linear-gradient(135deg, var(--pink-start), var(--pink-end)); }
.hc-ico.green { background: var(--success); }
.hc-ico.amber { background: #e3862a; }
.hc-ico.slate { background: var(--fg-muted); }
.hc-ring { width: 28px; height: 28px; display: block; }
.hc-ring svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.hc-ring circle { fill: none; stroke-width: 4; }
.hc-ring .bg { stroke: var(--border); }
.hc-ring .fg { stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.hc-body { display: grid; gap: 1px; min-width: 0; }
.hc-v { font-weight: 600; font-size: 18px; line-height: 22px; font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-u { font-size: 11px; font-weight: 600; color: var(--fg-muted); margin-left: 3px; }
.hc-l { font-size: 11.5px; line-height: 14px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend { font-size: 11px; line-height: 14px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.trend.good { color: var(--success); } .trend.bad { color: var(--match-deep); } .trend.flat { color: var(--fg-faint); }
@media (max-width: 340px) { .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }