/* =========================================================================
   Fight Camp — design system
   Tokens → base → layout → components → utilities. No framework, no utility
   classes, no inline styles outside genuinely dynamic values (bar widths).

   PALETTE — light pink. Confirmed twice by Priiyan (11 Aug, and again on
   review of this build). Pink is the SURFACE FAMILY, not an accent bolted
   onto a dark UI: the canvas, the raised surfaces, the hairlines and the
   pressed states are all pink-tinted, and cards sit on it as near-white so
   text has somewhere clean to live. Twins pink #E62A6F is the brand mark
   (Samreen's gear is pink Twins Special).

   CONTRAST IS MEASURED, NOT EYEBALLED. Every foreground/background pair the
   app actually renders was run through WCAG relative-luminance and holds
   >= 4.5:1 for body text and >= 3:1 for UI strokes and bar fills. Three
   consequences that look like inconsistencies but are not:

     --accent (#E62A6F) is the brand fill for rings, bars and strokes, where
       3:1 applies and it passes at 3.61 on the pink track.
     --accent-fill (#D81B60) is what goes behind WHITE TEXT. #E62A6F only
       reaches 4.26:1 against white, which fails for button-sized text, so
       filled buttons and active chips use the deeper tone. 4.95:1.
     --accent-hi (#C2185B) is accent-coloured TEXT on a light surface. It is
       darker than --accent, the inverse of how a dark theme works.

   If you change any of these, re-measure. A naive lightening of the muted
   inks is exactly how this ends up as washed-out pink with grey text.
   ========================================================================= */

