/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;
  accent-color: var(--ink);

  /* Neutrals: warm-grey ramp, near-black ink */
  --paper: #f4f4f5;
  --card: #ffffff;
  --sunk: #ededef;
  --ink: #17171a;
  --muted: #6b6b76;
  --faint: #9a9aa6;
  --line: rgba(20, 20, 30, 0.09);
  --line-strong: rgba(20, 20, 30, 0.16);

  /* Accents: one warm clay for effort, sage for completion */
  --clay: #b4471f;
  --clay-soft: #fbeae2;
  --clay-line: rgba(180, 71, 31, 0.22);
  --sage: #2f6b4f;
  --sage-soft: #e3efe8;
  --sage-line: rgba(47, 107, 79, 0.22);
  --warn: #8a6320;

  /* Elevation */
  --lift-1: 0 1px 2px rgba(16, 18, 27, 0.04), 0 0 0 1px var(--line);
  --lift-2:
    0 1px 2px rgba(16, 18, 27, 0.05), 0 8px 24px -12px rgba(16, 18, 27, 0.18),
    0 0 0 1px var(--line);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  font-family: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Dark tokens, applied by system preference unless the user picked Pale,
   and by the in-app switch either way. */
:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  --dark-paper: #1b1b20;
  --dark-card: #26262d;
  --dark-sunk: #313139;
  --dark-ink: #ededf1;
  --dark-muted: #a8a8b4;
  --dark-faint: #7c7c8a;
  --dark-line: rgba(255, 255, 255, 0.1);
  --dark-line-strong: rgba(255, 255, 255, 0.2);
  --dark-clay: #f2916a;
  --dark-clay-soft: rgba(242, 145, 106, 0.16);
  --dark-clay-line: rgba(242, 145, 106, 0.32);
  --dark-sage: #86cea6;
  --dark-sage-soft: rgba(134, 206, 166, 0.16);
  --dark-sage-line: rgba(134, 206, 166, 0.32);
  --dark-warn: #dcb26a;
  --dark-lift-1: 0 0 0 1px var(--line);
  --dark-lift-2: 0 6px 20px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--dark-paper);
    --card: var(--dark-card);
    --sunk: var(--dark-sunk);
    --ink: var(--dark-ink);
    --muted: var(--dark-muted);
    --faint: var(--dark-faint);
    --line: var(--dark-line);
    --line-strong: var(--dark-line-strong);
    --clay: var(--dark-clay);
    --clay-soft: var(--dark-clay-soft);
    --clay-line: var(--dark-clay-line);
    --sage: var(--dark-sage);
    --sage-soft: var(--dark-sage-soft);
    --sage-line: var(--dark-sage-line);
    --warn: var(--dark-warn);
    --lift-1: var(--dark-lift-1);
    --lift-2: var(--dark-lift-2);
  }
}

:root[data-theme="dark"] {
  --paper: var(--dark-paper);
  --card: var(--dark-card);
  --sunk: var(--dark-sunk);
  --ink: var(--dark-ink);
  --muted: var(--dark-muted);
  --faint: var(--dark-faint);
  --line: var(--dark-line);
  --line-strong: var(--dark-line-strong);
  --clay: var(--dark-clay);
  --clay-soft: var(--dark-clay-soft);
  --clay-line: var(--dark-clay-line);
  --sage: var(--dark-sage);
  --sage-soft: var(--dark-sage-soft);
  --sage-line: var(--dark-sage-line);
  --warn: var(--dark-warn);
  --lift-1: var(--dark-lift-1);
  --lift-2: var(--dark-lift-2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Shell ───────────────────────────────────────────────────────────── */

#app {
  min-height: 100dvh;
  max-width: 440px;
  margin: 0 auto;
  padding:
    calc(16px + var(--safe-top))
    16px
    calc(16px + var(--safe-bottom));
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
}

.screen-home,
.screen-exercise {
  height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
}

.screen-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.screen-body::-webkit-scrollbar {
  display: none;
}

/* ── Type ────────────────────────────────────────────────────────────── */

.kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

h1,
h2,
.display {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.032em;
}

h1 {
  font-size: 1.95rem;
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.2;
}

p {
  margin: 0;
}

.lede {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.quote {
  color: var(--clay);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Title, French original and instruction read as one block. */
.exercise-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.exercise-head .lede {
  margin-top: 5px;
}

/* ── Surfaces ────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--lift-1);
}

.tally {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tally strong {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tally span {
  color: var(--faint);
  font-size: 0.82rem;
  font-weight: 500;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Session dots ────────────────────────────────────────────────────── */

.sessions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.session-dot {
  height: 40px;
  border-radius: var(--radius);
  background: var(--sunk);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  transition: background 180ms ease, color 180ms ease;
}

.session-dot.done {
  background: var(--sage-soft);
  box-shadow: inset 0 0 0 1px var(--sage-line);
  color: var(--sage);
}

.session-dot.goal {
  outline: 1px dashed var(--line-strong);
  outline-offset: 2px;
}

/* ── Plan list ───────────────────────────────────────────────────────── */

.plan {
  display: flex;
  flex-direction: column;
  padding: 2px 16px;
}

.plan-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.plan-item:last-child {
  border-bottom: 0;
}

.plan-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.plan-item strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.011em;
}

.plan-item span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.plan-meta {
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius);
  padding: 13px 18px;
  min-height: 50px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
  transition: transform 120ms ease, opacity 120ms ease, background 160ms ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.985);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-hold {
  background: var(--clay);
  color: #fff;
}

.btn-good {
  background: var(--sage);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 500;
}

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-row .btn {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.88rem;
}

/* ── Topbar and progress ─────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.icon-btn {
  appearance: none;
  border: 0;
  background: var(--card);
  box-shadow: var(--lift-1);
  border-radius: var(--radius);
  min-width: 44px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: transform 120ms ease;
}

.icon-btn:active {
  transform: scale(0.96);
}

.progress-track {
  height: 4px;
  background: var(--sunk);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 99px;
  width: 0;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Stage: figure + companion ───────────────────────────────────────── */

/* The figure and its companion (the timer ring, or the step list) split the
   space left over after the heading, so the screen fits by construction
   instead of scrolling. Stacked when there is vertical room; side by side
   on short screens — see the short-screen block at the end of this file. */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

/* The box keeps the sources' own 3:2 ratio (all five are 900x600), so the
   photos are only ever scaled, never cropped. Width drives height. */
.figure {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 82%;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  flex: 0 0 auto;
  min-height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--lift-2);
}

.figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Timer ───────────────────────────────────────────────────────────── */

.timer-wrap {
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  width: clamp(120px, 24vh, 168px);
}

.timer-ring {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1;
}

.timer-ring circle {
  fill: none;
  stroke-width: 6;
}

.timer-ring .track {
  stroke: var(--sunk);
}

.timer-ring .value {
  stroke: var(--clay);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 80ms linear;
}

.timer-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.timer-readout strong {
  display: block;
  font-size: clamp(1.9rem, 6.4vh, 3.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.timer-readout span {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

/* ── Reps ────────────────────────────────────────────────────────────── */

.reps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.reps .count {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.reps .range {
  margin-top: 4px;
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Chips ───────────────────────────────────────────────────────────── */

.chips {
  display: flex;
  gap: 6px;
  padding: 3px;
  background: var(--sunk);
  border-radius: 999px;
}

.chip {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.chip.active {
  background: var(--card);
  color: var(--clay);
  box-shadow: 0 1px 2px rgba(16, 18, 27, 0.06), inset 0 0 0 1px var(--clay-line);
}

/* ── Sequence steps ──────────────────────────────────────────────────── */

.sequence {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--radius);
  background: var(--sunk);
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 500;
  transition: background 180ms ease, color 180ms ease;
}

.step.active {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--lift-2);
}

.step.done {
  background: var(--sage-soft);
  color: var(--sage);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: 0.6;
}

.step.active .dot {
  opacity: 1;
  background: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-soft);
}

/* ── Status line ─────────────────────────────────────────────────────── */

.status {
  min-height: 1.4em;
  max-width: 52%;
  text-align: right;
  text-wrap: balance;
  font-size: 0.84rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--muted);
}

.status.running {
  color: var(--clay);
  font-weight: 600;
}

.status.rest {
  color: var(--warn);
}

.status.complete,
.status.done {
  color: var(--sage);
  font-weight: 600;
}

/* ── Footer actions ──────────────────────────────────────────────────── */

.actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  padding-top: 12px;
}

.done-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage-soft);
  box-shadow: inset 0 0 0 1px var(--sage-line);
  color: var(--sage);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Short screens ───────────────────────────────────────────────────── */

@media (max-height: 800px) {
  /* Not enough height to stack the figure above its companion, so they go
     side by side. This buys back roughly the height of the figure — enough
     to keep the whole exercise on one screen on a 13 mini in Safari. */
  .stage {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* Width drives the figure (height follows the 3:2 ratio), so a row leaves
     some vertical slack rather than cropping the photo. */
  .stage .figure {
    max-width: none;
    max-height: 100%;
    flex: 1 1 0;
    min-width: 0;
  }

  .stage .timer-wrap {
    width: clamp(112px, 34vw, 150px);
  }

  /* The step list is the flexible half; the figure yields to it. */
  .stage-sequence .figure {
    flex: 0 0 46%;
  }

  .stage-sequence .sequence {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }

  .step {
    padding: 7px 11px;
    font-size: 0.86rem;
    gap: 8px;
  }

  .sequence {
    gap: 4px;
  }

  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  .lede {
    font-size: 0.9rem;
  }

  .quote {
    font-size: 0.8rem;
  }

  .btn {
    min-height: 46px;
    padding: 11px 16px;
  }

  .row-hold {
    margin-bottom: -2px;
  }
}

/* On short screens the plan list drops the French subtitle — it is still
   shown on each exercise screen, so nothing is lost, and it buys ~80px. */
@media (max-height: 760px) {
  .plan-item span {
    display: none;
  }

  .plan-item {
    padding-block: 8px;
  }

  .card {
    padding: 13px 14px;
  }

  .plan {
    padding: 2px 14px;
  }

  h1 {
    font-size: 1.6rem;
  }
}

/* Very short viewports (13 mini in Safari with both toolbars, landscape).
   Trim the heading block, the last thing worth sacrificing. */
@media (max-height: 680px) {
  .screen,
  .screen-body {
    gap: 10px;
  }

  .stage {
    gap: 10px;
  }

  .step {
    padding: 5px 10px;
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .sequence {
    gap: 3px;
  }

  .stage-sequence .figure {
    flex: 0 0 44%;
  }

  .exercise-head .lede {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .reps .count {
    font-size: 1.6rem;
  }

  .btn {
    min-height: 44px;
    padding: 10px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 320px-wide phones: the step labels need the width more than the figure. */
@media (max-width: 340px) {
  .stage-sequence .figure {
    flex: 0 0 32%;
  }

  .step {
    font-size: 0.8rem;
  }
}