/* ============================================================
   PACK — v2 design system
   "Whoop with warmth" · earthy, type-led, instrument-credible
   ============================================================ */

:root {
  /* v2.2 semaphore (Form state) + composition hues — defined here so they never depend on the
     appended kit block parsing cleanly. */
  --rdy: oklch(0.55 0.10 150); --rdy-t: oklch(0.94 0.035 150); --rdy-d: oklch(0.44 0.09 150);
  --smt: oklch(0.68 0.095 86); --smt-t: oklch(0.94 0.045 86);  --smt-d: oklch(0.50 0.085 80);
  --bld: oklch(0.63 0.115 55); --bld-t: oklch(0.93 0.05 55);   --bld-d: oklch(0.48 0.10 50);
  --rcv: oklch(0.55 0.135 32); --rcv-t: oklch(0.93 0.05 32);   --rcv-d: oklch(0.45 0.12 32);
  --cal: var(--rdy); --cal-t: var(--rdy-t); --cal-d: var(--rdy-d);   /* calibrating = calm green */
  --c-str: oklch(0.55 0.115 28); --c-car: oklch(0.55 0.10 235); --c-flx: oklch(0.58 0.10 150);
  /* paper + surfaces */
  --paper:   #F1EBDF;   /* app background — warm paper */
  --paper-2: #E9E1D1;   /* recessed wells */
  --card:    #FCFAF4;   /* raised card */
  --card-2:  #F6F1E6;   /* subtle inset card */
  --ink-card:#1E2A24;   /* dark "instrument" card (deep forest charcoal) */

  /* ink scale */
  --ink:   #1E2A24;     /* primary text */
  --ink-2: #58625B;     /* secondary */
  --ink-3: #8B938B;     /* tertiary / placeholder */
  --on-dark:   #F3EFE6; /* text on dark card */
  --on-dark-2: #A7B3AB; /* muted text on dark card */

  /* brand */
  --forest:   #2F6B4C;
  --forest-d: #24543C;
  --forest-t: #DCE8DF;  /* forest tint surface */
  --clay:     #BE6A2E;  /* savannah / heat accent */
  --clay-d:   #9E531F;
  --clay-t:   #F1E1D0;  /* clay tint surface */
  --dusk:     #5A5878;  /* cool secondary (sparingly) */
  --dusk-t:   #E3E0EC;
  --gold:     #B8932F;  /* crown */
  --gold-t:   #F0E7CC;

  /* lines */
  --line:   #E1D7C5;    /* hairline on paper */
  --line-2: #ECE5D6;    /* hairline on card */
  --line-d: rgba(243,239,230,0.14); /* hairline on dark */

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(30,42,36,0.05), 0 6px 18px -10px rgba(30,42,36,0.18);
  --shadow-pop:  0 10px 40px -12px rgba(30,42,36,0.4);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
}

/* ---------- phone shell ---------- */
.phone {
  width: 390px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1px;
}
.phone * { box-sizing: border-box; }
.phone .display { font-family: var(--font-display); }

/* numbers read as instrument readouts */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- status bar ---------- */
.statusbar {
  height: 50px;
  padding: 0 26px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.statusbar .time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.statusbar .glyphs { display: flex; align-items: center; gap: 7px; color: var(--ink); }

/* ---------- generic content area ---------- */
.screen {
  flex: 1 1 auto;
  padding: 6px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screen.flush { padding-bottom: 112px; } /* room above the nav */

/* ---------- top headers ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.eyebrow.on-dark { color: var(--on-dark-2); }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 27px; letter-spacing: -0.6px; line-height: 1.05; color: var(--ink); }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.3px; color: var(--ink); }
.section-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card.pad { padding: 18px; }
.card.tight { border-radius: var(--r-md); }
.well { background: var(--paper-2); border-radius: var(--r-md); }

.card.dark {
  background: var(--ink-card);
  border: none;
  color: var(--on-dark);
  box-shadow: 0 10px 30px -16px rgba(30,42,36,0.7);
  position: relative;
  overflow: hidden;
}
.card.dark .eyebrow { color: var(--on-dark-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  border: none; border-radius: 999px; cursor: pointer;
  padding: 15px 22px; width: 100%;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-decoration: none;        /* button-styled <a> must not underline */
}
.btn.forest { background: var(--forest); color: #fff; box-shadow: 0 8px 20px -10px rgba(47,107,76,0.9); }
.btn.ink { background: var(--ink); color: var(--on-dark); }
.btn.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); box-shadow: none; }
.btn.clay { background: var(--clay); color: #fff; }
.btn.sm { padding: 10px 16px; font-size: 14px; width: auto; }

/* ---------- chips & pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line-2);
  white-space: nowrap;
}
.chip.tier { background: var(--gold-t); color: #6f5616; border-color: transparent; }
.chip.heat { background: var(--clay-t); color: var(--clay-d); border-color: transparent; }
.chip.forest { background: var(--forest-t); color: var(--forest-d); border-color: transparent; }
.chip.dusk { background: var(--dusk-t); color: var(--dusk); border-color: transparent; }
.chip.on-dark { background: rgba(255,255,255,0.1); color: var(--on-dark); border-color: transparent; }

/* ---------- avatar ---------- */
.av { position: relative; display: inline-flex; flex: 0 0 auto; }
.av img {
  width: 100%; height: 100%; border-radius: 999px; object-fit: cover;
  background: var(--forest-t); display: block;
}
.av.ring img { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--forest); }
.av .crown {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 19px; height: 16px; line-height: 0; z-index: 2;
  /* SVG (not the 👑 emoji) so it renders identically on Samsung. The white halo is baked INTO
     the SVG (an underlying white silhouette) — never filter: drop-shadow(), which Samsung
     Internet composites as a flickering black box. */
}
.av .crown svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* inline crown (chips/labels) — same SVG, no avatar positioning, no filter */
.crown-inline { display: inline-block; width: 14px; height: 12px; line-height: 0; vertical-align: -1px; }
.crown-inline svg { width: 100%; height: 100%; display: block; overflow: visible; }
.medal-ic { flex: 0 0 auto; }
.av .check {
  position: absolute; right: -2px; bottom: -2px;
  width: 17px; height: 17px; border-radius: 999px; background: var(--forest);
  border: 2px solid var(--card); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.av.on-paper .check { border-color: var(--paper); }

/* ---------- bottom nav ---------- */
.nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 88px; padding: 10px 14px 22px;
  background: rgba(252,250,244,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start;
  z-index: 5;
}
.nav .tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  padding-top: 4px;
}
.nav .tab.active { color: var(--forest); }
.nav .tab .ic-pill {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 18px; border-radius: 999px; transition: background .15s;
}
.nav .tab.active .ic-pill { background: var(--forest-t); }
.nav .tab .ic-pill.avatar { padding: 0; }
.nav .fab {
  align-self: start; justify-self: center; margin-top: -18px;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -8px rgba(47,107,76,0.9), 0 0 0 5px var(--paper);
}

/* ---------- leaderboard rows ---------- */
.lb { display: flex; flex-direction: column; }
.lb .row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
}
.lb .row:last-child { border-bottom: none; }
.lb .row.me { background: var(--forest-t); }
.lb .rank { width: 20px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-3); }
.lb .nm { font-weight: 700; font-size: 15px; }
.lb .pts { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.3px; }
.lb .sub { font-size: 11.5px; white-space: nowrap; }
.lb .sub > span { white-space: nowrap; }

/* ---------- segmented control ---------- */
.seg {
  display: flex; gap: 4px; padding: 4px; background: var(--paper-2);
  border-radius: 999px; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--ink-2);
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }

/* ---------- stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px 15px; box-shadow: var(--shadow-card);
}
.stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.6px; margin-top: 5px; line-height: 1; }
.stat .v small { font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
.stat .note { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

/* ---------- progress + tier ladder ---------- */
.bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--forest); }
.bar.on-dark { background: rgba(255,255,255,0.14); }
.bar.gold > span { background: var(--gold); }
.bar.clay > span { background: var(--clay); }

