/* DOTS Ladder, "chalk & iron": a dark gym floor, chalk-white text and one chalk-yellow accent.
   The accent marks only you and your next action (your row, the next-rung gain, the primary
   button, focus). Everything else is greyscale. Red is for errors only. Dark only, by design. */

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

:root {
  --bg: #111214;
  --surface: #1c1d20;
  --surface-2: #17181b;
  --border: #34353a;
  --divider: #26272b;
  --text: #f2f0ea;
  --text-2: #d6d3cb;
  --muted: #a9a69e;
  --accent: #e8c547;
  --accent-hover: #f3da7a;
  --on-accent: #111214;
  --error: #ff6b5e;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion, named after the transitions.dev scale. Quick for presses, swaps and closes; fast for opens, slides
     and screens. Every transition uses these; reduced motion keeps the fades and drops the movement. */
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-swap: cubic-bezier(0.2, 0, 0, 1); /* an icon swapping for another */
  --duration-very-slow: 500ms; /* emphasis: the Saved check */
  --distance-micro: 4px;
  --distance-base: 8px;
  --scale-press: 0.96;
  color-scheme: dark;
  interpolate-size: allow-keywords; /* lets an event's details animate to their natural height */
}

* { box-sizing: border-box; }
/* Android Chrome flashes a blue box on every tap; each control gives its own feedback (press, slide, state). */
html { -webkit-tap-highlight-color: transparent; }
/* Classes that set display (flex, grid) would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main, footer { max-width: 480px; margin: 0 auto; padding: 0 20px; }
/* Tight to the top: the browser bar or Android's status bar already gives room; the safe area covers notches. */
main { padding-top: max(16px, env(safe-area-inset-top)); }
/* The fixed tab bar is about 84 px tall; the footer's bottom padding keeps the last row clear of it. */
footer { padding-top: 20px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); font-size: 0.75rem; line-height: 1.45; }

h1, h2 { margin: 0; font-family: var(--display); line-height: 1.1; text-wrap: balance; }
h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
p { margin: 0; text-wrap: pretty; }

.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.eyebrow { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.card { background: var(--surface); border-radius: 16px; padding: 16px; }

/* --- Motion: choices, presses, screens, numbers ------------------------------------------ */

/* A row of choices (dom.js choiceGroup): one track, and an indicator that slides to the chosen button. The
   indicator draws the chosen fill; the buttons stay transparent so it shows through. */
.slide { position: relative; isolation: isolate; }
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: var(--ind-w, 0);
  height: var(--ind-h, 0);
  translate: var(--ind-x, 0) var(--ind-y, 0);
  border-radius: 9px;
  background: var(--text);
  opacity: 0;
  transition-property: translate, width, height;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-smooth-out);
}
.slide.slide-ready::before { opacity: 1; }
.slide.slide-still::before { transition: none; }
.slide > button, .slide > button[aria-pressed="true"] {
  background: transparent;
  transition: color var(--duration-fast) var(--ease-smooth-out);
}

/* Press feedback on buttons that act (choices have the slide instead). */
.primary, .step-btn, .button, .chip-button {
  transition-property: scale, background-color, border-color, color;
  transition-duration: var(--duration-quick);
  transition-timing-function: var(--ease-smooth-out);
}
:is(.primary, .step-btn, .button, .chip-button):active:not(:disabled) { scale: var(--scale-press); }

/* Hover only where there's a pointer, so a tap doesn't leave a button lit. */
@media (hover: hover) {
  :is(.step-btn, .button):hover { background: var(--divider); }
  .chip-button:hover { border-color: var(--muted); }
  .slide > button[aria-pressed="false"]:hover { color: var(--text-2); }
  .tabbar a:not([aria-current]):hover { color: var(--text-2); }
}

/* A screen you switch to fades in and rises a little; not on first load. */
.screen.enter { animation: rise-in var(--duration-fast) var(--ease-smooth-out); }
@keyframes rise-in { from { opacity: 0; translate: 0 var(--distance-base); } }

/* --- Pop-ups (popup.js): the toast and the dialog. Every pop-up is one of these two. --------- */

/* A toast: drops in at the top, above everything, and goes by itself (or on a tap). After a save it says what
   the save achieved; its check draws itself, and it's yours, so it's accent. */
