/* Support, consent, entitlement and sign-in screens, calm (docs/CALM_REDESIGN_BRIEF.md).
 *
 * Two worlds share this file:
 *   - app-shell pages (getting started, plan wall, counselor consent, legal)
 *     use the app tokens from tailwind-input.css and the calm.css components;
 *   - "solo" pages (sign-in, signup, claim, provisioning, email stop, the
 *     signed-out error) render on the marketing or lightweight shell, where
 *     those tokens do not exist, so .calm-solo carries its own copy of the
 *     palette (light + prefers-color-scheme dark).
 */

/* ======================================================================
   Solo pages: the palette, the card, the pieces
   ====================================================================== */
:root:has(.calm-solo) {
    --solo-bg: #f6f2ea; --solo-paper: #fffdf8; --solo-sand: #f0eadd; --solo-ink: #232437;
    --solo-muted: #5e5f74; --solo-line: #e3dccd; --solo-violet: #583ec8; --solo-violet-text: #583ec8;
    --solo-highlight: #ddf57a; --solo-highlight-ink: #2c3406; --solo-danger-ink: #b9302c;
    --solo-danger-soft: #ffeeed; --solo-marigold-soft: #fdf1d6; --solo-shadow: 0 30px 70px -42px rgb(29 22 61 / .45);
}
@media (prefers-color-scheme: dark) {
    :root:has(.calm-solo) {
        --solo-bg: #16151f; --solo-paper: #21202e; --solo-sand: #2c2a3c; --solo-ink: #f4f0e7;
        --solo-muted: #bebaca; --solo-line: #3a384c; --solo-violet: #6a4fe0; --solo-violet-text: #a894ff;
        --solo-danger-ink: #fda4af; --solo-danger-soft: #431d24; --solo-marigold-soft: #3a2f16; --solo-shadow: 0 30px 70px -40px rgb(0 0 0 / .8);
    }
}
html:has(.calm-solo), html:has(.calm-solo) body { background: var(--solo-bg); color: var(--solo-ink); }
.calm-solo { font-family: "Bloom Sans", ui-sans-serif, system-ui, sans-serif; color: var(--solo-ink); }
.calm-solo .calm-flower { display: block; margin: 0 auto 1.125rem; }

.solo-main { box-sizing: border-box; display: grid; place-items: start center; min-height: 70vh; padding: clamp(2.5rem, 8vh, 5.5rem) 1.25rem 4.5rem; }
.solo-card { box-sizing: border-box; width: min(30rem, 100%); padding: clamp(1.75rem, 5vw, 2.5rem); border-radius: 1.75rem; text-align: center; background: var(--solo-paper); box-shadow: 0 0 0 1px var(--solo-line), var(--solo-shadow); }
.solo-card--left { text-align: left; }
.solo-card--left .calm-flower { margin-left: 0; }
.solo-title { margin: 0; font-family: "Bloom Display", "Bloom Sans", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.375rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: var(--solo-ink); text-wrap: balance; }
.solo-lede { margin: .75rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--solo-muted); }
.solo-fine { margin: 1rem 0 0; font-size: .84375rem; line-height: 1.5; color: var(--solo-muted); }
.solo-rule { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--solo-line); }
.solo-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: 1.5rem; padding: 0 1.5rem; border: 0; border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.1; color: var(--solo-paper); background: var(--solo-ink); text-decoration: none; cursor: pointer; }
.solo-btn[disabled] { opacity: .6; cursor: default; }
.solo-btn--ghost { color: var(--solo-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--solo-line); }
.solo-link { display: inline-block; margin-top: 1.25rem; font-size: .9375rem; font-weight: 600; color: var(--solo-violet-text); text-decoration: underline; text-underline-offset: 2px; }
.solo-error { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: 1rem; font-size: .9375rem; color: var(--solo-danger-ink); background: var(--solo-danger-soft); }
.solo-error.hidden, .solo-hidden.hidden, .calm-solo .hidden { display: none; }
.solo-eyebrow { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--solo-muted); }

/* ---------- provisioning: three quiet steps under a thinking flower ---------- */
.solo-steps { display: inline-flex; flex-direction: column; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; text-align: left; font-size: .9375rem; color: var(--solo-muted); }
.solo-steps li { display: flex; align-items: center; gap: .625rem; }
.solo-steps li::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--solo-highlight); box-shadow: 0 0 0 3px var(--solo-sand); }