.ladder { display: flex; align-items: center; gap: 0; }
.ladder .step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
}
.ladder .step .dot {
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: var(--card-2); border: 1.5px solid var(--line); z-index: 1;
}
.ladder .step.done .dot { background: var(--forest-t); border-color: var(--forest); }
.ladder .step.now .dot { background: var(--forest); border-color: var(--forest); box-shadow: 0 0 0 4px var(--forest-t); }
.ladder .step .lbl { font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.2px; }
.ladder .step.now .lbl, .ladder .step.done .lbl { color: var(--forest-d); }
.ladder .link { position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ladder .step.done .link, .ladder .step.now .link { background: var(--forest); }

/* ---------- 14-day timeline ---------- */
.timeline { display: flex; gap: 3px; }
.timeline .d { flex: 1; height: 30px; border-radius: 5px; background: var(--paper-2); }
.timeline .d.on { background: var(--forest); }
.timeline .d.today { box-shadow: 0 0 0 2px var(--clay); }

/* ---------- badges ---------- */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.badge .ic {
  width: 52px; height: 52px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
  font-size: 25px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-card);
}
.badge.locked .ic { filter: grayscale(1); opacity: 0.42; box-shadow: none; }
.badge .bn { font-size: 10px; font-weight: 700; color: var(--ink-2); line-height: 1.15; }
.badge.locked .bn { color: var(--ink-3); }
.badge .bp { font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.badge.earned .ic { border-color: var(--forest); }

/* ---------- exercise log cards ---------- */
.ex { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.ex .ex-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.ex .ex-ic { font-size: 19px; }
.ex .ex-nm { font-weight: 700; white-space: nowrap; }
.ex .ex-base { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; padding-left: 8px; }
.ex .ex-body { padding: 0 15px 15px; }

.counter { display: flex; align-items: center; gap: 9px; }
.counter .step-btn {
  width: 46px; height: 46px; border-radius: 13px; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
}
.counter .step-btn.minus { background: var(--paper-2); color: var(--ink-2); }
.counter .step-btn.plus { background: var(--ink); color: var(--on-dark); }
.counter .step-btn.plus5 { background: var(--forest); color: #fff; width: 52px; }
.counter .read { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -1px; }

.set-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.set-chips .sc { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--forest-t); color: var(--forest-d); white-space: nowrap; }
.phone .sc { white-space: nowrap; }

.pts-pop { font-family: var(--font-display); font-weight: 800; color: var(--forest); }

/* ---------- savings / quest card ---------- */
.quest { background: var(--clay-t); border: 1px solid #E7CCAE; border-radius: var(--r-lg); }

/* ---------- list rows (settings, members) ---------- */
.rows { display: flex; flex-direction: column; }
.rows .r { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.rows .r:last-child { border-bottom: none; }
.rows .r .label { font-weight: 600; }
.rows .r .val { margin-left: auto; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* form field */
.field { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 15px; box-shadow: var(--shadow-card); }
.field .fl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-3); }
.field .fv { font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 3px; }
.field.focus { border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-t); }

/* toggle */
.tog { width: 42px; height: 25px; border-radius: 999px; background: var(--paper-2); position: relative; flex: 0 0 auto; }
.tog.on { background: var(--forest); }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left .15s; }
.tog.on::after { left: 20px; }

/* race report lines */
.report p { margin: 0; }
.report p + p { margin-top: 9px; }

/* divider */
.hr { height: 1px; background: var(--line-2); border: none; margin: 2px 0; }

/* avatar picker grid */
.pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pick .opt { aspect-ratio: 1; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--card-2); border: 1.5px solid var(--line-2); overflow: hidden; }
.pick .opt.sel { border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-t); }
.pick .opt img { width: 100%; height: 100%; object-fit: cover; }

/* feed */
.feed { display: flex; flex-direction: column; gap: 11px; }
.feed .fi { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.feed .fi .ago { margin-left: auto; font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }

/* podium */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.podium .col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.podium .plinth { width: 84px; border-radius: 14px 14px 0 0; background: var(--card); border: 1px solid var(--line-2); border-bottom: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 12px 6px 0; box-shadow: var(--shadow-card); }
.podium .plinth .p-pts { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.4px; }
.podium .plinth .p-rk { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--gold); }
.podium .col.second .plinth .p-rk, .podium .col.third .plinth .p-rk { color: var(--ink-3); }

/* ---------- overlapping avatar stack ---------- */
.stack { display: flex; align-items: center; }
.stack .av { margin-left: -9px; }
.stack .av:first-child { margin-left: 0; }
.stack .av img { box-shadow: 0 0 0 2px var(--card); }

/* ---------- PR table ---------- */
.prt { width: 100%; border-collapse: collapse; }
.prt th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 0 0 8px; }
.prt th:first-child { text-align: left; }
.prt td { padding: 9px 0; border-top: 1px solid var(--line-2); text-align: right; font-weight: 700; }
.prt td:first-child { text-align: left; font-weight: 600; }
.prt td .ex-ic { font-size: 15px; margin-right: 7px; }

/* ---------- challenge card ---------- */
.chal { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 15px 16px; }
.chal .ct { display: flex; align-items: flex-start; gap: 12px; }
.chal .cic { width: 42px; height: 42px; border-radius: 13px; background: var(--card-2); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; border: 1px solid var(--line-2); }
.chal .meta { display: flex; align-items: center; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

/* a locked / reserved strip */
.locked-strip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); border: 1px dashed var(--line); }

/* segmented progress chip */
.ontrack { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--forest-t); color: var(--forest-d); white-space: nowrap; }

/* upload tile */
.upload-tile { aspect-ratio: 1; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--card-2); border: 1.5px dashed var(--line); color: var(--ink-3); font-size: 9px; font-weight: 700; }

/* ============================================================
   v2.1 — design handoff components
   (log rework · coach session · today rework · respect · quests
    · toast · invites · badge sheet)
   Folded from Design/handoff_v2.1/design/components.css.
   Rail segments use .rseg (NOT .seg) to avoid the segmented
   control .seg defined above.
   ============================================================ */

