/*
 * Phase 1 additions to site.css (HSOS-Branding's mockup, lifted unchanged): what the mockup doesn't
 * cover. Initials avatars, the real form's states, and the privacy, terms, contact, unsubscribe and
 * message pages, all in the mockup's style. Tokens only: a test fails on any colour literal here.
 */

/* Blazor focuses the page's h1 after navigation (FocusOnNavigate) for screen readers; no ring for that. */
h1:focus { outline: none; }

/* The real form's fieldsets carry the .field class themselves (the mockup nests a bare fieldset). */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Initials on the avatar discs (the mockup's animal avatars aren't built in the app). */
.av-initial { font: 700 0.875rem/1 var(--fb-font-body); letter-spacing: 0; }
.av.sm .av-initial { font-size: 0.6875rem; }
.av.lg .av-initial { font-size: 1.125rem; }

/* Form plumbing the mockup's demo form doesn't have. */
.hp { position: absolute; left: -10000px; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-card .row-2 > .field { min-width: 0; }
.field-help { margin: 0; }
.validation-message, .form-status--error { color: var(--fb-error); font-size: 0.875rem; font-weight: 600; }
.form-card .invalid { border-color: var(--fb-error); }
.success .form-status { font: 650 1.125rem/1.45 var(--fb-font-display); }

/* Forms on the other pages (contact): the same controls as the waitlist card. */
.waitlist-form input:not([type="radio"]):not([type="hidden"]):not(.input),
.waitlist-form select:not(.select),
.waitlist-form textarea {
    width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--fb-radius-md);
    border: 1.5px solid var(--fb-line-input); background: var(--fb-surface); color: var(--fb-text);
    font: 400 1rem var(--fb-font-body);
    transition: border-color var(--fb-duration-fast) var(--fb-ease-standard), box-shadow var(--fb-duration-fast) var(--fb-ease-standard);
}
.waitlist-form textarea { resize: vertical; }
.waitlist-form input:focus, .waitlist-form select:focus, .waitlist-form textarea:focus {
    outline: none; border-color: var(--fb-primary); box-shadow: 0 0 0 4px var(--fb-selected);
}
.waitlist-form button:not(.btn), .unsubscribe-form button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
    border: 2px solid transparent; border-radius: var(--fb-radius-pill); cursor: pointer;
    font: 700 1rem/1 var(--fb-font-body); letter-spacing: 0.01em;
    background: var(--fb-primary); color: var(--fb-on-primary); box-shadow: var(--fb-shadow-md);
    transition: transform var(--fb-duration-fast) var(--fb-ease-standard), box-shadow var(--fb-duration-base) var(--fb-ease-standard);
}
.waitlist-form button:not(.btn):hover, .unsubscribe-form button:hover { transform: translateY(-2px); box-shadow: var(--fb-shadow-lg); }
.contact-form, .unsubscribe-form { margin-top: 8px; }
.contact-form { background: var(--fb-surface); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-xl); padding: clamp(22px, 4vw, 40px); box-shadow: var(--fb-shadow-lg); display: grid; gap: 22px; }
.form-note { font-size: 0.8125rem; color: var(--fb-text-muted); }
.form-status { font-weight: 700; }

/* Privacy, terms, contact, unsubscribe and the not-found and error pages: one reading column. */
main.legal, main.message {
    max-width: calc(46rem + 48px); margin-inline: auto; padding: clamp(48px, 7vw, 104px) 24px clamp(64px, 8vw, 120px);
    display: grid; gap: 18px; align-content: start;
}
@media (max-width: 560px) { main.legal, main.message { padding-inline: var(--fb-gutter); } }
main.legal h1, main.message h1 {
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em;
}
main.legal h2 { font-size: 1.375rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.012em; margin-top: 22px; }
main.legal ul, main.legal ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 6px; }
main.message .lede { margin-bottom: 8px; }
.updated {
    font-family: var(--fb-font-mono); font-size: var(--fb-type-overline-size); letter-spacing: var(--fb-type-overline-letter-spacing);
    text-transform: uppercase; color: var(--fb-text-muted);
}
.request-id { font-size: 0.875rem; color: var(--fb-text-muted); }

.summary {
    width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
    background: var(--fb-surface); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg);
    box-shadow: var(--fb-shadow-sm); font-size: 0.9375rem;
}
.summary th, .summary td { text-align: left; vertical-align: top; padding: 14px 18px; border-top: 1px solid var(--fb-line-soft); }
.summary tr:first-child th, .summary tr:first-child td { border-top: 0; }
.summary th { width: 9rem; font-weight: 700; }
@media (max-width: 520px) {
    .summary th, .summary td { display: block; width: auto; }
    .summary td { border-top: 0; padding-top: 0; }
}