.toast-region {
  position: fixed;
  z-index: 20;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 448px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  animation: drop-in var(--duration-fast) var(--ease-smooth-out);
}
.toast.leaving { animation: drop-out var(--duration-quick) var(--ease-smooth-out) forwards; }
@keyframes drop-in { from { opacity: 0; translate: 0 calc(-1 * var(--distance-base)); } }
@keyframes drop-out { to { opacity: 0; translate: 0 calc(-1 * var(--distance-micro)); } }
.saved-check { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.toast .saved-check { animation: draw-check var(--duration-very-slow) var(--ease-smooth-out) 80ms backwards; }
@keyframes draw-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* A dialog: asks before a change. A card over a dimmed page; it rises in (fast) and fades out (quick). */
.dialog {
  width: min(100% - 32px, 400px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
  transition-property: opacity, translate, overlay, display;
  transition-duration: var(--duration-quick);
  transition-timing-function: var(--ease-smooth-out);
  transition-behavior: allow-discrete;
}
.dialog:not([open]) { opacity: 0; translate: 0 var(--distance-micro); }
.dialog[open] { transition-duration: var(--duration-fast); }
@starting-style { .dialog[open] { opacity: 0; translate: 0 var(--distance-base); } }
.dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
  transition-property: opacity, overlay, display;
  transition-duration: var(--duration-quick);
  transition-behavior: allow-discrete;
}
.dialog:not([open])::backdrop { opacity: 0; }
.dialog[open]::backdrop { transition-duration: var(--duration-fast); }
@starting-style { .dialog[open]::backdrop { opacity: 0; } }
.dialog-panel { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.dialog-title { font-size: 1.5rem; }
.dialog-text { color: var(--text-2); }
.dialog-actions { display: flex; gap: 8px; margin-top: 12px; }
.dialog-actions > button { flex: 1; min-height: 52px; font-size: 1.0625rem; font-weight: 600; }
.dialog-actions .button { border-radius: 14px; }

/* A headline number that changes (another formula, a new record) fades the new value in. */
#now-score, #chart-now { display: inline-block; }
.swap { animation: swap-in var(--duration-quick) var(--ease-in-out); }
@keyframes swap-in { from { opacity: 0; translate: 0 var(--distance-micro); } }

/* --- Ladder: hero, next rung, the rungs ------------------------------------------- */

.hero { display: flex; flex-direction: column; gap: 4px; }
/* The toggle sits top right, out of the flow, so its 44px buttons don't push the score down. Under 360px it
   would overlap the score's digits, so there it stays in the row. */
/* "Meet in N days": the soonest dated event. Accent, because it's your next action. */
.pill {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Event scenarios: the full word, or "cons." / "opt." under 400px. The full word stays readable to screen readers. */
.scenario-short { display: none; }
@media (max-width: 399px) {
  .scenario-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scenario-short { display: inline; }
}

.hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 360px) {
  .hero-top .formula-toggle { position: absolute; top: 0; right: 0; }
}

/* DOTS / GL: which score every screen shows. The chosen one is accent, as your next action is. */
.formula-toggle { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--surface-2); }
.formula-option {
  min-width: 56px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.formula-option[aria-pressed="true"] { color: var(--on-accent); }
.formula-toggle::before { background: var(--accent); }
/* On Log test the accent belongs to Save, so the chosen score is chalk, like the experience tabs. */
.formula-quiet .formula-option { min-width: 48px; padding: 0 10px; }
.formula-quiet .formula-option[aria-pressed="true"] { color: var(--bg); }
.formula-quiet::before { background: var(--text); }
.hero-score { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
#now-score { font-family: var(--display); font-weight: 700; font-size: 5.25rem; line-height: 0.9; letter-spacing: -0.01em; }
.hero-unit { font-size: 0.875rem; color: var(--muted); }
#now-caption { font-size: 0.875rem; }

.error {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--error);
  border-radius: 4px;
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.next-card { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.next-icon { width: 40px; height: 40px; flex: none; color: var(--accent); }
.next-card p { display: flex; flex-direction: column; gap: 2px; }
.next-value { font-size: 1.0625rem; font-weight: 600; }

/* Exchange rate: what a kilo of bodyweight is worth on the bar. The kg on the bar is the accent: it's your lever. */
.card-head { display: flex; flex-direction: column; gap: 2px; }
.card-head .eyebrow { font-size: 0.75rem; }
.card-head h2 { font-size: 1.5rem; font-weight: 700; }
.exchange { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.exchange-swap { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 6px; }
.swap-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.swap-kg { font-family: var(--display); font-size: clamp(1.5rem, 8vw, 2rem); font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.swap-gain { color: var(--accent); }
.swap-eq { text-align: center; font-family: var(--display); font-size: 1.5rem; color: var(--muted); }
.exchange-rows, .numbers-list { margin: 0; padding: 0; list-style: none; }
.exchange-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 0.9375rem; }
.exchange-rows li:last-child { border-bottom: 0; }
.exchange-rows span:first-child { color: var(--text-2); }
.exchange-rows span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#exchange-note:empty { display: none; }

/* "What total do I need?": quick targets, two fields and the answer in an accent tile. */
.calc { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.calc-quick { display: flex; flex-direction: column; gap: 6px; }
.calc-quick[hidden] { display: none; }
.calc-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calc-target {
  min-height: 44px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out);
}
.calc-target[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.calc .fields input { background: var(--bg); font-variant-numeric: tabular-nums; }
.calc-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
}
.calc-need { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.calc-need-label { font-size: 0.875rem; font-weight: 600; }
.calc-total { font-family: var(--display); font-size: clamp(2.25rem, 12vw, 3rem); font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-gap { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#calc-lands:empty, #calc-note:empty { display: none; }
#calc-lands, #calc-note { margin: 0; }

.rungs-head { display: flex; flex-direction: column; gap: 10px; padding: 22px 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.75rem;
}
.chip-button { position: relative; background: transparent; font: inherit; font-size: 0.75rem; cursor: pointer; min-height: 28px; }
/* 28px to look at, 44px to tap. */
.chip-button::before { content: ""; position: absolute; inset: -8px 0; }
.chip-button::after { content: "▾"; color: var(--muted); }
.chip-icon { width: 14px; height: 14px; }

/* Meet experience: one track, the chosen tab chalk (the slide's indicator). */
.segmented-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.tab[aria-pressed="true"] { color: var(--bg); font-weight: 600; }

/* One row per rung or marker: key (P50 / You / an icon) | title and value | gap or icon. */
.rung-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
}
.row-key { font-family: var(--display); font-size: 1.375rem; font-weight: 600; color: var(--text-2); }
.row-key svg { width: 20px; height: 20px; display: block; }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-title { font-weight: 500; }
.row-sub, .row-end { font-size: 0.8125rem; color: var(--muted); }
.row-end svg { width: 18px; height: 18px; display: block; }

.row-next { border: 1px dashed var(--accent); }
.row-next .row-key, .row-next .row-end { color: var(--accent); font-weight: 600; }
.row-cleared .row-key { color: var(--muted); }

.row-you { padding: 14px; background: var(--accent); color: var(--on-accent); }
.row-you .row-key { font-size: 1.625rem; font-weight: 700; color: inherit; }
.row-you .row-title { font-weight: 600; }
.row-you .row-sub, .row-you .row-end { color: inherit; }
.row-you .row-end svg { width: 20px; height: 20px; }

.row-event { background: transparent; border: 1px dashed var(--border); }
.row-event .row-key { color: var(--text-2); }

.row-reference { background: transparent; }
.row-reference .row-title { font-style: italic; color: var(--muted); font-weight: 400; }
.row-reference .row-key { color: var(--muted); font-size: 1rem; }

/* --- First visit ------------------------------------------------------------------ */

/* Four steps, one idea each: the actions sit at the bottom of the screen, within thumb reach. */
.onboard {
  display: flex; flex-direction: column; gap: 20px;
  min-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 16px);
}
.onboard-progress { display: flex; flex-direction: column; gap: 10px; }
.onboard-progress p { margin: 0; }
.onboard-bar { display: flex; gap: 6px; }
.onboard-bar span { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.onboard-bar span.done { background: var(--accent); }
.onboard-step { display: flex; flex-direction: column; gap: 18px; }
.onboard-step[hidden] { display: none; }
.onboard-step.enter { animation: rise-in var(--duration-fast) var(--ease-smooth-out); }
.onboard-step h2 { margin: 0; font-size: 2.5rem; font-weight: 700; line-height: 1.02; letter-spacing: 0; }
.onboard-step h2:focus { outline: none; }
.onboard-lede { margin: 0; color: var(--text-2); line-height: 1.45; }
.onboard-lede:empty { display: none; }
.onboard-label { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.onboard .segmented { margin: 0; flex-wrap: wrap; }
.onboard .segmented legend { width: 100%; margin-bottom: 8px; padding: 0; }
.onboard .segmented label { min-height: 52px; }
/* Each value sits in a row (label left, box right), with its unit inside the box. */
.onboard-rows { display: flex; flex-direction: column; gap: 10px; }
.onboard-rows label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--text); }
.onboard-unit {
  flex: 0 0 9rem; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--muted);
  transition: border-color var(--duration-quick) var(--ease-smooth-out);
}
.onboard-unit:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.onboard-unit.flagged { border-color: var(--error); }
.onboard-unit input {
  flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text);
  font: 700 1.5rem var(--display); font-variant-numeric: tabular-nums; text-align: right;
}
.onboard-unit input:focus { outline: none; }
.onboard-unit input::placeholder { color: var(--muted); opacity: 0.5; }
.onboard-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--text-2); }
.onboard-total strong { font: 700 2.25rem var(--display); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.onboard-private { margin: auto 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); line-height: 1.45; }
.onboard-private strong { color: var(--text); font-weight: 600; }
.onboard-private[hidden] { display: none; }
.onboard-private[hidden] + .onboard-actions { margin-top: auto; }
.onboard-back { min-height: 52px; padding: 0 20px; }
.onboard-back[hidden] { display: none; }

/* Step 3: your score, then the totals that score the same at 10 kg either side. */
.reveal-score { display: flex; flex-direction: column; gap: 2px; }
.reveal-score h2.onboard-label { font: 400 0.8125rem var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.reveal-number { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.reveal-number strong { font: 700 6rem/0.9 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.reveal-number span { font: 600 1.375rem var(--display); letter-spacing: 0.04em; color: var(--text); }
.reveal-score .muted { margin: 0; }
.reveal-chart { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 14px 12px; border-radius: 14px; background: var(--surface); }
.reveal-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
.reveal-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 176px; }
.reveal-kg { margin-bottom: 4px; font: 600 1.125rem var(--display); color: var(--text-2); font-variant-numeric: tabular-nums; }
.reveal-bar { width: 100%; border-radius: 10px; background: color-mix(in srgb, var(--muted) 30%, var(--surface)); transform-origin: bottom; }
.reveal-bars.grow .reveal-bar { animation: bar-grow 340ms var(--ease-smooth-out) backwards; animation-delay: calc(var(--order) * 80ms); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.reveal-col.you .reveal-kg { font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.reveal-col.you .reveal-bar { background: var(--accent); }
.reveal-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 4px 10px; box-sizing: border-box; overflow: hidden; }
.reveal-gap { font-size: 0.75rem; line-height: 1.2; text-align: center; color: var(--text); }
.reveal-figure { width: auto; fill: var(--text-2); opacity: 0.55; }
.reveal-col.you .reveal-figure { fill: var(--on-accent); opacity: 0.75; }
.reveal-who { padding: 6px 0 2px; font-size: 0.75rem; color: var(--muted); }
.reveal-col.you .reveal-who { font-weight: 600; color: var(--text); }
.reveal-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 14px; }
.reveal-card p { margin: 0; line-height: 1.45; }
.reveal-card .onboard-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
#reveal-same { color: var(--text); }

/* Step 4: who you're compared with, then 100 dots with the share you're stronger than filled in. */
.standing-who { display: flex; flex-direction: column; gap: 6px; }
.standing-who .onboard-label { letter-spacing: 0.14em; text-transform: uppercase; }
#standing-who { margin: 0; color: var(--text-2); line-height: 1.4; }
.standing-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.standing-dots[hidden] { display: none; }
.standing-dots span { aspect-ratio: 1; border-radius: 50%; background: var(--border); }
.standing-dots span.on { background: var(--accent); }
.standing-dots span.target { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.standing-dots.fill :is(span.on, span.target) { animation: dot-in var(--duration-quick) var(--ease-smooth-out) backwards; animation-delay: calc(var(--i) * 4ms); }
@keyframes dot-in { from { opacity: 0; scale: 0.4; } }
#standing-key { margin: 0; line-height: 1.45; }
/* The gym-goer estimate sits apart from the dots, dashed and italic like its row on the Ladder: not a rung. */
.standing-scale { margin: 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; font-style: italic; color: var(--muted); line-height: 1.45; }
.standing-scale[hidden] { display: none; }

.segmented { display: flex; gap: 6px; margin: 14px 0 0; padding: 0; border: 0; }
.segmented label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sex-icon { width: 18px; height: 18px; flex: none; }

#onboard-note { margin: 0; color: var(--error); }
#onboard-note:empty { display: none; }

.onboard-actions { display: flex; gap: 8px; }
.primary {
  flex: 1;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}
.primary:hover:not(:disabled) { background: var(--accent-hover); }
.primary:disabled { background: var(--surface); color: var(--muted); cursor: default; }

/* --- Screen headers, the tab bar --------------------------------------------------- */

.screen-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.screen-head h1 { font-size: 2.125rem; font-weight: 700; text-transform: uppercase; }

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px 8px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
  background: var(--bg);
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  color: var(--muted);
  font-size: 0.75rem;
  text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; }
/* Outline icons; the open tab's filled one cross-fades in (scale, blur and opacity). */
.tab-icon { position: relative; width: 24px; height: 24px; }
.tab-icon svg { position: absolute; inset: 0; }
.tabbar.animate .tab-icon svg {
  transition-property: opacity, scale, filter;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-swap);
}
.tab-icon .icon-fill, .tabbar a[aria-current="page"] .icon-out { opacity: 0; scale: 0.25; filter: blur(4px); }
.tabbar a[aria-current="page"] .icon-fill { opacity: 1; scale: 1; filter: none; }

/* --- Log test: steppers, weight class, live result ---------------------------------- */

#log-form { display: flex; flex-direction: column; gap: 8px; }
#log-form .segmented { margin: 0 0 4px; }

.steppers { display: flex; flex-direction: column; gap: 8px; }
.stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 92px 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  border-radius: 18px; /* its 8px buttons + 10px padding, so the corners nest */
  background: var(--surface);
}
.stepper label { display: flex; flex-direction: column; }
.stepper-name { font-weight: 600; }
.stepper-hint { font-size: 0.75rem; color: var(--muted); }
.step-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.stepper input {
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
/* A value you haven't changed: muted (not disabled), with when it was last logged. It stays fully usable. */
.stepper.carried input { color: var(--muted); }
.stepper.carried .stepper-name { color: var(--text-2); }
/* Bodyweight not logged for over a week: the hint asks for a fresh one, a little brighter. */
.stepper.stale .stepper-hint { color: var(--text-2); font-weight: 600; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:invalid { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }

.class-field { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 0.8125rem; color: var(--muted); }
.class-field select, .class-field input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.date-field { margin-top: 0; }
.date-field input:invalid { border-color: var(--error); }

.result-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.result-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; }
#result-delta { font-weight: 600; color: var(--muted); }
#result-delta.up { color: var(--accent); }
/* Carried lifts from a different bodyweight: a note, not an error. */
.result-stale { color: var(--text-2); }
.result-stale:empty { display: none; }
.result-score-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.result-score { display: flex; align-items: baseline; gap: 10px; }
#result-score { font-family: var(--display); font-size: 4.25rem; font-weight: 700; line-height: 0.95; }
#result-rungs { font-size: 0.875rem; color: var(--text-2); }

#log-note { color: var(--error); font-size: 0.875rem; }
#log-note:empty { display: none; }
#save-test { flex: none; margin-top: 8px; }
#save-test:disabled { background: var(--surface); color: var(--muted); }
.save-hint { text-align: center; }

/* --- Panels: the 1RMs list (Log test) and Upcoming (Meet) ------------------------------ */

.panel { position: relative; margin-top: 24px; }
.intro { margin: 6px 0 8px; }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fields .wide { grid-column: 1 / -1; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--muted); }

.fields input, .fields select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px+ stops mobile browsers zooming in on focus */
}
.fields input:focus-visible, .fields select:focus-visible { outline-offset: -1px; } /* inside the field: an open event clips anything outside it */
.fields input::placeholder { color: var(--muted); opacity: 0.7; }
.fields input:invalid { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, var(--surface)); }
#class-note { margin: 0; }

