/*
 * Waitlist form styles.
 *
 * Loaded after index.css, which defines every token used here on :root.
 * Same pattern as admin.css: a standalone sheet, not one of the partials that
 * index.css is concatenated from. No colour is hardcoded - everything resolves
 * through the token layer so a future dark palette applies automatically.
 */

/* --- Inherited defects fixed here --------------------------------------- */

/*
 * base.css sets `font: inherit` on button and input but not textarea, so every
 * textarea on the site fell back to the browser's monospace default. The form
 * is now mostly textareas, so fix it rather than reproduce it.
 */
textarea {
    font: inherit;
}

/* --- Layout ------------------------------------------------------------- */

.beta-layout:has(.waitlist-form) {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-large);
}

@media (min-width: 981px) {
    .beta-layout:has(.waitlist-form) .beta-copy {
        position: sticky;
        top: calc(var(--control-size-large) + var(--space-large));
    }
}

/*
 * Flow spacing for every direct child of the form. The class is doubled so this
 * beats the `.field-set` margin reset further down regardless of source order.
 */
.waitlist-form.waitlist-form > * + * {
    margin-top: var(--space-large);
}

/* --- Field labels ------------------------------------------------------- */

.field-flag {
    margin-left: calc(var(--space-small) - 0.35rem);
    padding: 0.05rem calc(var(--space-small) - 0.3rem);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    border: var(--border-size-small) solid var(--border);
    color: var(--text-soft);
    font-size: calc(var(--font-size-small) - 0.075rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.field-flag--required {
    background: var(--accent-soft);
    border-color: var(--accent-tint-medium);
    color: var(--accent-strong);
}

/* --- Fieldsets ---------------------------------------------------------- */

.field-set {
    margin: 0;
    padding: 0;
    border: 0;
}

.field-set legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: calc(var(--space-small) - 0.3rem);
    font-size: var(--font-size-medium);
    font-weight: 700;
    color: var(--text);
}

.field-set--compact legend {
    font-size: var(--font-size-small);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-large);
}

/* --- Choice controls ---------------------------------------------------- */

.choice-grid {
    display: grid;
    gap: calc(var(--space-small) - 0.15rem);
}

/* Short options pack to their own width instead of a rigid column grid. */
.choice-grid--tight {
    display: flex;
    flex-wrap: wrap;
}

.choice-grid--tight .choice {
    flex: 1 1 auto;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--space-small) + 0.05rem);
    padding: calc(var(--space-small) + 0.1rem) var(--space-medium);
    border: var(--border-size-small) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-soft);
    color: var(--text);
    font-size: var(--font-size-medium);
    cursor: pointer;
    transition:
        border-color var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease;
}

.choice--compact {
    align-items: center;
    padding: var(--space-small) calc(var(--space-small) + 0.15rem);
    font-size: var(--font-size-small);
}

.choice:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

.choice input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.28rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.choice--compact input {
    margin-top: 0;
}

.choice-text {
    line-height: 1.4;
}

/* Selected state. Browsers without :has() still show the native check mark. */
.choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

.choice:has(input:focus-visible) {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* The label already carries the focus ring, so drop the doubled outline. */
.choice input:focus-visible {
    outline: none;
}

/* --- Nested and emphasised groups --------------------------------------- */

.field-group--nested {
    margin-top: calc(var(--space-medium) + 0.35rem);
}

.field-group--feature {
    padding: var(--space-medium);
    border: var(--border-size-small) solid var(--accent-tint-medium);
    border-radius: var(--radius-card-sm);
    background: var(--accent-soft);
}

.field-group--feature label {
    font-size: var(--font-size-large);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.field-group--feature .field-help {
    color: var(--muted);
}

.field-group--feature textarea {
    background: var(--surface);
    border-color: var(--accent-tint-medium);
}

/* --- No-JS notice ------------------------------------------------------- */

.form-noscript {
    margin: 0 0 var(--space-medium);
    padding: calc(var(--space-medium) - 0.1rem) var(--space-medium);
    border: var(--border-size-small) solid var(--accent-tint-medium);
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--font-size-medium);
    font-weight: 600;
}

.form-noscript a {
    text-decoration: underline;
}

/* --- Status and caption spacing ----------------------------------------- */

.waitlist-form .form-status,
.waitlist-form .form-caption {
    margin-top: calc(var(--space-small) + 0.05rem);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
    .beta-layout:has(.waitlist-form) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .field-row {
        grid-template-columns: 1fr;
        gap: var(--space-medium);
    }

    .choice {
        padding: var(--space-small) calc(var(--space-small) + 0.15rem);
        font-size: var(--font-size-small);
    }
}

@media (prefers-reduced-motion: reduce) {
    .choice {
        transition: none;
    }
}