/* ---- streak hero ---- */
.streak-hero { background: var(--clay-t); border: 1px solid #E7CCAE; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 16px; }
.streak-hero .flame-badge { width: 60px; height: 60px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: 0 0 auto; }
.streak-hero .week { display: flex; gap: 6px; margin-top: 14px; }
.streak-hero .wd { flex: 1; background: rgba(255,255,255,0.45); border-radius: 10px; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.streak-hero .wd .wdf { font-size: 14px; line-height: 1; height: 15px; }
.streak-hero .wd .wdl { font-size: 9.5px; font-weight: 800; color: var(--clay-d); opacity: 0.5; }
.streak-hero .wd.lit { background: #fff; }
.streak-hero .wd.lit .wdl { opacity: 0.85; }
.streak-hero .wd.today { background: #fff; box-shadow: 0 0 0 2px var(--clay); }
.streak-hero .wd.today .wdf { color: var(--clay); font-weight: 800; }
.streak-hero .wd.today .wdl { opacity: 1; }

/* ---- training-today + quest ---- */
.train-row { display: flex; align-items: center; gap: 13px; }
.quest-row { padding: 14px 15px; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.quest-row:active { filter: brightness(0.98); }

/* v2.2.1 §12 — multi-pack quests collapsed into one card (slim rows scoped under .quests so they
   don't disturb the single full-card .quest-row above) */
.quests { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden; }
.quests-head { display: flex; align-items: center; gap: 9px; padding: 12px 15px 11px; border-bottom: 1px solid var(--line-2); }
.quests-head .qh-t { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.quests-head .qh-gold { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; color: var(--clay-d); }
.quests .quest-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 15px;
  background: none; border: none; border-top: 1px solid var(--line); font-family: var(--font-ui);
  text-align: left; cursor: pointer; text-decoration: none; }
.quests .quest-row:first-of-type { border-top: none; }
.quests .quest-row .qr-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--card-2);
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.quests .quest-row .qr-pack { font-size: 11px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; }
.quests .quest-row .qr-title { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.2; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quests .quest-row .qr-ex { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800;
  color: var(--forest-d); background: var(--forest-t); border-radius: 999px; padding: 4px 10px; }
.quests-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px 15px;
  border: none; border-top: 1px solid var(--line); background: var(--paper-2); cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--ink-2); }
.quests-more .cv { transition: transform .2s ease; }
.quests .quest-row.q-extra { display: none; }
.quests.open .quest-row.q-extra { display: flex; }
.quest-foot { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #E7CCAE; }
.quest-emoji { width: 44px; height: 44px; border-radius: 13px; background: #fff; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto; }
.qt-target { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }

/* ---- avatar quest star ---- */
.av .star-badge { position: absolute; top: -7px; right: -5px; width: 15px; height: 15px; line-height: 0; }
.av .star-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- badges strip ---- */
.badge-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 2px 4px; }
.badge-strip::-webkit-scrollbar { display: none; }
.bchip { flex: 0 0 auto; width: 70px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; cursor: pointer; text-decoration: none; color: inherit; }
.bchip:active { filter: brightness(0.98); }
.bchip .bic { font-size: 25px; line-height: 1; }
.bchip .bnm { font-size: 9.5px; font-weight: 800; color: var(--ink-2); text-align: center; line-height: 1.1; }
.bchip.is-new { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-t), var(--shadow-card); }
.bchip .new-tag { position: absolute; top: -7px; right: -5px; background: var(--gold); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0.4px; padding: 2px 5px; border-radius: 999px; }
.bchip.locked { opacity: 0.5; }

/* ---- respect (kudos) ---- */
.resp-btn { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.resp-btn.on { background: var(--clay-t); border-color: #E7CCAE; color: var(--clay-d); }
.resp-btn.lg { font-size: 13px; padding: 8px 14px; }
.resp-btn.feed { background: var(--card); color: var(--clay-d); border-color: #E7CCAE; padding: 5px 11px; font-size: 12.5px; }
.resp-count { font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--clay-d); background: var(--clay-t); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.resp-bar { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2); }
.resp-got { font-size: 22px; }

/* ---- toast ---- */
.toast { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 11px 12px; }
.toast.passed { background: #FBF1E4; border-color: #EAD4B6; }
.toast.respback { background: var(--clay-t); border-color: #E7CCAE; }
.toast-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.toast-x { width: 30px; height: 30px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }

/* ---- badge detail bottom sheet ---- */
/* fixed (not absolute) so the sheet pins to the VIEWPORT bottom — on mobile the .appwrap is the
   full scrolling document, so absolute positioning dropped the panel off-screen below the fold. */
.sheet-scrim { position: fixed; inset: 0; background: rgba(30,42,36,0.28); z-index: 40; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 440px; background: var(--paper); border-radius: 26px 26px 0 0; padding: 12px 20px calc(26px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px -20px rgba(30,42,36,0.5); z-index: 41; }
.sheet .grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 16px; }
.badge-hero { width: 76px; height: 76px; border-radius: 20px; background: var(--card); border: 1px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-t), var(--shadow-card); display: flex; align-items: center; justify-content: center; font-size: 38px; margin: 0 auto; }

/* ---- log: big-number-as-input, review rows, adjust, date control ---- */
.goal-line { font-size: 12.5px; font-weight: 700; color: var(--forest-d); }
.big-edit { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 6px 4px 2px; }
.big-edit .edit-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.big-edit .edit-hint.on { color: var(--forest); }
@keyframes blink { 50% { opacity: 0; } }
/* a real <input> styled to look like the big readout (robust typing on every device) */
.big-input { width: 100%; max-width: 260px; margin: 6px auto 2px; display: block; text-align: center; border: none; background: none; outline: none; font-family: var(--font-display); font-weight: 800; letter-spacing: -3px; line-height: 1; color: var(--ink); border-bottom: 2px dashed transparent; padding: 2px 0; -webkit-appearance: none; }
.big-input:focus { border-bottom-color: var(--forest); }
.big-input.live { color: var(--forest); }
/* v2.1 capture: the number IS the input (tap to type) — no box, with a hint + flanking nudges */
.big-edit { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.big-edit .big-input { width: auto; min-width: 120px; max-width: 200px; margin: 0; }
.big-edit .edit-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.big-edit .edit-hint.on { color: var(--forest); }
.big-edit.editing .big-input { border-bottom-color: var(--forest); }
.adj-btn { width: 48px; height: 48px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 24px; font-weight: 700; color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.adj-btn:active { transform: scale(0.95); }

/* v2.2.1 unit clarity — the unit caption under a big entry + the "what am I entering" badge */
.unit-cap { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.count-seg { display: inline-flex; flex-direction: column; align-items: center; }
.unit-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-2); background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.rev-val .ru { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 1px; letter-spacing: 0; }

/* v2.2.2 — "Earlier today" recall strip: today's prior sets of this exercise, tap a chip to edit */
.recall { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card-2); border: 1px solid var(--line-2); text-decoration: none; }
.recall .ri { font-size: 17px; flex: 0 0 auto; }
.recall .rt { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-3); }
.recall-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.recall-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-weight: 800;
  font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; text-decoration: none; }
.recall-chip:hover { border-color: var(--forest); }
.recall-total { margin-left: auto; text-align: right; flex: 0 0 auto; }
.recall-total .rn { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.5px;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.recall-total .rl { font-size: 10.5px; font-weight: 700; color: var(--ink-3); margin-top: 2px; }
.set-of { font-size: 11px; font-weight: 800; color: var(--forest-d); background: var(--forest-t);
  border-radius: 999px; padding: 3px 9px; letter-spacing: 0.2px; }

/* v2.2.2 — "Today so far" roll-up: the day's mixed exercises, continue any */
.today-roll { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden; }
.today-roll .tr-head { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--line-2); }
.today-roll .tr-head .th-t { font-weight: 800; font-size: 14px; }
.today-roll .tr-head .th-sum { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.tr-ex { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-top: 1px solid var(--line); }
.tr-ex:first-of-type { border-top: none; }
.tr-ex .te-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--card-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.tr-ex .te-name { font-weight: 800; font-size: 14px; }
.tr-ex .te-sets { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.tr-ex .te-add { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui);
  font-weight: 800; font-size: 12.5px; color: var(--forest-d); background: var(--forest-t); border: none;
  border-radius: 999px; padding: 8px 13px; cursor: pointer; text-decoration: none; }
.tr-foot { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-top: 1px solid var(--line); background: var(--paper-2); }
.tr-foot .tf-cap { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tr-foot .tf-tot { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--ink); font-variant-numeric: tabular-nums; }

/* v2.2.3 — Longevity module (rolling 7-day effort vs an age target) */
.r7-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.r7-head .r7-t { font-size: 12.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-2); }
.r7-head .r7-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 4px 11px; }
.r7-head .r7-status.met { color: var(--forest-d); background: var(--forest-t); }
.r7-head .r7-status.near { color: var(--bld-d); background: var(--bld-t); }
.r7-readout { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.r7-readout .r7-n { font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: -1.8px; line-height: 0.9; color: var(--ink); font-variant-numeric: tabular-nums; }
.r7-readout .r7-unit { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.r7-readout .r7-tgt { margin-left: auto; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.r7-readout .r7-tgt b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r7-chart { position: relative; height: 96px; margin-top: 14px; }
.r7-bars { display: flex; gap: 7px; align-items: flex-end; height: 100%; }
.r7-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.r7-track { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.r7-bar { width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #4E9E72, var(--forest)); min-height: 6px; }
.r7-bar.hard { background: linear-gradient(180deg, var(--bld), var(--bld-d)); }
.r7-bar.dim { background: var(--paper-2); min-height: 5px; }
.r7-col.today .r7-bar { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--forest); }
.r7-d { font-size: 10.5px; font-weight: 800; color: var(--ink-3); }
.r7-col.today .r7-d { color: var(--forest-d); }
.r7-target { position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in oklab, var(--ink) 32%, transparent); }
.r7-target .r7-tl { position: absolute; right: 0; top: -8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--ink-3); background: var(--card); padding: 0 4px; }
.r7-foot { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2); }
.r7-hard { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); }
.r7-hard .hb { width: 22px; height: 22px; border-radius: 999px; background: var(--bld-t); color: var(--bld-d); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.r7-foot .r7-roll { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.lon-desc { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2); margin: 4px 0 0; text-wrap: pretty; }
.lon-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-size: 12.5px; font-weight: 800;
  color: var(--forest-d); cursor: pointer; text-decoration: none; }
.lon-link .q { width: 18px; height: 18px; border-radius: 999px; background: var(--forest-t); display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; }
/* active plans folded inside the Coach card */
.coach-plans { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line-2); }
.coach-plans .cp-h { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.cplan { display: flex; align-items: center; gap: 11px; padding: 9px 0; text-decoration: none; color: inherit; }
.cplan + .cplan { border-top: 1px solid var(--line); }
.cplan .cp-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.cplan .cp-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.cplan .cp-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 1px; }
.coach-msg.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rev-list { display: flex; flex-direction: column; gap: 8px; }
.rev-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; font-family: var(--font-ui); text-align: left; cursor: pointer; padding: 2px 0; }
.rev-n { width: 22px; height: 22px; border-radius: 999px; background: var(--forest); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rev-label { font-weight: 700; font-size: 14px; }
.rev-val { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 11px; font-size: 16px; font-weight: 800; }
.rev-x { width: 26px; height: 26px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; text-decoration: none; color: var(--ink-3); }
.rev-open { background: var(--card-2); border: 1px solid var(--forest); box-shadow: 0 0 0 2px var(--forest-t); border-radius: 14px; padding: 12px 12px 14px; text-align: center; }
.rev-open-head { display: flex; align-items: center; gap: 10px; }
.rev-collapse { background: none; border: none; font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--forest); cursor: pointer; }

.adj-btn { width: 48px; height: 48px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 24px; font-weight: 700; color: var(--ink); cursor: pointer; flex: 0 0 auto; }

.datepill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--forest-d); background: var(--forest-t); border: 1px solid #BFD6C5; border-radius: 999px; padding: 6px 11px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.datepill.open { box-shadow: 0 0 0 3px var(--forest-t); }
.daymenu { position: absolute; top: 4px; right: 16px; width: 248px; z-index: 20; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 8px; }
.daymenu-h { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px 8px; }
.daymenu-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--ink); text-align: left; padding: 10px 8px; border-radius: 10px; cursor: pointer; text-decoration: none; }
.daymenu-row:hover { background: var(--card-2); }
.daymenu-row.on { background: var(--forest-t); color: var(--forest-d); }
.daymenu-row .dm-check { margin-left: 6px; width: 20px; height: 20px; border-radius: 999px; background: var(--forest); color: #fff; display: flex; align-items: center; justify-content: center; }
.daymenu-foot { font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 8px 8px 4px; }
.past-banner { display: flex; align-items: center; gap: 9px; background: var(--forest-t); border: 1px solid #BFD6C5; color: var(--forest-d); border-radius: var(--r-md); padding: 11px 12px; }
.past-x { width: 24px; height: 24px; border-radius: 999px; background: rgba(47,107,76,0.12); display: flex; align-items: center; justify-content: center; color: var(--forest-d); flex: 0 0 auto; cursor: pointer; text-decoration: none; }

/* ---- session rail (.rseg, see note above) ---- */
.rail-wrap { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 13px 14px 11px; }
.rail { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.rail-group { display: flex; align-items: center; gap: 6px; }
.rail-ic { font-size: 15px; margin-right: 2px; }
.rseg { flex: 0 0 auto; height: 34px; min-width: 34px; padding: 0 8px; border-radius: 9px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.rseg.done { background: var(--forest); }
.rseg.done .rseg-v { color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.rseg.active { background: var(--forest-t); box-shadow: 0 0 0 2px var(--forest); }
.rseg.active .rseg-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--forest); animation: pulse 1.2s ease-in-out infinite; }
.rseg.todo { background: var(--paper-2); }
.rseg.todo .rseg-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-3); opacity: 0.4; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.rail-label { font-size: 12px; font-weight: 800; color: var(--ink-2); margin-top: 10px; }

/* ---- per-variant PR breakdown (strict vs assisted/inverse/fins) ---- */
.pr-variants td { padding-top: 2px !important; padding-bottom: 9px !important; }
.pr-vchip { display: inline-flex; align-items: baseline; gap: 4px; margin: 3px 6px 0 0;
            padding: 2px 9px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2);
            font-size: 11.5px; font-weight: 700; color: var(--ink-2); }

/* ---- post-session note to the coach (free text, quoted back next session) ---- */
.fb-card { text-align: left; margin-top: 16px; }
.fb-note { font-size: 14px; font-weight: 600; }

/* the editable per-set value in the summary: the display font's -3px tracking + line-height:1
   clipped small numbers — relax both so the value sits fully inside its row. */
.set-line .sum-edit { letter-spacing: 0; line-height: 1.3; padding: 3px 0; }

/* ---- focused active set ---- */
.focus-card { background: var(--card); border: 1px solid var(--forest); border-radius: var(--r-lg); box-shadow: 0 0 0 2px var(--forest-t), var(--shadow-card); padding: 16px; }
.focus-card.running { box-shadow: 0 0 0 3px var(--forest-t), var(--shadow-card); }
.focus-card.rest { border-color: #BFD6C5; box-shadow: var(--shadow-card); background: var(--forest-t); }
.fc-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 14px; }
.fc-target { font-size: 12px; font-weight: 800; color: var(--ink-3); }
.fc-target.on { color: var(--forest); }
.focus-card .display.live { color: var(--forest); }
.rest-eyebrow { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.3px; color: var(--forest-d); text-transform: uppercase; }

/* ---- set progress bar ---- */
.set-progress { margin-top: 2px; }
.sp-track { position: relative; height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.sp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--forest); transition: width .25s; }
.sp-tick { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--ink); opacity: 0.55; transform: translateX(-1px); }
.set-progress.hit .sp-track { box-shadow: 0 0 0 2px var(--forest-t); }
.set-progress.hit .sp-fill { background: linear-gradient(90deg, var(--forest), #3E8B62); }
.set-progress.hit .sp-tick { background: #fff; opacity: 0.9; }
.sp-cap { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 11.5px; font-weight: 700; }
.sp-state { color: var(--ink-3); }
.set-progress.hit .sp-state { color: var(--forest); }

/* ---- collapsed set rows (done / todo) ---- */
.set-stack { display: flex; flex-direction: column; gap: 7px; }
.set-line { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line-2); }
.set-line.todo { background: transparent; border-style: dashed; border-color: var(--line); opacity: 0.7; }
.sl-check { width: 22px; height: 22px; border-radius: 999px; background: var(--forest); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sl-num { width: 22px; height: 22px; border-radius: 999px; background: var(--paper-2); color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.multi-note { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--card-2); border-radius: 12px; padding: 11px 13px; line-height: 1.45; }

/* ---- invites ---- */
.invite-drawer { background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 14px; }
.id-head { font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.invite-how { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-top: 8px; padding: 0 2px; }
.linkbox { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 10px 9px 12px; }
.chip.pending { background: #EDE7D7; color: var(--ink-2); border: 1px solid var(--line); font-size: 10.5px; }
.invite-card { background: var(--card); border: 1px solid var(--forest); box-shadow: 0 0 0 2px var(--forest-t), var(--shadow-card); border-radius: var(--r-lg); padding: 15px; }
.invite-card.today { display: flex; align-items: center; gap: 11px; padding: 13px 14px; position: relative; }
.inv-dot { position: absolute; top: 12px; left: 12px; width: 8px; height: 8px; border-radius: 999px; background: var(--forest); }


/* ============================================================
   v2.2 DESIGN KIT — ported from the handoff's pack-v22.css.
   The app's own .sheet/.sheet-scrim/.rev-*/.big-edit/.datepill/.goal-line
   are kept (not overridden); everything else is the design's.
   ============================================================ */
:root {--rdy:   oklch(0.55 0.10 150);   
  --rdy-t: oklch(0.94 0.035 150);
  --rdy-d: oklch(0.44 0.09 150);
  --smt:   oklch(0.68 0.095 86);   
  --smt-t: oklch(0.94 0.045 86);
  --smt-d: oklch(0.50 0.085 80);
  --bld:   oklch(0.63 0.115 55);   
  --bld-t: oklch(0.93 0.05 55);
  --bld-d: oklch(0.48 0.10 50);
  --rcv:   oklch(0.55 0.135 32);   
  --rcv-t: oklch(0.93 0.05 32);
  --rcv-d: oklch(0.45 0.12 32);

  
  --c-str: oklch(0.55 0.115 28);   
  --c-car: oklch(0.55 0.10 235);   
  --c-flx: oklch(0.58 0.10 150);}
.v22 .tnum {font-variant-numeric: tabular-nums;}
.fit-hero {display: flex; align-items: stretch; gap: 14px;}
.fit-block {flex: 1 1 auto; min-width: 0;}
.fit-eyebrow {font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-3);}
.fit-num {font-family: var(--font-display); font-weight: 800; letter-spacing: -2.5px;
  line-height: 0.9; color: var(--ink); font-variant-numeric: tabular-nums;
  font-size: 76px;}
.fit-num.sm {font-size: 54px; letter-spacing: -1.8px;}
.fit-delta {display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 800; color: var(--forest-d);
  background: var(--forest-t); border-radius: 999px; padding: 3px 9px;}
.fit-delta.flat {color: var(--ink-2); background: var(--card-2);}
.fit-delta.down {color: var(--clay-d); background: var(--clay-t);}
.fit-tier {display: inline-flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: 14px; color: var(--ink);}
.ind {display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 12px; border-radius: 14px; font-weight: 800;
  border: 1px solid transparent;}
.ind .dot {width: 13px; height: 13px; border-radius: 999px; flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.5) inset;}
.ind .lab {font-size: 15px; letter-spacing: -0.1px;}
.ind .sub {font-size: 12px; font-weight: 700; opacity: 0.72;}
.ind.rdy {background: var(--rdy-t); color: var(--rdy-d);}
.ind.rdy .dot {background: var(--rdy);}
.ind.smt {background: var(--smt-t); color: var(--smt-d);}
.ind.smt .dot {background: var(--smt);}
.ind.bld {background: var(--bld-t); color: var(--bld-d);}
.ind.bld .dot {background: var(--bld);}
.ind.rcv {background: var(--rcv-t); color: var(--rcv-d);}
.ind.rcv .dot {background: var(--rcv);}
.ind.cal {background: var(--cal-t); color: var(--cal-d);}
.ind.cal .dot {background: var(--cal);}
.ind.block {display: flex; width: 100%;}
.ind.block .lab {font-size: 16px;}
.streak-mini {flex: 0 0 auto; width: 116px; border-left: 1px solid var(--line);
  padding-left: 14px; display: flex; flex-direction: column; gap: 7px;}
.streak-mini .sm-top {display: flex; align-items: baseline; gap: 5px;}
.streak-mini .sm-n {font-family: var(--font-display); font-weight: 800; font-size: 30px;
  letter-spacing: -1px; line-height: 1; color: var(--clay-d);}
.streak-mini .sm-lbl {font-size: 11.5px; font-weight: 700; color: var(--ink-2); line-height: 1.25;}
.sm-week {display: flex; gap: 3px;}
.sm-week .d {flex: 1; height: 6px; border-radius: 999px; background: var(--paper-2);}
.sm-week .d.on {background: var(--clay);}
.sm-week .d.today {box-shadow: 0 0 0 1.5px var(--clay-d);}
.coach-card {background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden;}
.coach-strip {display: flex; align-items: center; gap: 9px; padding: 11px 16px;
  font-weight: 800; font-size: 14px;}
.coach-strip .dot {width: 11px; height: 11px; border-radius: 999px; flex: 0 0 auto;}
.coach-strip.rdy {background: var(--rdy-t); color: var(--rdy-d);}
.coach-strip.rdy .dot {background: var(--rdy);}
.coach-strip.smt {background: var(--smt-t); color: var(--smt-d);}
.coach-strip.smt .dot {background: var(--smt);}
.coach-strip.bld {background: var(--bld-t); color: var(--bld-d);}
.coach-strip.bld .dot {background: var(--bld);}
.coach-strip.rcv {background: var(--rcv-t); color: var(--rcv-d);}
.coach-strip.rcv .dot {background: var(--rcv);}
.coach-strip.cal {background: var(--cal-t); color: var(--cal-d);}
.coach-strip.cal .dot {background: var(--cal);}
.coach-body {padding: 15px 16px 16px;}
.coach-msg {font-family: var(--font-ui); font-weight: 600; font-size: 16.5px; line-height: 1.45;
  letter-spacing: 0; color: var(--ink); margin: 0; text-wrap: pretty;}
.coach-msg .em {color: var(--forest-d); font-weight: 800;}
/* v2.2.1 §11 — collapsible Coach card: tap to expand the full message + actions */
.coach-card.tappable {cursor: pointer;}
.coach-strip .coach-exp {margin-left: auto; display: inline-flex; align-items: center;}
.coach-exp .cv {font-size: 15px; line-height: 1; transition: transform .2s ease; opacity: 0.85;}
.coach-exp.open .cv {transform: rotate(180deg);}
.coach-msg.clamp1 {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.coach-by {display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 12px; font-weight: 700; color: var(--ink-3);}
.coach-by .pip {width: 18px; height: 18px; border-radius: 999px; background: var(--ink-card); color: var(--on-dark);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.coach-acts {display: flex; gap: 8px; margin-top: 15px;}
.coach-acts .btn {width: auto; flex: 0 0 auto; padding: 12px 16px;}
.coach-acts .btn.grow {flex: 1 1 auto;}
.coach-acts .btn.txt {background: transparent; color: var(--ink-2); box-shadow: none;}
.coach-neutral {display: flex; align-items: center; gap: 11px; padding: 15px 16px;
  background: var(--paper-2); border-radius: var(--r-lg); border: 1px solid var(--line);}
.coach-neutral .ci {width: 38px; height: 38px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.sheet-grab {width: 40px; height: 5px; border-radius: 999px; background: var(--line); margin: 2px auto 14px;}
.sheet-h {font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px;}
.chip-grid {display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 4px;}
.adj-chip {display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui);
  font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);}
.adj-chip.on {background: var(--forest-t); border-color: var(--forest); color: var(--forest-d);}
.adj-input {display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 13px 14px; margin-top: 14px;
  box-shadow: var(--shadow-card);}
.adj-input input {flex: 1; border: none; background: none; outline: none; font-family: var(--font-ui);
  font-size: 14.5px; font-weight: 600; color: var(--ink);}
.adj-input input::placeholder {color: var(--ink-3);}
.effort {background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); padding: 14px 16px;}
.effort-head {display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px;}
.effort-cap {font-size: 12.5px; font-weight: 800; color: var(--ink);}
.effort-cap .tnum {color: var(--ink);}
.effort-left {font-size: 11.5px; font-weight: 700; color: var(--ink-3);}
.effort-bar {height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden; position: relative;}
.effort-bar > span {display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--forest), #3E8B62);}
.effort-bar.met > span {background: linear-gradient(90deg, var(--rdy), var(--rdy));}
.effort-row2 {display: flex; align-items: center; gap: 10px; margin-top: 11px;}
.hard-dots {display: flex; gap: 5px;}
.hard-dots .hd {width: 13px; height: 13px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line);}
.hard-dots .hd.on {background: var(--bld); border-color: var(--bld);}
.effort-hard-lbl {font-size: 11.5px; font-weight: 700; color: var(--ink-2);}
.effort-note {font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 9px; line-height: 1.45;}
.floor-hit {display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--r-md);
  background: var(--rdy-t); color: var(--rdy-d); font-weight: 800; font-size: 13.5px;}
.trend {background: var(--ink-card); border-radius: var(--r-lg); color: var(--on-dark);
  box-shadow: 0 10px 30px -16px rgba(30,42,36,0.7); padding: 16px 16px 12px; position: relative; overflow: hidden;}
.trend-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.trend-legend {display: flex; gap: 14px;}
.trend-legend .lg {display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--on-dark-2);}
.trend-legend .lg .ln {width: 16px; height: 3px; border-radius: 2px;}
.trend-x {display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; font-weight: 700; color: var(--on-dark-2);}
.trend-now {position: absolute; top: 16px; right: 16px; text-align: right;}
.comp {display: flex; flex-direction: column; gap: 13px;}
.comp-row {display: grid; grid-template-columns: 112px 1fr 42px; align-items: center; gap: 11px;}
.comp-lab {font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px;}
.comp-track {height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden;}
.comp-track > span {display: block; height: 100%; border-radius: 999px;}
.comp-pct {text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.fill-str {background: var(--c-str);}
.fill-car {background: var(--c-car);}
.fill-flx {background: var(--c-flx);}
.fill-pts {background: var(--forest);}

/* account switcher — the Today hero avatar opens a family dropdown */
.acct {position: relative;}
.acct > summary {list-style: none; cursor: pointer; display: block;}
.acct > summary::-webkit-details-marker {display: none;}
.acct-menu {position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 214px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 7px;
  box-shadow: 0 14px 34px rgba(0,0,0,.17);}
.acct-menu-h {font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); padding: 6px 9px 7px;}
.acct-item {display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 9px; border: 0;
  background: none; border-radius: 11px; font-size: 14px; color: var(--ink); cursor: pointer; text-decoration: none;}
