/* The Veggen skin — the member app's visual language, transplanted VERBATIM
 * from docs/v56-wholesale-user-frontend-rewrite/Veggen - prototype.dc.html
 * (Onionskin O2: styles are copied, never translated; the v6/v13 token sheet
 * has no authority inside .veggen). Every value below cites the prototype;
 * if one looks wrong, that is a ruling to request, not a thing to improve.
 * Scope: `body.veggen` — set only by the member app shell. EXACT-MATCH §0. */

.veggen {
  /* palette (proto helmet + inline styles) */
  --v-bg: #F7F6F1;          /* screen background */
  --v-ink: #12332A;         /* text + dark surfaces */
  --v-ink-soft: #3D5A4C;    /* body copy on light */
  --v-green: #2A5C4A;       /* progress rest, good dots, dark divider */
  --v-green-mid: #4A6B5C;   /* secondary avatars, dark-card outline */
  --v-muted: #6B7F72;       /* secondary text */
  --v-faint: #9AA79F;       /* tertiary text, inactive tabs */
  --v-yellow: #FFC81F;      /* CTAs, won, invitation card */
  --v-yellow-ink: #5C4E1F;  /* text on yellow */
  --v-pink: #F4699F;        /* the cause tile */
  --v-magenta: #E0447F;     /* destructive, declined */
  --v-card: #fff;
  --v-border: #EDEAE0;
  --v-border-soft: #E3E0D5; /* money-event borders, stripes */
  --v-money-bg: #F1EFE7;    /* money event on the wall */
  --v-record-bg: #FBFAF6;   /* money record rows */
  --v-shell: #EFEDE4;       /* watching card, dark-card text */
  --v-dark-text: #EFEDE4;
  --v-dark-muted: #8FAA9C;
  --v-dark-soft: #B9CDC2;
  --v-knob-off: #C6CEC7;
  --v-dash: #C6CEC7;

  /* type */
  --v-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --v-body: "Instrument Sans", system-ui, sans-serif;
  --v-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* radii (cards 14/16, rows 11-12, tiles 7-10, pills 999) */
  --v-r-card: 14px;
  --v-r-card-lg: 16px;
  --v-r-row: 11px;
  --v-r-btn: 12px;

  --v-pad: 14px; /* the page gutter everywhere */

  background: var(--v-bg);
  color: var(--v-ink);
  font-family: var(--v-body);
  font-size: 13px;
  line-height: 1.45;
}

/* ---- chrome ------------------------------------------------------------ */

/* Sub-screen top bar: `← Title` (proto:203-207 and every sub-screen). */
.v-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--v-pad); background: var(--v-card);
  border-bottom: 1px solid var(--v-border);
  font-size: 15px; font-weight: 700;
}
.v-topbar a { color: inherit; text-decoration: none; }

/* Member tab bar (proto:660-666): white, thin, glyph over 10px label. */
.veggen .tab-bar {
  background: var(--v-card); border-top: 1px solid var(--v-border);
  padding: 9px 0 max(12px, env(safe-area-inset-bottom, 12px));
}
.veggen .tab-bar__tab { gap: 2px; padding: 0; color: var(--v-faint); opacity: 1; font-weight: 600; }
.veggen .tab-bar__tab--active { color: var(--v-ink); }
.veggen .tab-bar__icon { width: 17px; height: 17px; }
.veggen .tab-bar__label { font-size: 10px; letter-spacing: 0; }

/* ---- surfaces ---------------------------------------------------------- */

.v-card {
  background: var(--v-card); border: 1px solid var(--v-border);
  border-radius: var(--v-r-card); padding: 13px;
}
.v-card--lg { border-radius: var(--v-r-card-lg); padding: 15px; }

.v-dark {
  background: var(--v-ink); color: var(--v-dark-text);
  border-radius: var(--v-r-card); padding: 14px;
}
.v-dark--lg { border-radius: var(--v-r-card-lg); padding: 15px; }
.v-dark .v-muted { color: var(--v-dark-muted); }
.v-dark .v-soft { color: var(--v-dark-soft); }

.v-muted { color: var(--v-muted); }
.v-soft { color: var(--v-ink-soft); }
.v-faint { color: var(--v-faint); }

/* Eyebrow labels: WEEK 1 · FREE, YOUR CAUSE, WATCHING, SETTINGS… */
.v-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-muted);
}
.v-dark .v-eyebrow { color: var(--v-dark-muted); }