.event { border-top: 1px solid var(--divider); }
.event:last-child { border-bottom: 1px solid var(--divider); }
.event summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.event summary::-webkit-details-marker { display: none; }
/* Opening and closing glide to the natural height (Chromium; other browsers just snap). */
.event::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--duration-fast) var(--ease-smooth-out), content-visibility var(--duration-fast) allow-discrete;
}
.event[open]::details-content { height: auto; }
.event-title::after { content: " +"; color: var(--muted); }
.event[open] .event-title::after { content: " −"; }
.event-score { font-family: var(--display); font-size: 1.375rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.event-score .to { font-family: var(--body); font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.event[data-invalid="true"] .event-score { color: var(--error); font-family: var(--body); font-size: 0.8125rem; }
.event .fields { padding-bottom: 16px; }

.scenario { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--border); border-radius: 12px; }
.scenario legend { padding: 0 4px; font-size: 0.875rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.event-preview span { display: block; }
.event-preview, .event-info, .event-note { margin: 0; }
.event-info:empty, .event-note:empty, #events-note:empty { display: none; }

.button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.add { width: 100%; margin-top: 12px; }

/* --- Progress: chart, weight-class lever, lift split, tests ------------------------------- */

/* Score | Total | BW (chalk when chosen, like the experience tabs) and 3M | All (underlined). */
.chart-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.view-group { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.view-option {
  min-width: 52px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.view-option[aria-pressed="true"] { color: var(--bg); font-weight: 600; }
.view-range { gap: 0; padding: 0; background: none; }
.view-range .view-option { min-width: 44px; padding: 0 10px; border-radius: 0; }
.view-range .view-option[aria-pressed="true"] { color: var(--text); }
/* The underline: a 2px accent bar along the chosen option's bottom edge. */
.view-range::before {
  top: calc(var(--ind-h, 0px) - 2px);
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
/* Lifts' second choice (Total | Squat | Bench | Deadlift), under the top row, in the same underlined style. */
.view-lift { margin: -4px 0 8px; }
.view-lift[hidden] { display: none; }
.chart-card { display: flex; flex-direction: column; gap: 10px; }
/* On narrow screens the change drops onto its own line rather than squeezing the score. */
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.chart-score { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#chart-now { font-family: var(--display); font-size: 2.75rem; font-weight: 700; line-height: 0.95; }
#chart-change { margin-left: auto; font-size: 0.875rem; font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; }
#chart-change.up { color: var(--accent); }
/* The plot keeps one height from one test to many, so the page doesn't jump as data grows. */
.chart-plot { position: relative; }
#chart { display: block; width: 100%; height: auto; aspect-ratio: 340 / 190; overflow: visible; }
.chart-hit { position: absolute; inset: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.chart-rung { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 5; opacity: 0.7; }
.chart-rung.next { stroke: var(--accent); stroke-width: 1.5; opacity: 1; }
.chart-rung-label { fill: var(--muted); font-family: var(--body); font-size: 11px; font-weight: 600; }
.chart-rung-label.next { fill: var(--accent); }
.chart-tick { fill: var(--muted); font-family: var(--body); font-size: 11px; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.dense { stroke-width: 2; }
/* A short chalk glint travelling the line towards the latest entry, then a rest. pathLength 1 makes the dash a
   share of the line, so it's the same on a short or a long history. */
.chart-pulse {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 1.1;
  opacity: 0.5;
  pointer-events: none;
  animation: line-pulse 3.2s var(--ease-in-out) 0.6s infinite backwards;
}
@keyframes line-pulse {
  from { stroke-dashoffset: 0.1; }
  70%, to { stroke-dashoffset: -1; }
}
/* The glint arriving: two half-rings drawn from where the line comes in, over and under, then fading.
   Same cycle as the glint, starting as its head reaches the latest entry. */
.chart-arrive {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0 1;
  opacity: 0;
  pointer-events: none;
  animation: ring-arrive 3.2s linear 0.6s infinite backwards;
}
@keyframes ring-arrive {
  from, 55% { stroke-dasharray: 0 1; opacity: 0; animation-timing-function: var(--ease-smooth-out); }
  57% { opacity: 0.6; }
  70% { stroke-dasharray: 0.5 1; opacity: 0.6; }
  90%, to { stroke-dasharray: 0.5 1; opacity: 0; }
}
.chart-dot { fill: var(--accent); }
/* Where a rung was first cleared: hollow. A test in your other sex category: muted, so it isn't read as this one's. */
.chart-dot.cleared { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.chart-dot.other { fill: var(--text-2); }
.chart-grid { stroke: var(--divider); stroke-width: 1; }
/* Beyond the published rungs: a faint band and its name ("Top 10%"), no accent. */
.chart-band { fill: var(--text); opacity: 0.04; }
.chart-band-label { fill: var(--text-2); font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.chart-value { fill: var(--muted); font-family: var(--body); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-guide { stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.chart-offchart { margin-top: -4px; }
.chart-rungs-for { margin-top: -8px; }

/* The selected test's tooltip: beside its point, on the side with more room, so it doesn't cover the rung labels. */
.chart-tip {
  position: absolute;
  z-index: 1;
  width: max-content;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.8125rem;
  line-height: 1.3;
  pointer-events: none;
  /* Offsets set from progress.js once the tooltip's size is known (chart.js tipSide decides the side). */
  --tip-x: 16px;
  --tip-y: -50%;
  transform: translate(var(--tip-x), var(--tip-y));
}
.chart-tip[hidden] { display: none; }
#tip-title, #tip-sub { color: var(--muted); }
#tip-score { font-weight: 600; font-variant-numeric: tabular-nums; }
#tip-sub { font-size: 0.75rem; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--muted); }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.key-rung { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--muted); background: none; }
.key-cleared { width: 12px; height: 12px; border: 2.5px solid var(--accent); background: var(--surface); box-sizing: border-box; }
.key-other { background: var(--text-2); }
.key-pr { width: auto; height: auto; border-radius: 0; background: none; color: var(--text); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; }

.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tile { padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.tile-label { font-size: 0.8125rem; color: var(--muted); }
.tile-value { font-family: var(--display); font-size: 1.875rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 0.8125rem; color: var(--muted); }
.tile-sub.up { color: var(--accent); font-weight: 600; }
.chart-ring { fill: none; stroke: var(--accent); stroke-width: 2; }
/* A single lift's PR: a small label above its point (the hollow ring means a rung first cleared). */
.chart-pr { fill: var(--text); font-family: var(--body); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }

.lever { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.lever { padding: 16px; border: 1px solid var(--border); border-radius: 16px; }
.lever { gap: 14px; }
.lever-classes { align-self: stretch; }
.lever-classes[hidden] { display: none; }
.lever-classes .view-option { flex: 1; }
.lever-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lever-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface); }
.lever-value { font-family: var(--display); font-size: clamp(1.375rem, 7vw, 1.875rem); font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lever-score { color: var(--accent); }
#lever-position[hidden] { display: none; }
/* The curve: your total's score at each bodyweight, with you and the chosen class marked. */
.lever-curve { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#lever-chart { display: block; width: 100%; height: auto; aspect-ratio: 320 / 132; overflow: visible; }
.lever-line { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linejoin: round; }
.lever-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.lever-mark.goal { stroke: var(--accent); }
.lever-dot.you { fill: var(--text); }
.lever-dot.goal { fill: var(--accent); }
.lever-label { fill: var(--muted); font-family: var(--body); font-size: 11px; font-variant-numeric: tabular-nums; }
.lever-label.goal, .chart-tick.goal { fill: var(--accent); font-weight: 600; }

/* Lift balance: your share of each lift against the group's typical split, then each lift among its own rungs. */
.balance { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.balance-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; }
.balance-who { margin: 0; font-weight: 600; }
.balance-who.muted { font-weight: 400; }
.balance-who[hidden], .balance-bar[hidden], .balance-callout[hidden] { display: none; }
.balance-bar { display: flex; gap: 2px; height: 40px; border-radius: 10px; overflow: hidden; }
.balance-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  font-size: clamp(0.8125rem, 3.8vw, 0.9375rem); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--bg); background: var(--text-2);
}
.balance-seg.squat { background: var(--text); }
.balance-seg.deadlift { background: var(--muted); }
.balance-seg.opportunity { background: var(--accent); color: var(--on-accent); }
.balance-bar.typical .balance-seg { background: var(--border); color: var(--text-2); font-weight: 400; }
.balance-rows { display: flex; flex-direction: column; margin: 0 -12px; padding: 0; list-style: none; }
.balance-rows li + li { border-top: 1px solid var(--divider); }
.balance-row {
  display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr auto; align-items: baseline; gap: 10px;
  width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-in-out);
}
.balance-rows li:has([aria-expanded="true"]) { border-radius: 10px; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.balance-row:disabled { cursor: default; color: var(--muted); }
.balance-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .balance-row:not(:disabled, [aria-expanded="true"]):hover { background: var(--surface-2); } }
.balance-pick { margin: 0; }
.balance-pick[hidden] { display: none; }
.balance-detail { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 14px; }
.balance-detail p { margin: 0; color: var(--text-2); }
.balance-detail p:first-child { color: var(--text); }
.balance-name { font-weight: 600; }
.balance-kg { color: var(--muted); font-variant-numeric: tabular-nums; }
.balance-band { text-align: right; font-variant-numeric: tabular-nums; }
.balance-band.opportunity { color: var(--accent); font-weight: 600; }
.balance-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 14px; }
.balance-mark { flex: none; width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 2.2; }
.balance-lines { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.balance-lines p { margin: 0; color: var(--text-2); }
.balance-lines p:first-child { color: var(--text); }

/* Your numbers: each value behind your score, tested in your latest record or carried from an earlier one. */
.numbers { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.numbers-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.numbers-list li:last-child { border-bottom: 0; }
.numbers-name { font-weight: 600; }
.numbers-kg { grid-row: span 2; font-family: var(--display); font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.numbers-when { font-size: 0.8125rem; color: var(--muted); }
.numbers-when.stale { color: var(--text-2); }
.numbers-best { display: block; font-family: var(--body); font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.numbers-note { color: var(--text-2); }
.numbers-note:empty { display: none; }

/* Your data: backup, restore and hold to clear. */
.your-data { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.your-data h2 { font-size: 1.5rem; font-weight: 700; }
.your-data p { margin: 0; }
.data-backup { color: var(--text-2); }
.data-backup.due { color: var(--text); font-weight: 600; }
.data-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.data-note { color: var(--error); }
.data-note:empty { display: none; }
.onboard-restore { align-self: center; }

/* Hold to clear: fills with red from the left while held (--hold, 0 to 1, set by yourdata.js); letting go empties
   it. A long press selects no text and opens no menu. */
.hold-button {
  --hold: 0;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--error) 60%, var(--border));
  border-radius: 12px;
  background: linear-gradient(to right, color-mix(in srgb, var(--error) 40%, transparent) calc(var(--hold) * 100%), transparent 0) var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.hold-button.holding { border-color: var(--error); }

.test-head { display: flex; flex-direction: column; gap: 2px; }
/* A record that beat your previous best on a lift. Chalk, like the chosen tabs: the accent stays for your next action. */
.pr-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--text-2); border-radius: 6px; color: var(--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; vertical-align: 2px; }
.fields-lifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.link-button:disabled { color: var(--muted); text-decoration: none; cursor: not-allowed; }

.link-button {
  justify-self: start;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Meet: a list of cards ---------------------------------------------------------- */

.meet-cards { display: flex; flex-direction: column; gap: 16px; }
/* Upcoming leads the Meet screen; the cards follow it. */
#screen-meet .panel { margin: 0 0 24px; }
.meet-unlock { margin-bottom: 24px; }
.unlock-list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
.unlock-list li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--accent); }
.unlock-list .muted { font-size: 0.875rem; }
.meet-card { display: flex; flex-direction: column; gap: 12px; }
.meet-card-head { display: flex; flex-direction: column; gap: 2px; }
.meet-card-head .eyebrow { font-size: 0.75rem; }
.meet-card-head h2 { font-size: 1.5rem; font-weight: 700; }
.meet-card-body { display: flex; flex-direction: column; gap: 12px; }

/* Attempt planner: lifts by attempt; your thirds are your goal, so they're accent. */
.plan-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.plan-table th, .plan-table td { padding: 10px 0; text-align: right; }
.plan-table thead th { padding-top: 0; font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.plan-table tbody tr { border-top: 1px solid var(--divider); }
.plan-table th:first-child { text-align: left; }
.plan-table tbody th { font-weight: 600; }
.plan-1rm { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.plan-third { color: var(--accent); }
td.plan-third { font-weight: 700; }
.plan-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plan-step {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.875rem;
}
.plan-step-name { color: var(--muted); }
.plan-note { font-size: 0.75rem; color: var(--text-2); text-align: right; }
.plan-goal { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.plan-goal .plan-step-name, .plan-goal .plan-note { color: inherit; }
.plan-choice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.plan-choice .view-option { min-width: 52px; padding: 0 8px; }

.meet-empty { font-size: 0.9375rem; }

/* Meet day: one attempt at a time, big enough to read at arm's length; good lift / no lift as two large buttons. */
.day-live { display: flex; flex-direction: column; gap: 14px; }
.day-strip { display: flex; gap: 6px; }
.day-seg { flex: 1; height: 6px; border-radius: 3px; background: var(--divider); }
.seg-first:not(:first-child) { margin-left: 8px; } /* a gap between lifts */
.seg-good { background: var(--text); }
.seg-miss { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.seg-next { background: var(--accent); }
.day-now { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.day-what { font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.day-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; width: 100%; }
.day-kg { font-family: var(--display); font-size: 6.5rem; font-weight: 700; line-height: 0.9; text-align: center; }
.day-rack { font-size: 0.9375rem; }
.day-plates { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.day-plates strong { font-size: 1.0625rem; font-weight: 600; }
.day-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.day-good, .day-bad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  border-radius: 14px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: scale var(--duration-quick) var(--ease-smooth-out);
}
.day-good { border: 0; background: var(--text); color: var(--bg); }
.day-bad { border: 1px solid var(--border); background: transparent; color: var(--text); }
:is(.day-good, .day-bad):active { scale: var(--scale-press); }
.day-good svg, .day-bad svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.day-after { text-align: center; }
.day-live .link-button { align-self: center; }
.day-setup summary { min-height: 44px; display: flex; align-items: center; color: var(--text-2); cursor: pointer; }
.day-setup .fields { padding-top: 4px; }

.day-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 0; }
.day-top:has(> :not([hidden])) { min-height: 28px; }
.day-wait { margin: 0 0 0 auto; }

/* Warm-ups: each set a row you can tap off; the one due now is accent (your next action). */
.warm-live { display: flex; flex-direction: column; gap: 12px; }
.warm-live > .view-group { align-self: flex-start; }
.warm-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.warm-set, .warm-opener {
  display: grid;
  grid-template-columns: 58px 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
  text-align: left;
  cursor: pointer;
}
.warm-time { font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.warm-kg { font-weight: 600; }
.warm-reps { color: var(--muted); }
.warm-mark { justify-self: center; width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 50%; }
.warm-due { background: var(--accent); color: var(--on-accent); }
.warm-due .warm-time, .warm-due .warm-reps { color: inherit; }
.warm-due .warm-mark { border-color: var(--on-accent); background: var(--on-accent); }
.warm-done { color: var(--muted); }
.warm-done .warm-kg { font-weight: 400; text-decoration: line-through; }
.warm-done .warm-mark { width: 14px; height: 8px; border: solid currentColor; border-width: 0 0 2px 2px; border-radius: 0; rotate: -45deg; translate: 0 -2px; }
.warm-opener { margin-top: 4px; border-top: 1px solid var(--divider); border-radius: 0; cursor: default; }
.warm-opener .warm-time { color: var(--text); font-weight: 600; }
.warm-opener .warm-kg { font-weight: 700; }
.warm-opener .warm-mark { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--text); rotate: 45deg; }

/* Meet attempts: lifts by attempt, then made, total and kg left on the platform. Misses are dashed and struck
   through; PRs carry the chalk PR badge, as on Progress. */
.result-grid { display: grid; grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 6px; }
.result-row { display: contents; }
.result-head { font-size: 0.75rem; color: var(--muted); text-align: center; }
.result-lift { align-self: center; font-weight: 600; }
.result-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
}
.result-good { color: var(--text); }
.result-good .result-kg { font-weight: 600; }
.result-miss { border: 1px dashed var(--muted); background: transparent; }
.result-miss .result-kg { text-decoration: line-through; }
.result-cell .pr-badge { margin: 0; }
.result-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.result-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.result-value { font-weight: 600; }

/* Plate loader: the weight between − and +, one side of the bar drawn, and the plates listed. */
.plate-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.plate-stepper .step-btn { width: 48px; height: 48px; }
.plate-total { font-family: var(--display); font-size: 2.75rem; font-weight: 700; line-height: 1; text-align: center; }
.plate-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 140px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}
.plate-bar::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 4px); height: 8px; background: var(--border); }
.plate-sleeve { position: relative; flex: none; width: 14px; height: 36px; border-radius: 3px; background: var(--muted); }
.plate { position: relative; flex: none; border-radius: 4px; }
.plate-collar { position: relative; flex: none; width: 12px; height: 28px; border-radius: 3px; background: var(--text-2); }
.plate-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.plate-side { display: flex; flex-direction: column; }
.plate-side strong { font-size: 1.0625rem; font-weight: 600; }

/* Reduced motion: nothing moves or scales, and colours and fades still change, so every state change stays visible. */
@media (prefers-reduced-motion: reduce) {
  .slide::before { transition-property: none; }
  :is(.primary, .step-btn, .button, .chip-button, .day-good, .day-bad):active:not(:disabled) { scale: none; }
  .event::details-content { transition: none; }
  .chart-pulse, .chart-arrive { display: none; }
  @keyframes rise-in { from { opacity: 0; } }
  .reveal-bars.grow .reveal-bar, .standing-dots.fill :is(span.on, span.target) { animation: none; }
  .onboard-bar span { transition: none; }
  @keyframes swap-in { from { opacity: 0; } }
  @keyframes draw-check { from { stroke-dashoffset: 0; } }
  @keyframes drop-in { from { opacity: 0; } }
  @keyframes drop-out { to { opacity: 0; } }
  .dialog:not([open]), .dialog[open] { translate: none; }
  @starting-style { .dialog[open] { translate: none; } }
  .tab-icon .icon-fill, .tabbar a[aria-current="page"] .icon-out { scale: 1; filter: none; }
}