/* ==========================================================================
   CREOSON BETA registration wizard
   --------------------------------------------------------------------------
   Multi-step registration form, ported from the Specmation.ai wizard but
   rebuilt on the CREOSON design tokens (creoson.css) instead of Tailwind.
   Everything here is namespaced under `reg-` / `is-` so it cannot collide
   with the shared design system or public.css.
   ========================================================================== */

/* The .is-hidden switch this file relies on (for the step panels, the terminal
   states and the swap between the default AI section and the wizard) lives in
   public.css, since the function reference page needs it too. */

/* ---------- Wizard shell ------------------------------------------------- */
/* Width is set by the longest value the form has to show on one line, not by
   taste. Measured in-browser against the two-column grid: the widest checkbox
   chip ("Automate Deisgn/Quality Reviews") needs 308px, and the widest industry
   option ("Real Estate Development & Property Management") needs 405px. A half
   column here is (width - 64px card padding - 18.4px grid gap) / 2, so 58rem
   yields ~423px per column and clears the 405px worst case with enough headroom
   to absorb emoji metrics varying between platforms. At the old 42rem the chip
   above wrapped to two lines. Still well inside the 1180px --container. */
.reg-wrap {
    max-width: 58rem;
    margin-inline: auto;
}

.reg-card {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Honeypot. Off-screen rather than display:none so bots still see a real,
   focusable field. Humans never reach it, so it must arrive empty. */
.reg-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Header ------------------------------------------------------- */
.reg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.reg-head__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
}

.reg-head__title {
    margin: 0.4rem 0 0;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.25;
}

.reg-head__hint {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.reg-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--speed) var(--ease),
        color var(--speed) var(--ease);
}

.reg-close:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.reg-close svg {
    width: 1rem;
    height: 1rem;
}

/* ---------- Field grid --------------------------------------------------- */
.reg-grid {
    display: grid;
    gap: 1.15rem;
}

.reg-grid--tight {
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .reg-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    .reg-span-2 {
        grid-column: 1 / -1;
    }
}

/* ---------- Inputs ------------------------------------------------------- */
.reg-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.reg-label__opt {
    font-weight: 400;
    color: var(--text-faint);
}

.reg-field {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--speed) var(--ease),
        background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.reg-field::placeholder {
    color: var(--text-faint);
}

.reg-field:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.reg-field:disabled {
    background: var(--bg-inset);
    color: var(--text-faint);
    cursor: not-allowed;
}

textarea.reg-field {
    resize: vertical;
    min-height: 5.5rem;
}

/* Validation states. `--error` only appears once a field has been touched.
   The Specmation original tinted answered fields with its brand colour, but
   CREOSON's brand IS red, which made "answered" and "invalid" read as the same
   state. Answered fields use --accent (teal) here instead, so red stays
   reserved for errors and the primary CTA. */
.reg-field--error,
.reg-field--error:focus {
    border-color: #dc2626;
}

.reg-field--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.reg-field--valid,
.reg-field--valid:focus {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.reg-field--valid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---------- Checkbox chips ---------------------------------------------- */
.reg-opt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--speed) var(--ease),
        background var(--speed) var(--ease);
}

.reg-opt:hover {
    border-color: var(--accent);
}

/* Selected chips share the answered-field treatment (see .reg-field--valid)
   so "answered" is one consistent colour across every step. */
.reg-opt:has(:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}

/* Acknowledgement variant. The option chips hold short labels and centre them,
   but this one is a sentence that wraps, so align the box to the first line
   instead of floating it in the vertical middle, and relax the weight since
   this is prose rather than a pickable value. */
.reg-opt--ack {
    align-items: flex-start;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.reg-opt--ack .reg-opt__check {
    /* Nudge down onto the cap height of the first line. */
    margin-top: 0.15rem;
}

.reg-opt__check {
    flex: none;
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

/* "Other" text field reveal. Animating grid-template-rows keeps the collapsed
   state at a true zero height without hardcoding the input's height. */
.reg-other {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 300ms var(--ease), opacity 300ms var(--ease);
}

.reg-other.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.reg-other > div {
    overflow: hidden;
}

.reg-other .reg-field {
    margin-top: 0.75rem;
}

/* ---------- Searchable industry dropdowns ------------------------------- */
.reg-combo {
    position: relative;
}

/* Sized to its content rather than to its column, so an option never has to
   wrap or scroll sideways even when the viewport is too narrow for the full
   58rem card. Being absolutely positioned it is out of flow, so growing past
   the column costs the grid nothing. right: auto because a set left + right +
   width would otherwise leave the width ignored. */
.reg-combo__list {
    position: absolute;
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(34rem, calc(100vw - 2rem));
    z-index: 30;
    margin-top: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
    padding-block: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.reg-combo__option {
    padding: 0.5rem 0.9rem;
    font-size: 0.9375rem;
    color: var(--text);
    cursor: pointer;
    transition: background var(--speed) var(--ease);
    /* Industry names are single values, so never break one across lines. The
       list is free to outgrow its column instead (see width rules above). */
    white-space: nowrap;
}

.reg-combo__option:hover,
.reg-combo__option.is-active {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.reg-combo__empty {
    padding: 0.5rem 0.9rem;
    font-size: 0.9375rem;
    color: var(--text-faint);
}

/* ---------- Terminal states (working / done / failed) ------------------- */
.reg-state {
    padding-block: 1.5rem;
    text-align: center;
}

.reg-state p {
    max-width: 26rem;
    margin-inline: auto;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.reg-spinner {
    width: 3rem;
    height: 3rem;
    margin: 1.5rem auto 0;
    border: 4px solid color-mix(in srgb, var(--brand) 20%, transparent);
    border-top-color: var(--brand);
    border-radius: 999px;
    animation: reg-spin 1s linear infinite;
}

@keyframes reg-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reg-spinner {
        animation-duration: 2.4s;
    }

    .reg-other {
        transition: none;
    }
}

.reg-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
}

.reg-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Success tick is teal, not brand red - a red "done" mark reads as a failure. */
.reg-icon--ok {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.reg-icon--bad {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

/* ---------- Footer: progress + navigation ------------------------------ */
.reg-footer {
    margin-top: 2rem;
}

.reg-steplabel {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.reg-progress {
    height: 6px;
    overflow: hidden;
    background: var(--bg-inset);
    border-radius: 999px;
}

.reg-progress__bar {
    height: 100%;
    width: 0;
    background: var(--brand);
    border-radius: 999px;
    transition: width 300ms var(--ease);
}

.reg-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.reg-nav .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.reg-error {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    color: #dc2626;
    text-align: center;
}

.reg-invisible {
    visibility: hidden;
}

.reg-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}