/* =============================================================================
   Mighty Reset — Stylesheet
   -----------------------------------------------------------------------------
   Shared Mighty ecosystem foundation (near-black blue surfaces, off-white type,
   blue-gray support text, layered cards, subtle borders) with Reset's own
   identity: a soft frost-blue accent carrying a restrained indigo undertone.
   Calmer and lighter than Focus, cooler than Vital.

   1.  Tokens
   2.  Base & layout shell
   3.  Navigation (bottom bar / desktop rail)
   4.  Typography & shared blocks
   5.  Onboarding
   6.  Home
   7.  Duration
   8.  Reset session
   9.  Completion
   10. Journey
   11. Settings
   12. Buttons & controls
   13. Sheets & toast
   14. Motion & responsive
   ========================================================================== */

/* ────────────────────────────────────────────────────────── 1. TOKENS ───── */
:root {
  /* Reset's accent: soft frost blue, indigo underneath */
  --accent: #9CC2EC;
  --accent-bright: #CBE0F7;
  --accent-indigo: #7C86D8;
  --accent-soft: rgba(156, 194, 236, 0.13);
  --accent-line: rgba(156, 194, 236, 0.30);

  /* Surfaces */
  --bg: #080B11;
  --surface: #0F141C;
  --surface-2: #141B25;
  --surface-3: #1A2230;
  --line: rgba(255, 255, 255, 0.07);
  --line-soft: rgba(255, 255, 255, 0.045);

  /* Text */
  --text: #EDF1F7;
  --muted: #A2B0C2;
  --muted-dim: #808EA0;
  --warn: #E8A9A9;
  --on-accent: #06101B;

  /* Shape */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Rhythm */
  --pad: 20px;
  --tap: 48px;
  --nav-h: 64px;
  --rail-w: 232px;
  --max-w: 620px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 26px rgba(0, 0, 0, 0.32);
  --shadow-lift: 0 14px 40px rgba(0, 0, 0, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ─────────────────────────────────────────────── 2. BASE & LAYOUT ──────── */
* { box-sizing: border-box; }

/* Screens, sheets and slides are toggled with the hidden attribute, and several
   of them are display:flex — which would otherwise beat hidden. Keep this. */
[hidden] { display: none !important; }

html, body { min-height: 100%; }

/* The brand-mark sprite holds <symbol> definitions only — nothing in it is
   meant to render. Left inline it still occupies a line box, which quietly
   added ~24px of scrollable height to every screen. */
.sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* One quiet atmospheric wash, nothing more. */
body::before {
  content: "";
  position: fixed;
  inset: -25% -20% auto -20%;
  height: 60vh;
  background:
    radial-gradient(55% 55% at 28% 18%, rgba(156, 194, 236, 0.075), transparent 72%),
    radial-gradient(45% 45% at 82% 0%, rgba(124, 134, 216, 0.055), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top, 0px) + 16px)
    calc(env(safe-area-inset-right, 0px) + var(--pad))
    calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 20px)
    calc(env(safe-area-inset-left, 0px) + var(--pad));
}

/* Immersive screens (a running reset) drop the nav and its reserved space. */
.shell[data-chrome="none"] .app {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.shell[data-chrome="none"] .nav { display: none; }

.screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  animation: screen-in var(--dur-slow) var(--ease) both;
  outline: none;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
  z-index: 80;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.screen:focus, .screen:focus-visible,
.onboarding:focus, .onboarding:focus-visible { outline: none; }

/* ──────────────────────────────────────────────────── 3. NAVIGATION ────── */
.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0px)) 8px;
  background: rgba(10, 14, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
/* The rail-only parts. On phones the bottom bar carries navigation alone —
   the brand sits on Home and the secondary links sit in Settings. */
.nav__brand,
.nav__foot { display: none; }

.nav__list {
  display: flex;
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list > li { flex: 1 1 0; }

.nav__item {
  width: 100%;
  min-height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--muted-dim);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.nav__item:hover { color: var(--muted); }
.nav__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease);
}
.nav__icon svg { width: 21px; height: 21px; }
.nav__item[aria-current="page"] { color: var(--accent-bright); }
.nav__item[aria-current="page"] .nav__icon { background: var(--accent-soft); }
.nav__label { font-weight: 550; }

/* Secondary rail links: same rhythm as the primary items, deliberately
   quieter. No icons, so the eye reads them as a different tier. Centered,
   like the rest of this footer block — the canonical Mighty Drive pattern
   for the quiet utility area at the bottom of the rail. */
.nav__secondary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--muted-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: center;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--muted); background: rgba(255, 255, 255, 0.025); }
.nav__link[aria-current="page"] { color: var(--accent-bright); background: var(--accent-soft); }