.acct-item:hover, .acct-item.on {background: var(--paper-2);}
.acct-add {color: var(--forest-d); font-weight: 700; justify-content: center; margin-top: 4px;
  border-top: 1px solid var(--line-2); border-radius: 0 0 11px 11px;}
.actingbar {display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 13px; padding: 9px 14px; border-radius: 12px; background: var(--clay-t); color: var(--clay-d);
  font-size: 13px; font-weight: 600;}
.gains {display: flex; flex-direction: column; gap: 9px;}
.gain {display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink);}
.gain .gk {width: 19px; height: 19px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 11px;}
.gain .gk.up {background: var(--rdy-t); color: var(--rdy-d);}
.gain .gk.warn {background: var(--bld-t); color: var(--bld-d);}
.gain .gv {margin-left: auto; font-weight: 800; color: var(--ink-2); font-size: 13px;}
.rb-tag {display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800;
  color: var(--rdy-d); background: var(--rdy-t); padding: 2px 8px; border-radius: 999px;}
.pr-row {display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line-2);}
.pr-row:first-child {border-top: none;}
.pr-ic {font-size: 19px; width: 24px; text-align: center; flex: 0 0 auto;}
.pr-val {font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.4px;}
.pr-when {font-size: 11.5px; color: var(--ink-3); font-weight: 600;}
/* baseline phase chip + PR celebration stage (v2.2, ported from pack-v22.css) */
.baseline {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px;}
.baseline .bdots {display: flex; gap: 3px;}
.baseline .bdots i {width: 6px; height: 6px; border-radius: 999px; background: var(--line); display: block;}
.baseline .bdots i.on {background: var(--forest);}
.feel-stage {flex: 1 1 auto; display: flex; flex-direction: column; padding: 24px 22px 30px;}
.baseline {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px;}
.baseline .bdots {display: flex; gap: 3px;}
.baseline .bdots i {width: 6px; height: 6px; border-radius: 999px; background: var(--line); display: block;}
.baseline .bdots i.on {background: var(--forest);}
.rpe-head {display: flex; align-items: center; justify-content: space-between;}
.rpe-anchors {display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px;}
.rpe-anchors span {display: inline-flex; align-items: center; gap: 5px;}
.rpe-track {position: relative; height: 46px;}
.rpe-rail {position: absolute; top: 50%; left: 4px; right: 4px; height: 8px; transform: translateY(-50%);
  border-radius: 999px; background: linear-gradient(90deg, var(--rdy), var(--smt), var(--bld), var(--rcv)); opacity: 0.85;}