/* Founding band: the places-left counter, once 200 places are taken (wording a draft until approved). */
.places-left {
    justify-self: start; padding: 6px 14px; border-radius: var(--fb-radius-pill);
    background: var(--fb-site-spotlight-accent); color: var(--fb-brand-midnight);
    font: 700 0.9375rem/1.3 var(--fb-font-body);
}

/* The Term 1 2027 plans: two cards, then the ticks, the trial button and the small print. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 880px; }
@media (max-width: 720px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.tile .plan-price { color: var(--fb-text); font-size: 1.125rem; line-height: 1.3; }
.plan-month { display: block; white-space: nowrap; }
.plan-price b { display: block; margin-bottom: 4px; font: 700 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1.05 var(--fb-font-display); letter-spacing: -0.03em; }
.plan-foot { display: grid; gap: 22px; justify-items: start; margin-top: clamp(32px, 4vw, 48px); max-width: 880px; }


/* Real screens (the app's capture set), staged for the app release: shown in the mockup's device frames. */
figure.shot, .promise-shot { margin: 0; }
.shot img, .promise-shot img { display: block; width: 100%; height: auto; }
.v-window.shot .bar { padding-block: 10px; }
.v-phone.shot .screen { padding: 0; gap: 0; border-radius: 30px; }

/* Hero: Home in the window, Leo's My day on the phone, overlapping. */
.hero-grid--shots { align-items: start; } /* the headline level with the window's top */
.hero:has(.hero-grid--shots) { padding-bottom: clamp(40px, 4vw, 56px); } /* the phone already gives the hero its depth */
.stage--shots { min-height: 860px; }
.stage--shots .v-window { top: 0; width: 560px; max-width: none; }
.stage--shots .v-badge { top: -56px; right: 6%; }
.stage--shots .v-phone { top: 256px; right: -64px; width: 290px; max-width: none; } /* a 270px screen puts the app's text at 11px; below Review & approve */
@media (max-width: 1280px) { .stage--shots .v-window { width: 100%; } .stage--shots .v-phone { right: 0; width: 46%; max-width: 250px; } }
@media (max-width: 960px) { .stage--shots { min-height: 840px; } .stage--shots .v-phone { top: 290px; } }
@media (max-width: 560px) { .stage--shots { min-height: 0; } .stage--shots .v-phone { max-width: 300px !important; } }

/* The promises: wide rows on desktop, copy on one side and the screen at about 680px on the other,
   alternating; cards under 920px, with the screen full width below the copy. */
.promise-shot {
    border: 1px solid var(--fb-line-soft); border-radius: var(--fb-radius-md);
    overflow: hidden; box-shadow: var(--fb-shadow-sm); background: var(--fb-bg);
}
.promise-copy { display: grid; gap: 14px; align-content: center; justify-items: start; }
.promises--rows { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.promises--rows .promise { grid-template-columns: minmax(300px, 1fr) minmax(0, 680px); align-items: center; column-gap: 56px; padding: 40px 44px; }
.promises--rows .promise:hover { transform: translateY(-2px); }
.promises--rows .promise:nth-child(even) { grid-template-columns: minmax(0, 680px) minmax(300px, 1fr); }
.promises--rows .promise:nth-child(even) .promise-shot { grid-column: 1; grid-row: 1; }
.promises--rows .promise:nth-child(even) .promise-copy { grid-column: 2; }
@media (max-width: 920px) {
    .promises--rows .promise, .promises--rows .promise:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 30px 28px 32px; }
    .promises--rows .promise:nth-child(even) .promise-shot, .promises--rows .promise:nth-child(even) .promise-copy { grid-column: auto; grid-row: auto; }
}

/* Help when they need it: the copy above, then the three screens in order. */
.help-layout { display: grid; gap: clamp(32px, 5vw, 56px); }
.help-layout .split-copy { max-width: 760px; }
.help-shots {
    list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); align-items: center;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 290px); /* 16b as large as the row allows */
}
.help-shot { display: grid; gap: 12px; justify-items: center; }
.help-shot .v-label { display: flex; align-items: center; gap: 8px; justify-self: start; }
.help-shot .v-label b {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--fb-primary); color: var(--fb-on-primary); font-family: var(--fb-font-body); font-size: 0.75rem; letter-spacing: 0;
}
.help-shot.phone .v-phone { width: 100%; max-width: 290px; position: static; }
.help-shot.desktop .v-window { width: 100%; }
@media (max-width: 1180px) {
    .help-shots { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 220px); }
}
@media (max-width: 920px) {
    .help-shots { grid-template-columns: minmax(0, 1fr); }
    .help-shot.phone .v-phone { max-width: 260px; }
}