/* =====================================================================
   FEATURE · PREMIUM: the Pro paywall (#pwM), the membership row and access code in Settings,
   the quota lines premium.js writes into #scLimit / #simLimit, and the offline bar (#offBar).
   Mockup 08-overlays (paywall): a cream .sheet--paper with the MHC member card, check list,
   plan radios, ONE ink CTA, legal foot and the heart-note sign-off.
   Role tokens + component classes only. Apple rules kept: StoreKit prices in #pwBtn*Text,
   disabled until they arrive, Restore button, auto-renew disclosure, Terms + Privacy links.
   ===================================================================== */

/* ===================== 1. Paywall sheet (same pattern as the settings sheet #sM) ===================== */
#pwM.mb--sheet{padding:0;align-items:flex-end}
#pwM .sheet{z-index:1;max-width:var(--app-w);margin:0 auto;max-height:calc(100% - var(--sat) - 48px);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* the close button stays in reach while the sheet scrolls (short phones); the negative margin
   only takes back the grabber's gap, so the header never covers the grabber */
#pwM .sheet__h{position:sticky;top:-10px;z-index:3;margin-top:calc(var(--s2) * -1);padding-top:10px;background:var(--bg)}
/* why the sheet opened (used-up free scan, a locked level): calm, never a countdown */
.pw-why{margin:var(--s1) 0 var(--s3);font-weight:600;font-size:15px;line-height:1.45;color:var(--fg-2)}
.pw-why .ic{margin-top:2px;color:var(--fg)}
/* member card: the post-it sits on the top edge, clear of MENTAL HEALTH CLUB / MEMBER */
.pw-card{margin-top:var(--s6)}
.pw-card .mcard__st{top:-20px;right:64px;--tilt:4deg;white-space:nowrap}
#pwM .h1{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* benefits: long lines wrap under themselves, never under the check */
.pw-list li{align-items:flex-start;line-height:1.35;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.pw-list li .ic{margin-top:1px}

/* ===================== 2. Plans: radio rows, the price is the biggest number ===================== */
.pw-plans{display:flex;flex-direction:column;gap:var(--s3)}
.pw-plan{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  width:100%;min-height:66px;padding:14px var(--s4) var(--s3) var(--s3);
  border:var(--bold) solid var(--rule-2);border-radius:var(--r1);color:var(--fg);text-align:left;
  transition:border-color var(--d1),transform var(--d1) var(--ease-out)}
.pw-plan[aria-checked="true"]{border-color:var(--fg)}
.pw-plan:active:not([disabled]){transform:scale(.99)}
.pw-plan[disabled]{cursor:default}
.pw-plan__k{width:24px;height:24px;display:grid;place-items:center;border:var(--bold) solid var(--fg);border-radius:var(--r1);color:var(--bg)}
.pw-plan__k .ic{width:16px;height:16px;stroke-width:3;opacity:0}
.pw-plan[aria-checked="true"] .pw-plan__k{background:var(--fg)}
.pw-plan[aria-checked="true"] .pw-plan__k .ic{opacity:1}
.pw-plan__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.pw-plan__n{font-weight:var(--w-heavy);font-size:17px;line-height:1.2;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.pw-plan__s{font-weight:500;font-size:13.5px;line-height:1.35;color:var(--fg-3);overflow-wrap:break-word}
.pw-plan__p{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pw-plan__amt{font-weight:var(--w-black);font-size:22px;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.pw-plan__per{font-weight:var(--w-strong);font-size:13.5px;line-height:1.3;color:var(--fg-2);white-space:nowrap}
/* StoreKit prices not here yet (iOS): the row says so in small type and cannot be chosen */
.pw-plan.is-loading .pw-plan__amt{font-weight:600;font-size:14px;letter-spacing:0;color:var(--fg-3)}
.pw-plan.is-loading .pw-plan__per{display:none}
/* a purchase is in flight: the other rows step back */
.pw-plan[disabled]:not(.is-loading):not([aria-checked="true"]){opacity:.55}
/* the saving: a small post-it on the row's top edge, above the price, never over text */
.pw-plan__save{position:absolute;top:-14px;right:var(--s4);--tilt:3deg;padding:4px 8px;pointer-events:none}
/* price fetch / purchase errors (role=status) */
.pw-status{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s3);margin-top:var(--s3);font-weight:600;font-size:14px;line-height:1.45;color:var(--fg-2)}
.pw-status:empty{display:none}
#pwBuy[aria-busy="true"]{opacity:.8}
/* what stays free, right under the one action: a promise, not fine print */
.pw-free{margin-top:var(--s4);font-weight:600;font-size:14px;color:var(--fg-2)}
.pw-free .ic{margin-top:0;color:var(--fg)}
/* the web restore link wraps as one run of text (the arrow follows the last word) */
.pw-webrestore{display:block;width:100%;min-height:var(--tap);margin-top:var(--s2);padding:10px 0;text-align:left;line-height:1.5}
.pw-webrestore .ic{display:inline-block;vertical-align:-1px;margin-left:6px}
#pwM .paywall__foot{flex-wrap:wrap}
#pwM .paywall__legal{margin-left:auto}
/* short phones (iPhone SE): a little less air so the plans come sooner */
@media (max-height:700px){
  .pw-card{margin-top:var(--s5)}
  #pwM .h1.mt-5{margin-top:var(--s4)}
  #pwM .pw-plans.mt-6{margin-top:var(--s5)}
}

/* ===================== 3. Welcome (celebrate after a purchase) and web restore sheet ===================== */
.pw-welcome{max-width:340px}
/* the ink card on the Noir celebration page needs an edge to read as a card */
.pw-welcome .mcard{box-shadow:0 0 0 var(--hair) var(--rule-2),var(--sh-card)}
.pw-restore .pw-mail{color:var(--fg);font-weight:var(--w-strong);overflow-wrap:anywhere}

/* ===================== 4. Quota lines (#scLimit / #simLimit content) ===================== */
.quota__t{min-width:0;overflow-wrap:break-word;text-align:left}

/* ===================== 5. Settings: access code (web only) ===================== */
/* codes are case-sensitive: show exactly what is typed (no uppercase transform) */
#teamInput{font-family:var(--f-type);letter-spacing:.06em}
#teamInput[aria-invalid="true"]{border-color:var(--signal)}
.team-msg{display:flex;align-items:flex-start;gap:6px;margin-top:var(--s2);font-weight:600;font-size:var(--t-small);line-height:1.45;color:var(--fg)}
.team-msg:empty{display:none}
.team-msg .ic{margin-top:3px;color:var(--signal)}

/* ===================== 6. Offline bar: a calm strip under the header ===================== */
#offBar.offbar{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  top:calc(var(--st) + var(--hdr-h));left:0;right:0;max-width:none;margin:0;padding:9px var(--gutter);
  background:var(--bg-raise);color:var(--fg);border-bottom:var(--hair) solid var(--rule);border-radius:0;box-shadow:none;transform:none;
  font-family:var(--f-sans);font-weight:600;font-size:14px;line-height:1.35;letter-spacing:0;text-transform:none;text-align:left}
#offBar .offbar__ic{color:var(--fg-2)}
/* while it shows, the page starts below it instead of under it */
body:has(#offBar:not([hidden])) .main{padding-top:calc(var(--hdr-h) + var(--st) + var(--s4) + 40px)}