/*
 * Signup Wizard styles
 * __API__/shared/front_end/css/signup_wizard.css
 *
 * Per Phase S4 of __API__/shared/auth/SIGNUP_WIZARD_PLAN.md:
 *  - Brand colors come from CSS custom properties (--brand-*) when present,
 *    fall back to the global Bootstrap palette so the wizard still looks
 *    correct on hub pages that have not set the brand variables.
 *  - Layout uses Bootstrap utilities; this file only adds wizard-specific
 *    chrome (step tracker, deferred-state notice, honeypot off-screen rule,
 *    code-input mono spacing).
 */

.signup-wizard {
    max-width: 640px;
    margin: 0 auto;
}

/* Step tracker --------------------------------------------------------- */
.signup-wizard__tracker-list {
    list-style: none;
    counter-reset: signup-wizard;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.875rem;
    color: var(--brand-muted, #6c757d);
}

.signup-wizard__tracker-list li {
    flex: 1 1 auto;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
}

.signup-wizard__tracker-list li[data-track-state="active"] {
    background: var(--brand-primary-tint, #e7f1ff);
    border-color: var(--brand-primary, #0d6efd);
    color: var(--brand-primary, #0d6efd);
    font-weight: 600;
}

.signup-wizard__tracker-list li[data-track-state="done"] {
    background: var(--brand-success-tint, #d1e7dd);
    border-color: var(--brand-success, #198754);
    color: var(--brand-success, #198754);
}

.signup-wizard__tracker-item--optional {
    opacity: 0.65;
    font-style: italic;
}

/* Card body ----------------------------------------------------------- */
.signup-wizard__card {
    border: 1px solid var(--brand-card-border, rgba(0, 0, 0, 0.125));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.signup-wizard__step-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.signup-wizard__step-blurb {
    color: var(--brand-muted, #6c757d);
    font-size: 0.9375rem;
    margin: 0 0 1rem;
}

/* Verify-code input — fixed-width digits ------------------------------ */
.signup-wizard__code-input {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.4em;
    font-size: 1.25rem;
    text-align: center;
}

/* Password rule list -------------------------------------------------- */
.signup-wizard__password-rules {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

/* Persistent product header (Phase S9) -------------------------------- */
.signup-wizard__product-header {
    padding: 1rem 1.25rem;
    background: var(--brand-light, #f8f9fa);
    border-left: 3px solid var(--brand-primary, #0d6efd);
    border-radius: 4px;
    text-align: center;
}
.signup-wizard__product-name {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-text, #1a1a2e);
    letter-spacing: -0.01em;
}
.signup-wizard__product-tagline {
    margin: 0.5rem auto 0;
    max-width: 48ch;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--brand-muted, #6c757d);
    font-style: italic;
}
.signup-wizard__product-tagline strong {
    color: var(--brand-text, #1a1a2e);
    font-style: normal;
    font-weight: 700;
}
@media (max-width: 480px) {
    .signup-wizard__product-name { font-size: 1.5rem; }
    .signup-wizard__product-tagline { font-size: 0.875rem; }
}

/* Step 5 subscribe summary (Phase S9) --------------------------------- */
.signup-wizard__subscribe-summary {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--brand-light, #f8f9fa);
    border-left: 3px solid var(--brand-primary, #0d6efd);
    border-radius: 4px;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.25rem;
}
.signup-wizard__subscribe-summary dt {
    font-weight: 600;
    color: var(--brand-muted, #6c757d);
}
.signup-wizard__subscribe-summary dd {
    margin: 0;
}

/* Step 5 inline notices (Phase S9) ------------------------------------ */
.signup-wizard__notice {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
}
.signup-wizard__notice--error {
    background: var(--brand-danger-tint, #f8d7da);
    border-left: 3px solid var(--brand-danger, #b02a37);
    color: var(--brand-danger-text, #58151c);
}

/* Deferred-state notice ----------------------------------------------- */
.signup-wizard__deferred {
    background: var(--brand-warning-tint, #fff3cd);
    border-left: 3px solid var(--brand-warning, #ffc107);
    color: var(--brand-warning-text, #664d03);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Flash banner -------------------------------------------------------- */
/* Empty state — no visible chrome until a kind is set. clearFlash() in
   signup_wizard.js removes data-flash-kind, which removes all alert styling. */
.signup-wizard__flash {
    margin-top: 1rem;
}
/* Active alert — present whenever data-flash-kind is set. Padded, bordered,
   left-accent stripe, prominent text weight. The ::before slot renders a
   Bootstrap Icon via the local font (codepoints verified against
   __CONSTRUCTS/BOOTSTRAP/assets/dist/css/bootstrap-icons.min.css). */
.signup-wizard__flash[data-flash-kind] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.signup-wizard__flash[data-flash-kind]::before {
    flex: 0 0 auto;
    font-family: bootstrap-icons;
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 0.0625rem;
    speak: none;
}
.signup-wizard__flash[data-flash-kind="error"] {
    background: var(--brand-danger-tint, #f8d7da);
    border-color: var(--brand-danger, #b02a37);
    color: var(--brand-danger-text, #58151c);
}
.signup-wizard__flash[data-flash-kind="error"]::before {
    content: "\f33a"; /* bi-exclamation-triangle-fill */
    color: var(--brand-danger, #b02a37);
}
.signup-wizard__flash[data-flash-kind="success"] {
    background: var(--brand-success-tint, #d1e7dd);
    border-color: var(--brand-success, #198754);
    color: var(--brand-success-text, #0a3622);
}
.signup-wizard__flash[data-flash-kind="success"]::before {
    content: "\f26a"; /* bi-check-circle-fill */
    color: var(--brand-success, #198754);
}
.signup-wizard__flash[data-flash-kind="info"] {
    background: var(--brand-info-tint, #cff4fc);
    border-color: var(--brand-info, #0d6efd);
    color: var(--brand-info-text, #052c65);
}
.signup-wizard__flash[data-flash-kind="info"]::before {
    content: "\f430"; /* bi-info-circle-fill */
    color: var(--brand-info, #0d6efd);
}
@media (max-width: 480px) {
    .signup-wizard__flash[data-flash-kind] {
        padding: 0.625rem 0.75rem;
        font-size: 0.9375rem;
    }
    .signup-wizard__flash[data-flash-kind]::before {
        font-size: 1.125rem;
    }
}
/* Inline link inside a structured flash message (e.g. "request a new one"
   inside the stale-code error). Inherits the alert's text color so it sits
   inside the prose, but stays visibly clickable via underline + weight. */
.signup-wizard__flash-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    cursor: pointer;
}
.signup-wizard__flash-link:hover,
.signup-wizard__flash-link:focus-visible {
    text-decoration-thickness: 2px;
    outline: none;
}

/* Honeypot field — visually hidden but still in the DOM so bots fill it */
.signup-wizard__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Phase S5 — JS-injected decoy form (cloned from <template id="signup_wizard_decoy_form">).
 * Positioned off-screen so users never see it; bots scrape the DOM and submit. */
.signup-wizard__honeypot-form {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Phase S7 — password rule met/unmet states. JS toggles `met` on each <li>
 * matching one of: length, upper, lower, digit, special. Markup remains
 * authored in PHP; JS only flips classes. */
.signup-wizard__password-rules li {
    transition: color 80ms ease;
}
.signup-wizard__password-rules li.met {
    color: var(--brand-success, #198754);
    font-weight: 600;
}
.signup-wizard__password-rules li.met::before {
    content: "✓ ";
}
.signup-wizard__password-strength {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.signup-wizard__password-strength[data-strength="weak"]   { color: var(--brand-danger,  #b02a37); }
.signup-wizard__password-strength[data-strength="medium"] { color: var(--brand-warning, #b8860b); }
.signup-wizard__password-strength[data-strength="strong"] { color: var(--brand-success, #198754); }

/* Phase S6 — verify code input filled state */
.signup-wizard__code-input.is-complete {
    border-color: var(--brand-success, #198754);
    background-color: var(--brand-success-tint, #d1e7dd);
}

/* Phase S6 — resend countdown surface */
.signup-wizard__resend-countdown {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--brand-muted, #6c757d);
}

/* =====================================================================
 * Phase S4.5 — Inline Signup Dev Panel
 * Rendered above the wizard card on the live signup page when
 * signup_dev_panel_visible__G() returns true. Absent in production.
 * ===================================================================== */
.signup-dev-panel {
    max-width: 640px;
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    background: #fff8e1;
    border: 1px solid #ffd54f;
    border-radius: 6px;
    color: #5a4500;
    font-size: 0.9rem;
}

.signup-dev-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Drag/dock controls — sit at top-right of the header row. */
.signup-dev-panel__drag-handle,
.signup-dev-panel__dock-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid #d4af37;
    color: #5a4500;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    font-size: 1rem;
}
.signup-dev-panel__dock-btn { margin-left: 0; }
.signup-dev-panel__drag-handle { cursor: grab; }
.signup-dev-panel.is-dragging .signup-dev-panel__drag-handle { cursor: grabbing; }
.signup-dev-panel__drag-handle:hover,
.signup-dev-panel__dock-btn:hover { background: #fff3cd; }

/* Floating mode — fixed position, draggable, resizable. */
.signup-dev-panel.is-floating {
    position: fixed;
    z-index: 1050;
    margin: 0;
    width: 480px;
    min-width: 320px;
    min-height: 240px;
    max-width: 95vw;
    max-height: 90vh;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    resize: both;
    overflow: auto;
}
.signup-dev-panel.is-dragging { user-select: none; }

/* On narrow viewports, disable floating — the panel stays inline so it's
 * usable on phones. The buttons are hidden via the same media query. */
@media (max-width: 575.98px) {
    .signup-dev-panel.is-floating {
        position: static;
        width: auto;
        max-width: none;
        max-height: none;
        resize: none;
        box-shadow: none;
    }
    .signup-dev-panel__drag-handle,
    .signup-dev-panel__dock-btn { display: none; }
}

.signup-dev-panel__badge {
    background: #ff9800;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
}

.signup-dev-panel__sub {
    color: #7a5d00;
    font-size: 0.75rem;
}

.signup-dev-panel__sub code,
.signup-dev-panel__note code {
    background: #fff3cd;
    padding: 0 0.2rem;
    border-radius: 2px;
    font-size: 0.85em;
}

.signup-dev-panel__note {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.signup-dev-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
    /* On narrow viewports stack the buttons full-width so each is a real
     * touch target instead of cramped halves. Bootstrap utilities don't
     * cover this exact need without rewiring the markup. */
    .signup-dev-panel__actions .btn {
        flex: 1 1 100%;
    }
}

.signup-dev-panel__state {
    background: #fffdf3;
    border: 1px solid #f5e6a8;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.signup-dev-panel__state > summary {
    cursor: pointer;
    font-weight: 600;
    color: #5a4500;
    user-select: none;
}

.signup-dev-panel__state-meta {
    font-weight: 400;
    font-size: 0.75rem;
    color: #8a7000;
    margin-left: 0.5rem;
}

.signup-dev-panel__state-pre {
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    background: #1e1e1e;
    color: #e0e0e0;
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    max-height: 320px;
    overflow: auto;
    white-space: pre;
}

.signup-dev-panel__feedback {
    margin-top: 0.5rem;
    min-height: 1.25em;
    font-size: 0.85rem;
}
.signup-dev-panel__feedback[data-feedback-kind="error"]   { color: #b02a37; }
.signup-dev-panel__feedback[data-feedback-kind="success"] { color: #198754; }
.signup-dev-panel__feedback[data-feedback-kind="info"]    { color: #5a4500; }