/* ui.css — one class family per component, added only when its component is built.
 * Naming: .ui-<component>[__element][--variant]. Mobile-first; breakpoints 720/1080px.
 * Page-specific CSS is banned (print stylesheet for /s/:token excepted). */

/* ---- skip link ---- */
.ui-skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  background: var(--cocoa);
  color: var(--white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  transition: top 120ms ease;
}
.ui-skip-link:focus-visible { top: var(--space-3); color: var(--white); }

/* ---- shells ---- */
.ui-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.ui-shell__main { flex: 1; width: 100%; margin-inline: auto; padding: var(--space-5) var(--space-4); }
.ui-shell__main--marketing { max-width: var(--page-max); }
.ui-shell__main--app { max-width: var(--page-max-app); }

/* ---- navbar ---- */
.ui-nav {
  background: var(--cream);
  border-bottom: 1px solid rgba(18, 56, 43, 0.08);
}
/* P16e: signed-in surfaces get a visibly different chrome — white bar on
   the warm shell — so "am I logged in?" answers itself at a glance. */
.ui-nav:not(.ui-nav--marketing) { background: var(--white); box-shadow: 0 2px 10px rgba(18, 56, 43, 0.10); border-bottom: 0; }
.ui-nav__inner {
  max-width: var(--page-max-app);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ui-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--cocoa);
  text-decoration: none;
}
.ui-nav__scoops { display: inline-flex; gap: 3px; }
.ui-nav__scoop { width: 10px; height: 10px; border-radius: 50%; }
.ui-nav__scoop--pink { background: var(--pink); }
.ui-nav__scoop--mango { background: var(--mango); }
.ui-nav__scoop--mint { background: var(--mint); }
/* The container always shows (it carries the CTA on mobile); the plain
   links hide below 720px and live in the disclosure menu instead. */
.ui-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.ui-nav__links > .ui-nav__link { display: none; }
.ui-nav__link { color: var(--cocoa); text-decoration: none; font-weight: 700; font-size: 15px; }
.ui-nav__link:hover { color: var(--mint-dk); }
.ui-nav__link[aria-current="page"] { color: var(--mint-dk); }
.ui-nav__spacer { flex: 1; }
/* mobile disclosure: native <details>, no JS required */
.ui-nav__menu { position: relative; }
.ui-nav__menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
}
.ui-nav__menu > summary::-webkit-details-marker { display: none; }
.ui-nav__menu[open] > summary { background: rgba(18, 56, 43, 0.06); }
.ui-nav__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-warm);
  padding: var(--space-2);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.ui-nav__dropdown a,
.ui-nav__dropdown .ui-nav__dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  color: var(--cocoa);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  text-align: left;
}
.ui-nav__dropdown a:hover { background: var(--cream); color: var(--mint-dk); }
.ui-nav__dropdown-kicker { display: block; padding: 4px 12px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.ui-nav__dropdown-divider { border: 0; border-top: 1px solid rgba(18, 56, 43, 0.08); margin: var(--space-2) 0; }
/* On mobile the page links live INSIDE the avatar/menu dropdown; from md they move to the bar */
.ui-nav__dropdown .ui-nav__dropdown-pagelinks { display: flex; flex-direction: column; }
/* Mobile marketing bar = brand + hamburger, nothing else (Gautam: first
   impressions are mobile). Sign in / CTA / View-my-account wait inside
   the menu until 720px. */
.ui-nav--marketing .ui-nav__signin,
.ui-nav--marketing .ui-nav__cta { display: none; }
@media (min-width: 720px) {
  .ui-nav__links > .ui-nav__link { display: inline; }
  .ui-nav--marketing .ui-nav__signin { display: inline; }
  .ui-nav--marketing .ui-nav__cta { display: inline-flex; }
  .ui-nav__dropdown .ui-nav__dropdown-pagelinks,
  .ui-nav__dropdown .ui-nav__dropdown-pagelinks + .ui-nav__dropdown-divider { display: none; }
  /* Signed-out desktop: the hamburger would only duplicate "Sign in" */
  .ui-nav--marketing .ui-nav__menu { display: none; }
}

/* v37: flag+currency picker in the marketing nav. */
.ui-nav__country-select { border: 1.5px solid #EADFD4; border-radius: 999px; background: var(--white);
  padding: 6px 12px; font: inherit; font-weight: 700; font-size: 14px; color: var(--cocoa); cursor: pointer; }
.ui-nav__country-select:focus-visible { outline: 3px solid var(--pink-btn); outline-offset: 2px; }
@media (max-width: 720px) {
  .ui-nav__country-select { min-height: 44px; }
}

/* ---- breadcrumbs (P10k) ---- */
.ui-crumbs { font-size: 14px; font-weight: 700; margin-block-end: var(--space-3); color: var(--muted); }
.ui-crumbs a { color: var(--mint-dk); text-decoration: none; }
.ui-crumbs a:hover { text-decoration: underline; }

/* v27 #1: file inputs — the browse control reads as one of our pills. */
input[type="file"].ui-input { padding: var(--space-2) var(--space-3); }
input[type="file"]::file-selector-button {
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  padding: 6px 14px; margin-inline-end: 10px;
  border-radius: var(--radius-pill); border: 2px solid var(--cocoa);
  background: var(--white); color: var(--cocoa); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--cream); }

/* v27 #1: consent/attestation checkbox rows read as tappable pills. */
.attest, .ui-consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--white); border: 1.5px solid #EADFD4;
  border-radius: 16px; padding: 10px 14px; cursor: pointer;
}
.attest:has(input:checked), .ui-consent-row:has(input:checked) { background: #E7F0E9; border-color: #1E7A4F; }
.attest input[type="checkbox"], .ui-consent-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--mint); flex: none; margin-top: 2px; }

/* ---- avatar ---- */
.ui-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cocoa);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
}