/* ======================================================================
   Sign-in and signup (marketing shell): the same markup, a calm dress
   ====================================================================== */
.calm-auth { box-sizing: border-box; width: min(30rem, 100%); }
.calm-solo .auth-card { box-sizing: border-box; }
.calm-solo .auth-card .calm-flower { margin: 0 0 1rem; }
.calm-solo .auth-card { width: 100%; padding: clamp(1.75rem, 5vw, 2.5rem); border: 0; border-radius: 1.75rem; background: var(--solo-paper); box-shadow: 0 0 0 1px var(--solo-line), var(--solo-shadow); }
.calm-solo .auth-card h1 { margin: 0 0 .625rem; font-family: "Bloom Display", "Bloom Sans", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: var(--solo-ink); text-wrap: balance; }
.calm-solo .auth-lede { margin: 0 0 1.375rem; font-size: 1rem; line-height: 1.55; color: var(--solo-muted); }
.calm-solo .auth-lede strong { color: var(--solo-ink); }
.calm-solo .invite-callout { margin: 0 0 1.375rem; padding: 1rem 1.125rem; border: 0; border-radius: 1.125rem; font-size: .90625rem; background: var(--solo-marigold-soft); }
.calm-solo .invite-callout strong { margin-bottom: .25rem; font-family: "Bloom Display", "Bloom Sans", ui-sans-serif, system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--solo-ink); }
.calm-solo .invite-callout p { color: var(--solo-muted); }
.calm-solo .invite-callout p + p { margin-top: .5rem; }
.calm-solo .invite-callout b { color: var(--solo-ink); }
.calm-solo .auth-error { border: 0; border-radius: 1rem; color: var(--solo-danger-ink); background: var(--solo-danger-soft); }
.calm-solo .auth-notice { margin: 0 0 1rem; padding: .875rem 1rem; border-radius: 1rem; font-size: .9375rem; color: var(--solo-highlight-ink); background: var(--solo-highlight); }
/* A code that did not match is not good news: marigold, never the success green. */
.calm-solo .auth-notice[role="alert"] { color: var(--solo-ink); background: var(--solo-marigold-soft); }
.calm-solo .google-button { min-height: 3.25rem; border: 0; border-radius: 999px; font-size: 1rem; font-weight: 700; color: var(--solo-ink); background: var(--solo-paper); box-shadow: inset 0 0 0 1.5px var(--solo-ink); transform: none; }
.calm-solo .google-button:hover { box-shadow: inset 0 0 0 1.5px var(--solo-ink), 0 12px 26px -16px rgb(29 22 61 / .6); transform: none; }
.calm-solo .auth-form label, .calm-solo .auth-label { color: var(--solo-ink); font-size: .875rem; font-weight: 700; }
.calm-solo .auth-form input, .calm-solo .auth-form select, .calm-solo .auth-input { box-sizing: border-box; width: 100%; min-height: 3rem; padding: 0 1rem; border: 0; border-radius: 1rem; font: inherit; color: var(--solo-ink); background: var(--solo-sand); box-shadow: inset 0 0 0 1px var(--solo-line); }
.calm-solo .auth-form input:focus, .calm-solo .auth-form select:focus, .calm-solo .auth-input:focus { outline: 2px solid var(--solo-violet); outline-offset: 1px; }
.calm-solo .auth-card form:not(.auth-form) { display: grid; gap: .5rem; margin-top: .75rem; }
.calm-solo .auth-card .button { width: 100%; min-height: 3.125rem; margin-top: .5rem; border: 0; border-radius: 999px; font-size: 1rem; font-weight: 700; color: var(--solo-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--solo-line); transform: none; }
.calm-solo .auth-card .button-primary { color: var(--solo-paper); background: var(--solo-ink); box-shadow: none; }
.calm-solo .signup-code { margin: .25rem 0 0; }
.calm-solo .signup-code > summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; font-weight: 700; color: var(--solo-violet-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.calm-solo .signup-code > summary::-webkit-details-marker { display: none; }
.calm-solo .signup-code .auth-input { letter-spacing: .04em; text-transform: uppercase; }
.calm-solo .signup-code-note { margin: .5rem 0 .25rem; font-size: .875rem; line-height: 1.5; color: var(--solo-muted); }
.calm-solo .auth-alt { margin: 1.125rem 0 0; font-size: .90625rem; color: var(--solo-muted); }
.calm-solo .auth-alt a { color: var(--solo-violet-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.calm-solo .auth-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: .75rem; }
.calm-solo .auth-steps li { counter-increment: step; position: relative; padding: .875rem 1rem .875rem 3.25rem; border-radius: 1.125rem; font-size: .9375rem; line-height: 1.5; color: var(--solo-muted); background: var(--solo-sand); }
.calm-solo .auth-steps li::before { content: counter(step); position: absolute; left: .875rem; top: .875rem; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; font-size: .8125rem; font-weight: 800; color: var(--solo-highlight-ink); background: var(--solo-highlight); }
.calm-solo .auth-steps strong { color: var(--solo-ink); }
.calm-solo .auth-divider { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--solo-line); }

/* ======================================================================
   App-shell support pages
   ====================================================================== */
.support-page, .counselor-consent-platform { width: 100%; max-width: 45rem; margin-inline: auto; padding-bottom: 3rem; }
.support-page :is(p, li, label, h2, h3), .counselor-consent-platform :is(p, li, label, h2, h3) { overflow-wrap: anywhere; }
.support-card { padding: 1.375rem; border-radius: 1.625rem; background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); }
.support-card + .support-card { margin-top: .875rem; }
.support-card-title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: rgb(var(--ink)); }
.support-text { margin: .375rem 0 0; font-size: .9375rem; line-height: 1.55; color: rgb(var(--ink-muted)); }
.support-fine { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.5; color: rgb(var(--ink-subtle)); }
.support-alert { margin: 0 0 1.25rem; padding: .875rem 1.125rem; border-radius: 1.125rem; font-size: .9375rem; color: rgb(var(--status-danger-ink)); background: rgb(var(--status-danger-surface)); }
.support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.support-quiet { font-size: .9375rem; font-weight: 600; color: rgb(var(--ink-muted)); text-decoration: none; }
.support-quiet:hover { color: rgb(var(--ink)); text-decoration: underline; }
.support-list { margin: .75rem 0 0; padding-left: 1.25rem; list-style: disc; font-size: .9375rem; line-height: 1.6; color: rgb(var(--ink-muted)); }
.support-list li + li { margin-top: .25rem; }