.v-display { font-family: var(--v-display); font-weight: 800; letter-spacing: -.02em; }

/* Diagonal-stripe placeholder tile (photos, charity image) + mono caption. */
.v-stripe {
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--v-border-soft), var(--v-border-soft) 7px, var(--v-border) 7px, var(--v-border) 14px);
  display: grid; place-items: center;
  font-family: var(--v-mono); font-size: 11px; color: var(--v-muted);
}

/* ---- buttons ----------------------------------------------------------- */

.v-btn {
  display: block; width: 100%; border: 0; cursor: pointer;
  border-radius: var(--v-r-btn); text-align: center;
  font-family: var(--v-body); font-size: 14px; font-weight: 700;
  padding: 13px; color: var(--v-ink); background: none; text-decoration: none;
  box-sizing: border-box;
}
.v-btn--yellow { background: var(--v-yellow); }
.v-btn--dark { background: var(--v-ink); color: var(--v-dark-text); }
.v-btn--danger { background: var(--v-card); border: 1px solid var(--v-magenta); color: var(--v-magenta); font-size: 13px; }
.v-btn--magenta { background: var(--v-magenta); color: #fff; }
.v-btn--outline { border: 1px solid var(--v-ink); font-size: 13px; padding: 12px; }
.v-btn--quiet { color: var(--v-muted); font-size: 13px; font-weight: 600; padding: 8px; }
.v-btn--lg { font-size: 15px; padding: 15px; }

/* Small pill actions: Invite, Apply, Send request, Pending (proto:253 etc). */
.v-pill {
  display: inline-block; border: 0; cursor: pointer; border-radius: 999px;
  font-family: var(--v-body); font-size: 12px; font-weight: 700;
  padding: 8px 13px; color: var(--v-ink); background: none; text-decoration: none;
}
.v-pill--yellow { background: var(--v-yellow); }
.v-pill--dark { background: var(--v-ink); color: var(--v-dark-text); padding: 8px 12px; }
.v-pill--outline { border: 1px solid var(--v-ink); padding: 7px 12px; }

/* ---- avatars: rounded SQUARES, dark green, white initial ---------------- */

.v-avatar {
  display: grid; place-items: center; flex: none;
  background: var(--v-green); color: #fff; font-weight: 700;
  width: 30px; height: 30px; border-radius: 9px; font-size: 12px;
}
.v-avatar--sm { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.v-avatar--md { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
.v-avatar--lg { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
.v-avatar--xl { width: 52px; height: 52px; border-radius: 16px; font-size: 19px; font-weight: 800; font-family: var(--v-mono); background: var(--v-ink); color: var(--v-dark-text); }
.v-avatar--alt { background: var(--v-green-mid); }
.v-avatar--ghost { background: var(--v-shell); color: var(--v-faint); font-weight: 400; }
.v-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---- toggle (40×23, knob 19) ------------------------------------------- */

.v-toggle {
  width: 40px; height: 23px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--v-knob-off); display: flex; align-items: center;
  padding: 2px; box-sizing: border-box; justify-content: flex-start; flex: none;
}
.v-toggle[aria-pressed="true"], .v-toggle--on { background: var(--v-ink); justify-content: flex-end; }
.v-toggle span { width: 19px; height: 19px; border-radius: 50%; background: #fff; }

/* ---- bits -------------------------------------------------------------- */

/* Reaction chips on wall cards (proto:176-183). */
.v-chip {
  border: 1px solid var(--v-border); background: var(--v-card); cursor: pointer;
  border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 9px;
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--v-body);
}
.v-chip--mine { background: var(--v-shell); border-color: var(--v-dash); }
.v-chip--add { border-style: dashed; border-color: var(--v-dash); color: var(--v-muted); font-weight: 700; padding: 3px 10px; }

/* Week-card progress pips (proto:129-133) + buddy six-weeks (proto:322-326). */
.v-pips { display: flex; gap: 5px; }
.v-pips span { flex: 1; height: 6px; border-radius: 999px; background: var(--v-green); }
.v-pips span.is-done { background: var(--v-yellow); }
.v-blocks { display: flex; gap: 5px; }
.v-blocks span { flex: 1; height: 30px; border-radius: 7px; background: var(--v-green); }
.v-blocks span.is-won { background: var(--v-yellow); }

/* Status dots (money record, fail timeline). */
.v-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-green); flex: none; }
.v-dot--bad { background: var(--v-magenta); }
.v-dot--wait { background: var(--v-knob-off); }
.v-dot--void { background: var(--v-border); }

/* Hand-placed confetti (yellow hero, tiles, empty states). Position inline;
 * shape/color via modifier. Parent needs position:relative;overflow:hidden. */
.v-confetti { position: absolute; width: 6px; height: 6px; border-radius: 1px; opacity: .85; }
.v-confetti--dot { border-radius: 50%; }
.v-confetti--yellow { background: var(--v-yellow); }
.v-confetti--pink { background: var(--v-magenta); }
.v-confetti--ink { background: var(--v-ink); }
.v-confetti--green { background: var(--v-green); }
.v-confetti--white { background: #fff; }

/* Bottom sheets (share / avatar / emoji picker, proto:639-700). */
.v-scrim { position: fixed; inset: 0; background: rgba(18, 51, 42, .34); display: flex; flex-direction: column; justify-content: flex-end; z-index: 60; }
.v-sheet { background: var(--v-money-bg); border-radius: 20px 20px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: v-sheet .25s ease both; }
.v-sheet__grip { width: 38px; height: 4px; border-radius: 999px; background: var(--v-knob-off); align-self: center; }
@keyframes v-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes v-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The member page column: phone-first, one gutter (proto frame is 340px). */
.v-page { display: flex; flex-direction: column; gap: 10px; padding: var(--v-pad); max-width: 480px; margin-inline: auto; width: 100%; box-sizing: border-box; }
@media (min-width: 1120px) { .v-page { max-width: 640px; } }

/* Desktop split (Gautam 2026-08-08 13:58): on /home the wall widens on the
   left and the cards ride a sticky right rail. Below the navbar line the two
   wrappers dissolve (display: contents) so the phone column — the prototype's
   own layout — is byte-identical. */
.v-home-side, .v-home-feed { display: contents; }
@media (min-width: 1120px) {
  .v-page--split { max-width: 984px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 10px 24px; align-items: start; }
  .v-home-feed { display: flex; flex-direction: column; gap: 10px; grid-column: 1; grid-row: 1; min-width: 0; }
  .v-home-side { display: flex; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
}

/* ---- §1 the Wall -------------------------------------------------------- */

/* Week hero card (proto:121-142). */
.v-week-card { display: flex; flex-direction: column; gap: 11px; }
.v-week-card__top { display: flex; justify-content: space-between; align-items: center; }
.v-week-card__state { font-size: 11px; color: var(--v-dark-muted); }
.v-week-card__count { display: flex; align-items: baseline; gap: 8px; }
.v-week-card__big { font-size: 38px; }
.v-week-card__count .v-muted { color: var(--v-dark-muted); font-size: 13px; }
.v-week-card__back { font-size: 12px; color: var(--v-yellow); line-height: 1.45; font-weight: 600; }
.v-week-card__money { border-top: 1px solid var(--v-green); padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v-week-card__money-title { font-size: 13px; font-weight: 600; }
.v-week-card__money-sub { font-size: 11px; color: var(--v-dark-muted); }
.v-week-card__won { display: flex; align-items: center; gap: 6px; flex: none; }
.v-week-card__won-emoji { font-size: 20px; }
.v-week-card__won-label { font-size: 15px; font-weight: 800; color: var(--v-yellow); }

/* Fail banner / arm nudge (proto:104-109). */
.v-fail-banner { display: flex; gap: 10px; align-items: center; padding: 12px 13px; text-decoration: none; }
.v-fail-banner__text { flex: 1; }
.v-fail-banner__title { font-size: 13px; font-weight: 700; }
.v-fail-banner__sub { font-size: 11px; line-height: 1.35; }

/* Watching card (proto:112-119). */
.v-watching { background: var(--v-shell); border: 1px solid #D8D3C6; border-radius: var(--v-r-card-lg); padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.v-watching__title { font-size: 19px; line-height: 1.25; }
.v-watching form { display: contents; }
.v-watching .v-btn { border-radius: var(--v-r-row); font-size: 13px; padding: 12px; }

/* Session cards (proto:163-185). */
.v-wall-session { display: flex; flex-direction: column; gap: 9px; animation: v-rise .35s ease both; }
.v-wall-session__head { display: flex; gap: 9px; align-items: center; }
.v-wall-session__who { flex: 1; min-width: 0; }
.v-wall-session__handle { font-size: 13px; font-weight: 700; }
.v-wall-session__when { font-size: 11px; color: var(--v-muted); }
.v-wall-session__edit { font-size: 11px; font-weight: 700; color: var(--v-muted); text-decoration: none; }
.v-wall-session__photo { width: 100%; height: 118px; object-fit: cover; border-radius: 10px; }
.v-wall-session__note { font-size: 13px; color: var(--v-ink-soft); line-height: 1.45; }
.v-wall-session__foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--v-shell); padding-top: 9px; flex-wrap: wrap; }
.v-wall-session__lock { margin-left: auto; font-size: 11px; }
.v-avatar--mine { background: var(--v-ink); }
.v-chip-form { display: contents; }
.v-chip { background: #FFF6D6; border-color: var(--v-yellow); }
.v-chip--add { background: none; }

/* Money events on the wall (proto:186-198). */
.v-money-row { display: flex; flex-direction: column; gap: 8px; background: var(--v-money-bg); border: 1px solid var(--v-border-soft); border-radius: var(--v-r-card); padding: 13px; text-decoration: none; color: inherit; }
.v-money-row__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.v-money-row__text { flex: 1; }
.v-money-row__title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.v-money-row__sub { font-size: 11px; color: var(--v-muted); line-height: 1.4; margin-top: 2px; }
.v-money-row__amount { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--v-ink-soft); }
.v-money-row__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--v-border-soft); padding-top: 8px; }
.v-money-row__foot .v-faint { font-size: 11px; }
/* Ruling 18:50: mechanical money moments are slim two-line statements… */
.v-money-row--slim { gap: 2px; padding: 10px 13px; }
/* …and the human moments (missed ❤️ / kickoff 🌅) are big warm cards. */
.v-wall-big { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; }
.v-wall-big__emoji { font-size: 28px; line-height: 1; }
.v-wall-big__title { font-family: var(--v-display); font-weight: 800; font-size: 17px; line-height: 1.25; }
.v-wall-big__body { font-size: 13px; line-height: 1.5; max-width: 420px; }
.v-wall-big__foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; }
.v-wall-big__foot .v-faint { font-size: 11px; }
.v-wall-big--missed .v-wall-big__title { color: var(--v-magenta); }
.v-wall-big--kickoff .v-wall-big__title { color: var(--v-green-mid); }
.v-money-row__receipt { font-size: 11px; color: var(--v-muted); font-weight: 600; }