/* ---- public charity page (P8g) ---- */
.charity-hero__banner { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.charity-hero__head { display: flex; align-items: center; gap: 16px; }
.charity-hero__logo { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; flex: none; }
.charity-hero__description { white-space: pre-line; margin-block: var(--space-4); }
.charity-hero__cta { background: var(--white); border-radius: 20px; padding: var(--space-5); margin-block-start: var(--space-5); box-shadow: 0 10px 30px rgba(228, 183, 160, 0.35); }
.charity-listing__preview { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; display: block; margin-block-end: 8px; }
.charity-listing__preview--banner { width: 100%; max-width: 420px; height: auto; }

/* v27 #7: month cards carry the stamp row and an outcome chip. */
.month-row__stamps { display: flex; gap: 8px; flex-wrap: wrap; margin-block: var(--space-2); }
.month-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); }
.month-chip--zero { background: #E7F0E9; color: #14563A; }
.month-chip--gave { background: #FDE7F0; color: #E14E86; }
.month-chip--locked { background: #DDE3DC; color: #5B6B62; }

/* ---- community (v27 7a–7d) ---- */
.community-cols { display: grid; gap: var(--space-4); }
@media (min-width: 1080px) { .community-cols { grid-template-columns: 2fr 1fr; align-items: start; } }
.community-feed { display: grid; gap: var(--space-3); }
.community-rail { display: grid; gap: var(--space-3); }
.community-card__head { display: flex; align-items: flex-start; gap: 10px; }
.community-card__who { flex: 1; min-width: 0; }
.community-card__meta { display: block; color: var(--muted); font-size: var(--text-meta); }
.community-card__headline { margin-block: var(--space-2) 0; font-weight: 600; }
.community-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.community-card__report { opacity: 0.55; }
.community-icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.community-icon--mint { background: #E7F0E9; color: #14563A; }
.community-icon--pink { background: #FDE7F0; color: #E14E86; }
.community-icon--cream { background: #DDE3DC; }
.community-preview { display: block; text-decoration: none; margin-block-start: var(--space-2); }
.community-preview__box { background: var(--cream); border: 1.5px dashed #EADFD4; border-radius: 14px; padding: var(--space-4); text-align: center; color: var(--muted); font-weight: 700; }
.community-preview__href { display: block; margin-top: 4px; font-size: var(--text-meta); color: var(--mint-dk); }
.community-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.home-community-strip { margin-block-start: var(--space-5); }
.home-community-strip__cards { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .home-community-strip__cards { grid-template-columns: repeat(3, 1fr); } }

/* P17 6b: comp's guardrail bullets — pink ✕ for nevers, mint ✓ for dos. */
.seesaw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.seesaw-list li::before { font-weight: 800; margin-inline-end: 8px; }
.seesaw-list__never::before { content: "✕"; color: var(--pink-text); }
.seesaw-list__see::before { content: "✓"; color: #14563A; }

/* P11 #4: creator handle rows */
.creator-handle-row { display: flex; gap: 8px; margin-block-end: 8px; }
.creator-handle-row__platform { max-width: 150px; flex: none; }

/* P11 #15: a statboard INSIDE a card sheds its own box — cells only,
   never a white box in a white box. */
.ui-card .statboard { background: transparent; box-shadow: none; padding: 0; border: 0; }

/* P16g: weekday picker */
.reminder-days { display: flex; flex-wrap: wrap; gap: 8px; }
.reminder-days__day { padding: 6px 12px; }

/* P17 block-1b: mobile puts the commitment card first (comp order:
   greeting → commitment → stats). Desktop keeps stats up top. */
@media (max-width: 719px) {
  .app-dash--home { display: flex; flex-direction: column; }
  .app-dash--home > * { order: 3; }
  .app-dash--home > .greeting__title, .app-dash--home > .greeting__charity { order: 0; }
  .app-dash--home > .commitment-card { order: 1; }
  .app-dash--home > .statboard { order: 2; }
}

/* P17 1f: relationship-card archetype (My PT / My Employer). */
.rel-card__head { display: flex; align-items: center; gap: 12px; }
.rel-card__avatar { width: 44px; height: 44px; border-radius: 99px; background: #E7F0FF; color: #2563A8;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; flex: none; }
.rel-card__who { flex: 1; min-width: 0; }
.rel-card__stats { margin-block: var(--space-3); }
.rel-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rel-card__disconnect { background: none; border: 0; color: var(--pink-text); font-weight: 800; cursor: pointer; font-size: 14px; padding: 0; }
.rel-card__disconnect:hover { text-decoration: underline; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .ui-input { flex: 1; }
.copy-row--caption { align-items: stretch; margin-block-end: 10px; }
.copy-row--caption textarea { resize: none; font-size: 14px; }

/* P17 3a: PT roster table furniture — mini stamp ticks + note strips. */
.roster-ticks { display: flex; gap: 4px; margin-block-end: 2px; }
.roster-tick { width: 20px; height: 20px; border-radius: 7px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; }
.roster-tick--done { background: #1E7A4F; color: var(--white); }
.roster-tick--todo { border: 1.5px dashed #D9CCBE; }
.note-strip { display: flex; align-items: center; gap: 10px; background: var(--white);
  border-radius: 14px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(228, 183, 160, 0.2); }
.note-strip__body { flex: 1; min-width: 0; }
.ui-open-link { color: var(--mint-dk); font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.ui-open-link:hover { text-decoration: underline; }
/* backstage member cells reuse this pairing on app side too */
.member-cell { display: flex; align-items: center; gap: 10px; }

/* P17 4a: mint privacy-wall card + seats-vs-cap bar. */
.cap-bar { height: 10px; border-radius: 999px; background: rgba(18, 56, 43, 0.08); overflow: hidden; }
.cap-bar__fill { display: block; height: 100%; border-radius: 999px; background: #1E7A4F; }

/* P17 6a: comp's funnel arrows between creator stat cells. */
.statboard--funnel .statboard__cell { position: relative; }
.statboard--funnel .statboard__cell:not(:last-child)::after {
  content: "→"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 800; }

/* P17 7c: logged-out community — dark want-in strip. */
.want-in { background: #12382B; color: var(--white); border-radius: 20px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.want-in__copy p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.85); }

/* v31 8a: contact doors — radio cards; the bug door reveals its fields. */
.contact-doors { display: grid; gap: 12px; }
@media (min-width: 720px) { .contact-doors { grid-template-columns: 1fr 1fr; } }
.contact-door { cursor: pointer; }
.contact-door input { position: absolute; opacity: 0; }
.contact-door__card { display: grid; gap: 4px; text-align: left; justify-items: start; background: var(--white); border: 1.5px solid #EADFD4;
  border-radius: 16px; padding: 16px 18px; height: 100%; }
.contact-door input:checked + .contact-door__card { border-color: #12382B; box-shadow: 0 0 0 1.5px #12382B inset; }
.contact-door input:focus-visible + .contact-door__card { outline: 3px solid var(--blue-dk); outline-offset: 2px; }
.contact-door__blurb { color: var(--muted); font-size: 14.5px; }
.contact-page .contact-form__bug-only { visibility: hidden; }
.contact-page:has(input[name="door"][value="bug"]:checked) .contact-form__bug-only { visibility: visible; }
.contact-form__account { margin: 6px 0 0; }

/* v31 8b: roadmap kanban. */
.roadmap { display: grid; gap: var(--space-4); }
.roadmap__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.roadmap__lanes { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 1080px) { .roadmap__lanes { grid-template-columns: repeat(3, 1fr); } }
.roadmap-lane { display: grid; gap: 12px; align-content: start; }
.roadmap-lane__title { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; margin: 0; }
.roadmap-lane__dot { width: 9px; height: 9px; border-radius: 50%; }
.roadmap-lane__dot--blue { background: var(--blue); }
.roadmap-lane__dot--mango { background: var(--mango); }
.roadmap-lane__dot--pink { background: var(--pink); }
.roadmap-lane__dot--mint { background: var(--mint); }
.roadmap-lane__count { margin-inline-start: auto; color: var(--muted); letter-spacing: 0; }
.roadmap-card { background: var(--white); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px;
  box-shadow: 0 4px 14px rgba(228, 183, 160, 0.2); }
.roadmap-card h3 { margin: 0; font-size: 16.5px; }
.roadmap-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.roadmap-card--shipped { background: #E7F0E9; }
.roadmap-card__tick { color: #14563A; font-weight: 800; margin-inline-end: 6px; }
.roadmap-card .checkin-progress__fill { background: var(--mint); }
.roadmap-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roadmap-card__asked, .roadmap-card__shipped { font-size: 13px; font-weight: 800; color: var(--muted); }
.roadmap-card__asked--done { color: #14563A; }
.roadmap-card__plus { background: var(--white); border: 1.5px solid #EADFD4; border-radius: 999px;
  padding: 4px 12px; font-size: 13px; font-weight: 800; color: var(--pink-text); cursor: pointer; }
.roadmap-card__plus:hover { border-color: var(--pink-text); }
.roadmap-card__shipped { color: #14563A; }
.roadmap__lanes--ledger { grid-template-columns: 1fr; max-width: 640px; margin-block-end: var(--space-4); }
.roadmap-lane__wip { border: 1.5px dashed #D9CCBE; border-radius: 14px; padding: 14px 16px; text-align: center;
  color: var(--muted); font-size: 14px; }
.roadmap__ask .ui-drawer__body { position: relative; }
.stake-radios--row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.stake-radios__card--slim { padding: 10px 8px; font-size: 13.5px; font-weight: 700; }

/* v31 (a): the promise sheet — read like terms, signed with one tick. */
.promise-sheet { background: var(--white); border-radius: 16px; padding: 16px 16px 16px 36px;
  display: grid; gap: 8px; font-size: 14.5px; margin: 0; }
.attest--all { font-weight: 800; }

/* v31 (g): visibility card head — title + chip on one line. */
.visibility-card__head { display: flex; align-items: center; gap: 10px; }
.visibility-card__head h3 { margin: 0; }

/* v32: hero photo tiles — warm shots, soft radius, caption chips. */
.hero-photos { display: grid; gap: 14px; margin-block: var(--space-5); }
@media (min-width: 720px) { .hero-photos { grid-template-columns: repeat(3, 1fr); } }
.hero-photos__tile { margin: 0; position: relative; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 10px 30px rgba(228, 183, 160, 0.35); aspect-ratio: 4 / 3; }
.hero-photos__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photos__tile figcaption { position: absolute; inset-inline: 10px; bottom: 10px;
  background: rgba(255, 255, 255, 0.92); border-radius: 12px; padding: 8px 12px;
  font-size: 13px; font-weight: 700; color: var(--cocoa); text-align: left; }

/* Gautam 2026-07-15: chooser doors lock while another session is open. */
.ui-chooser--locked { opacity: 0.75; cursor: default; }
.ui-chooser--locked .ui-chooser__sub { color: var(--mango-dk); font-weight: 700; }

/* Gautam 2026-07-15 (q): tell-a-friend nudge. */
.tell-a-friend { text-align: left; }
.tell-a-friend__line { max-width: 560px; margin: 0 0 var(--space-4); color: var(--muted); }

/* Gautam 2026-07-15: post actions read as quiet text links, not pills. */
.post-action { background: none; border: 0; padding: 2px 6px; font-size: 13px; font-weight: 700;
  color: var(--muted); cursor: pointer; border-radius: 8px; }
.post-action:hover { color: var(--pink-text); background: rgba(225, 78, 134, 0.07); }
.post-action--on { color: var(--pink-text); }
.post-action--muted { color: #B9A9B3; }

/* v36 a11y: 44px tap targets for slim text links on touch layouts. */
@media (max-width: 719px) {
  .ui-nav__link, .ui-footer__slimrow a, .ui-footer__col a, .post-action, .ui-open-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .post-action { min-width: 44px; justify-content: center; }
  .roadmap-card__plus { min-height: 40px; }
  .ui-social a { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; }
  .onb-steps__escape, .exits-link, .rel-card__disconnect { display: inline-flex; align-items: center; min-height: 44px; }
}

/* v36 a11y: rail card titles promoted h3→h2 for heading order; same look. */
.community-rail h2, .rail-title { font-size: 17px; margin: 0 0 6px; font-family: var(--font-head); }

/* v36 a11y: month card titles promoted h3→h2 for heading order; same look. */
.month-row__title { font-size: 17px; margin: 0 0 6px; }

/* ---- footer ---- */
.ui-footer {
  border-top: 1px solid rgba(18, 56, 43, 0.08);
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-7);
}
.ui-footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-5);
}
.ui-footer__cols { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.ui-footer__col h2, .ui-footer__col h3, .ui-footer__col-title { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-family: var(--font-head); }
.ui-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ui-footer__col a { color: var(--cocoa); text-decoration: none; font-weight: 600; }
.ui-footer__col a:hover { color: var(--mint-dk); }
.ui-footer__legal { color: var(--muted); font-size: var(--text-meta); }
.ui-launch-banner {
  background: var(--mango);
  color: var(--cocoa);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 6px var(--space-4);
}
.ui-social { display: flex; gap: var(--space-3); align-items: center; }
.ui-social a { color: var(--muted); display: inline-flex; }
.ui-social a:hover { color: var(--mint-dk); }
.ui-social svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 720px) {
  /* Gautam 2026-07-15: spread the columns across the full row — with the
     Members column dropped (signed in) a fixed 4-col grid bunched left. */
  .ui-footer__cols { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); width: 100%; }
}

/* ---- flash ---- */
.ui-flash:empty { display: none; } /* P10h: the card-setup error slot is empty until Stripe speaks */
.ui-flash-group {
  max-width: var(--page-max-app);
  margin-inline: auto;
  padding: 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}
/* v27 #13: toasts are cocoa pills, centered under the nav — never a
   hard-bordered box floating mid-page. */
.ui-flash {
  margin-top: var(--space-3);
  margin-inline: auto;
  width: fit-content;
  max-width: min(92%, 640px);
  text-align: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  background: var(--cocoa);
  color: var(--white);
  box-shadow: 0 8px 22px rgba(18, 56, 43, 0.28);
}
.ui-flash--notice { background: var(--cocoa); }
.ui-flash--alert { background: var(--pink-dk); }

/* ---- button ---- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: var(--radius-input);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.ui-btn--md { padding: 10px 22px; font-size: 15px; }
.ui-btn--lg { padding: 14px 30px; font-size: 17px; }
.ui-btn--sm { padding: 6px 14px; font-size: 13.5px; }
.ui-btn--primary {
  background: var(--mango);
  color: var(--cocoa);
  border-color: var(--cocoa);
  box-shadow: 3px 3px 0 var(--cocoa);
}
.ui-btn--primary:hover { background: var(--mango); color: var(--cocoa); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cocoa); }
.ui-btn--dark { background: var(--cocoa); color: var(--white); }
.ui-btn--dark:hover { background: #0C2A20; color: var(--white); }
.ui-btn--outline { background: var(--white); color: var(--cocoa); border-color: var(--cocoa); }
.ui-btn--outline:hover { background: var(--cocoa); color: var(--white); }
.ui-btn--link { background: transparent; color: var(--mint-dk); padding-inline: var(--space-1); }

/* ---- hero ---- */
/* Tighter block-end so the how-it-works steps surface within the first screen. */
.ui-hero { text-align: left; padding: var(--space-6) 0 var(--space-4); display: grid; gap: var(--space-4); justify-items: start; }
.ui-hero__kicker { color: var(--muted); font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.ui-hero__sub { max-width: var(--measure); color: var(--muted); font-size: 17px; margin: 0; }

/* ---- card ---- */
.ui-card { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-warm); }
.ui-card--pad-sm { padding: var(--space-4); }
.ui-card--pad-md { padding: var(--space-5); }
.ui-card--pad-lg { padding: var(--space-6); }

/* ---- badge ---- */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
}
.ui-badge--mint { background: var(--mint); color: var(--white); }
.ui-badge--pink { background: var(--pink); color: var(--white); }
.ui-badge--mango { background: var(--mango); color: var(--cocoa); } /* cocoa on mango — contrast rule */
.ui-badge--blue { background: var(--blue); color: var(--white); }
.ui-badge--neutral { background: rgba(18, 56, 43, 0.08); color: var(--cocoa); }

/* ---- input / select / field ---- */
.ui-input {
  width: 100%; padding: 12px 14px;
  border: 2px solid rgba(18, 56, 43, 0.15); border-radius: var(--radius-input);
  background: var(--white); color: var(--cocoa);
  font-family: var(--font-body); font-size: var(--text-body);
}
.ui-input:focus-visible { outline: 3px solid var(--blue-dk); outline-offset: 1px; border-color: var(--blue-dk); }
.ui-input[aria-invalid="true"] { border-color: var(--peach); }
.ui-select { appearance: auto; }
.ui-field { display: grid; gap: var(--space-2); }
.ui-field__label { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; }
.ui-field__hint { color: var(--muted); font-size: var(--text-meta); margin: 0; }
.ui-field__error { color: var(--pink-text); font-weight: 700; font-size: var(--text-meta); margin: 0; }

/* ---- toggle ---- */
.ui-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.ui-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-toggle__track {
  width: 44px; height: 26px; border-radius: var(--radius-pill);
  background: rgba(18, 56, 43, 0.25); display: inline-flex; align-items: center;
  padding: 3px; transition: background 120ms ease; flex: none;
}
.ui-toggle__thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--white);
  transition: transform 120ms ease;
}
.ui-toggle__input:checked + .ui-toggle__track { background: var(--mint); }
.ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb { transform: translateX(18px); }
.ui-toggle__input:focus-visible + .ui-toggle__track { outline: 3px solid var(--blue-dk); outline-offset: 2px; }
.ui-toggle__label { font-weight: 600; }

/* ---- stack ---- */
.ui-stack { display: grid; }
.ui-stack--sm { gap: var(--space-3); }
.ui-stack--md { gap: var(--space-5); }
.ui-stack--lg { gap: var(--space-7); }

/* ---- section heading ---- */
.ui-section-heading { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.ui-section-heading--center { text-align: center; justify-items: center; }
.ui-section-heading__kicker {
  color: var(--muted); font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0;
}
.ui-section-heading__sub { color: var(--muted); max-width: var(--measure); margin: 0; }
.ui-section-heading h1, .ui-section-heading h2, .ui-section-heading h3 { margin: 0; }

/* ---- empty state ---- */
.ui-empty { text-align: center; padding: var(--space-7) var(--space-4); display: grid; gap: var(--space-3); justify-items: center; }
.ui-empty__emoji { font-size: 40px; }
.ui-empty__title { margin: 0; }
.ui-empty__body { color: var(--muted); max-width: var(--measure); margin: 0; }

/* ---- grids ---- */
.ui-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .ui-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ui-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ui-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- step card ---- */
.ui-step { display: grid; gap: var(--space-2); }
/* v13: one ink treatment — the four-color chip row was the last candy
   trio standing. Color modifiers kept as no-ops (markup is frozen API). */
.ui-step__num {
  width: 40px; height: 40px; border-radius: var(--radius-input);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 16px;
  background: var(--white); color: var(--cocoa); border: 1px solid var(--cocoa);
}
.ui-step h3, .ui-step p { margin: 0; }
.ui-step p { color: var(--muted); }

/* ---- mark card (✓ / ♥ — never a red ✕) ---- */
.ui-mark-card { text-align: center; display: grid; gap: var(--space-2); justify-items: center; }
.ui-mark {
  width: 56px; height: 56px; border-radius: 50%; font-size: 26px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--white);
}
.ui-mark--mint { background: var(--mint); }
.ui-mark--pink { background: var(--pink); }
.ui-mark-card h3, .ui-mark-card p { margin: 0; }
.ui-mark-card p { color: var(--muted); }

/* ---- split strip ---- */
.ui-split { display: flex; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-warm); margin: var(--space-5) 0; }
.ui-split__seg { padding: var(--space-4); display: grid; gap: 2px; justify-items: center; text-align: center; }
.ui-split__seg--charity { flex: 8; background: var(--pink); color: var(--white); }
.ui-split__seg--stripe { flex: 1.2; background: var(--mango); color: var(--cocoa); min-width: 92px; }
.ui-split__seg--us { flex: 1.2; background: var(--cocoa); color: var(--white); min-width: 84px; }
.ui-split__amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; }
.ui-split__label { font-size: var(--text-meta); opacity: 0.9; }

/* ---- rhythm strip ---- */
.ui-rhythm { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; counter-reset: none; }
.ui-rhythm__step { background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); padding: var(--space-4); display: grid; gap: 2px; }
.ui-rhythm__day { font-family: var(--font-mono); font-weight: 700; color: var(--mint-dk); }
.ui-rhythm__title { font-weight: 800; }
.ui-rhythm__note { color: var(--muted); font-size: var(--text-meta); }
@media (min-width: 720px) { .ui-rhythm { grid-template-columns: repeat(3, 1fr); max-width: 880px; margin-inline: auto; } }

/* ---- stat strip ---- */
.ui-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-warm); padding: var(--space-5); max-width: 900px; margin-inline: auto; }
.ui-stats__stat { display: grid; justify-items: center; gap: 2px; text-align: center; }
.ui-stats__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 24px; color: var(--mint-dk); }
.ui-stats__label { color: var(--muted); font-size: var(--text-meta); }

/* ---- faq ---- */
.ui-faq { display: grid; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.ui-faq__item { background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); padding: var(--space-4); }
.ui-faq__item summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; }
.ui-faq__item p { margin: var(--space-3) 0 0; color: var(--muted); }

/* ---- marketing sections ---- */
.ui-page-section { padding: var(--space-6) 0; }
.ui-hero__gym { color: var(--mint-dk); font-weight: 700; margin: 0; }
.ui-hero__signin { color: var(--muted); margin: 0; }

/* ---- entry door / hero note ---- */
.ui-door { text-align: center; padding: var(--space-7) 0; display: grid; gap: var(--space-4); justify-items: center; }
.ui-door__sub { max-width: var(--measure); color: var(--muted); font-size: 17px; margin: 0; }
.ui-door__form { display: grid; gap: var(--space-4); width: 100%; max-width: 420px; text-align: left; justify-items: stretch; }
.ui-door__swap, .ui-door__note { color: var(--muted); margin: 0; }

/* ---- error summary ---- */
.ui-errors {
  background: var(--white); border-inline-start: 6px solid var(--peach);
  border-radius: var(--radius-input); box-shadow: var(--shadow-warm);
  padding: var(--space-4); margin-bottom: var(--space-5); text-align: left;
}
.ui-errors h3 { margin: 0 0 var(--space-2); font-size: 16px; }
.ui-errors ul { margin: 0; padding-inline-start: var(--space-5); }

/* ---- cta row / chooser ---- */
.ui-cta-row { margin-block-start: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.ui-chooser-list { display: grid; gap: var(--space-3); max-width: 640px; margin-inline: auto; }
.ui-chooser {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-warm);
  padding: var(--space-4) var(--space-5); text-decoration: none; color: var(--cocoa);
  transition: transform 120ms ease;
}
.ui-chooser:hover { transform: translateY(-2px); color: var(--cocoa); }
.ui-chooser__icon { font-size: 26px; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ui-chooser__icon--pink { background: rgba(255, 111, 165, 0.18); }
.ui-chooser__icon--blue { background: rgba(95, 184, 230, 0.18); }
.ui-chooser__icon--cocoa { background: rgba(18, 56, 43, 0.10); }
.ui-chooser__icon--mint { background: rgba(79, 199, 154, 0.18); }
.ui-chooser__copy { display: grid; gap: 2px; }
.ui-chooser__title { font-family: var(--font-head); font-weight: 800; }
.ui-chooser__sub { color: var(--muted); font-size: var(--text-meta); }
.ui-chooser__arrow { margin-inline-start: auto; font-weight: 800; color: var(--pink-text); }

/* ---- split fee segment (charity_join two-segment variant) ---- */
.ui-split__seg--fee { flex: 2; background: var(--cocoa); color: var(--white); min-width: 84px; }

/* ---- prose page ---- */
.ui-prose { max-width: var(--measure); margin-inline: auto; padding-bottom: var(--space-7); }
.ui-prose h3, .ui-prose .prose-title { margin-top: var(--space-6); font-size: 19px; }

/* ---- dashboard ---- */
.app-dash { display: grid; gap: 22px; max-width: 1020px; margin-inline: auto; }
.app-dash__stamps { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ui-stamp {
  width: 56px; height: 56px; border-radius: var(--radius-stamp);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 17px;
}
.ui-stamp--done { background: var(--mint); color: var(--white); }
.ui-stamp--pending { background: transparent; color: var(--muted); border: 2px dashed rgba(18, 56, 43, 0.3); }
.ui-stamp--missed { background: var(--pink); color: var(--white); }

/* ---- chips ---- */
.ui-chips { border: 0; padding: 0; margin: 0; display: flex; gap: var(--space-3); justify-content: center; align-items: center; }
.ui-chips__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-chips__chip span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-stamp);
  background: var(--white); box-shadow: var(--shadow-warm);
  font-family: var(--font-head); font-weight: 800; font-size: 18px; cursor: pointer;
}
.ui-chips__chip input:checked + span { background: var(--cocoa); color: var(--white); }
.ui-chips__chip input:focus-visible + span { outline: 3px solid var(--blue-dk); outline-offset: 2px; }
.ui-chips--locked .ui-chips__chip span { opacity: 0.4; cursor: default; }

/* ---- checklist + drawer ---- */
.checklist-card { display: grid; gap: var(--space-3); }
.checkin-form { display: grid; gap: var(--space-3); }
.ui-check { display: flex; align-items: center; gap: var(--space-3); }
.ui-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--mint); }
.ui-check__label { font-weight: 600; }
.ui-check__link { font-size: var(--text-meta); }
.checkin-drawer__toggle { list-style: none; text-align: center; cursor: pointer; }
.checkin-drawer__toggle::-webkit-details-marker { display: none; }
.checkin-drawer__toggle.is-disabled { opacity: 0.45; pointer-events: none; }
.checkin-drawer__body { display: grid; gap: var(--space-3); padding-top: var(--space-4); }
.checkin-drawer__body h3 { margin: 0; font-size: 15px; }

/* ---- money strip / month close ---- */
.money-strip { display: grid; gap: var(--space-1); }
.money-strip__safe { font-family: var(--font-head); font-weight: 800; color: var(--mint-dk); margin: 0; }
.app-dash__stake { font-weight: 700; margin: 0; }
.app-dash__charity-line a { font-weight: 600; }
.month-close {
  border-radius: var(--radius-card); box-shadow: var(--shadow-warm);
  padding: var(--space-6); text-align: center; display: grid; gap: var(--space-2); justify-items: center;
  position: relative; overflow: hidden;
}
.month-close--mint { background: var(--mint); color: var(--white); }
.month-close--pink { background: var(--pink); color: var(--white); }
.month-close__mark { font-size: 40px; }
.month-close__sub { margin: 0; opacity: 0.95; }
.month-close.paused-state { background: var(--white); color: var(--cocoa); }
.month-close__confetti i { position: absolute; top: -10px; width: 8px; height: 14px; background: var(--mango); animation: confetti 1.6s ease-in forwards; }
.month-close__confetti i:nth-child(1) { left: 15%; animation-delay: 0s; }
.month-close__confetti i:nth-child(2) { left: 35%; background: var(--blue); animation-delay: 0.2s; }
.month-close__confetti i:nth-child(3) { left: 55%; animation-delay: 0.35s; }
.month-close__confetti i:nth-child(4) { left: 72%; background: var(--peach); animation-delay: 0.15s; }
.month-close__confetti i:nth-child(5) { left: 88%; background: var(--blue); animation-delay: 0.4s; }
@keyframes confetti { to { transform: translateY(340px) rotate(240deg); opacity: 0; } }

/* ---- month badge / workouts preview ---- */
.ui-month { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--white); color: var(--cocoa); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); box-shadow: var(--shadow-warm); }
.ui-month__art { font-weight: 800; font-family: var(--font-head); }
.ui-month__month { font-weight: 700; font-size: var(--text-meta); }
.ui-month__charity { color: var(--muted); font-size: var(--text-meta); }
.workouts-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); max-width: 480px; }
.ui-tile { margin: 0; border-radius: var(--radius-input); overflow: hidden; background: var(--white); box-shadow: var(--shadow-warm); display: grid; }
.ui-tile img { width: 100%; height: 120px; object-fit: cover; }
.ui-tile--empty { min-height: 120px; place-items: center; color: var(--muted); }
.ui-tile figcaption { padding: var(--space-1) var(--space-2); font-size: var(--text-meta); color: var(--muted); text-align: center; }
.sponsored-card p { margin: 0; font-weight: 600; }

/* ---- leaderboards ---- */
.board-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.board-tabs__tab { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-warm); font-weight: 700; text-decoration: none; color: var(--cocoa); }
.board-tabs__tab--active { background: var(--cocoa); color: var(--white); }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.board-row { display: flex; align-items: center; gap: var(--space-4); background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); padding: var(--space-3) var(--space-4); }
.board-row__rank { font-family: var(--font-head); font-weight: 800; color: var(--pink-text); width: 28px; }
.board-row__handle { font-weight: 700; }
.board-row__value { margin-inline-start: auto; color: var(--muted); }
.board-empty p { margin: 0; color: var(--muted); }