/* ---------- plan wall: three doors, numbered ---------- */
.tier-doors { display: flex; flex-direction: column; gap: .75rem; }
.tier-door { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem; border-radius: 1.5rem; background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); }
.tier-door > :not(.tier-door-n) { grid-column: 2; }
.tier-door-n { grid-row: 1 / span 6; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; color: rgb(var(--highlight-ink)); background: rgb(var(--highlight)); }
.tier-door--primary { box-shadow: 0 0 0 2px rgb(var(--ink)); }
.tier-door-title { margin: .25rem 0 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: rgb(var(--ink)); }
.tier-export-rows { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.tier-export-row { padding: .75rem 1rem; border-radius: 1rem; background: rgb(var(--surface-lighter) / .7); }
.tier-export-name { margin: 0; font-weight: 700; color: rgb(var(--ink)); }
.tier-export-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; font-size: .9375rem; }
.tier-export-link { font-weight: 600; color: rgb(var(--accent)); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- counselor consent ---------- */
.consent-people { display: flex; flex-wrap: wrap; gap: .5rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.consent-person { display: inline-flex; align-items: center; gap: .5rem; padding: .3125rem .75rem .3125rem .3125rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: rgb(var(--ink)); background: rgb(var(--surface-lighter)); }
.consent-person-role { font-size: .75rem; font-weight: 500; color: rgb(var(--ink-muted)); }
.consent-split { display: grid; gap: .875rem; margin-top: .875rem; }
@media (min-width: 640px) { .consent-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.consent-split .support-card { margin: 0; }
.consent-see { background: rgb(var(--cat-scholarship-soft)); box-shadow: none; }
.dark .consent-see { background: rgb(var(--surface-light)); box-shadow: inset 0 0 0 1px rgb(var(--cat-scholarship) / .5); }
.consent-not { background: rgb(var(--surface-lighter)); box-shadow: none; }
.consent-form { margin-top: .875rem; }
.consent-form fieldset { margin: 0; padding: 0; border: 0; }
.consent-form legend { padding: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: rgb(var(--ink)); }
.consent-kids { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.consent-kid { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; border-radius: 1rem; font-size: .9375rem; color: rgb(var(--ink-muted)); background: rgb(var(--surface-lighter) / .7); cursor: pointer; }
.consent-kid input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: rgb(var(--accent-dark)); }
.consent-kid-name { font-weight: 700; color: rgb(var(--ink)); }
.consent-kid-chip { padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: rgb(var(--cat-scholarship-ink)); background: rgb(var(--cat-scholarship-soft)); }
.consent-kid-note { flex-basis: 100%; font-size: .8125rem; color: rgb(var(--ink-subtle)); }
.consent-label { display: block; margin-top: 1.25rem; font-size: .875rem; font-weight: 700; color: rgb(var(--ink)); }
.consent-input { box-sizing: border-box; width: 100%; max-width: 20rem; min-height: 2.875rem; margin-top: .4375rem; padding: 0 1rem; border: 0; border-radius: 1rem; font: inherit; color: rgb(var(--ink)); background: rgb(var(--surface-lighter)); box-shadow: inset 0 0 0 1px rgb(var(--line)); }
.consent-input:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; }

/* ---------- legal gate: the agreement card ---------- */
.legal-gate-card { padding: 1.5rem; border-radius: 1.75rem; font-size: .9375rem; line-height: 1.6; color: rgb(var(--ink)); background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8), 0 30px 60px -44px rgb(29 22 61 / .45); }
.legal-gate-card > p { margin: 0 0 1rem; color: rgb(var(--ink-muted)); }
.legal-gate-check { display: flex; align-items: flex-start; gap: .75rem; margin: .5rem 0 1.25rem; padding: 1rem; border-radius: 1.125rem; color: rgb(var(--ink)); background: rgb(var(--surface-lighter) / .7); cursor: pointer; }
.legal-gate-check input { width: 1.25rem; height: 1.25rem; margin-top: .1875rem; flex: none; accent-color: rgb(var(--accent-dark)); }
.legal-gate-check a { font-weight: 600; text-decoration: underline; }

/* ---------- the signed-in error card ---------- */
.error-calm .calm-empty { max-width: 30rem; margin-inline: auto; }
.error-calm-code { margin: 1rem 0 0; text-align: center; font-family: var(--font-display); font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: rgb(var(--ink-muted)); }
.error-calm-ref { margin: .25rem 0 0; text-align: center; font-size: .8125rem; color: rgb(var(--ink-subtle)); }

/* ======================================================================
   Getting started guides: the calm layer over each guide's own layout
   ====================================================================== */
.gs-calm .calm-header { margin-bottom: 1.25rem; }
.gs-calm .calm-status { margin-bottom: 2rem; }
.gs-calm .gs-step :is(h2, .gs-step-title) { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.gs-calm :is(.gs-badge, .gs-step-num, .gs-step-n) { width: 2.25rem; height: 2.25rem; font-family: var(--font-display); font-weight: 800; color: rgb(var(--highlight-ink)); background: rgb(var(--highlight)); box-shadow: none; }
.gs-calm .gs-shot { border: 0; border-radius: 1.375rem; box-shadow: 0 0 0 1px rgb(var(--line) / .8), 0 24px 48px -36px rgb(29 22 61 / .4); }
.gs-calm .gs-open { min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: 999px; font-size: .9375rem; font-weight: 700; color: rgb(var(--surface-light)); background: rgb(var(--ink)); text-decoration: none; filter: none; }
.gs-calm .gs-open:hover { color: rgb(var(--surface-light)); box-shadow: 0 8px 18px -10px rgb(var(--ink) / .7); }
.gs-calm :is(details.gs-q, .gs-scn) { border: 0; border-radius: 1.125rem; background: rgb(var(--surface-light)); box-shadow: 0 0 0 1px rgb(var(--line) / .8); }
.gs-calm .gs-rail li.is-active .gs-dot, .gs-calm .gs-rail-item.is-active .gs-rail-dot { color: rgb(var(--highlight-ink)); background: rgb(var(--highlight)); border-color: rgb(var(--highlight)); }
.gs-calm .gs-rail a.is-active::before { background: rgb(var(--highlight)); box-shadow: 0 0 0 2px rgb(var(--ink) / .25); }
.gs-calm .gs-chips a.is-active, .gs-calm .gs-chip.is-active { color: rgb(var(--surface-light)); background: rgb(var(--ink)); border-color: transparent; }
.gs-calm .gs-note { margin: 0 0 1.5rem; padding: .875rem 1rem; border-radius: 1rem; font-size: .875rem; line-height: 1.55; color: rgb(var(--ink-muted)); background: rgb(var(--surface-sunken, var(--surface-lighter))); }
.gs-calm .gs-note strong { color: rgb(var(--ink)); }

/* ======================================================================
   Phone treatment (kept from the platform pass)
   ====================================================================== */
@media (max-width: 767px) {
  body[data-app-experience="ios"] :is(.getting-started-platform, [data-platform-support="getting-started"]) :is(.gs-chips a, .gs-rail a, .gs-chip, .gs-open, details > summary),
  body[data-app-experience="ios"] .counselor-consent-platform :is(label, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), button, a.calm-btn),
  body[data-app-experience="ios"] .tier-wall-platform :is(button, a.calm-btn, .tier-export-link) { min-height: 2.75rem; }
  body[data-app-experience="ios"] :is(.getting-started-platform, [data-platform-support="getting-started"]) .gs-chips a,
  body[data-app-experience="ios"] :is(.getting-started-platform, [data-platform-support="getting-started"]) .gs-chip { padding-block: .55rem; }
  body[data-app-experience="ios"] :is(.getting-started-platform, [data-platform-support="getting-started"]) .gs-rail a { min-width: 2.75rem; }
  body[data-app-experience="ios"] :is(.getting-started-platform, [data-platform-support="getting-started"]) .gs-rail a span.gs-label { display: inline; }
  body[data-app-experience="ios"] .counselor-consent-platform input:not([type="hidden"]),
  body[data-app-experience="ios"] .counselor-consent-platform select { font-size: 1rem; }
  body[data-app-experience="ios"] .tier-wall-platform .tier-export-link { display: inline-flex; align-items: center; }
  .gs-calm .gs-step :is(h2, .gs-step-title) { font-size: 1.25rem; }
  .tier-door { padding: 1rem; column-gap: .75rem; }
  .legal-gate-card, .support-card { padding: 1.125rem; border-radius: 1.375rem; }
  .solo-main { padding-top: 2rem; }
}

html[data-ui-platform="android"] body[data-app-experience="ios"] :is(.getting-started-platform, [data-platform-support="getting-started"]) :is(.gs-chips a, .gs-rail a, .gs-chip, .gs-open, details > summary),
html[data-ui-platform="android"] body[data-app-experience="ios"] .counselor-consent-platform :is(label, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), button, a.calm-btn),
html[data-ui-platform="android"] body[data-app-experience="ios"] .tier-wall-platform :is(button, a.calm-btn, .tier-export-link) { min-height: 3rem; }

/* This asset's account-shell entry is the terminal counselor handoff. */
body[data-platform-surface="account"] .wrap { max-width: none; width: 100%; min-height: 0; margin: 0; padding: 0; }
body[data-platform-surface="account"] .counselor-access-ended {
  box-sizing: border-box;
  min-height: 100dvh;
  padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}
body[data-platform-surface="account"] .counselor-access-ended a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; }
html[data-ui-platform="android"] body[data-platform-surface="account"] .counselor-access-ended a { min-height: 3rem; }
.counselor-access-ended .calm-empty { width: min(32rem, 100%); }
.counselor-access-ended .calm-empty-sub + .calm-empty-sub { margin-top: .25rem; font-size: .875rem; }

@media (forced-colors: active) {
  .solo-card, .calm-solo .auth-card, .support-card, .tier-door, .legal-gate-card { border: 1px solid CanvasText; }
}