.rpe-ticks {position: absolute; top: 50%; left: 4px; right: 4px; transform: translateY(-50%); display: flex; justify-content: space-between;}
.rpe-ticks i {width: 2px; height: 14px; background: rgba(255,255,255,0.6); border-radius: 2px;}
.rpe-knob {position: absolute; top: 50%; width: 38px; height: 38px; border-radius: 999px; background: var(--card);
  border: 3px solid var(--ink); transform: translate(-50%, -50%); box-shadow: var(--shadow-pop);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 800; font-size: 17px; color: var(--ink);}
.rpe-scale {display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--ink-3); margin-top: 2px;}
.iv-opts {display: flex; flex-direction: column; gap: 10px;}
.iv-opt {display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: var(--r-md);
  background: var(--card); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card); cursor: pointer; text-align: left;}
.iv-opt.on {border-color: var(--bld); box-shadow: 0 0 0 2px var(--bld-t), var(--shadow-card);}
.iv-opt .ive {font-size: 24px; flex: 0 0 auto;}
.iv-opt .iv-txt {flex: 1; min-width: 0;}
.iv-opt .ivt {display: block; font-weight: 800; font-size: 14.5px;}
.iv-opt .ivd {display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 3px; line-height: 1.35;}
.iv-opt .hardtag {font-size: 10.5px; font-weight: 800; color: var(--bld-d);
  background: var(--bld-t); padding: 3px 9px; border-radius: 999px; flex: 0 0 auto;}