/* ---- charity picker ---- */
.charity-picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.charity-picker legend { font-family: var(--font-head); font-weight: 800; margin-bottom: var(--space-2); }
.charity-picker__option { display: flex; align-items: baseline; gap: var(--space-3); background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); padding: var(--space-3) var(--space-4); border: 1.5px solid transparent; cursor: pointer; }
.charity-picker__option input { accent-color: var(--pink); width: 20px; height: 20px; flex: none; }
/* v27 1e: card-radio selected state — fat ring + pink wash. */
.charity-picker__option:has(input:checked) { border-color: var(--pink); background: #FDE7F0; }
.ui-stats__blank { margin: 0; text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* ---- charity row / message bubble (catalog + charities surfaces) ---- */
.ui-charity { display: flex; gap: var(--space-3); align-items: baseline; background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); padding: var(--space-3) var(--space-4); }
.ui-charity__mark { font-weight: 800; }
.ui-charity--current .ui-charity__mark { color: var(--pink-text); }
.ui-charity--announced .ui-charity__mark { color: var(--blue-dk); }
.ui-charity__month { color: var(--muted); font-size: var(--text-meta); }
.ui-charity__name { font-weight: 700; }
.ui-bubble { border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); max-width: 420px; }
.ui-bubble--whatsapp { background: var(--mint); color: var(--white); border-end-start-radius: 4px; }
.ui-bubble--email { background: rgba(18, 56, 43, 0.06); border: 1px solid rgba(18, 56, 43, 0.10); }