@layer tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* surfaces — pink IS the surface family. Canvas and raised states are
       pink-tinted; cards are near-white so long text has a clean ground. */
    --bg: #fdf4f8;        /* app canvas — palest pink */
    --bg-2: #faeaf2;      /* nav / recessed chrome */
    --surface: #ffffff;   /* cards */
    --surface-2: #fef8fb; /* card gradient top */
    --surface-3: #fbe7f0; /* pressed, tracks, inset wells */
    --line: #f0d5e4;
    --line-soft: #f7e5ef;

    /* ink — measured against #ffffff, #fdf4f8 and #fbe7f0 */
    --ink: #241726;       /* 17.1 : 1 on card */
    --ink-2: #63535f;     /*  7.2 : 1 on card,  6.1 on surface-3 */
    --ink-3: #75636f;     /*  5.6 : 1 on card,  4.7 on surface-3 */

    /* accent — Twins pink. Three tones, three jobs. See the header note. */
    --accent: #e62a6f;      /* brand fill: rings, bars, strokes (>=3:1) */
    --accent-fill: #d81b60; /* fill behind WHITE text (4.95:1) */
    --accent-hi: #c2185b;   /* accent-coloured TEXT on light (5.9:1 on card) */
    --accent-ink: #ffffff;
    --accent-soft: color-mix(in oklab, var(--accent) 13%, transparent);
    --accent-line: color-mix(in oklab, var(--accent) 34%, transparent);

    /* corners — the v1 site's language, kept because she reads it fluently */
    --red-corner: #e62a6f;   /* Muay Thai */
    --blue-corner: #3a5bd0;  /* strength — darkened for a light ground */
    --gold: #8a6108;         /* today / maintenance-only lifts (5.1:1 on canvas) */
    --gold-mark: #e0a92a;    /* bright gold — DECORATIVE ONLY (star burst, glow
                                rings). Too light to carry meaning: 1.8:1 on the
                                pink well. Anything informative uses --gold. */

    /* status — darkened so they work as text on light, and still read as
       fills. Badge tints are these at 16% over the card. */
    --ok: #137a47;
    --warn: #8a6100;
    --bad: #c0362c;
    --idle: #75636f;

    /* fluid type — 375px → 1280px */
    --step--2: clamp(0.68rem, 0.66rem + 0.09vw, 0.73rem);
    --step--1: clamp(0.76rem, 0.73rem + 0.13vw, 0.83rem);
    --step-0: clamp(0.9rem, 0.87rem + 0.15vw, 0.98rem);
    --step-1: clamp(1rem, 0.95rem + 0.24vw, 1.14rem);
    --step-2: clamp(1.18rem, 1.09rem + 0.4vw, 1.42rem);
    --step-3: clamp(1.45rem, 1.3rem + 0.66vw, 1.85rem);
    --step-4: clamp(1.9rem, 1.6rem + 1.3vw, 2.8rem);

    /* space */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

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

    /* motion */
    --dur-1: 130ms;
    --dur-2: 240ms;
    --dur-3: 420ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* chrome */
    --nav-h: 64px;
    --rail-w: 236px;
    /* Shadows on a light ground are soft and plum-tinted, never grey-black —
       a neutral shadow over pink reads as dirt. */
    --shadow-1: 0 1px 2px rgb(37 26 46 / 0.05), 0 8px 24px -12px rgb(37 26 46 / 0.10);
    --shadow-2: 0 12px 32px -10px rgb(37 26 46 / 0.18);
    --glow: 0 0 0 1px var(--accent-line), 0 10px 28px -14px color-mix(in oklab, var(--accent) 55%, transparent);
    --hairline: inset 0 1px 0 rgb(255 255 255 / 0.9);
  }

  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    min-height: 100dvh;
    /* Two soft pink light sources. Deliberately weak — on a light ground a
       strong tint is what makes "pink theme" read as washed out. */
    background-image:
      radial-gradient(1100px 620px at 84% -14%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 64%),
      radial-gradient(820px 560px at 0% 104%, #f6e3ee 0%, transparent 62%);
    background-attachment: fixed;
  }

  h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
  ul, ol { list-style: none; padding: 0; }
  img { max-width: 100%; display: block; }

  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; padding: 0; }

  a { color: var(--accent-hi); text-decoration: none; }
  a:hover { text-decoration: underline; }

  :focus-visible {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  ::selection { background: var(--accent-fill); color: var(--accent-ink); }

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

/* ---------------------------------------------------------------- layout */
@layer layout {
  .app {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
  }

  .main {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding:
      max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4)
      calc(var(--nav-h) + var(--sp-6) + env(safe-area-inset-bottom));
  }

  .stack { display: grid; gap: var(--sp-4); }
  .stack-lg { display: grid; gap: var(--sp-5); }
  .row { display: flex; align-items: center; gap: var(--sp-3); }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .wrap { flex-wrap: wrap; }
  .grow { flex: 1 1 auto; min-width: 0; }

  .grid-2 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-auto {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* Desktop: side rail replaces the bottom bar. Same components, more room. */
  @media (min-width: 900px) {
    .app {
      grid-template-columns: var(--rail-w) minmax(0, 1fr);
      max-width: 1240px;
      margin: 0 auto;
    }
    .main {
      max-width: 900px;
      padding: var(--sp-6) var(--sp-6) var(--sp-7);
      margin: 0;
    }
    .grid-auto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  }
}

/* ------------------------------------------------------------ components */
@layer components {

  /* ---- masthead ---- */
  .masthead { padding: var(--sp-3) 0 var(--sp-5); }
  .masthead h1 {
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
  }
  .masthead h1 .thin { font-weight: 300; color: var(--ink-2); }
  .masthead .sub {
    color: var(--ink-2);
    font-size: var(--step--1);
    margin-top: var(--sp-2);
    max-width: 46ch;
  }

  /* ---- eyebrow / kicker ---- */
  .eyebrow {
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
  }

  /* ---- card ---- */
  .card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1), var(--hairline);
  }
  .card-pad { padding: var(--sp-4); }
  .card-accent { border-color: var(--accent-line); box-shadow: var(--glow), var(--hairline); }

  /* ---- collapsible section ---- */
  .section {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1), var(--hairline);
    overflow: hidden;
  }
  .section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    text-align: left;
    transition: background var(--dur-1) var(--ease);
  }
  .section-head:hover { background: var(--surface-3); }
  .section-head .icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent-hi);
    border: 1px solid var(--accent-line);
  }
  .section-head h2 {
    font-size: var(--step-1);
    font-weight: 650;
    letter-spacing: -0.01em;
  }
  .section-head .note { font-size: var(--step--1); color: var(--ink-3); }
  .section-head .chev {
    color: var(--ink-3);
    transition: transform var(--dur-2) var(--ease);
    flex: 0 0 auto;
  }
  .section[data-open="true"] .section-head .chev { transform: rotate(180deg); }

  /* grid-rows trick: animates open/closed everywhere modern, no JS heights */
  .section-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-2) var(--ease);
  }
  .section[data-open="true"] .section-body { grid-template-rows: 1fr; }
  .section-body > div { overflow: hidden; }
  .section-inner {
    padding: 0 var(--sp-4) var(--sp-4);
    display: grid;
    gap: var(--sp-3);
  }

  /* ---- nav ---- */
  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: space-between;
    gap: 2px;
    padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg-2) 86%, transparent);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--line);
  }
  .nav-btn {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--sp-2) 2px;
    border-radius: var(--r-md);
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .nav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .nav-btn[aria-current="page"] {
    color: var(--accent-hi);
    /* A white pill, not a pink tint: accent text on an accent tint over the
       already-pink nav ground measures 4.24:1, which fails. 5.87:1 here. */
    background: var(--surface);
    box-shadow: 0 1px 3px rgb(37 26 46 / 0.10);
  }

  @media (min-width: 900px) {
    .nav {
      position: sticky;
      top: 0;
      left: auto; right: auto; bottom: auto;
      height: 100dvh;
      flex-direction: column;
      justify-content: flex-start;
      gap: var(--sp-1);
      padding: var(--sp-5) var(--sp-3);
      border-top: 0;
      border-right: 1px solid var(--line);
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .nav-brand {
      display: flex; align-items: center; gap: var(--sp-2);
      padding: 0 var(--sp-3) var(--sp-5);
      font-weight: 800; letter-spacing: -0.02em;
      font-size: var(--step-1);
    }
    .nav-btn {
      flex: 0 0 auto;
      grid-auto-flow: column;
      justify-items: start;
      justify-content: start;
      align-items: center;
      gap: var(--sp-3);
      width: 100%;
      padding: var(--sp-3);
      font-size: var(--step-0);
      font-weight: 550;
    }
  }
  .nav-brand { display: none; }
  @media (min-width: 900px) { .nav-brand { display: flex; } }

  /* ---- week strip ---- */
  .week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--sp-1);
  }
  .day {
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) 2px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    text-align: center;
  }
  .day .dow {
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
    color: var(--ink-3);
  }
  /* Tappable. Samreen asked for this directly — they looked like controls
     and did nothing. Sized to a real touch target via the padded <li>. */
  .day .ring {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--line);
    display: grid; place-items: center;
    padding: 0;
    background: var(--surface);
    color: transparent;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease);
  }
  .day .ring:active { transform: scale(0.9); }
  .day .what { font-size: 10px; color: var(--ink-2); line-height: 1.2; }
  .day[data-kind="mt"] .ring { border-color: var(--red-corner); }
  .day[data-kind="lift"] .ring { border-color: var(--blue-corner); }
  .day[data-kind="rec"] .ring { border-color: var(--idle); }
  .day[data-today="true"] {
    background: var(--surface-3);
    border-color: color-mix(in oklab, var(--gold-mark) 55%, transparent);
  }
  .day[data-today="true"] .ring {
    /* Deep gold, not the bright mark: 4.69:1 on the pink well vs 1.80:1. */
    border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-mark) 34%, transparent);
  }
  .day[data-today="true"] .dow { color: var(--gold); }

  /* Trained — ticked by her, or auto-ticked from a WHOOP workout. */
  .day[data-done="true"] .ring {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
  }
  .day[data-done="true"] .what { color: var(--ink-2); }

  /* ---- chips / buttons ---- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--step--1);
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--dur-1) var(--ease);
  }
  .chip:hover { border-color: var(--accent-line); color: var(--ink); }
  .chip[data-on="true"] {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--accent-ink);
  }
  .chip-accent {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-hi);
  }
  .chip-sm { padding: 3px 9px; font-size: var(--step--2); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface-3);
    color: var(--ink);
    font-weight: 650;
    font-size: var(--step-0);
    transition: all var(--dur-1) var(--ease);
  }
  .btn:hover { border-color: var(--accent-line); }
  .btn:active { transform: translateY(1px); }
  .btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-primary {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--accent-ink);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--accent) 45%, transparent);
  }
  .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
  .btn-ghost { background: transparent; }
  .btn-block { width: 100%; }
  .btn-lg { padding: 14px 20px; font-size: var(--step-1); }

  /* ---- stat ---- */
  .stat { display: grid; gap: 2px; }
  .stat .v {
    font-size: var(--step-2);
    font-weight: 750;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .stat .l { font-size: var(--step--2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
  .stat-box {
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line-soft);
  }

  /* ---- progress bar ---- */
  .bar {
    position: relative;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    overflow: hidden;
  }
  .bar > i {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent);
    transition: width var(--dur-3) var(--ease-out), background var(--dur-2) var(--ease);
  }
  .bar[data-state="under"] > i { background: var(--bad); }
  .bar[data-state="hit"] > i { background: var(--ok); }
  .bar-tick {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: color-mix(in oklab, var(--ink) 26%, transparent);
  }

  /* ---- badges ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: var(--step--2);
    font-weight: 750;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
  }
  .badge[data-tone="ok"]   { background: color-mix(in oklab, var(--ok) 10%, transparent);   color: var(--ok);   border-color: color-mix(in oklab, var(--ok) 34%, transparent); }
  .badge[data-tone="warn"] { background: color-mix(in oklab, var(--warn) 10%, transparent); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 34%, transparent); }
  .badge[data-tone="bad"]  { background: color-mix(in oklab, var(--bad) 10%, transparent);  color: var(--bad);  border-color: color-mix(in oklab, var(--bad) 34%, transparent); }
  .badge[data-tone="idle"] { background: var(--surface-3); color: var(--ink-3); border-color: var(--line); }
  .badge[data-tone="accent"] { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-line); }

  /* ---- numbered list (the "non-negotiables" pattern) ---- */
  .rules { display: grid; gap: var(--sp-3); }
  .rule { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-3); align-items: start; }
  .rule .n {
    font-size: var(--step--1);
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
  }
  .rule h4 { font-size: var(--step-0); font-weight: 650; }
  .rule p { font-size: var(--step--1); color: var(--ink-2); }

  /* ---- exercise row ---- */
  .ex {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line-soft);
  }
  .ex[data-done="true"] { border-color: color-mix(in oklab, var(--ok) 36%, transparent); }
  .ex[data-maint="true"] { border-left: 3px solid var(--gold); }
  .ex .nm { font-weight: 650; }
  .ex .sr { font-size: var(--step--1); color: var(--accent-hi); font-weight: 650; }
  .ex .cue { font-size: var(--step--1); color: var(--ink-2); }
  .ex .hint { font-size: var(--step--2); color: var(--ink-3); }

  .tick {
    width: 26px; height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    border: 2px solid var(--line);
    display: grid; place-items: center;
    color: transparent;
    transition: all var(--dur-1) var(--ease);
  }
  .tick[data-on="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }

  /* ---- inputs ---- */
  .field { display: grid; gap: 4px; }
  .field > label { font-size: var(--step--2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
  .input, select.input, textarea.input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: #fdfbfc;
    color: var(--ink);
    font-size: var(--step-0);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
  }
  textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }
  select.input { appearance: none; background-image: none; }

  input[type="range"] { width: 100%; accent-color: var(--accent); }

  /* ---- timer ---- */
  .timer-face {
    font-size: clamp(3.2rem, 14vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
  }
  .timer-face[data-phase="work"] { color: var(--red-corner); }
  .timer-face[data-phase="rest"] { color: var(--blue-corner); }
  .timer-state { text-align: center; color: var(--ink-2); font-size: var(--step--1); }

  /* ---- meal / recipe card ---- */
  .meal {
    display: grid;
    gap: 4px;
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line-soft);
  }
  .meal .t { font-weight: 650; }
  .meal .d { font-size: var(--step--1); color: var(--ink-2); }
  .meal .p { font-size: var(--step--2); color: var(--accent-hi); font-weight: 700; }

  /* ---- shop row ---- */
  .shop-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .shop-row:last-child { border-bottom: 0; }
  .shop-row[data-ticked="true"] .shop-name { opacity: 0.4; text-decoration: line-through; }
  .shop-name { font-weight: 550; font-size: var(--step-0); }
  .shop-match { font-size: var(--step--2); color: var(--ink-3); }
  .shop-price { text-align: right; display: grid; gap: 2px; }
  .shop-price .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
  .shop-price .cup { font-size: var(--step--2); color: var(--ink-3); }
  .shop-price .none { color: var(--ink-3); font-weight: 600; }

  /* ---- sparkline ---- */
  .spark { display: block; width: 100%; height: 40px; overflow: visible; }
  .spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .spark .area { fill: var(--accent-soft); stroke: none; }

  /* ---- HR zone bar ---- */
  .zones { display: flex; height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
  .zones > i { display: block; height: 100%; }

  /* ---- feedback: floating trigger + sheet ---- */
  .fb-fab {
    position: fixed;
    right: max(var(--sp-4), env(safe-area-inset-right));
    bottom: calc(var(--nav-h) + var(--sp-3) + env(safe-area-inset-bottom));
    z-index: 45;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
    box-shadow: var(--shadow-2);
    transition: all var(--dur-1) var(--ease);
  }
  .fb-fab:hover, .fb-fab:focus-visible {
    color: var(--accent-hi);
    border-color: var(--accent-line);
    transform: translateY(-1px);
  }
  @media (min-width: 900px) {
    .fb-fab { bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
  }

  .sheet-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgb(37 26 46 / 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade var(--dur-2) var(--ease);
  }
  .sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 61;
    max-height: 88dvh;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--accent-line);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-2);
    animation: rise var(--dur-3) var(--ease-out);
  }
  @media (min-width: 900px) {
    .sheet {
      left: 50%; bottom: auto; top: 50%;
      transform: translate(-50%, -50%);
      width: min(560px, calc(100vw - 2rem));
      border-radius: var(--r-xl);
      border: 1px solid var(--accent-line);
      animation: pop var(--dur-2) var(--ease-out);
    }
  }
  .sheet-grip {
    width: 38px; height: 4px; border-radius: var(--r-pill);
    background: var(--line); margin: 0 auto var(--sp-3);
  }
  @media (min-width: 900px) { .sheet-grip { display: none; } }

  /* sentiment faces — 1..5, optional, a complete submission on their own */
  .fb-faces {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  .fb-face {
    padding: 10px 0;
    font-size: 26px;
    line-height: 1;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface-2);
    filter: grayscale(1) opacity(0.5);
    transition: all var(--dur-1) var(--ease);
  }
  .fb-face:hover { filter: grayscale(0.4) opacity(0.85); }
  .fb-face[data-on="true"] {
    filter: none;
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
  }
  .fb-face:active { transform: scale(0.92); }

  @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
  @keyframes rise { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
  @keyframes pop  { from { transform: translate(-50%, -48%) scale(0.98); opacity: 0 } to { transform: translate(-50%, -50%) scale(1); opacity: 1 } }

  /* ---- toast ---- */
  .toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom));
    z-index: 70;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    border: 1px solid var(--accent-line);
    box-shadow: var(--shadow-2);
    font-size: var(--step--1);
    font-weight: 650;
    animation: rise var(--dur-2) var(--ease-out);
  }

  /* Birthday cake anchor — see App.jsx. Occupies no space; exists only so
     experience.js has a stable <header> to attach its button to. */
  #fcb-anchor { display: block; width: 100%; height: 0; }

  /* ---- info affordance ---- */
  .info-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: all var(--dur-1) var(--ease);
  }
  .info-btn:hover, .info-btn:focus-visible {
    color: var(--accent-hi);
    border-color: var(--accent-line);
  }
  .info-body p { font-size: var(--step-0); color: var(--ink-2); line-height: 1.6; }
  .info-body h4 { font-size: var(--step-0); font-weight: 700; color: var(--ink); }

  /* ---- hero: the one thing a tab opens on ---- */
  .hero-line {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  .hero-what {
    font-size: var(--step-2);
    font-weight: 750;
    letter-spacing: -0.02em;
  }
  .hero-when { font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }

  /* ---- empty / notice ---- */
  .notice {
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px dashed var(--line);
    color: var(--ink-2);
    font-size: var(--step--1);
  }
  .notice[data-tone="accent"] {
    border-style: solid;
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--ink);
  }
}

/* ------------------------------------------------------------- utilities */
@layer utilities {
  .muted { color: var(--ink-2); }
  .dim { color: var(--ink-3); }
  .small { font-size: var(--step--1); }
  .xsmall { font-size: var(--step--2); }
  .bold { font-weight: 700; }
  .center { text-align: center; }
  .right { text-align: right; }
  .num { font-variant-numeric: tabular-nums; }
  .accent { color: var(--accent-hi); }
  .ok { color: var(--ok); }
  .warn { color: var(--warn); }
  .bad { color: var(--bad); }
  .gold { color: var(--gold); }
  .hr { height: 1px; background: var(--line-soft); border: 0; }
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}