/* membership.css V1.2 - 2026-10-05, Nolan. Globals: the 48px .h-mp__btn size override is gone; Cancel Pro is the global .h-btn--danger. */
/* membership.css V1.1 - 2026-10-05, Nolan. The look-alike round Back (.h-mp__rb) is gone: the global .h-detail__back. */
/* membership.css V1.0 - 2026-10-05, Parker. Membership & Pro Gate B: the member page (`.h-mp`) to the accepted package (MP-01…43). Tokens only; every translucent tint that carries ink names the surface behind it. */
/* ============================================================================
   MEMBERSHIP & PRO — THE MEMBER PAGE

   Shape (GC-OP-01/02, Karl): a full page over the app with its own header
   and round Back; both navs hidden. In the app it sits inside the shared full
   right panel (`h-panel--full`), whose own head this page replaces; in a
   harness it fills whatever host it is given. Measurements are the accepted
   prototype's (Membership_Pro_Acceptance.html, walked and approved Oct 1).
   ========================================================================== */
.h-mp, .h-mp-sheet {
  --mp-soft: color-mix(in srgb, var(--ink) 80%, var(--bg));
  --mp-card: var(--panel2);
  --mp-gold-line: rgba(var(--gold-rgb), .45);
  --mp-gold-wash: rgba(var(--gold-rgb), .12);
  --mp-pro-ink: var(--active-purple-ink);
}
:where(.h-mp) button { font: inherit; color: inherit; cursor: pointer; }

/* ---- the host: the shared full panel, our header instead of its own ---- */
.h-panel.h-mp-panel .h-panel__head { display: none; }
.h-panel.h-mp-panel .h-panel__body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.h-mp-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.h-mp { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; background: var(--panel); color: var(--ink); font-family: var(--font-body); font-size: 14px; container: mp / inline-size; }

.h-mp__sh { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
/* The round Back is the global `.h-detail__back` (Karl, walk GSH-01/02: globals, never a look-alike). */
.h-mp__tt { flex: 1; min-width: 0; }
.h-mp__tt small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-mp__tt h2 { margin: 2px 0 0; font: 400 18px/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-mp__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 14px 28px; }
.h-mp__wrap { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; }
.h-mp__foot { flex: none; display: flex; gap: 12px; align-items: center; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.h-mp__foot .h-mp__btn { flex: 1; }
@container mp (min-width: 700px) {
  .h-mp__foot { padding-inline: max(14px, calc((100% - 1120px) / 2)); }
  .h-mp__foot .h-mp__btn { max-width: 420px; margin-left: auto; }
  .h-mp__free { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container mp (min-width: 1000px) {
  .h-mp__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}
.h-mp__ic { width: 18px; height: 18px; }

/* ---- type and small pieces ---- */
.h-mp__lab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 2px 10px; font: 400 13px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.h-mp__lab small { font: 700 12px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--faint); }
.h-mp__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.h-mp__note--lead { margin-top: 0; }
.h-mp__hint { margin-top: 12px; padding: 11px 12px; border-radius: var(--r-xl); border: 1px solid var(--hairline); background: var(--mp-card); font-size: 12.5px; line-height: 1.5; color: var(--mp-soft); }
.h-mp__hint b { color: var(--ink); }
.h-mp__err { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-lg); background: linear-gradient(rgba(var(--danger-rgb), .14), rgba(var(--danger-rgb), .14)), var(--panel); color: var(--danger); font-size: 13px; font-weight: 700; }

/* ---- buttons: the global .h-btn at its standard size (Karl's walk, 10-05: no module sizes); only layout and two
   reasoned colours are ours: Pro's gold (the Pro offer's colour in the accepted package) and the card-problem warn. ---- */
.h-mp__btn { white-space: nowrap; }
.h-mp__btn--w { width: 100%; margin-top: 12px; }
.h-mp__btn--gold { background: var(--gold-mid); color: var(--on-gold); margin-top: 12px; }
.h-mp__btn--warn { background: var(--warn); color: var(--on-warn); margin-top: 12px; }

/* ---- hero ---- */
.h-mp__hero { margin-top: 4px; padding: 18px 16px; border-radius: 18px; border: 1px solid var(--hairline);
  background: linear-gradient(150deg, color-mix(in srgb, var(--hero-green-deep) 40%, var(--bg)), var(--panel2) 70%); }
.h-mp__hero.is-pro { border-color: var(--mp-gold-line);
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--gold-rgb), .16), transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--gold) 9%, var(--bg)), var(--panel2) 75%); }
.h-mp__hero.is-warn { border-color: rgba(var(--warn-rgb), .55); background: linear-gradient(150deg, color-mix(in srgb, var(--warn) 9%, var(--bg)), var(--panel2) 75%); }
.h-mp__hero--kid { border-color: rgba(var(--info-rgb), .45); background: linear-gradient(150deg, color-mix(in srgb, var(--info) 18%, var(--bg)), var(--panel2) 75%); }
.h-mp__k { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; color: var(--green); }
.h-mp__hero.is-pro .h-mp__k, .h-mp__hero.is-warn .h-mp__k { color: var(--gold); }
.h-mp__hero--kid .h-mp__k { color: var(--info); }
.h-mp__hero h2 { margin: 8px 0 6px; font: 400 30px/1 var(--font-display); text-transform: uppercase; }
.h-mp__hero p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mp-soft); }
.h-mp__quote { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--green); border-radius: 0 var(--r-lg) var(--r-lg) 0; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: linear-gradient(rgba(var(--green-rgb), .05), rgba(var(--green-rgb), .05)), var(--panel2); }
.h-mp__saved { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.h-mp__saved strong { font: 400 34px/1 var(--font-display); color: var(--gold); }
.h-mp__saved span { font-size: 13px; color: var(--mp-soft); }

/* ---- rows ---- */
.h-mp__kv { display: flex; flex-direction: column; margin-top: 8px; }
.h-mp__r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--hairline); background: none; text-align: left; font-size: 13.5px; color: var(--ink); }
.h-mp__r--static { cursor: default; }
.h-mp__r > .h-mp__ic { color: var(--faint); }
.h-mp__tx { flex: 1; min-width: 0; }
.h-mp__tx small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--faint); }
.h-mp__r em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--green); }
.h-mp__amt { flex: none; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
/* The switch: a 46 × 28 track inside a 36px-tall tap target. */
.h-mp__sw { flex: none; position: relative; width: 46px; height: 36px; padding: 0; border: 0; background: none; }
.h-mp__sw::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 28px; border-radius: var(--r-pill); background: var(--line2); }
.h-mp__sw::after { content: ""; position: absolute; top: 8px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: left var(--t-fast); }
.h-mp__sw.is-on::before { background: var(--green); }
.h-mp__sw.is-on::after { left: 22px; background: var(--on-green); }