/* ---- table ---- */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); overflow: hidden; }
.ui-table th, .ui-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(18, 56, 43, 0.08); }
.ui-table th { font-family: var(--font-head); font-size: var(--text-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* ---- status timeline / attestations ---- */
.status-timeline { display: grid; gap: var(--space-2); max-width: 460px; margin-inline: auto; text-align: left; }
.status-step { padding: var(--space-3) var(--space-4); border-radius: var(--radius-input); background: var(--white); box-shadow: var(--shadow-warm); color: var(--muted); }
.status-step--done { color: var(--mint-dk); font-weight: 700; }
.status-step--current { background: var(--cocoa); color: var(--white); font-weight: 700; }
.attest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.attest { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--white); border-radius: var(--radius-input); box-shadow: var(--shadow-warm); padding: var(--space-3) var(--space-4); }
.attest input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--mint); flex: none; }

/* ---- employer dashboard ---- */
.employer-dash__big { font-family: var(--font-head); font-weight: 800; font-size: 30px; margin: 0; }
.employer-dash__blur { filter: blur(0px); letter-spacing: 2px; color: rgba(18,56,43,0.35); }
.employer-dash__locked { font-weight: 700; color: var(--muted); margin: 0; }
.unanimity-flag, .unanimity-caveat { font-size: var(--text-meta); }

