/* ==========================================================================
   Signup card — CreateAccountForm

   One stylesheet for the form itself, because the SAME component renders in three
   places: the landing hero card, the landing closing-CTA card, and /createAccount.
   It used to be styled three times over (createAccount.css plus a wall of
   `.hero-signup ... !important` overrides in home.css), so the three copies drifted.
   Everything structural now lives here under the `fw-su-` prefix; the hosts only
   supply the card around it.

   Colours come from the app.css `--fw-*` tokens (docs/STYLE_GUIDE.md). The literal
   fallbacks exist only so the form still looks right if it is ever rendered before
   app.css lands.
   ========================================================================== */

.fw-signup {
    text-align: left;
    color: var(--fw-ink, #0f172a);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.fw-su-group {
    margin: 0 0 16px;
}

.fw-su-label {
    display: block;
    margin: 0 0 7px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fw-ink, #0f172a);
}

/* The bordered box IS this wrapper, not the input: the leading icon and the eye
   toggle sit inside the same border, as segmented cells. */
.fw-su-field {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--fw-border-strong, #cbd5e1);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fw-su-field:focus-within {
    border-color: var(--fw-brand, #00afb5);
    box-shadow: 0 0 0 3px rgba(0, 175, 181, 0.16);
}

.fw-su-field.is-readonly {
    background: var(--fw-surface, #f8fafc);
}

.fw-su-field-icon {
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.05rem;
}

.fw-su-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 14px 13px 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.03rem;
    color: var(--fw-ink, #0f172a);
}

/* No leading icon (the verification code) — the text would otherwise start at the
   very edge of the box. */
.fw-su-field-icon + .fw-su-input { padding-left: 0; }
.fw-su-field > .fw-su-input:first-child { padding-left: 14px; }

.fw-su-input::placeholder { color: #94a3b8; }
.fw-su-input:read-only { color: var(--fw-ink-soft, #64748b); }

/* The show/hide-password eye: its own cell on the right, divided from the input. */
.fw-su-eye {
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--fw-border, #e2e8f0);
    background: transparent;
    color: #94a3b8;
    font-size: 1.15rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.fw-su-eye:hover {
    color: var(--fw-ink-body, #334155);
    background: var(--fw-surface, #f8fafc);
}

.fw-su-eye:focus-visible {
    outline: 2px solid var(--fw-brand, #00afb5);
    outline-offset: -2px;
}

/* ── Strength meter ─────────────────────────────────────────────────────── */

.fw-su-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 8px;
    --fw-su-meter: var(--fw-border-strong, #cbd5e1);
}

.fw-su-strength[data-level="1"] { --fw-su-meter: #dc2626; }
.fw-su-strength[data-level="2"] { --fw-su-meter: #d97706; }
.fw-su-strength[data-level="3"] { --fw-su-meter: var(--fw-brand, #00afb5); }
.fw-su-strength[data-level="4"] { --fw-su-meter: var(--fw-positive, #15803d); }

.fw-su-strength-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 92px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fw-su-meter);
}

.fw-su-bars {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
}

.fw-su-bar {
    flex: 1 1 0;
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    transition: background 0.2s ease;
}

.fw-su-bar.is-on { background: var(--fw-su-meter); }

.fw-su-hint {
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fw-ink-soft, #64748b);
}

/* ── Messages ───────────────────────────────────────────────────────────── */

.fw-su-invite {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid var(--fw-brand, #00afb5);
    background: var(--fw-brand-tint, #e6f7f8);
    color: var(--fw-ink-body, #334155);
}

.fw-su-invite p { margin: 0; font-weight: 600; }
.fw-su-invite p + p { margin-top: 4px; font-weight: 400; font-size: 0.95rem; }

.fw-su-validation {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--fw-danger, #b91c1c);
}

.fw-su-error { margin: 0 0 10px; }

.fw-su-resend {
    display: block;
    margin: 8px 0 16px;
    padding-left: 0 !important;
    text-decoration: none;
}

/* ── Submit ─────────────────────────────────────────────────────────────── */

.fw-su-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 20px 0 16px;
    padding: 15px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--fw-brand-gradient, linear-gradient(100deg, #00afb5 0%, #008a92 46%, #004777 100%));
    color: #fff;
    font-family: inherit;
    font-size: 1.075rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 175, 181, 0.28);
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fw-su-submit:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.fw-su-submit:disabled {
    cursor: default;
    filter: grayscale(0.25);
    opacity: 0.75;
    box-shadow: none;
}

/* Absolute so the label stays optically centred in the button, as in the design. */
.fw-su-submit-arrow {
    position: absolute;
    right: 22px;
    font-size: 1.05rem;
}

/* ── Footer links ───────────────────────────────────────────────────────── */

.fw-su-login {
    margin: 0 0 14px;
    text-align: center;
    font-size: 1rem;
    color: var(--fw-ink-soft, #64748b);
}

.fw-su-login a {
    color: var(--fw-brand-deep, #004777);
    font-weight: 700;
    text-decoration: none;
}

.fw-su-login a:hover { color: var(--fw-brand, #00afb5); text-decoration: underline; }

.fw-su-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: var(--fw-ink-soft, #64748b);
}

.fw-su-or::before,
.fw-su-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--fw-border, #e2e8f0);
}

.fw-su-terms {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--fw-ink-soft, #64748b);
}

.fw-su-terms a {
    color: var(--fw-brand-deep, #004777);
    font-weight: 600;
    text-decoration: none;
}

.fw-su-terms a:hover { text-decoration: underline; }

/* ── Trust strip ────────────────────────────────────────────────────────── */

.fw-su-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--fw-border, #e2e8f0);
}

.fw-su-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0 10px;
}

.fw-su-trust-item:first-child { padding-left: 0; }
.fw-su-trust-item + .fw-su-trust-item { border-left: 1px solid var(--fw-border, #e2e8f0); }

.fw-su-trust-item > i {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--fw-brand, #00afb5);
}

.fw-su-trust-title {
    display: block;
    font-size: 0.855rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fw-ink, #0f172a);
}

.fw-su-trust-sub {
    display: block;
    font-size: 0.775rem;
    line-height: 1.3;
    color: var(--fw-ink-soft, #64748b);
}

@media (max-width: 520px) {
    .fw-su-trust { grid-template-columns: 1fr; gap: 14px; }
    .fw-su-trust-item { padding: 0; }
    .fw-su-trust-item + .fw-su-trust-item { border-left: 0; }
    .fw-su-strength { flex-wrap: wrap; gap: 8px; }
    .fw-su-bars { flex: 1 0 100%; }
}