/* ---- bonuses, always free, compare link ---- */
.h-mp__perk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--hairline); }
.h-mp__pi { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-lg); color: var(--gold);
  background: linear-gradient(rgba(var(--gold-rgb), .10), rgba(var(--gold-rgb), .10)), var(--panel); }
.h-mp__pi .h-mp__ic { width: 17px; height: 17px; }
.h-mp__perk b { display: block; font-size: 14px; }
.h-mp__perk small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.h-mp__free { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h-mp__free div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-xl); background: var(--mp-card); border: 1px solid var(--hairline); font-size: 12.5px; font-weight: 700; }
.h-mp__free .h-mp__ic { flex: none; color: var(--green); width: 15px; height: 15px; }
.h-mp__cmpl { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel2); text-align: left; font-weight: 800; }
.h-mp__cmpl > span:not(.h-mp__ic) { flex: 1; }
.h-mp__cmpl--top { margin: 0 0 12px; }
.h-mp__fnd { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--mp-gold-line); background: linear-gradient(rgba(var(--gold-rgb), .06), rgba(var(--gold-rgb), .06)), var(--panel); }
.h-mp__fh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.h-mp__fnd b { color: var(--gold); }
.h-mp__fnd small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--mp-soft); }
.h-mp__bar { height: 8px; margin-top: 8px; border-radius: var(--r-pill); background: var(--elev); overflow: hidden; }
.h-mp__bar i { display: block; height: 100%; background: var(--gold); }

/* ---- compare (pinned heading) ---- */
.h-mp__cmp { border: 1px solid var(--line); border-radius: 14px; }
.h-mp__hd { position: sticky; top: -14px; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px;
  border-radius: 14px 14px 0 0; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--faint); }
.h-mp__hd span:not(:first-child) { font-size: 13px; letter-spacing: 0; color: var(--ink); }
.h-mp__hd small { display: block; font-size: 11px; font-weight: 700; color: var(--faint); }
.h-mp__hd .h-mp__pc { color: var(--gold); }
.h-mp__grp { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; color: var(--green); background: var(--bg); }
.h-mp__rw { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.4; }
.h-mp__rw span { min-width: 0; overflow-wrap: anywhere; }
.h-mp__ok { color: var(--green); }
.h-mp__okg { color: var(--gold); }
.h-mp__pv { color: var(--mp-pro-ink); font-weight: 700; }
.h-mp__dash { color: var(--faint); }