.iv-opt .iv-chev {flex: 0 0 auto; color: var(--ink-3);}
.iv-opt:active {transform: scale(0.99);}
.iv-skip {display: block; margin: 20px auto 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 28px; color: var(--ink-2); font-weight: 700; font-size: 13.5px;
  cursor: pointer; font-family: inherit; box-shadow: var(--shadow-card);}
.est-row {display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card-2); border: 1px dashed var(--line);}
.est-row . add {margin-left: auto;}
.feel-stage {flex: 1 1 auto; display: flex; flex-direction: column; padding: 24px 22px 30px;}
.feel-q {font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.8px;
  line-height: 1.08; color: var(--ink); text-wrap: balance;}
.feel-sub {font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 8px;}
.feel5 {display: flex; gap: 8px;}
.feel5 .f {flex: 1; aspect-ratio: 1; border-radius: 18px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; background: var(--card); border: 1.5px solid var(--line-2);
  cursor: pointer; box-shadow: var(--shadow-card);}
.feel5 .f .fe {font-size: 26px; line-height: 1;}
.feel5 .f .fl {font-size: 10px; font-weight: 800; color: var(--ink-3);}
.feel5 .f.sel {transform: translateY(-3px);}
.feel5 .f.sel.rdy {border-color: var(--rdy); box-shadow: 0 0 0 3px var(--rdy-t), var(--shadow-card);}
.feel5 .f.sel.smt {border-color: var(--smt); box-shadow: 0 0 0 3px var(--smt-t), var(--shadow-card);}
.feel5 .f.sel.bld {border-color: var(--bld); box-shadow: 0 0 0 3px var(--bld-t), var(--shadow-card);}
.feel5 .f.sel.rcv {border-color: var(--rcv); box-shadow: 0 0 0 3px var(--rcv-t), var(--shadow-card);}
.feel5 .f.sel .fl {color: var(--ink);}
.feel3 {display: flex; flex-direction: column; gap: 12px;}
.feel3 .f {display: flex; align-items: center; gap: 16px; padding: 22px 22px; border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card); cursor: pointer;}
.feel3 .f .fe {font-size: 34px; line-height: 1;}
.feel3 .f .ft {font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.4px;}
.feel3 .f .fd {font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 1px;}
.feel3 .f.sel.rdy {border-color: var(--rdy); box-shadow: 0 0 0 3px var(--rdy-t), var(--shadow-card);}
.feel3 .f.sel.smt {border-color: var(--smt); box-shadow: 0 0 0 3px var(--smt-t), var(--shadow-card);}
.feel3 .f.sel.rcv {border-color: var(--rcv); box-shadow: 0 0 0 3px var(--rcv-t), var(--shadow-card);}
.feel-sig {display: flex; flex-direction: column; gap: 18px;}
.sig-row .sig-lab {display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;}
.sig-row .sig-lab .sl {font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px;}
.sig-row .sig-lab .sv {font-size: 12px; font-weight: 700; color: var(--ink-2);}
.sig-seg {display: flex; gap: 6px;}
.sig-seg .s {flex: 1; height: 40px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--ink-3);}
.sig-seg .s.on {background: var(--forest-t); border-color: var(--forest); color: var(--forest-d);}
.feel-inline {display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-card);}
.feel-inline .fic {width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 21px; flex: 0 0 auto;}
.feel-inline .fic.rdy {background: var(--rdy-t);}
.feel-inline .fic.smt {background: var(--smt-t);}
.feel-inline .fic.bld {background: var(--bld-t);}
.feel-inline .fic.rcv {background: var(--rcv-t);}
.feel-note {background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); padding: 13px 15px; display: flex; align-items: center; gap: 10px;}
.feel-note input {flex: 1; border: none; outline: none; background: none; font-family: var(--font-ui);
  font-size: 14px; font-weight: 600; color: var(--ink);}
