/*
 * Portal-specific styles. This is the ONLY css file owned by this repo --
 * tokens.css / base.css / components.css / landing.css are vendored from
 * webapp (see VENDORED.txt) and must not be edited here.
 *
 * Every value references a --hc-* token from tokens.css; no hardcoded
 * colors, spacing, fonts, shadows, or radii.
 */

/* ── Portal page background ──────────────────────────────────────────
 * base.css's shared body glow is tuned for dense app pages; the signup flow
 * is one card on open paper, so the card read white-on-white. Strengthen the
 * auras and add a faint oversized gold ring echoing the logo geometry.
 * Decorative only -- no text ever sits on these tints; the dominant surface
 * stays warm neutral (60/30/10). Upstream candidate for webapp auth pages. */
body {
    background-image:
        radial-gradient(circle 340px at 82% 16%,
            transparent 335px,
            color-mix(in srgb, var(--hc-accent) 36%, transparent) 338px,
            transparent 343px),
        radial-gradient(900px 520px at 6% -8%,
            color-mix(in srgb, var(--hc-primary-500) 26%, transparent), transparent 60%),
        radial-gradient(820px 600px at 103% 2%,
            color-mix(in srgb, var(--hc-accent) 22%, transparent), transparent 55%),
        radial-gradient(760px 760px at 96% 102%,
            color-mix(in srgb, var(--hc-primary-600) 18%, transparent), transparent 60%);
}

/* Lift the auth card off the paper: hairline edge + deeper shadow. */
.auth-split {
    border: 1px solid var(--hc-gray-200);
    box-shadow: var(--hc-shadow-lg);
}

/* ── Wizard widgets ─────────────────────────────────────────────────── */

/* Honeypot field: visually removed, still in the DOM for bots. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Subdomain claim: input + fixed ".hazelcare.ca" suffix on one line. */
.subdomain-claim {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
}

.subdomain-claim input {
    flex: 1;
    min-width: 0;
}

.subdomain-suffix {
    color: var(--hc-gray-600);
    font-weight: var(--hc-font-medium);
    white-space: nowrap;
}

.subdomain-hint {
    margin-top: var(--hc-space-2);
    font-size: var(--hc-text-sm);
}

.subdomain-hint--ok {
    color: var(--hc-success-700);
}

.subdomain-hint--bad {
    color: var(--hc-error-600);
}

/* Stripe Elements mount: style the box like our text inputs. */
.card-element {
    padding: var(--hc-space-3) var(--hc-space-4);
    border: 1px solid var(--hc-gray-300);
    border-radius: var(--hc-radius-sm);
    background: var(--hc-white);
}

/* Review summary: label/value pairs. */
.review-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--hc-space-2) var(--hc-space-6);
    margin-bottom: var(--hc-space-6);
}

.review-summary dt {
    color: var(--hc-gray-600);
    font-weight: var(--hc-font-medium);
}

.review-summary dd {
    margin: 0;
}

/* Specificity note: base.css sets `.form-group label {display:block}` and
 * `.form-group input {width:100%}` (0,1,1) -- the consent row must match
 * that specificity or the checkbox renders as a full-width block above
 * the text. */
.form-group .consent-label {
    display: flex;
    gap: var(--hc-space-3);
    align-items: flex-start;
    font-weight: var(--hc-font-normal);
}

.form-group .consent-label input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin-top: var(--hc-space-1);
    flex-shrink: 0;
}

/* Status page card. */
.status-card {
    margin: var(--hc-space-10) auto;
}

.status-line {
    font-size: var(--hc-text-lg);
    margin: var(--hc-space-4) 0;
}