/* ---- plans, review (paid; fixture-only while paid is closed) ---- */
/* Yearly / Monthly is the global `.h-seg`. */
.h-mp__ptab { margin: 0; }
.h-mp__plan { display: block; width: 100%; margin-top: 10px; padding: 14px; text-align: left; border-radius: 14px; border: 1px solid var(--line); background: var(--panel2); }
.h-mp__plan.is-on { border-color: var(--green); background: linear-gradient(rgba(var(--green-rgb), .07), rgba(var(--green-rgb), .07)), var(--panel2); }
.h-mp__plan.is-gold { border-color: var(--mp-gold-line); }
.h-mp__plan.is-gold.is-on { border-color: var(--gold); background: linear-gradient(rgba(var(--gold-rgb), .08), rgba(var(--gold-rgb), .08)), var(--panel2); }
.h-mp__plan:disabled { opacity: .45; cursor: not-allowed; }
.h-mp__ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.h-mp__ph b { font-size: 15px; }
.h-mp__pr { font: 400 22px var(--font-display); white-space: nowrap; }
.h-mp__pr small { font: 600 12px var(--font-body); color: var(--faint); }
.h-mp__plan > small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--faint); }
.h-mp__tag2 { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; color: var(--gold);
  background: linear-gradient(var(--mp-gold-wash), var(--mp-gold-wash)), var(--panel2); }
.h-mp__tag2.is-green { color: var(--green); background: linear-gradient(rgba(var(--green-rgb), .10), rgba(var(--green-rgb), .10)), var(--panel2); }
.h-mp__sum { display: flex; flex-direction: column; }
.h-mp__sr { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.h-mp__sr span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.h-mp__sr.is-total { border: 0; font-weight: 800; }
.h-mp__sr.is-total span:last-child { font: 400 24px var(--font-display); }
.h-mp__chk { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel2); font-size: 13px; line-height: 1.45; cursor: pointer; }
.h-mp__chk input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--green); }
.h-mp__done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 6px; }
.h-mp__dok { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: var(--gold);
  background: linear-gradient(rgba(var(--gold-rgb), .14), rgba(var(--gold-rgb), .14)), var(--panel); }
.h-mp__dok .h-mp__ic { width: 34px; height: 34px; }
.h-mp__done h3 { margin: 14px 0 6px; font: 400 28px var(--font-display); text-transform: uppercase; }
.h-mp__done p { margin: 0; max-width: 36ch; font-size: 13.5px; line-height: 1.5; color: var(--mp-soft); }

/* ---- household ---- */
.h-mp__who { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--hairline); }
.h-mp__avt { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 14px; color: var(--on-colour); background: var(--brand-charcoal); }
.h-mp__avt.is-kid { background: color-mix(in srgb, var(--purple) 70%, var(--bg)); }
.h-mp__avt.is-wait { background: var(--elev); color: var(--muted); }
.h-mp__who b { display: block; font-size: 14px; }
.h-mp__who > .h-mp__ic { color: var(--green); }
.h-mp__pend { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--warn); }
.h-mp__add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--hairline); background: none; text-align: left; font-weight: 800; color: var(--green); }
.h-mp__add.is-gold { color: var(--gold); }
.h-mp__add:disabled { color: var(--muted); cursor: default; }

/* ---- states ---- */
.h-mp__state { margin-top: 20px; padding: 28px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel2); text-align: center; }
.h-mp__state > .h-mp__ic { width: 28px; height: 28px; color: var(--muted); }
.h-mp__state b { display: block; margin: 10px 0 6px; font: 400 22px/1.05 var(--font-display); text-transform: uppercase; }
.h-mp__state p { margin: 0 auto 14px; max-width: 34ch; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
.h-mp__sk { border-radius: var(--r-xl); background: linear-gradient(90deg, var(--panel2), var(--elev), var(--panel2)); background-size: 200% 100%; animation: h-mp-shimmer 1.2s linear infinite; }
@keyframes h-mp-shimmer { to { background-position: -200% 0; } }

/* ---- sheets this page opens ---- */
.h-mp-sheet .h-mp__sp { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--mp-soft); }
.h-mp-sheet .h-mp__hint { margin: 0 0 4px; }
.h-mp__lb { display: block; margin: 12px 0 5px; font-size: 11.5px; font-weight: 800; color: var(--faint); }
.h-mp__in { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--line2); background: var(--bg); color: var(--ink); font: 16px var(--font-body); }

/* ---- motion off: the OS setting or the app's own switch ---- */
@media (prefers-reduced-motion: reduce) { .h-mp__sk, .h-mp__sw::after { animation: none; transition: none; } }
html[data-motion="off"] .h-mp__sk { animation: none; }
html[data-motion="off"] .h-mp__sw::after { transition: none; }