/* Empty wall (proto:148-159). */
.v-wall-empty { padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.v-wall-empty__art { position: relative; width: 90px; height: 56px; }
.v-wall-empty__art .v-confetti { width: 9px; height: 9px; }
.v-wall-empty__title { font-size: 15px; font-weight: 700; }
.v-wall-empty__body { font-size: 12px; line-height: 1.5; max-width: 220px; }
/* First-run door (18:24 ruling): the empty wall takes the first session
   itself — a one-line note + the yellow bank button. */
.v-first-run__form { display: flex; gap: 8px; width: 100%; max-width: 320px; margin-block: 4px; }
.v-first-run__form .v-bare-input { flex: 1; min-width: 0; border-bottom: 1px solid var(--v-border); padding: 6px 2px; }
.v-first-run .v-eyebrow { margin-top: 2px; }

/* Emoji picker sheet (proto:685-699). */
.v-sheet__row { display: flex; gap: 8px; }
.v-sheet__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-height: 150px; overflow-y: auto; }
.v-sheet__emoji { border: 0; background: #fff; cursor: pointer; text-align: center; }
.v-sheet__emoji--lg { flex: 1; border-radius: 12px; padding: 9px 0; font-size: 21px; }
.v-sheet__emoji--sm { border-radius: 10px; padding: 7px 0; font-size: 18px; }

/* ---- §2/§3 Log + Edit ---------------------------------------------------- */

.v-page--form, .v-page__stack { display: flex; flex-direction: column; gap: 11px; }
.v-page--form { min-height: calc(100dvh - 220px); }
.v-row-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 13px; cursor: pointer; }
.v-row-card__label { font-size: 13px; font-weight: 600; }
.v-row-card__date { border: 0; background: none; font-family: var(--v-body); font-size: 13px; color: var(--v-muted); text-align: right; }
.v-dropzone { height: 120px; border-radius: 12px; cursor: pointer; }
.v-note { border: 1px solid var(--v-border); border-radius: 12px; padding: 12px; font-size: 13px; font-family: var(--v-body); color: var(--v-ink); background: #fff; min-height: 74px; resize: none; outline: none; }
.v-note--tall { min-height: 84px; }
.v-card__kicker { font-size: 12px; font-weight: 700; color: var(--v-muted); margin-bottom: 9px; }
.v-check { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 3px 0; }
.v-check input[type=checkbox] { position: absolute; opacity: 0; }
.v-check__box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--v-knob-off); background: #fff; color: transparent; display: grid; place-items: center; font-size: 11px; flex: none; }
.v-check input[type=checkbox]:checked + .v-check__box { background: var(--v-green); border-color: var(--v-green); color: #fff; }
.v-check__label { font-size: 13px; color: var(--v-ink-soft); }
.v-bare-input { border: 0; padding: 0; font-size: 13px; font-family: var(--v-body); color: var(--v-ink-soft); background: transparent; outline: none; width: 100%; }
.v-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.v-toggle-row .v-muted { font-size: 11px; }
.v-toggle-row__off { display: none; }
.v-toggle-row:not(:has(input:checked)) .v-toggle-row__on { display: none; }
.v-toggle-row:not(:has(input:checked)) .v-toggle-row__off { display: block; }
.v-toggle-row:has(input:checked) .v-toggle { background: var(--v-ink); justify-content: flex-end; }
.v-post-it { margin-top: auto; }
.v-footnote { font-size: 11px; line-height: 1.5; }

/* The prototype has NO in-app top chrome on a phone (proto: only the fake
   status bar) — the member navbar is a desktop affordance, the exact
   complement of the tab bar (ruling 2026-08-08). */
.veggen .ui-nav--member { display: none; }
@media (min-width: 1120px) { .veggen .ui-nav--member { display: block; } }
.v-week-card__big { white-space: nowrap; }
.v-week-card__money-title { white-space: nowrap; }
/* Prototype gutter is exactly 14px — the shell's own padding would double
   it (proto:103: content column is edge-to-edge inside the screen). */
.veggen .ui-shell__main--app { padding: 0; }

/* ---- §4 Buddies ---------------------------------------------------------- */

.v-title-row { display: flex; justify-content: space-between; align-items: center; }
.v-title { font-size: 20px; margin: 0; }
.v-invitation { background: var(--v-yellow); border-radius: var(--v-r-card); padding: 13px; display: flex; flex-direction: column; gap: 10px; }
.v-invitation__eyebrow { color: var(--v-yellow-ink); }
.v-invitation__who { display: flex; gap: 11px; align-items: center; }
.v-invitation__name { font-size: 14px; font-weight: 700; }
.v-invitation__handle { font-size: 12px; color: var(--v-yellow-ink); }
.v-invitation__actions { display: flex; gap: 8px; }
.v-invitation__actions form { flex: 1; display: contents; }
.v-invitation__btn { flex: 1; border-radius: var(--v-r-row); font-size: 13px; padding: 11px; }
.v-waiting { font-size: 12px; }
.v-buddies-empty { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.v-buddies-empty__art { position: relative; width: 90px; height: 48px; }
.v-buddies-empty__dot { position: absolute; top: 14px; width: 22px; height: 22px; border-radius: 50%; }
.v-buddies-empty__title { font-size: 15px; font-weight: 700; }
.v-buddies-empty__body { font-size: 12px; line-height: 1.5; max-width: 210px; }
.v-buddy-row { display: flex; gap: 11px; align-items: center; padding: 12px 13px; text-decoration: none; color: inherit; }
.v-buddy-row__who { flex: 1; min-width: 0; }
.v-buddy-row__handle { font-size: 13px; font-weight: 700; }
.v-buddy-row__status { font-size: 11px; color: var(--v-muted); }

/* ---- §5 Add a buddy ------------------------------------------------------ */

.v-search { background: var(--v-card); border: 1px solid var(--v-ink); border-radius: var(--v-r-card); padding: 13px; font-size: 13px; font-weight: 600; font-family: var(--v-body); color: var(--v-ink); outline: none; width: 100%; box-sizing: border-box; }
.v-invite-link { border-top: 1px solid var(--v-border-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.v-handle-nudge { display: flex; gap: 8px; align-items: flex-start; }
.v-toggle-form { display: contents; }

/* ---- §6 Buddy page ------------------------------------------------------- */

.v-buddy-profile { display: flex; gap: 12px; align-items: center; padding: 14px; }
.v-buddy-profile__name { font-size: 15px; font-weight: 700; }
.v-six-weeks { display: flex; flex-direction: column; gap: 9px; }
.v-six-weeks__kicker { font-size: 12px; font-weight: 600; color: var(--v-dark-muted); }
.v-six-weeks__caption { font-size: 11px; color: var(--v-dark-soft); }
.v-buddy-sessions { display: flex; flex-direction: column; gap: 8px; }
.v-buddy-session--rule { border-top: 1px solid var(--v-shell); padding-top: 8px; }
.v-buddy-session__note { font-size: 13px; color: var(--v-ink-soft); line-height: 1.45; }
.v-buddy-session__when { font-size: 11px; }

/* ---- §7 Me --------------------------------------------------------------- */

.v-me-profile { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; font-family: var(--v-body); }
.v-me-profile__names { flex: 1; min-width: 0; }
.v-me-profile__name { font-size: 17px; }
.v-tile { position: relative; overflow: hidden; border-radius: var(--v-r-card-lg); padding: 15px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.v-tile--yellow { background: var(--v-yellow); color: var(--v-ink); justify-content: space-between; }
.v-tile--yellow .v-tile__eyebrow { color: var(--v-yellow-ink); }
.v-tile--pink { background: var(--v-pink); color: #fff; }
.v-tile--pink .v-tile__eyebrow { color: rgba(255, 255, 255, .85); }
.v-tile__body { position: relative; flex: 1; min-width: 0; }
.v-tile__big { font-size: 34px; line-height: 1.1; }
.v-tile__emoji { position: relative; font-size: 34px; }
.v-tile__heart { position: relative; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 19px; flex: none; }
.v-tile__name { font-size: 15px; line-height: 1.25; margin-top: 2px; }
.v-tile__sub { font-size: 11px; opacity: .9; margin-top: 3px; }
.v-tile__chev { position: relative; font-size: 13px; opacity: .9; }
.v-kicker-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; text-decoration: none; color: inherit; }
.v-kicker-row__kicker { letter-spacing: .08em; }
.v-kicker-row__value { font-size: 14px; font-weight: 600; margin-top: 2px; }
.v-pause-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.v-pause-card__title { font-size: 13px; font-weight: 700; }
.v-pause-card .v-soft { font-size: 12px; line-height: 1.5; }
.v-settings { border-top: 1px solid var(--v-border-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.v-slim-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: var(--v-r-btn); padding: 11px 13px; text-decoration: none; color: inherit; }
.v-slim-row__label { font-size: 13px; font-weight: 600; }
.v-slim-row__label--danger { color: var(--v-magenta); }
.v-slim-row__value { font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-sheet__action { display: block; width: 100%; background: #fff; border: 0; border-radius: var(--v-r-btn); padding: 13px; font-size: 14px; font-weight: 600; font-family: var(--v-body); text-align: left; cursor: pointer; box-sizing: border-box; }
.v-sheet__action--danger { color: var(--v-magenta); }

/* ---- §10 Commitment ------------------------------------------------------ */

.v-stepper { display: flex; align-items: center; justify-content: space-between; padding: 14px; }
.v-stepper form { display: contents; }
.v-stepper__mid { text-align: center; }
.v-stepper__big { font-size: 34px; line-height: 1; }
.v-stepper__mid .v-muted { font-size: 11px; }
.v-stepper__btn { width: 40px; height: 40px; border-radius: var(--v-r-btn); display: grid; place-items: center; font-size: 18px; cursor: pointer; font-family: var(--v-body); }
.v-stepper__btn--down { border: 1px solid #D8D3C6; background: none; color: var(--v-muted); }
.v-stepper__btn--up { border: 0; background: var(--v-ink); color: var(--v-dark-text); }
.v-stepper__btn:disabled { opacity: .35; cursor: default; }
.v-stake-card { display: flex; flex-direction: column; gap: 8px; }
.v-stake-card__amount { display: flex; align-items: baseline; gap: 8px; }
.v-stake-card__big { font-size: 28px; }
.v-stake-card__sub { font-size: 12px; line-height: 1.5; }
.v-check--edit .v-check__label { flex: 1; }
.v-check__box--dashed { border-style: dashed; }
.v-check__remove-form { display: contents; }
.v-check__remove, .v-check__add { border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--v-faint); padding: 0 2px; }
.v-check__add { color: var(--v-muted); }
.v-check--add { display: flex; align-items: center; gap: 9px; }
.v-check--add .v-bare-input { width: auto; flex: 1; min-width: 0; }

/* ---- §§11-12 money record + receipt -------------------------------------- */

.v-money-row--record { background: var(--v-record-bg); padding: 12px 13px; }
.v-money-row--record .v-money-row__head { align-items: flex-start; gap: 11px; }
.v-money-row--record .v-dot { margin-top: 5px; }
.v-money-row__amount--good { color: var(--v-green); }
.v-money-row__amount--bad { color: var(--v-magenta); }
.v-money-row__amount--wait { color: var(--v-faint); }
.v-money-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--v-muted); line-height: 1.5; }
.v-receipt { gap: 13px; padding-top: 16px; }
.v-receipt__date { color: var(--v-green); letter-spacing: .1em; }
.v-receipt__title { font-size: 24px; line-height: 1.2; margin: 0; }
.v-receipt__lines { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.v-receipt__line { display: flex; justify-content: space-between; align-items: baseline; }
.v-receipt__line .v-muted { font-size: 12px; }
.v-receipt__value { font-size: 13px; font-weight: 600; }

/* ---- §§13-19 sub-screens -------------------------------------------------- */

.v-confirm { gap: 13px; padding-top: 16px; }
.v-confirm__title { font-size: 24px; line-height: 1.2; margin: 0; }
.v-center { text-align: center; }
.v-facts { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.v-facts__row { display: flex; gap: 10px; align-items: flex-start; }
.v-facts__row .v-dot { width: 7px; height: 7px; margin-top: 6px; }
.v-facts__text { font-size: 12px; line-height: 1.45; }
.v-facts__title { font-weight: 700; font-size: 13px; color: var(--v-ink); }
.v-card-visual { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.v-card-visual__number { font-family: var(--v-mono); font-size: 15px; letter-spacing: .14em; }
.v-payments-note { font-size: 12px; line-height: 1.5; }
.v-push-row .v-toggle { border: 0; }
.v-reminders { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.v-reminders-note { font-size: 11px; }

/* The lock preview (proto:622-637) fills the screen, near-black. */
.v-lock { flex: 1; min-height: 100dvh; background: #151A18; display: flex; flex-direction: column; gap: 12px; padding: 26px 14px 86px; margin: 0; }
.v-lock__clock { text-align: center; color: var(--v-dark-text); }
.v-lock__date { font-size: 13px; opacity: .7; }
.v-lock__time { font-size: 52px; font-weight: 300; letter-spacing: -.02em; }
.v-lock__card { background: rgba(239, 237, 228, .14); border-radius: 16px; padding: 13px; display: flex; flex-direction: column; gap: 5px; backdrop-filter: blur(8px); }
.v-lock__app { font-size: 11px; color: var(--v-dark-soft); font-weight: 600; }
.v-lock__headline { font-size: 13px; font-weight: 700; color: var(--v-dark-text); }
.v-lock__body { font-size: 12px; color: var(--v-knob-off); line-height: 1.4; }
.v-lock__back { margin-top: auto; text-align: center; font-size: 12px; font-weight: 600; color: var(--v-dark-muted); padding: 10px; text-decoration: none; }

/* ---- §15 the cause picker ------------------------------------------------- */

.v-cause-image { height: 130px; border-radius: var(--v-r-card); }
.v-cause-name { font-size: 18px; margin: 0; }
.v-cause-proof { font-size: 12px; }
.v-cause-picker { display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.v-cause-row-form { display: contents; }
.v-cause-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; border: 1px solid var(--v-border); background: #fff; color: var(--v-muted); border-radius: var(--v-r-row); padding: 11px; font-size: 13px; font-weight: 600; font-family: var(--v-body); cursor: pointer; text-align: left; }
.v-cause-row--on { background: #FFF6D6; border-color: var(--v-ink); color: var(--v-ink); cursor: default; }
.v-cause-row__heart { color: var(--v-magenta); font-size: 14px; }
.v-suggest { display: flex; flex-direction: column; gap: 9px; }
.v-suggest__body { font-size: 12px; line-height: 1.5; }

/* ---- §§8-9 donor screens --------------------------------------------------- */

.v-donor-result { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v-donor-result__name { font-size: 14px; font-weight: 700; }
.v-donor-result .v-muted { font-size: 11px; }
.v-donor-card { display: flex; flex-direction: column; gap: 10px; }
.v-donor-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v-donor-card__name { font-size: 14px; font-weight: 700; }
.v-donor-card__chip { font-size: 11px; padding: 4px 9px; }
.v-donor-card__line { font-size: 12px; line-height: 1.45; }
.v-donor-card__amount { display: flex; align-items: baseline; gap: 8px; }
.v-donor-card__big { font-size: 30px; }
.v-donor-bar { height: 7px; border-radius: 999px; background: var(--v-green); overflow: hidden; }
.v-donor-bar__fill { height: 100%; background: var(--v-yellow); }
.v-btn--dark-outline { border-color: var(--v-green-mid); color: var(--v-dark-text); background: none; }
.v-donor-dry { font-size: 12px; line-height: 1.45; }
.v-draws__month { font-size: 11px; margin-top: 4px; }
.v-draws__row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.v-draws__amount { font-family: var(--v-mono); }

/* ---- §21 onboarding first-run --------------------------------------------- */

.v-onboarding-hero { position: relative; overflow: hidden; background: var(--v-yellow); color: var(--v-ink); padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 9px; }
.v-onboarding-hero__brand { position: relative; font-size: 14px; font-weight: 700; }
.v-onboarding-hero__title { position: relative; font-size: 34px; line-height: 1.05; }
.v-onboarding-hero__sub { position: relative; font-size: 13px; line-height: 1.45; color: var(--v-yellow-ink); font-weight: 600; }
.v-onboarding { padding-top: 14px; }
.v-step { display: flex; flex-direction: column; gap: 8px; }
.v-step__head { display: flex; align-items: center; gap: 8px; }
.v-step__badge { width: 20px; height: 20px; border-radius: 50%; background: var(--v-yellow); color: var(--v-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.v-step__title { font-size: 13px; font-weight: 700; }
.v-step__card { display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.v-stepper--flat { border: 0; padding: 2px; }
.v-cause-row--pickable { cursor: pointer; }
.v-cause-row--pickable .v-cause-row__heart { visibility: hidden; }
.v-cause-row--pickable:has(input:checked) { background: #FFF6D6; border-color: var(--v-ink); color: var(--v-ink); }
.v-cause-row--pickable:has(input:checked) .v-cause-row__heart { visibility: visible; }

/* The fixed tab bar needs clearance — §0's shell padding:0 clobbered the
   --tabbed rule (found by Gautam on mobile, 2026-08-08 12:59). */
.veggen .ui-shell__main--app.ui-shell__main--tabbed { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1120px) { .veggen .ui-shell__main--app.ui-shell__main--tabbed { padding-bottom: 0; } }

/* The phone brand bar (amendment #28): dark, mark + wordmark, every
   member page. Swaps with the navbar at the 1120px line. */
.v-brand-bar { background: var(--v-ink); padding: 10px var(--v-pad) calc(10px + 0px); }
.v-brand-bar__link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.v-brand-bar__mark { height: 14px; width: auto; }
.v-brand-bar__name { color: var(--v-dark-text); font-size: 15px; }
@media (min-width: 1120px) { .v-brand-bar { display: none; } }

.v-check--editable .v-bare-input { flex: 1; min-width: 0; }
.v-profile-form { display: flex; flex-direction: column; gap: 9px; background: #fff; border-radius: var(--v-r-btn); padding: 13px; }
.v-push-nudge { display: flex; align-items: center; gap: 10px; }
.v-push-nudge__text { flex: 1; min-width: 0; }
.v-push-nudge__title { font-size: 13px; font-weight: 700; }
.v-push-nudge .v-muted { font-size: 11px; }
.v-push-nudge__x-form { display: contents; }
.v-push-nudge__x { border: 0; background: none; color: var(--v-faint); font-size: 13px; cursor: pointer; padding: 4px; }