.feel-note input::placeholder {color: var(--ink-3); font-weight: 500;}
.mp-head {display: flex; align-items: center; gap: 14px;}
.mp-name {font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px;}
.mp-tier {display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); margin-top: 2px;}
.fit-context {display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ink-3);}
.fit-context .fcn {color: var(--ink-2); font-weight: 800;}
.hiw-h {font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 6px;}
.hiw-p {font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty;}
.hiw-sec {padding: 17px 0; border-top: 1px solid var(--line-2);}
.hiw-sec:first-child {border-top: none; padding-top: 4px;}
.hiw-num {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--ink-card); color: var(--on-dark); font-size: 11px; font-weight: 800;
  margin-right: 9px; flex: 0 0 auto;}
.hiw-cite {font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-top: 8px; font-style: italic;}
.mini-diagram {display: flex; gap: 3px; align-items: flex-end; height: 46px; margin: 12px 0 2px;}
.mini-diagram .b {flex: 1; border-radius: 3px 3px 0 0; background: var(--forest); opacity: 0.85;}
.hiw-link {display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-card);
  font-weight: 700; font-size: 13.5px; color: var(--ink);}
.hiw-link .q {width: 26px; height: 26px; border-radius: 999px; background: var(--dusk-t); color: var(--dusk);
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto;}
.life-opt {display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--r-md);
  background: var(--card); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card); cursor: pointer;}
.life-opt.sel {border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-t), var(--shadow-card);}
.life-opt .le {font-size: 26px; flex: 0 0 auto; line-height: 1;}
.life-opt .lt {font-weight: 800; font-size: 15px;}
.life-opt .ld {font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 2px; line-height: 1.4;}
/* Design ships this as position:absolute inside a fixed-height phone. The live app scrolls, so the
   scrim is fixed + centered to the app column and toggles via .open (an [hidden] attr can't beat
   display:flex on specificity). Visuals are otherwise 1:1 with pack-v22.css. */
.modal-scrim {position: fixed; left: 50%; transform: translateX(-50%); top: 0; bottom: 0;
  width: 100%; max-width: 440px; background: rgba(30,42,36,0.34);
  backdrop-filter: blur(1.5px); z-index: 50; display: none; align-items: center;
  justify-content: center; padding: 0 16px;}
.modal-scrim.open {display: flex;}
.modal-card {width: 100%; background: var(--paper); border-radius: 26px;
  box-shadow: var(--shadow-pop); border: 1px solid var(--line); padding: 20px 18px; position: relative;}
.modal-x {position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-2);}
.modal-h {font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.5px; color: var(--ink);}
.modal-sub {font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 5px;}
.hero-spark {margin-top: 13px;}
.hero-spark-cap {display: flex; align-items: center; justify-content: space-between; margin-top: 5px;
  font-size: 11px; font-weight: 700; color: var(--ink-3);}
.feel-strip {display: flex; align-items: center; gap: 11px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-2);}
.feel-strip .fs-q {font-weight: 800; font-size: 13.5px; color: var(--ink);}
.feel-strip .fs-mini {display: flex; gap: 5px; margin-left: auto;}
.feel-strip .fs-mini button {width: 33px; height: 33px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;}
.feel-strip .fs-mini button:hover {border-color: var(--forest);}
.feel-strip .fic {width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex: 0 0 auto;}
.feel-strip .fic.rdy {background: var(--rdy-t);}
.feel-strip .fic.smt {background: var(--smt-t);}
.feel-strip .fic.bld {background: var(--bld-t);}
.feel-strip .fic.rcv {background: var(--rcv-t);}
.hero-graph {position: relative; margin-top: 8px;}
.hero-readout {position: absolute; left: 2px; bottom: 4px; display: flex; align-items: baseline; gap: 9px;}
.hero-readout .n {font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -1.4px;
  line-height: 0.9; color: var(--ink); font-variant-numeric: tabular-nums;}