.nav__note {
  margin: 16px 0 0;
  padding: 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-dim);
  text-align: center;
  opacity: 0.75;
}

.nav__rule {
  margin: 18px 12px 14px;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

/* ─────────────────────────────────────── 4. TYPOGRAPHY & SHARED ───────── */
/* Product branding: the official Mighty Reset mark beside the lockup — the
   same canonical artwork used across the ecosystem, so the icon in this
   corner, the favicon and the home-screen icon are all one image. Kept
   deliberately small — this is a signature, not a hero. The artwork already
   carries its own dark frame and glow, so the chip is just a clipped box;
   .is-fallback only shows its tint if the image ever fails to load. */
.brand { display: flex; align-items: center; gap: 11px; }
.brand__icon {
  flex: none;
  display: block;
  width: 34px; height: 34px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  /* A soft frost-tinted glow rather than a flat black drop shadow — the
     corner mark should read as gently lit, in keeping with Reset's own
     glow identity, the same way the sibling apps tint their own mark's
     shadow with their accent. */
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(156, 194, 236, 0.16);
}
.brand__icon svg,
.brand__icon-img { display: block; width: 100%; height: 100%; }
.brand__icon-img { object-fit: cover; }
.brand__icon.is-fallback {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.brand__icon.is-fallback svg { width: 60%; height: 60%; }
.brand__icon--sm { width: 30px; height: 30px; border-radius: 9px; }
.brand--home .brand__icon { width: 32px; height: 32px; }

.lockup { display: flex; flex-direction: column; line-height: 1; }
.lockup__parent {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.44em;
  color: var(--accent);
  opacity: 0.85;
}
.lockup__product {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.lockup--sm .lockup__product { font-size: 19px; margin-top: 5px; }
.lockup--home .lockup__product { font-size: 21px; margin-top: 5px; }
.lockup--rail .lockup__parent { font-size: 9px; letter-spacing: 0.38em; }
.lockup--rail .lockup__product { font-size: 17px; margin-top: 5px; }

.question {
  font-size: clamp(23px, 6.4vw, 29px);
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.question__sub {
  margin: 8px 0 20px;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 34ch;
}

.screen-head { margin: 4px 0 20px; }
.screen-title {
  margin: 0;
  font-size: clamp(24px, 6.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.screen-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 26px 0 10px;
}

.fine-print {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted-dim);
  text-align: center;
}

.attrib {
  margin: 24px 0 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--muted-dim);
}

.text-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.text-link:hover { color: var(--accent-bright); }

.bar {
  display: grid;
  grid-template-columns: var(--tap) 1fr var(--tap);
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.bar__title {
  margin: 0;
  min-width: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar__title small {
  display: block;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
}
.bar--session { margin-bottom: 14px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.card--pad { padding: 16px; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px;
  margin-top: 12px;
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.panel__title { margin: 0; font-size: 14px; font-weight: 600; }
.panel__note { margin: 0; font-size: 12px; color: var(--muted-dim); text-align: right; }

/* ──────────────────────────────────────────────────── 5. ONBOARDING ───── */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    calc(env(safe-area-inset-right, 0px) + var(--pad))
    calc(env(safe-area-inset-bottom, 0px) + 24px)
    calc(env(safe-area-inset-left, 0px) + var(--pad));
  animation: fade-in var(--dur) var(--ease) both;
}
.onboarding__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.onboarding__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.onb-slide {
  text-align: center;
  animation: slide-in var(--dur-slow) var(--ease) both;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.onb-mark {
  width: 76px;
  margin: 0 auto 26px;
  color: var(--accent);
}
.onb-mark svg { width: 100%; height: auto; }
.onb-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.onb-text {
  margin: 0 auto;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.onboarding__foot {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dot-step {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}
.dot-step[aria-current="step"] {
  width: 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.onboarding__controls { display: grid; gap: 10px; }
.onboarding__controls .btn--quiet { order: 2; }

/* ───────────────────────────────────────────────────────── 6. HOME ────── */
.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.greeting {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted-dim);
  letter-spacing: 0.01em;
  text-align: right;
}

.streak-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--accent-bright);
}
.streak-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Six states, two columns on a phone, three across from 600px — so a wide
   screen shows the 2 x 3 grid the product asks for rather than a long row. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 108px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.tile:hover { border-color: var(--accent-line); background: var(--surface-2); }
.tile:active { transform: scale(0.98); background: var(--surface-3); }

.tile__icon {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: auto;
}
.tile__icon svg { width: 19px; height: 19px; }
.tile__name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tile__blurb {
  font-size: 11.5px;
  color: var(--muted-dim);
  line-height: 1.3;
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surprise {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(120deg, rgba(156, 194, 236, 0.12), rgba(124, 134, 216, 0.10));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease);
}
.surprise:hover { border-color: rgba(156, 194, 236, 0.5); }
.surprise:active { transform: scale(0.99); }
.surprise__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(156, 194, 236, 0.16);
  color: var(--accent-bright);
  flex: none;
}
.surprise__icon svg { width: 21px; height: 21px; }
.surprise__text { display: flex; flex-direction: column; min-width: 0; }
.surprise__text strong { font-size: 16px; font-weight: 700; }
.surprise__text small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.surprise__go { margin-left: auto; color: var(--accent); flex: none; }
.surprise__go svg { width: 20px; height: 20px; display: block; }

/* ───────────────────────────────────────────────────── 7. DURATION ────── */
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 14px 7px 8px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 550;
}
.context-chip__icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}
.context-chip__icon svg { width: 15px; height: 15px; }

/* Three choices, so they can all be large. Side by side from 480px up — that
   is the "1 MIN  3 MIN  5 MIN" row, and it is the same shape on a phone and a
   car screen, just scaled. */
.duration-grid { display: grid; gap: 11px; }

.duration {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.duration:hover { border-color: var(--accent-line); background: var(--surface-2); }
.duration:active { transform: scale(0.99); background: var(--surface-3); }
.duration__value {
  font-size: clamp(32px, 8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.duration__unit {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.duration__hint { font-size: 12.5px; color: var(--muted-dim); }
/* The saved default is marked with a quiet edge, not a badge. */
.duration--rec { border-color: var(--accent-line); }

.duration-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--muted-dim);
  text-align: center;
}

/* ─────────────────────────────────────────────── 8. RESET SESSION ─────── */
/* The interface gets quieter as the user resets. Identity shrinks to one
   small line, progress becomes a hairline, and the instruction takes the
   screen. Nothing here competes with the words. */
.screen--reset { justify-content: space-between; }

.session-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  opacity: 0.65;
}
.session-mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 7px;
  overflow: hidden;
}
.session-mark svg,
.session-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.session-id { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.session-id__app {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--muted-dim);
}
.session-id__ctx { font-size: 12px; color: var(--muted); }

.segments { display: flex; gap: 5px; margin-bottom: 6px; }
.segment {
  flex: 1 1 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.segment__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 220ms linear;
}
.segment--done .segment__fill { width: 100%; }

.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 18px;
  padding: 8px 0 4px;
  text-align: center;
}

/* A very slow breathing glow behind the stage — the only motion in the app.
   It is meant to be felt rather than watched, and it stops entirely when
   reduced motion is on (see section 14).

   Deliberately position: fixed, not absolute. The circle is wider than the
   stage and it scales, so an absolutely positioned one grows the page's
   scrollable area and the session controls slide off the bottom of a short
   landscape screen. Fixed takes it out of flow entirely, and since a running
   reset fills the viewport anyway, centring on the viewport looks the same. */
.stage::before {
  content: "";
  position: fixed;
  left: 50%; top: 50%;
  width: min(460px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156, 194, 236, 0.09), transparent 66%);
  pointer-events: none;
  z-index: -1;
  animation: breathe 11s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
/* Paused should look paused: the glow settles and stays still. */
.stage--paused::before { animation-play-state: paused; opacity: 0.35; }

.step-copy { width: 100%; max-width: 46rem; }
.step-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 8.4vw, 36px);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.14;
  text-wrap: balance;
}
.step-text { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.55; }

/* Action steps have somewhere to tap; timed steps deliberately do not. */
.btn--done {
  min-width: 190px;
  min-height: 56px;
  background: transparent;
  border-color: var(--accent-line);
  color: var(--accent-bright);
  font-size: 16px;
  font-weight: 600;
}
.btn--done:hover { background: var(--accent-soft); }

.ring {
  position: relative;
  width: min(190px, 48vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track, .ring__value { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.ring__track { stroke: rgba(255, 255, 255, 0.07); }
.ring__value {
  stroke: var(--accent);
  stroke-dasharray: 339.29;   /* 2πr, r = 54 */
  stroke-dashoffset: 339.29;
  transition: stroke-dashoffset 220ms linear;
}
.ring__inner { position: absolute; text-align: center; }
.ring__time {
  margin: 0;
  font-size: clamp(30px, 8.6vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ring__state {
  margin: 6px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.ring--paused .ring__value { stroke: var(--muted-dim); }
.ring--paused .ring__time { color: var(--muted); }
.ring--paused .ring__state { color: var(--accent); }

/* Pause · Skip · End. Equal weight, all large, nothing primary — none of
   them is the thing you are supposed to do. */
.session-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding-top: 18px;
}
.session-controls .btn { min-height: 56px; padding: 14px 10px; }

/* ─────────────────────────────────────────────────── 9. COMPLETION ────── */
.screen--complete { align-items: center; justify-content: center; text-align: center; }
.screen--complete .controls { margin-top: 26px; padding-top: 0; max-width: 400px; }

/* No check mark, no celebration: a soft ring that settles into place. */
.complete__mark { color: var(--accent); width: 60px; margin-bottom: 26px; opacity: 0.9; }
.complete__mark svg { width: 100%; height: auto; }
.complete__ring {
  opacity: 0.4;
  stroke-dasharray: 189;
  animation: draw-ring 900ms var(--ease) both;
}
@keyframes draw-ring {
  from { stroke-dashoffset: 200; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 0.4; }
}

/* The closing line for the state is the headline — "Just begin.", not
   "Well done". */
.complete__title {
  margin: 0;
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 650;
  letter-spacing: -0.032em;
  line-height: 1.15;
  max-width: 22ch;
  text-wrap: balance;
}
.complete__line {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted-dim);
  letter-spacing: 0.02em;
}

.feeling { margin: 26px 0 0; width: 100%; }
.feeling__q {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.feeling__opt {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 7px;
}
.feeling__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* The sibling suggestion. It sits below the real actions, borrows no accent
   fill, and reads as an offer rather than an ad. */
.handoff {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font-size: 13.5px;
  text-decoration: none;
  min-height: 46px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.handoff:hover { border-color: var(--accent-line); color: var(--text); }
.handoff__app { color: var(--accent); font-weight: 600; }
.handoff__go { display: grid; place-items: center; color: var(--accent); }
.handoff__go svg { width: 15px; height: 15px; }

.complete__stat { margin: 18px 0 0; font-size: 12.5px; color: var(--muted-dim); }

/* ────────────────────────────────────────────────────── 10. JOURNEY ───── */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat {
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.stat__value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.25;
  min-height: 2.5em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* Seven-day view: one column per day, height by reset minutes. */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.week__day { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.week__bar {
  width: 100%;
  max-width: 26px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.week__fill {
  width: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent), rgba(124, 134, 216, 0.9));
  transition: height var(--dur-slow) var(--ease);
}
/* A day with nothing on it keeps a faint marker rather than an empty box. */
.week__day--empty .week__fill { background: rgba(255, 255, 255, 0.11); }
.week__day--today .week__label { color: var(--accent); font-weight: 700; }
.week__label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* A single observation, phrased as an observation. Quiet enough to skip. */
.insight {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--accent-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.history__name { font-size: 14.5px; font-weight: 550; }
.history__when { margin-left: auto; font-size: 12px; color: var(--muted-dim); }
.history__len {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}

.empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 12px 0 24px;
}
.empty-state__mark {
  width: 62px;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 14px;
}
.empty-state__mark svg { width: 100%; height: auto; }
.empty-state__title {
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.empty-state__text {
  margin: 8px 0 20px;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 30ch;
  line-height: 1.5;
}
.empty-state .btn { min-width: 220px; }
.empty-state .fine-print { margin-top: 18px; }

/* ───────────────────────────────────────────────────── 11. SETTINGS ───── */
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.card > .row:last-of-type { border-bottom: 0; }
.row--action { cursor: pointer; }
.row--action:hover { background: rgba(255, 255, 255, 0.02); }
.row__label { font-size: 15px; }
.row__label small { display: block; font-size: 12px; color: var(--muted-dim); margin-top: 2px; }
.row__label--danger { color: var(--warn); }
.row__value { margin-left: auto; font-size: 13.5px; color: var(--accent); }
.row__value--warn { color: var(--warn); }
.row__hint {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 12.5px;
  color: var(--muted-dim);
  line-height: 1.5;
}
.card--pad .row__hint { padding: 12px 0 0; }

.switch {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  flex: none;
  width: 52px;
  height: 32px;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.switch__track {
  width: 52px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--line);
  display: block;
  position: relative;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #DCE4EE;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.switch input:checked + .switch__track {
  background: rgba(156, 194, 236, 0.42);
  border-color: var(--accent-line);
}
.switch input:checked + .switch__track .switch__knob {
  transform: translateX(20px);
  background: #FFFFFF;
}
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Segmented control — one shared component for grouped choices. */
.segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
}
.segmented__opt {
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented__opt:hover { color: var(--text); }
.segmented__opt[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.about { color: var(--muted); font-size: 14px; line-height: 1.6; }
.about p { margin: 0 0 12px; }
.about p:last-child { margin-bottom: 0; }
.about strong { color: var(--text); }
.about__lede { color: var(--text); }
.family { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 5px; }
.about__small { font-size: 12.5px; color: var(--muted-dim); }
.about__disclaimer {
  font-size: 12.5px;
  color: var(--muted-dim);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  margin: 22px 0 18px;
}
.btn--inline {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  margin-top: 4px;
}

/* ── Ecosystem + About: the shared family layout ─────────────────────────
   The same section/card structure the other Mighty apps use, at Reset's
   quieter volume: softer borders, more air, no accent fills. */
.ecofamily { margin-bottom: 30px; }
.ecofamily__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-left: 2px;
}
.ecofamily__title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.ecofamily__note { margin: 0; color: var(--muted-dim); font-size: 12.5px; }

.ecogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 11px;
}

/* One card per app. The whole card is the link. */
.ecorow {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
a.ecorow:hover { border-color: var(--accent-line); background: var(--surface-2); }
a.ecorow:active { transform: scale(0.99); background: var(--surface-3); }

.ecorow__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecorow__name { font-size: 15px; font-weight: 620; letter-spacing: -0.01em; color: var(--text); }
.ecorow__role { font-size: 12.5px; line-height: 1.35; color: var(--muted-dim); }

/* The external-link affordance the family uses. */
.ecorow__go {
  margin-left: auto;
  padding-left: 10px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--muted-dim);
  transition: color var(--dur) var(--ease);
}
.ecorow__go svg { width: 17px; height: 17px; }
a.ecorow:hover .ecorow__go { color: var(--accent); }

.ecorow__soon {
  margin-left: auto;
  padding-left: 10px;
  flex: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dim);
  opacity: 0.75;
}
.ecorow--soon { opacity: 0.75; }

/* The current app: present, named, and deliberately not a link. */
.ecorow--self {
  border-style: dashed;
  border-color: var(--accent-line);
  background: linear-gradient(155deg, rgba(156, 194, 236, 0.11), rgba(156, 194, 236, 0.035));
}
.ecorow--self .ecorow__name { color: var(--accent-bright); }
.ecorow__here {
  margin-left: auto;
  padding-left: 12px;
  flex: none;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The product mark: the real official icon, clipped into a small tile — same
   artwork the sibling app itself uses. `--tint` still colors the chip behind
   it, which only shows through if the image is ever missing or fails to
   load, when the shared line glyph (or the monogram) draws instead. */
.ecomark {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  overflow: hidden;
  color: var(--tint, var(--accent));
  background: color-mix(in srgb, var(--tint, var(--accent)) 15%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tint, var(--accent)) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ecomark svg { width: 21px; height: 21px; display: block; }
.ecomark__img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Monogram fallback, if both the logo and a glyph id are ever missing. */
.ecomark--mono {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* Older engines without color-mix still get a legible tinted chip. */
@supports not (background: color-mix(in srgb, red 15%, transparent)) {
  .ecomark {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-line);
  }
}

/* The understated bottom actions — Follow the Ecosystem, Meet the Creator —
   the same closing pair every Mighty app uses. */
.ecofoot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.ecofoot__note {
  margin: 14px 0 0;
  padding-left: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-dim);
  opacity: 0.85;
}

/* About: three numbered beats. */
.howlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howstep {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.howstep__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.howstep__text { font-size: 13.5px; line-height: 1.5; color: var(--muted-dim); }
.howstep__text strong { display: block; color: var(--text); font-weight: 600; font-size: 15px; margin-bottom: 2px; }

.ecogrid--about { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.factcard {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.factcard__title { margin: 0 0 8px; font-size: 15px; font-weight: 620; letter-spacing: -0.01em; }
.factcard__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.factcard__text strong { color: var(--text); }
.factcard .btn--inline { margin-top: 12px; }

/* ────────────────────────────────────────── 12. BUTTONS & CONTROLS ────── */
button { -webkit-tap-highlight-color: transparent; font-family: inherit; }

.controls {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
}
.controls__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn {
  min-height: 54px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: scale(0.99); }

.btn--primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: var(--on-accent);
}
.btn--primary:hover { filter: brightness(1.04); }

.btn--quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  min-height: 50px;
  font-size: 15px;
  font-weight: 550;
}
.btn--quiet:hover { color: var(--text); border-color: var(--accent-line); }

.btn--danger { color: var(--warn); }
.btn--danger:hover { color: var(--warn); border-color: rgba(232, 169, 169, 0.42); }

.btn:disabled, .btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:active, .btn[disabled]:active { transform: none; }

.chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--accent-line); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-weight: 600;
}

.icon-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-line); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--ghost { border-color: transparent; background: none; }

.link-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  padding: 10px 8px;
  min-height: var(--tap);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.link-btn:hover { color: var(--text); }

/* ─────────────────────────────────────────────── 13. SHEETS & TOAST ───── */
.sheet-host {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in var(--dur) var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lift);
  animation: sheet-in 300ms var(--ease) both;
}
@keyframes sheet-in {
  from { transform: translateY(12%); opacity: 0.7; }
  to   { transform: none; opacity: 1; }
}
.sheet__grip {
  width: 40px; height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 auto 14px;
}
.sheet__title { margin: 0 0 6px; font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }
.sheet__text { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.sheet .controls { margin-top: 18px; padding-top: 0; }
.sheet > .btn { margin-top: 16px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 18px);
  transform: translateX(-50%);
  z-index: 75;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: var(--shadow-lift);
  animation: toast-in 260ms var(--ease) both;
  max-width: calc(100% - 40px);
  text-align: center;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.shell[data-chrome="none"] ~ .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }

/* ─────────────────────────────────────────── 14. MOTION & RESPONSIVE ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The countdown is information, not decoration — it keeps moving. */
  .ring__value, .segment__fill { transition-duration: 220ms !important; }
  /* The breathing glow is decoration. Stop it outright and hold it steady —
     the blanket rule above would otherwise run it at an absurd rate. */
  .stage::before {
    animation: none !important;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
}
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
[data-motion="reduced"] .ring__value,
[data-motion="reduced"] .segment__fill { transition-duration: 220ms !important; }
[data-motion="reduced"] .stage::before {
  animation: none !important;
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(1);
}

/* Short phones */
@media (max-height: 700px) {
  .tile { min-height: 94px; padding: 12px; gap: 6px; }
  .tile__icon { width: 30px; height: 30px; border-radius: 10px; }
  .tile__icon svg { width: 17px; height: 17px; }
  .lockup--home .lockup__product { font-size: 19px; }
  .surprise { min-height: 62px; margin-top: 10px; }
  .duration { min-height: 82px; padding: 14px 12px; }
  .ring { width: min(152px, 42vw); }
  .ring__time { font-size: 28px; }
  .stage { gap: 14px; padding: 4px 0; }
  .step-title { font-size: clamp(24px, 7.4vw, 28px); }
  .session-controls .btn { min-height: 50px; }
  .onb-mark { width: 60px; margin-bottom: 18px; }
}

/* The three times side by side as soon as there is room for them. */
@media (min-width: 480px) {
  .duration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Large phones and small tablets: the 2 x 3 state grid appears here and
   holds all the way up. Six tiles divide evenly by three, so the odd-tile
   spanning rules the old seven-category grid needed are gone. */
@media (min-width: 600px) {
  :root { --pad: 26px; }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onboarding__controls { grid-template-columns: 1fr 1fr; }
  .onboarding__controls .btn--quiet { order: 0; }
  .onboarding__controls .btn--primary { order: 1; }
}

/* Desktop: the bottom bar becomes a left rail. */
@media (min-width: 840px) {
  :root { --pad: 32px; }

  .shell { flex-direction: row; }

  .nav {
    position: sticky;
    top: 0;
    left: auto; right: auto; bottom: auto;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    width: var(--rail-w);
    flex: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 28px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    border-top: 0;
    border-right: 1px solid var(--line);
    background: rgba(11, 15, 22, 0.7);
    /* On a short landscape screen the rail is the tallest thing on the page.
       Let it scroll inside itself rather than growing the document and
       pushing the signature off the bottom edge. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { width: 0; height: 0; }

  /* Hierarchy, top to bottom: brand → primary nav → breathing room →
     secondary links → contextual note → divider → creator signature. */
  .nav__brand { display: block; padding: 0 8px; }
  .nav__tagline { margin: 12px 0 0; font-size: 12.5px; color: var(--muted-dim); }

  .nav__foot { display: block; margin-top: auto; padding-top: 32px; }
  .nav__attrib {
    margin: 0;
    padding: 0 12px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--muted-dim);
    text-align: center;
    opacity: 0.8;
  }

  .nav__list { flex-direction: column; max-width: none; gap: 4px; margin-top: 34px; }
  .nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__item:hover { background: rgba(255, 255, 255, 0.03); }
  .nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-bright); }
  .nav__item[aria-current="page"] .nav__icon { background: none; }

  .app {
    padding-top: 40px;
    padding-bottom: 48px;
    max-width: 680px;
  }
  .shell[data-chrome="none"] .app { padding-top: 32px; }

  .home-head { margin-bottom: 22px; }
  .brand--home { display: none; }         /* the rail already carries the brand */
  .attrib { display: none; }              /* ...and the signature, once only */
  .greeting { text-align: left; font-size: 14px; }

  .question { font-size: 32px; }
  .question__sub { font-size: 15px; max-width: 46ch; }
  .tile { min-height: 128px; padding: 16px; }
  .tile__name { font-size: 16px; }
  .tile__blurb { font-size: 12px; }

  .ring { width: 216px; }
  .ring__time { font-size: 40px; }
  .step-title { font-size: 40px; }
  .step-text { font-size: 17px; }
  .controls { max-width: 440px; margin-left: auto; margin-right: auto; }
  .screen--reset .stage { gap: 30px; }
  .toast { bottom: 28px; }
  .empty-state { padding-bottom: 60px; }
}

/* Large desktop: more room means more breathing room, never more density. */
@media (min-width: 1280px) {
  :root { --rail-w: 258px; --pad: 40px; }
  .app { max-width: 760px; }
  .tile-grid { gap: 14px; }
  .tile { min-height: 140px; padding: 18px; }
}

/* ── Wide landscape: Tesla-class centre displays ───────────────────────────
   A car screen is wide, short, and touched — not a big desktop. So the
   content column opens up rather than the layout gaining parts, targets grow
   instead of shrinking, and the whole reset has to fit without scrolling.
   Width alone is the trigger; the short-landscape pass below handles height. */
@media (min-width: 1180px) {
  :root { --pad: 44px; }

  .app { max-width: 1120px; }

  /* Two rows of three, generously sized, all reachable without scrolling. */
  .tile-grid { gap: 18px; }
  .tile { min-height: 168px; padding: 22px; gap: 10px; }
  .tile__icon { width: 44px; height: 44px; border-radius: 14px; }
  .tile__icon svg { width: 23px; height: 23px; }
  .tile__name { font-size: 19px; }
  .tile__blurb { font-size: 13.5px; }

  .question { font-size: clamp(34px, 3.2vw, 44px); }
  .surprise { min-height: 84px; }

  /* 1 MIN   3 MIN   5 MIN — large horizontal controls, sitting in the middle
     of the screen rather than stranded at the top of all that space. */
  .screen--duration { position: relative; justify-content: center; }
  .screen--duration .bar { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
  .duration-grid { gap: 18px; }
  .duration { min-height: 168px; gap: 8px; }
  .duration__value { font-size: clamp(48px, 4.6vw, 64px); }
  .duration__unit { font-size: 13px; }
  .duration__hint { font-size: 14px; }

  /* The reset takes the screen. The rail is already gone during a session
     (data-chrome="none"), so this is about scale, not chrome. */
  .screen--reset .stage { gap: 40px; }
  .step-copy { max-width: 54rem; }
  .step-title { font-size: clamp(46px, 4.6vw, 62px); }
  .step-text { font-size: clamp(18px, 1.5vw, 22px); }
  .ring { width: 260px; }
  .ring__time { font-size: 52px; }
  .session-controls { max-width: 620px; gap: 16px; padding-top: 24px; }
  .session-controls .btn { min-height: 72px; font-size: 17px; }
  .btn--done { min-height: 68px; min-width: 240px; font-size: 18px; }

  .complete__title { font-size: clamp(38px, 3.6vw, 50px); max-width: 26ch; }
  .screen--complete .controls { max-width: 520px; grid-template-columns: 1fr 1fr; }

  /* Ecosystem and About: more air and bigger cards, capped at three columns.
     A wide screen should not turn a family list into a long thin row that is
     hard to scan. */
  .ecofamily { margin-bottom: 38px; }
  .ecogrid, .ecogrid--about {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
  }
  .ecogrid--self { grid-template-columns: minmax(0, 520px); }
  .ecorow { min-height: 92px; padding: 18px 20px; gap: 16px; }
  .ecomark { width: 46px; height: 46px; border-radius: 14px; }
  .ecomark svg { width: 24px; height: 24px; }
  .ecorow__name { font-size: 16.5px; }
  .ecorow__role { font-size: 13.5px; }
  .ecofamily__title { font-size: 12.5px; }
  .ecofamily__note { font-size: 13.5px; }

  .howstep { min-height: 88px; padding: 18px 20px; align-items: center; }
  .howstep__n { width: 30px; height: 30px; font-size: 14px; }
  .howstep__text { font-size: 14.5px; }
  .howstep__text strong { font-size: 16.5px; }
  .factcard { padding: 20px; }
  .ecofoot .btn--inline { min-height: 56px; padding: 14px 22px; font-size: 15px; }
}

/* Short landscape — the shape most car screens actually are. Everything
   tightens except the touch targets, which is the whole point: the reset has
   to clear the fold without becoming fiddly to tap. */
@media (min-width: 1180px) and (max-height: 800px) {
  :root { --pad: 30px; }

  /* Rail tightens; its touch targets do not. */
  .nav { padding: 18px 14px 16px; }
  .nav__list { margin-top: 20px; }
  .nav__foot { padding-top: 20px; }
  .nav__note { margin-top: 10px; }
  .nav__rule { margin: 12px 12px 10px; }

  .tile { min-height: 124px; padding: 16px; }
  .tile__icon { width: 38px; height: 38px; }
  .question { font-size: clamp(28px, 2.6vw, 36px); }
  .surprise { min-height: 72px; }

  .duration { min-height: 124px; }
  .duration__value { font-size: clamp(40px, 3.6vw, 50px); }

  .screen--reset .stage { gap: 22px; }
  .step-title { font-size: clamp(36px, 3.4vw, 46px); }
  .ring { width: 190px; }
  .ring__time { font-size: 40px; }
  .session-controls { padding-top: 16px; }
  .session-controls .btn { min-height: 64px; }
  .btn--done { min-height: 60px; }

  .app { padding-top: 26px; padding-bottom: 26px; }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #C7D2DE;
    --muted-dim: #A7B4C2;
    --line: rgba(255, 255, 255, 0.18);
  }
}

/* Nothing in the app should depend on hovering — a car screen and a phone
   have no pointer. Hover styling stays for mice, but every hover-only rule
   above is decoration, never information. */
@media (hover: none) {
  .tile:hover, .duration:hover { border-color: var(--line); background: var(--surface); }
}

/* Home brand supporting text also stays restrained on desktop. */
.home-brand-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-brand-tagline { font-size: 12px; line-height: 1.45; color: var(--muted); text-align: left; }

/* Shared mobile Mighty identity, centered independently of the greeting. */
@media (max-width: 839px) {
  .home-head { flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
  .brand--home { justify-content: center; width: 100%; gap: 12px; }
  .brand--home .brand__icon { width: 48px; height: 48px; border-radius: 14px; }
  .home-brand-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .lockup--home { flex-direction: row; align-items: baseline; gap: 7px; line-height: 1.2; }
  .lockup--home .lockup__parent, .lockup--home .lockup__product {
    font-size: clamp(17px, 4.7vw, 20px); font-weight: 750; letter-spacing: .09em; margin: 0; opacity: 1;
  }
  .lockup--home .lockup__parent { color: var(--text); }
  .lockup--home .lockup__product { color: #9DDDE5; }
  .home-brand-tagline { font-size: 12px; line-height: 1.45; color: var(--muted); text-align: left; }
  .greeting { text-align: center; font-size: 12px; }
  .screen--home .question { text-align: center; margin-bottom: 18px; }
  .streak-chip { align-self: center; }
  .duration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .duration { min-width: 0; padding-inline: 8px; }
  .duration__hint { font-size: 12px; }
}
/* Let the instruction use its own font scale rather than the parent's ch width. */
.step-title { max-width: 24ch; margin-inline: auto; }
.step-text { max-width: 42ch; margin-inline: auto; }
.stage { justify-content: center; }
/* Small landscape views keep controls reachable without squeezing touch targets. */
@media (max-height: 600px) and (min-width: 600px) {
  .screen--reset .stage {
    display: grid; grid-template-columns: minmax(0, 600px) auto; justify-content: center;
    align-content: center; gap: 18px 40px;
  }
  .step-copy { grid-column: 1; grid-row: 1; }
  .ring { grid-column: 2; grid-row: 1; width: clamp(120px, 18vh, 160px); }
  .btn--done { grid-column: 1 / -1; justify-self: center; }
  .step-title { font-size: clamp(26px, 3.4vw, 40px); }
  .step-text { font-size: 15px; }
  .session-controls { padding-top: 12px; }
}
.onboarding { overflow-y: auto; }
.onboarding__body { flex-shrink: 0; padding-block: 24px; }
.onboarding__foot { flex-shrink: 0; }

/* 2.4.1 — the question always has room above the six states (it touched the
   first row on desktop and car screens), and the short hint under each state
   wraps on narrow phones instead of being cut off ("Step away for a mom…"). */
.screen--home .question,
#duration-question { margin-bottom: 18px; }
@media (max-width: 389px) {
  .tile__blurb { white-space: normal; overflow: visible; text-overflow: clip; }
}