/* ---- activity wall (v20 D2) ---- */
.workout-entry { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); }
.workout-entry__items { display: grid; gap: var(--space-1); }
.workout-entry__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.workout-entry__actions form { display: inline-flex; margin: 0; }
.workout-entry__anonymized { color: var(--muted); font-style: italic; margin: 0; }
.commitment-card { display: grid; gap: var(--space-3); }

/* ---- inline drawer (v20 D3) ---- */
.ui-drawer { margin-block: var(--space-3); }
.ui-drawer__summary { cursor: pointer; }
.ui-drawer > summary { list-style: none; display: inline-flex; }
.ui-drawer > summary::-webkit-details-marker { display: none; }
.ui-drawer__body { margin-block-start: var(--space-3); display: grid; gap: var(--space-3); }

/* ---- confetti (v20 D4) ---- */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 90; }
.confetti__spark { position: absolute; width: 13px; height: 13px; border-radius: 50%; opacity: 0; }
.confetti__piece {
  position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 2px;
  animation: confetti-fall 3s ease-in forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

/* ---- share buttons (v20 D4) ---- */
.share-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ---- checklist editor (v20 E): wide, roomy ---- */
.checklist-editor { max-width: 860px; margin-inline: auto; display: grid; gap: var(--space-3); }
.checklist-editor__head { margin-block-start: var(--space-2); }
.checklist-editor .ui-grid--2 { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 720px) { .checklist-editor .ui-grid--2 { grid-template-columns: 3fr 2fr; } }
/* P17 1j step 2: comp's blue trust box + dashed add-row affordance. */
.checklist-editor__trust { background: #E8F1FB; color: #2563A8; border-radius: 12px; padding: 12px 16px;
  font-size: 14px; font-weight: 600; margin: 0; }
.ui-btn--dashed { background: transparent; border: 1.5px dashed #D9CCBE; color: var(--muted); }
.ui-btn--dashed:hover { border-color: var(--ink); color: var(--ink); }

/* ==== v24 L1: the v23 comp design system =============================== */
/* Card discipline (punchlist #4): 20px radius, warm shadow, everywhere. */
.ui-card { border-radius: 20px; box-shadow: 0 0 0 1px var(--line); }
.ui-card--mint { background: #E7F0E9; }
/* P17 7a: comp's dark "This week, everywhere" stat card. */
.ui-card--plum { background: #12382B; color: var(--white); }
.ui-card--plum h3 { color: var(--white); }
.ui-card--plum .statboard__label { color: rgba(255, 255, 255, 0.7); }
.v23-hairline { border: 0; border-top: 1px solid #DDE3DC; }

/* Stat board (1a): three divided columns, tinted numbers. */
.statboard { background: var(--white); border-radius: 20px; box-shadow: 0 6px 18px rgba(228,183,160,.35);
  display: grid; grid-template-columns: repeat(3, 1fr); padding: 22px 12px; }
.statboard__cell { text-align: center; }
.statboard__cell + .statboard__cell { border-left: 1px solid #F4EAE0; }
.statboard__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 30px; color: #14563A; display: block; }
.statboard__value--pink { color: #E14E86; }
.statboard__value--mint { color: #1E7A4F; }
.statboard__value--mango { color: #F5A623; }
.statboard__label { font-size: 13px; color: #5B6B62; font-weight: 700; }

/* Commitment card (1a): header + inline chips, stamps, money summary, CTA row. */
.commit-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.commit-card__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 0; }
.commit-card__sub { margin: 4px 0 0; font-size: 14px; color: #5B6B62; }
.commit-card__chips { display: flex; align-items: center; gap: 10px; }
.commit-card__chips-label { font-size: 12px; letter-spacing: 1px; font-weight: 800; color: #5B6B62; }
.commit-card__body { display: flex; align-items: center; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.commit-card__money { margin-left: auto; text-align: right; }
.commit-card__pocket { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 34px; color: #14563A; }
.commit-card__pocket-tail { font-weight: 800; font-size: 17px; }
.commit-card__riding { margin-top: 2px; font-size: 14px; color: #5B6B62; }
.commit-card__riding strong { color: #E14E86; }
.commit-card__cta { display: flex; gap: 14px; margin-top: 26px; align-items: center; flex-wrap: wrap; }
.commit-card__exits { margin-left: auto; font-size: 14px; color: #5B6B62; }

/* Chip picker per comp: 38px squares, selected cocoa. */
.ui-chips { display: flex; gap: 8px; }
.ui-chips label { cursor: pointer; }
.ui-chips input { position: absolute; opacity: 0; }
.ui-chips .ui-chip__face { width: 38px; height: 38px; border-radius: 12px; background: var(--white);
  border: 1.5px solid #EADFD4; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; }
.ui-chips input:checked + .ui-chip__face { background: #12382B; color: var(--white); border-color: #12382B; }
.ui-chips input:focus-visible + .ui-chip__face { outline: 3px solid var(--pink); outline-offset: 2px; }

/* Session stamps per comp: 72px tiles + labels. */
.ui-stamps { display: flex; gap: 16px; flex-wrap: wrap; }
.ui-stamp-tile { text-align: center; }
.ui-stamp-tile__face { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-head); font-weight: 800; }
.ui-stamp-tile--done .ui-stamp-tile__face { background: #1E7A4F; color: var(--white); font-size: 30px; }
.ui-stamp-tile--pending .ui-stamp-tile__face { background: #FFFBF4; border: 2px dashed #E4CBB4; font-size: 18px; color: #12382B; }
.ui-stamp-tile--gave .ui-stamp-tile__face { background: #FF6FA5; color: var(--white); font-size: 30px; }
.ui-stamp-tile__label { margin-top: 6px; font-size: 12px; font-weight: 800; }
.ui-stamp-tile--pending .ui-stamp-tile__label { color: #5B6B62; }

/* Rhythm strip card (1a): day circles. */
.rhythm-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rhythm-row__kicker { font-size: 12px; letter-spacing: 1.5px; font-weight: 800; color: #5B6B62; flex: none; }
.rhythm-row__step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.rhythm-row__day { width: 34px; height: 34px; border-radius: 99px; color: var(--white); font-size: 11px;
  font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.rhythm-row__day--hold { background: var(--cocoa); }
.rhythm-row__day--collect { background: #FF6FA5; }
.rhythm-row__day--warn { background: var(--mango); color: #12382B; }
.rhythm-row__title { font-weight: 800; font-size: 14px; }
.rhythm-row__note { font-size: 12px; color: #5B6B62; }

/* Dormant banner (1a). */
.dormant-banner { display: flex; align-items: center; gap: 8px; background: #E7F0E9; border-radius: 14px;
  padding: 12px 20px; font-size: 14px; font-weight: 700; color: #14563A; }

/* Greeting block (1a). */
.greeting__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0; }
.greeting__charity { margin-top: 6px; font-size: 16px; color: #5B6B62; }
.greeting__charity a { font-weight: 800; text-decoration: none; color: var(--cocoa); }

/* Cocoa pill toast (punchlist #13). */
.ui-flash { border-inline-start: 0; background: #12382B; color: #F5F4EE; border-radius: 999px;
  padding: 12px 24px; text-align: center; width: fit-content; margin-inline: auto; box-shadow: 0 12px 30px rgba(18,56,43,.25); }
.ui-flash--notice, .ui-flash--alert { border-inline-start: 0; }
.ui-flash--alert { background: #E14E86; color: var(--white); }

/* Signed-in slim footer (1a bottom bar). */
.ui-footer--slim { margin-top: var(--space-6); padding: 18px 40px; border-top: 1px solid #DDE3DC; }
.ui-footer--slim .ui-footer__slimrow { display: flex; gap: 18px; font-size: 12px; color: #5B6B62; flex-wrap: wrap; max-width: var(--page-max-app); margin-inline: auto; }
.ui-footer--slim a { color: #5B6B62; text-decoration: none; font-weight: 600; }
.ui-footer--slim .ui-footer__org { margin-left: auto; }
.ui-footer--slim .ui-social { gap: 10px; }
.ui-footer--slim .ui-social svg { width: 15px; height: 15px; }

/* Two-column desktop grids (punchlist #3). */
.v23-cols { display: grid; gap: 22px; }
@media (min-width: 1080px) { .v23-cols--2 { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Comp 1c: activity wall chips + brag row + pill checklist rows. */
.wall-month__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wall-month__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 0; }
.wall-chip { background: #EFEFE7; color: #5B6B62; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px;  white-space: nowrap; }
.wall-chip--live { background: #EAF5FC; color: #2E9BD1; }
.wall-chip--mint { background: #E7F0E9; color: #14563A; }
.wall-chip--pink { background: #FDE8F0; color: #E14E86; }
.wall-chip--mango { background: #FFF0DC; color: #C77E1E; }
.wall-month__brag { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
/* P17 1c: the pill rows finally hit the real markup (.ui-check ticks). */
.checkin-form .checkin-form__tick { background: var(--white); border: 1.5px solid #EADFD4; border-radius: 999px;
  padding: 10px 16px; cursor: pointer; }
.checkin-form .checkin-form__tick:has(input:checked) { background: #E7F0E9; border-color: #1E7A4F; }
.checkin-form .checkin-form__tick:has(input:checked) .ui-check__label { text-decoration: line-through; color: #14563A; }
.checkin-progress { display: flex; align-items: center; gap: 10px; }
.checkin-progress__bar { flex: 1; height: 8px; border-radius: 99px; background: #DDE3DC; overflow: hidden; }
.checkin-progress__fill { display: block; height: 100%; background: var(--mint); border-radius: 99px; transition: width 160ms ease; }
.checkin-progress__count { font-size: 13px; font-weight: 800; color: var(--muted); }

/* P17 1c: the PT-share checkbox reads as a mint switch. */
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ui-switch input { appearance: none; width: 44px; height: 24px; border-radius: 99px; background: #EADFD4;
  transition: background 140ms ease; cursor: pointer; flex: none; }
.ui-switch input:checked { background: var(--mint); }
.ui-switch input::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 99px;
  background: var(--white); margin: 3px; transition: transform 140ms ease; box-shadow: 0 1px 4px rgba(18,56,43,.3); }
.ui-switch input:checked::after { transform: translateX(20px); }

/* P17 1c: pastel striped placeholder tiles + wall tile grid. */
.workout-entry__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ui-tile--empty { background: repeating-linear-gradient(135deg, #FDE7F0 0 14px, #FFF1F6 14px 28px); color: var(--cocoa); }
.ui-tile--empty:nth-child(even) { background: repeating-linear-gradient(135deg, #E7F0E9 0 14px, #F3FBF7 14px 28px); }
.ui-tile figcaption, .ui-tile__caption { font-size: 12px; font-weight: 800; background: var(--cocoa); color: var(--white);
  border-radius: 99px; padding: 3px 10px; width: fit-content; margin: 8px; }

.checkin-form .ui-check-item { background: var(--white); border: 1.5px solid #EADFD4; border-radius: 999px;
  padding: 10px 18px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; }
.checkin-form .ui-check-item:has(input:checked) { background: #E7F0E9; border-color: #1E7A4F; text-decoration: line-through; color: #14563A; }

/* Comp 1e: locked-cause hero + card radios. */
.cause-card { background: linear-gradient(120deg, #FF6FA5, #E14E86); color: var(--white);
  border-radius: 20px; padding: 24px 28px; box-shadow: 0 6px 18px rgba(228,183,160,.45); }
.cause-card__kicker { font-size: 12px; letter-spacing: 1.5px; font-weight: 800; opacity: .85; }
.cause-card__name { font-family: var(--font-head); font-weight: 800; font-size: 26px; margin-top: 4px; }
.cause-card__proof { margin-top: 6px; font-size: 14px; font-weight: 700; opacity: .95; }
.charity-picker__option { background: var(--white); border: 1.5px solid #EADFD4; border-radius: 16px;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; }
.charity-picker__option:has(input:checked) { border-color: #12382B; box-shadow: 0 0 0 1.5px #12382B inset; }
.charity-picker__option input[type=radio] { width: 20px; height: 20px; accent-color: #E14E86; }

/* Comp 1h: settings compact rows. */
.settings-rows { max-width: 720px; }
.settings-rows__card { padding: 8px 10px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 14px; text-decoration: none; color: var(--cocoa); }
.settings-row:hover { background: #EFEFE7; }
.settings-row + .settings-row { border-top: 1px solid #F4EAE0; border-radius: 0 0 14px 14px; }
.settings-row__title { font-weight: 800; font-size: 16px; }
.settings-row__value { font-size: 13px; color: #5B6B62; margin-top: 2px; }
.settings-row__action { font-weight: 800; font-size: 14px; color: #E14E86; flex: none; }

/* Comp 1j: onboarding chrome. */
.onb-steps { max-width: 560px; margin-inline: auto; display: grid; gap: 10px; margin-block-end: 8px; }
.onb-steps__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.onb-steps__escape { margin-left: auto; }
.onb-steps__escape { font-size: 13px; font-weight: 800; color: #5B6B62; text-decoration: none; }
.onb-steps__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.onb-steps__seg { height: 6px; border-radius: 99px; background: #DDE3DC; }
.onb-steps__seg--on { background: #FF6FA5; }
.stake-radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stake-radios label { cursor: pointer; }
.stake-radios input { position: absolute; opacity: 0; }
/* P17 1j: comp's stake chips — big count over "$X on the line", cocoa fill when picked. */
.stake-radios .stake-radios__card { background: var(--white); border: 1.5px solid #EADFD4; border-radius: 16px;
  display: grid; gap: 2px; text-align: center; padding: 16px 12px; }
.stake-radios__n { font-family: var(--font-head); font-size: 24px; font-weight: 800; line-height: 1.1; }
.stake-radios__sub { font-size: 13px; color: var(--muted); }
.stake-radios input:checked + .stake-radios__card { background: #12382B; border-color: #12382B; color: var(--white); }
.stake-radios input:checked + .stake-radios__card .stake-radios__sub { color: rgba(255, 255, 255, 0.75); }
.ui-door__note--boxed { border: 1.5px solid #EADFD4; border-radius: 12px; padding: 12px 16px; background: var(--white); font-size: 14px; }
.stake-radios input:focus-visible + .stake-radios__card { outline: 3px solid var(--pink); outline-offset: 2px; }
/* P17 1j step 4: the comp's solid-green celebration card — the one loud moment. */
.finish-card { background: #3EBE8B; color: var(--white); border-radius: 20px; padding: 32px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.finish-card__title { font-family: var(--font-head); font-weight: 800; font-size: 32px; margin: 0; color: var(--white); }
.finish-card__kicker { font-size: 12px; letter-spacing: 1.5px; font-weight: 800; color: rgba(255, 255, 255, 0.9); }
.finish-card .ui-door__sub, .finish-card .ui-door__note { color: rgba(255, 255, 255, 0.85); }
.finish-card .ui-stamps { background: var(--white); border-radius: 16px; padding: 16px 20px; }
.finish-card .ui-btn--primary { background: var(--white); color: #14563A; }
.finish-card .ui-btn--primary:hover { background: var(--cream); }
.finish-card .ui-btn--outline { border-color: var(--white); color: var(--white); background: transparent; }
.ui-nav__mark { width: 34px; height: 22px; object-fit: contain; }
.exit-door { position: relative; }
.exit-door__emoji { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 99px; background: #FFF1E0; font-size: 20px; }
.exit-door__resume { background: #1E7A4F; box-shadow: 0 6px 18px rgba(79,199,154,.45); }
.exit-door__resume:hover { background: #14563A; }
.statboard--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .statboard--4 { grid-template-columns: repeat(4, 1fr); } }
.creator-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.creator-chart__col { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; }
.creator-chart__click { width: 100%; background: #DDE3DC; border-radius: 4px 4px 0 0; }
.creator-chart__signup { position: absolute; bottom: 0; left: 0; width: 100%; background: #FF6FA5; border-radius: 4px 4px 0 0; }
.arm-promise { border: 2px solid #FF6FA5; }

/* v24 P1: buttons/forms never touch. button_to renders a bare <form>; any
   form or button following a sibling inside a card gets breathing room,
   and adjacent inline buttons get a horizontal gap. */
.ui-card > * + form, .ui-card > form + *, .app-dash > * + form { margin-block-start: var(--space-3); }
form:has(> .ui-btn:only-child) { display: inline-block; }
form:has(> .ui-btn:only-child) + form:has(> .ui-btn:only-child) { margin-inline-start: var(--space-2); margin-block-start: 0; }
.ui-nav__whoami { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.ui-nav__whoami-name { font-weight: 800; font-size: 14px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Who am I, at a glance: below 720px the identity lives in the dropdown
   header; from 720px it rides at top level beside the avatar and the
   dropdown copy hides. Same markup, CSS decides. */
.ui-nav__identity { display: none; }
.ui-avatar--img { object-fit: cover; background: var(--cocoa); }
.ui-avatar--lg { width: 56px; height: 56px; }
.board-row__avatar { width: 28px; height: 28px; margin-inline-end: 8px; flex: none; }
.avatar-settings-row { display: flex; align-items: center; gap: 12px; margin-block-end: var(--space-3); }
.avatar-settings-row .ui-avatar { width: 56px; height: 56px; font-size: 22px; flex: none; }
@media (min-width: 720px) {
  .ui-nav__identity {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    margin-inline-end: 10px; text-align: right;
  }
  .ui-nav__identity-name {
    font-weight: 800; font-size: 13px; color: var(--ink);
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* v39 1k: the buddies identity — @handle in the money mono */
  .ui-nav__identity-name--handle { font-family: var(--font-mono); font-weight: 600; }
  .ui-nav__avatar summary { display: flex; align-items: center; cursor: pointer; }
  .ui-nav__whoami, .ui-nav__whoami-divider { display: none; }
}

/* ---- v13 Paper Ledger: hero split + punch card ---- */
.ui-hero__split { display: grid; gap: var(--space-6); width: 100%; align-items: start; }
.ui-hero__copy { display: grid; gap: var(--space-4); justify-items: start; }
@media (min-width: 840px) { .ui-hero__split { grid-template-columns: 1.15fr 0.85fr; } }
.ui-punchcard { background: var(--white); border: 1px solid var(--cocoa); border-radius: var(--radius-card);
  padding: var(--space-5); max-width: 380px; width: 100%; justify-self: end; }
.ui-punchcard__kicker { font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--muted); margin: 0; }
.ui-punchcard__row { display: flex; gap: 14px; margin: var(--space-4) 0 var(--space-2); }
.ui-punchcard__punch { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ui-punchcard__punch--done { border: 2px solid var(--mint); color: var(--mint); }
.ui-punchcard__stamp { transform: rotate(-14deg); border: 2px solid var(--mint); border-radius: 4px;
  padding: 1px 5px; font-weight: 700; font-size: 11px; background: var(--white); color: var(--mint); }
.ui-punchcard__ledger { border-top: 1px dashed var(--line); margin-top: var(--space-4); padding-top: var(--space-3); font-size: 14.5px; }
.ui-punchcard__lrow { display: flex; justify-content: space-between; padding: 3px 0; }
.ui-punchcard__lrow .money { font-weight: 700; }
.ui-punchcard__heart { color: var(--pink-text); font-weight: 600; }
.ui-punchcard__note { margin: var(--space-3) 0 0; font-size: var(--text-meta); color: var(--muted); }
@media (max-width: 839px) { .ui-punchcard { justify-self: start; } }

/* ---- v39 1l: BuddyRow family — one row pattern everywhere ---- */
.buddy-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(18, 56, 43, 0.09); }
.buddy-row__avatar {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: var(--white);
}
.buddy-row--compact .buddy-row__avatar, .buddy-row--event .buddy-row__avatar { width: 32px; height: 32px; font-size: 13px; }
.buddy-row__avatar--img { object-fit: cover; }
.buddy-row__avatar--mint { background: var(--mint); }
.buddy-row__avatar--pink { background: var(--pink-dk); }
.buddy-row__avatar--mango { background: var(--mango); color: var(--cocoa); }
.buddy-row__avatar--ink { background: var(--cocoa); }
.buddy-row__handle { font-family: var(--font-mono); font-weight: 600; font-size: 15.5px; }
.buddy-row--compact .buddy-row__handle, .buddy-row--event .buddy-row__handle { font-size: 14px; }
.buddy-row__meta { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.buddy-row__end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.buddy-row__progress { font-size: 14px; font-weight: 700; color: var(--muted); min-width: 130px; }
.buddy-row form { margin: 0; }

/* Mini session stamps at 17px — done ✓ mint, open dashed; charity outcomes
   are always the pink ♥ (never a red ✕). */
.buddy-stamps { display: inline-flex; gap: 5px; }
.buddy-stamp {
  width: 17px; height: 17px; border-radius: 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
}
.buddy-row--compact .buddy-stamp { width: 14px; height: 14px; border-radius: 4px; font-size: 8px; }
.buddy-row--event .buddy-stamp { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.buddy-stamp--done { background: var(--mint); color: var(--white); }
.buddy-stamp--open { background: #FFFDF4; border: 1.5px dashed rgba(18, 56, 43, 0.3); }
.buddy-stamp--heart { background: #FDE8F0; color: var(--pink-dk); }

/* Card headings with a count chip (Requests · 1 / Your buddies · 2) */
.buddy-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 2px 10px; vertical-align: 2px; margin-inline-start: 8px; }
.buddy-count--mango { background: rgba(255, 206, 0, 0.28); }
.buddy-count--mint { background: rgba(30, 122, 79, 0.14); }

/* v39 1a: findable toggle pill — green wash on, paper wash off */
.buddy-findable { display: inline-flex; align-items: center; gap: 11px; border: 0; cursor: pointer; border-radius: var(--radius-pill); padding: 8px 16px 8px 9px; font-weight: 800; font-size: 13.5px; }
.buddy-findable--on { background: rgba(30, 122, 79, 0.14); color: var(--mint-dk); }
.buddy-findable--off { background: rgba(18, 56, 43, 0.07); color: var(--muted); }
.buddy-findable__track { width: 38px; height: 22px; border-radius: var(--radius-pill); position: relative; display: inline-block; flex: none; }
.buddy-findable--on .buddy-findable__track { background: var(--mint); }
.buddy-findable--off .buddy-findable__track { background: rgba(18, 56, 43, 0.25); }
.buddy-findable__thumb { position: absolute; top: 2.5px; width: 17px; height: 17px; border-radius: var(--radius-pill); background: var(--white); }
.buddy-findable--on .buddy-findable__thumb { right: 3px; }
.buddy-findable--off .buddy-findable__thumb { left: 3px; }

/* ---- v39 1a/1b: buddies page + joint-stake card ---- */
.buddies-page h3 { margin: 0 0 6px; }
.pact-card--active { border: 2px solid var(--cocoa); box-shadow: 4px 4px 0 rgba(18, 56, 43, 0.14); }
.pact-card__head { display: flex; align-items: center; gap: 12px; }
.pact-card__actions { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.pact-card__learn { font-weight: 700; }
.pact-card__line { font-weight: 800; font-size: 17px; margin: 6px 0 0; }
.pact-card__members { margin-top: 8px; border-bottom: 1px solid rgba(18, 56, 43, 0.09); }
.pact-card__invite { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pact-card__leave { margin-inline-start: auto; }
.buddies-inline-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.buddies-inline-form label { font-weight: 800; }
.buddies-handle-input { width: 240px; font-family: var(--font-mono); }
.buddies-findable-row { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.buddies-you-are { font-weight: 700; }

/* v39 1d: start-a-pact — the framed deal + gated CTA */
.pact-deal-box { border: 2px solid var(--cocoa); border-radius: 14px; padding: 18px 22px; background: #FFFDF6; font-weight: 700; }
.pact-consent-box { display: flex; align-items: flex-start; gap: 14px; border: 1.5px solid rgba(18, 56, 43, 0.25); border-radius: 14px; padding: 18px 20px; font-weight: 800; }
.pact-new__picker { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 8px; }
.pact-new__submit-row { display: flex; align-items: center; gap: 16px; }
.pact-new__submit-row .ui-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- v39 1e/1f/3a: home split, count square, pact lock, closed picker ---- */
.home-split { display: grid; grid-template-columns: 1fr 316px; gap: 20px; align-items: start; }
@media (max-width: 899px) { .home-split { grid-template-columns: 1fr; } }
.home-split__rail { display: flex; flex-direction: column; gap: 16px; }
.home-split__rail .dormant-banner { margin: 0; }
.buddies-card__all { border-top: 1px solid rgba(18, 56, 43, 0.09); padding-top: 14px; margin-top: 2px; }
.buddies-card__all a { font-weight: 800; text-decoration: none; }
.commit-count {
  width: 40px; height: 40px; border-radius: 12px; background: var(--cocoa); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 17px; flex: none;
}
.commit-count--sm { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.commit-lock {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 8px;
  background: rgba(18, 56, 43, 0.06); border-radius: 12px; padding: 11px 18px;
  font-weight: 800; font-size: 14.5px;
}
.commit-picker-row { display: flex; align-items: center; gap: 14px; position: relative; }

/* v39 1b/3b: pact change affordances */
.pact-card__line-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pact-card__caption { font-size: 13px; font-weight: 700; margin-top: 2px; }

/* ---- v39 2a/2b: the buddies wall ---- */
.wall-subtitle { margin: -6px 0 4px; color: #405449; font-size: 15.5px; }
.wall-who-sees { background: rgba(30, 122, 79, 0.12); border-radius: 14px; padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: var(--mint-dk); margin-top: 16px; }
.wall-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.wall-filter { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid rgba(18, 56, 43, 0.25); border-radius: var(--radius-pill); font-weight: 800; font-size: 13.5px; padding: 9px 18px; text-decoration: none; color: var(--cocoa); }
.wall-filter--active { background: var(--cocoa); border-color: var(--cocoa); color: var(--cream); }
.wall-filter__avatar { width: 24px; height: 24px; font-size: 11px; margin-inline-start: -9px; }
.wall-entry-head { display: flex; align-items: flex-start; gap: 12px; }
.wall-entry-head .buddy-row__avatar { width: 38px; height: 38px; font-size: 15px; }
.wall-entry-line { font-weight: 800; font-size: 15px; }
.wall-entry-date { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 1px; }
.wall-entry-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.wall-heart { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid rgba(18, 56, 43, 0.25); border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; padding: 7px 16px; background: var(--white); color: var(--pink-text); }
.wall-heart--btn { cursor: pointer; }
.wall-heart--mine { background: #FDE8F0; border-color: var(--pink-dk); }
.wall-audience { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.workout-entry--own { border: 2px solid var(--cocoa); box-shadow: 4px 4px 0 rgba(18, 56, 43, 0.1); }
.wall-pact-event { background: #FFFDF6; border: 1.5px dashed rgba(18, 56, 43, 0.3); border-radius: 16px; padding: 16px 22px; display: flex; align-items: center; gap: 12px; margin: var(--space-4) 0; }
.wall-pact-event__disc { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--mango); color: var(--cocoa); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.wall-pact-event__badge { margin-inline-start: auto; background: rgba(255, 206, 0, 0.28); color: var(--cocoa); font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: var(--radius-pill); flex: none; }

/* ---- v40 4a/4b/4c: acceptance inviter row, invite banner, FAQ rows ---- */
.pact-accept__inviter { display: flex; align-items: center; gap: 14px; }
.pact-accept__inviter p { margin: 0; font-weight: 800; font-size: 17px; }
.pact-accept__inviter .buddy-row__avatar { width: 44px; height: 44px; font-size: 17px; }
.invite-banner {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: min(92%, 640px);
  margin: var(--space-5) auto calc(-1 * var(--space-3)); background: var(--cocoa); color: var(--cream);
  border-radius: 18px; padding: 16px 26px; font-weight: 700; font-size: 15.5px; line-height: 1.5;
  box-shadow: 0 14px 30px rgba(18, 56, 43, 0.25);
}
.invite-banner .buddy-row__avatar { width: 44px; height: 44px; font-size: 17px; }
/* v40 4c: FAQ rows as cards — green marker closed, ink frame open */
.ui-faq__item { border: 1px solid rgba(18, 56, 43, 0.12); border-radius: 14px; box-shadow: none; }
.ui-faq__item summary { display: flex; align-items: center; gap: 14px; list-style: none; }
.ui-faq__item summary::-webkit-details-marker { display: none; }
.ui-faq__item summary::before { content: "▶"; color: var(--mint); font-size: 12px; flex: none; }
.ui-faq__item[open] { border: 2px solid var(--cocoa); box-shadow: 3px 3px 0 rgba(18, 56, 43, 0.1); }
.ui-faq__item[open] summary::before { content: "▼"; }

/* Followership (2026-07-19): a creator post in the wall river */
.wall-creator-post .community-card__headline { margin: 10px 0 6px; font-weight: 700; }

/* v39 3a as a popup (2026-07-19): centered card on desktop, full-screen on
   mobile. The no-JS ?change_sessions=1 path renders the dialog with [open]
   (non-modal) — same fixed positioning keeps it a popup either way. */
.commit-picker { position: fixed; inset: 0; margin: auto; z-index: 40; width: min(92vw, 560px); height: fit-content; background: var(--white); border: 2px solid var(--cocoa); border-radius: 14px; box-shadow: 4px 4px 0 rgba(18, 56, 43, 0.18); padding: 24px 28px; }
.commit-picker::backdrop { background: rgba(18, 56, 43, 0.45); }
.commit-picker__panel { display: grid; gap: 14px; }
.commit-picker__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 639px) {
  .commit-picker { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; padding: 32px 20px; }
  .commit-picker__panel { height: 100%; align-content: start; gap: 18px; }
  .commit-picker__actions { flex-direction: column; align-items: stretch; margin-top: auto; }
}
.commit-picker__title { margin: 0; font-size: 12px; }