.hero-graph-top {display: flex; align-items: center; justify-content: space-between;}
.streak-wide {display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2);}
.streak-wide .sw-flame {display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto;}
.streak-wide .sw-n {font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -1px; color: var(--clay-d); line-height: 1;}
.streak-wide .sw-lbl {font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.2; flex: 0 1 auto; min-width: 0;}
/* the 7 day-boxes share the remaining width and shrink on narrow phones so they never overflow */
.streak-wide .sw-week {display: flex; gap: 4px; margin-left: auto; flex: 1 1 0; min-width: 0; justify-content: flex-end;}
.streak-wide .sw-week .d {flex: 1 1 0; min-width: 0; max-width: 26px; height: 30px; border-radius: 8px; background: var(--paper-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;}
.streak-wide .sw-week .d .wl {font-size: 8.5px; font-weight: 800; color: var(--ink-3);}
.streak-wide .sw-week .d.on {background: var(--clay-t);}
.streak-wide .sw-week .d.on .wf {font-size: 12px; line-height: 1;}
.streak-wide .sw-week .d.today {box-shadow: 0 0 0 1.5px var(--clay-d);}

/* long-streak milestone ribbon — replaces the calendar week once a streak is 7+ days, since a row
   of 33 boxes is useless. Progress from start → next milestone; passed milestones sit as ticks. */
.streak-ribbon {margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2);}
.streak-ribbon .sr-top {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px;}
.streak-ribbon .sr-flame {display: inline-flex; align-items: baseline; gap: 7px; min-width: 0;}
.streak-ribbon .sr-flame .sw-n {font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.8px; color: var(--clay-d); line-height: 1;}
.streak-ribbon .sr-unit {font-size: 12.5px; font-weight: 700; color: var(--ink-2);}
.streak-ribbon .sr-best {flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--lion-d); background: var(--lion-t); border-radius: 999px; padding: 3px 10px; white-space: nowrap;}
.streak-ribbon .sr-track {position: relative; height: 11px; border-radius: 999px; background: var(--paper-2); margin-bottom: 23px;}
.streak-ribbon .sr-fill {position: absolute; left: 0; top: 0; bottom: 0; min-width: 11px; border-radius: 999px; background: linear-gradient(90deg, #F4A93C, #E0762A); box-shadow: 0 1px 4px -1px rgba(224,118,42,.45);}
.streak-ribbon .sr-tick {position: absolute; top: -1px; width: 2px; height: 13px; background: var(--card); border-radius: 1px; transform: translateX(-1px);}
.streak-ribbon .sr-tick .sr-tl {position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: var(--ink-3);}
.streak-ribbon .sr-cap {display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; color: var(--ink-2);}
.streak-ribbon .sr-cap .sr-goal {flex: 0 0 auto; font-weight: 800; color: var(--clay-d);}
.sig-meter {display: flex; gap: 5px;}
.sig-meter .sg {flex: 1; height: 34px; border-radius: 9px; background: var(--card); border: 1.5px solid var(--line-2); cursor: pointer; transition: background .12s;}
.sig-meter .sg.fill {background: var(--forest-t); border-color: transparent;}
.sig-meter .sg.sel {background: var(--forest); border-color: var(--forest);}
.big-edit.editing .display {border-bottom-color: var(--forest);}
.tiny {font-size: 11px; font-weight: 600; color: var(--ink-3);}
.rev-n.r {background: var(--c-car);}
.rev-sub {font-size: 11.5px; font-weight: 600; color: var(--ink-3);}
.side-seg {display: flex; gap: 6px; background: var(--paper-2); padding: 4px; border-radius: 13px;}
.side-seg button {flex: 1; padding: 9px 0; border-radius: 10px; border: none; background: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 14px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px;}
.side-seg button.on {background: var(--card); color: var(--ink); box-shadow: var(--shadow-card);}
.side-seg button .sd {width: 18px; height: 18px; border-radius: 999px; background: var(--c-car); color: #fff;
  font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;}
.side-seg button.on .sd.l {background: var(--forest);}
.ex-desc-card {display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card-2); border: 1px solid var(--line-2);}
.ex-desc-card .di {font-size: 17px; flex: 0 0 auto; line-height: 1.3;}
.ex-desc-card .dt {font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink-2);}
.ex-desc-card .dq {color: var(--dusk); font-weight: 800;}
.cat-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.cat-card {display: flex; flex-direction: column; gap: 9px; padding: 18px 16px 16px; border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card); cursor: pointer; text-align: left;}
.cat-card .ce {font-size: 30px; line-height: 1;}
.cat-card .ct {font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.4px;}
.cat-card .cc {font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: -3px;}
.cat-card .cn {margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-2);}
.cat-card.str {border-top: 4px solid var(--c-str);}
.cat-card.car {border-top: 4px solid var(--c-car);}
.cat-card.flx {border-top: 4px solid var(--c-flx);}
.cat-card.rec {border-top: 4px solid var(--dusk); background: var(--card-2);}
.cat-card .rec-note {font-size: 10.5px; font-weight: 700; color: var(--dusk);}
.ex-row {display: flex; align-items: center; gap: 13px; padding: 13px 16px; cursor: pointer;}
.ex-row .ee {font-size: 20px; width: 26px; text-align: center; flex: 0 0 auto;}
.ex-row .en {font-weight: 700; white-space: nowrap;}
.ex-row .ehelp {width: 19px; height: 19px; border-radius: 999px; background: var(--dusk-t); color: var(--dusk);
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer;}
.ex-row .epar {margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--ink-3); background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px;}
.ex-row .echev {margin-left: auto;}
.ex-row .epar + .echev {margin-left: 9px;}
.desc-pop {display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-md); background: var(--dusk-t);
  border: 1px solid color-mix(in oklab, var(--dusk) 25%, transparent);}
.desc-pop .di {width: 30px; height: 30px; border-radius: 999px; background: var(--card); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 16px;}
.desc-pop .dt {font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink);}
.desc-pop .dq {font-size: 11.5px; font-weight: 700; color: var(--dusk); margin-top: 5px;}
.par-field {display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-card); margin-top: 14px;}
.par-field + .par-field {margin-top: 10px;}   /* tighter between stacked param boxes (pull-up flags) */
.par-field .pl {font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 7px;}
.par-field .pd {font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 1px;}
.toggle {width: 52px; height: 30px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto;}
.toggle > i {position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-card); transition: left .15s;}
.toggle.on {background: var(--forest);}
.toggle.on > i {left: 25px;}
/* weight: a stacked field — label/desc on top, then a full-width [−5 −1 (type) +1 +5] row */
.wt-field {flex-direction: column; align-items: stretch; gap: 12px;}
.wt-step {display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;}
.wt-step button {width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--card-2);
  border: 1px solid var(--line-2); font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer;}
.wt-step button:active {background: var(--line-2);}
.wt-step .wt-val {display: inline-flex; align-items: baseline; gap: 2px; margin: 0 4px;}
.wt-step .wt-val input {width: 70px; text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: 24px; color: var(--ink); border: none; border-bottom: 2px dashed var(--line-2); background: none;
  outline: none; padding: 2px 0; -webkit-appearance: none;}
.wt-step .wt-val input:focus {border-bottom-color: var(--forest); border-bottom-style: solid;}
.wt-step .wt-val small {font-size: 13px; font-weight: 700; color: var(--ink-3);}
.lr-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.lr-cell {padding: 16px 14px; border-radius: var(--r-md); background: var(--card); border: 1.5px solid var(--line-2);
  box-shadow: var(--shadow-card); text-align: center;}
.lr-cell .ll {font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-3);}
.lr-cell .lv {font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -1.5px; line-height: 1; margin: 7px 0; color: var(--ink);}
.lr-cell.active {border-color: var(--forest); box-shadow: 0 0 0 2px var(--forest-t), var(--shadow-card);}
.lr-cell .lbtn {font-size: 12px; font-weight: 800; color: var(--forest-d);}
.lr-cell .lr-pr {font-size: 10.5px; font-weight: 800; color: var(--rdy-d); background: var(--rdy-t); border-radius: 999px; padding: 2px 8px; display: inline-block; margin-top: 4px;}
.lr-imb {display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 11px 14px;}
.rec-banner {display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: var(--r-md);
  background: var(--dusk-t); border: 1px solid color-mix(in oklab, var(--dusk) 22%, transparent);}
.rec-banner .rt {font-weight: 800; font-size: 13px; color: var(--dusk);}
.rec-banner .rd {font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-top: 1px;}
.par-tag {display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: var(--ink-2);
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px;}
.empty-well {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 26px 22px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px dashed var(--line);}
.empty-well .ee {font-size: 34px;}
.empty-well .et {font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px;}
.empty-well .ed {font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.5; max-width: 280px;}

/* ── exercise art (designer SVG icons + how-to illustrations) ── */
.exi { display: block; flex: 0 0 auto; }
.exi-inline { display: inline-block; vertical-align: -3px; }
.ex-tile { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--card-2);
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.exillus { display: block; }
.exillus-card { background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-md); }

/* ── collapsible "How to do X" on the entry screen ── */
.howto { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; }
.howto-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-weight: 700; font-size: 14px; }
.howto-sum::-webkit-details-marker { display: none; }
.howto-sum > span:first-of-type { flex: 1; min-width: 0; }
.howto-chev { color: var(--ink-3); transition: transform .15s ease; flex: 0 0 auto; }
.howto[open] .howto-chev { transform: rotate(180deg); }
.howto-body { padding: 0 15px 15px; }
.howto-body .dt { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* All-time PRs "show all" expander */
.pr-more summary::-webkit-details-marker { display: none; }
.pr-more[open] > summary { color: var(--ink-3); }