/*
 * nrich-dialog.css - the estate's one dialog system (cc-spec-dialog-system-fix).
 *
 * Self-contained, like nrich-consent.css: the static lobby pages don't load variables.css or
 * components.css, so every token a dialog needs is defined here. Linked from _Layout and from
 * every static page that can open an overlay.
 *
 * Geometry: dialogs are TOP-ALIGNED, never vertically centred. The card's top edge sits at
 * --dialog-top-offset whatever its height, so consecutive dialogs line up and growth extends
 * downward. A card taller than the viewport allows is capped and its body scrolls under a
 * header that stays put.
 *
 * Theme: light on :root, dark under body[data-theme="dark"] - the app theme only. Nothing here
 * (or in any dialog) consults prefers-color-scheme. Razor renders body[data-theme] server-side;
 * each static lobby file declares the theme of its own variant.
 */

:root {
    --dialog-top-offset: max(24px, 10vh);
    --dialog-gutter: 16px;
    --dialog-bottom-gap: 24px;
    --dialog-width: min(420px, calc(100vw - 2 * var(--dialog-gutter)));
    --dialog-max-height: calc(100vh - var(--dialog-top-offset) - var(--dialog-bottom-gap));
    --dialog-radius: 16px;
    --dialog-padding: 2rem;
    --dialog-z: 10000;
    --dialog-scrim: rgba(0, 0, 0, 0.6);
    --dialog-scrim-blur: 4px;
    --dialog-font: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Title type, also borrowed by in-stream headings that should read as a dialog title
       (the post-six-track card, components.css .full-survey-card-title) */
    --dialog-title-size: 1.5rem;
    --dialog-title-weight: 600;
    --dialog-title-line-height: 1.3;

    --dialog-surface: #ffffff;
    --dialog-surface-raised: #f3f4f6;
    --dialog-input-bg: #f9fafb;
    --dialog-text: #1f2937;
    --dialog-text-muted: #6b7280;
    --dialog-border: rgba(0, 0, 0, 0.1);
    --dialog-hover: rgba(0, 0, 0, 0.05);
    --dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --dialog-accent: #6366f1;
    --dialog-accent-hover: #4f46e5;
    --dialog-on-accent: #ffffff;
    --dialog-chip-bg: rgba(168, 85, 247, 0.1);
    --dialog-chip-fg: #a855f7;
    --dialog-success: #16a34a;
    --dialog-error: #dc2626;
    /* Icon-chip variants (InfoModal icon: 'success' | 'warning' | 'info' | 'celebrate') */
    --dialog-chip-success: #22c55e;
    --dialog-chip-warning: #f59e0b;
    --dialog-chip-info: #3b82f6;
}

@supports (height: 100dvh) {
    :root {
        --dialog-max-height: calc(100dvh - var(--dialog-top-offset) - var(--dialog-bottom-gap));
    }
}

/* Short and narrow screens spend their height on content, not on the offset above the card. */
@media (max-height: 740px), (max-width: 480px) {
    :root {
        --dialog-top-offset: 16px;
    }
}

body[data-theme="dark"] {
    --dialog-surface: #1f2937;
    --dialog-surface-raised: rgba(255, 255, 255, 0.06);
    --dialog-input-bg: #111827;
    --dialog-text: #f9fafb;
    --dialog-text-muted: #9ca3af;
    --dialog-border: rgba(255, 255, 255, 0.1);
    --dialog-hover: rgba(255, 255, 255, 0.06);
    --dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --dialog-chip-bg: rgba(168, 85, 247, 0.15);
    --dialog-success: #22c55e;
    --dialog-error: #ef4444;
}

/* ---------- Overlay + card ---------- */

.nr-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--dialog-z);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--dialog-top-offset) var(--dialog-gutter) var(--dialog-bottom-gap);
    box-sizing: border-box;
    background: var(--dialog-scrim);
    backdrop-filter: blur(var(--dialog-scrim-blur));
    -webkit-backdrop-filter: blur(var(--dialog-scrim-blur));
    overflow: hidden;
}

/* Size to the device viewport on phones: mobile browsers widen the layout viewport (and any
   inset: 0 fixed box) when page content overflows. Viewport units stay tied to the device. */
@media (max-width: 480px) {
    .nr-dialog-overlay {
        right: auto;
        bottom: auto;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
    }
}

.nr-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--dialog-width);
    max-width: none;
    max-height: var(--dialog-max-height);
    margin: 0;
    padding: var(--dialog-padding);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--dialog-surface);
    color: var(--dialog-text);
    border: 1px solid var(--dialog-border);
    border-radius: var(--dialog-radius);
    box-shadow: var(--dialog-shadow);
    font-family: var(--dialog-font);
    text-align: left;
}

/* Wide variant for content-rich dialogs whose controls would otherwise fall below the fold
   (the SLM survey intro). Decision dialogs stay at the standard 420px. */
.nr-dialog.nr-dialog--wide {
    --dialog-width: min(640px, calc(100vw - 2 * var(--dialog-gutter)));
}

@media (max-width: 480px) {
    .nr-dialog {
        --dialog-padding: 1.5rem;
        border-radius: 12px;
    }
}

/* Optional fade: hidden until .active (for overlays that animate in by toggling a class). */
.nr-dialog-overlay.nr-dialog-fade {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .nr-dialog-overlay.nr-dialog-fade.active {
        opacity: 1;
        visibility: visible;
    }

/* Header stays put; everything after it scrolls when the card is capped. */
.nr-dialog-head {
    flex: 0 0 auto;
}

.nr-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.nr-dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--dialog-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .nr-dialog-close:hover {
        background: var(--dialog-hover);
        color: var(--dialog-text);
    }

    .nr-dialog-close svg {
        width: 20px;
        height: 20px;
    }

.nr-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--dialog-chip-bg);
    color: var(--dialog-chip-fg);
    font-size: 32px;
    line-height: 1;
}

    .nr-dialog-icon svg {
        width: 32px;
        height: 32px;
    }

.nr-dialog-title {
    margin: 0 0 0.5rem;
    color: var(--dialog-text);
    font-size: var(--dialog-title-size);
    font-weight: var(--dialog-title-weight);
    line-height: var(--dialog-title-line-height);
    text-align: center;
}

.nr-dialog-subtitle {
    margin: 0 0 1.25rem;
    color: var(--dialog-text-muted);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.nr-dialog-text {
    color: var(--dialog-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

    .nr-dialog-text p {
        margin: 0 0 1rem;
    }

        .nr-dialog-text p:last-child {
            margin-bottom: 0;
        }

    .nr-dialog-text ul {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
    }

    .nr-dialog-text li {
        margin-bottom: 0.5rem;
    }

/* Stacked CTAs: primary filled above quiet secondary. */
.nr-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.nr-dialog-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nr-dialog-btn-primary {
    background: var(--dialog-accent);
    color: var(--dialog-on-accent);
}

    .nr-dialog-btn-primary:hover {
        background: var(--dialog-accent-hover);
    }

.nr-dialog-btn-secondary {
    background: var(--dialog-surface-raised);
    border-color: var(--dialog-border);
    color: var(--dialog-text);
}

    .nr-dialog-btn-secondary:hover {
        background: var(--dialog-hover);
    }

.nr-dialog-btn-link {
    background: transparent;
    color: var(--dialog-accent);
    padding: 0.5rem;
}

    .nr-dialog-btn-link:hover {
        text-decoration: underline;
    }

.nr-dialog-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Inline error under a field. */
.nr-dialog-error {
    margin-top: 0.35rem;
    color: var(--dialog-error);
    font-size: 0.85rem;
}

/* Spinner-only states (loading gate, session check). */
.nr-dialog-spinner {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 3px solid var(--dialog-border);
    border-top-color: var(--dialog-accent);
    border-radius: 50%;
    animation: nr-dialog-spin 1s linear infinite;
}

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

/* Small spinner inside a filled button (e.g. the hero player's "Generating your profile"). */
.slm-completion-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    vertical-align: middle;
    border: 2px solid color-mix(in srgb, var(--dialog-on-accent) 30%, transparent);
    border-top-color: var(--dialog-on-accent);
    border-radius: 50%;
    animation: nr-dialog-spin 0.8s linear infinite;
}

/* Anchored popovers (not dialogs) borrow the surface tokens only. */
.nr-popover-surface {
    background: var(--dialog-surface);
    color: var(--dialog-text);
    border: 1px solid var(--dialog-border);
    box-shadow: var(--dialog-shadow);
}

/* ---------- InfoModal (info-modal.js) ---------- */

.info-modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .info-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .info-modal-overlay .info-modal {
        transform: translateY(10px);
        transition: transform 0.3s ease;
    }

    .info-modal-overlay.active .info-modal {
        transform: translateY(0);
    }

.info-modal-icon.success,
.info-modal-icon.warning,
.info-modal-icon.info {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.info-modal-icon.success {
    color: var(--dialog-chip-success);
}

.info-modal-icon.warning {
    color: var(--dialog-chip-warning);
}

.info-modal-icon.info {
    color: var(--dialog-chip-info);
}

.info-modal-header {
    padding: 0 1.5rem;
}

/* ---------- Storage warning (storage-health-check.js) ---------- */

.storage-warning-icon {
    color: var(--dialog-chip-warning);
    background: color-mix(in srgb, var(--dialog-chip-warning) 12%, transparent);
    font-weight: 700;
}

.nr-dialog-text p.storage-warning-details {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: var(--dialog-surface-raised);
    font-size: 0.875rem;
    white-space: pre-line;
}

.nr-dialog-text p.storage-warning-action {
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.storage-warning-tech {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--dialog-surface-raised);
    color: var(--dialog-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
}

/* ---------- LinkedIn in-app-browser modal (linkedin-webview-guard.js) ---------- */

.linkedin-modal-steps {
    margin: 0.5rem 0 1rem;
    padding-left: 1.5rem;
}

    .linkedin-modal-steps li {
        margin-bottom: 0.75rem;
    }

    .linkedin-modal-steps strong {
        color: var(--dialog-text);
    }

.nr-dialog-text p.linkedin-modal-alt {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dialog-border);
    font-size: 0.9rem;
}

.nr-dialog-text p.linkedin-modal-confirmation {
    display: none;
    margin: 1rem 0 0;
    color: var(--dialog-success);
    font-size: 0.9rem;
    text-align: center;
}

/* ---------- Auth gate (auth-gate.js) ----------
   Previously in components.css, eight lobby stylesheets and auth-gate.js's injected <style>.
   Geometry and colours come from .nr-dialog; these are the gate's own parts. */

.signup-gate-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .signup-gate-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .signup-gate-overlay .signup-gate {
        animation: nr-dialog-rise 0.3s ease;
    }

@keyframes nr-dialog-rise {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.signup-gate-header {
    text-align: center;
    margin-bottom: 1.25rem;
    padding: 0 1.5rem;
}

    .signup-gate-header h3 {
        margin: 0 0 0.5rem;
        color: var(--dialog-text);
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .signup-gate-header p {
        margin: 0;
        color: var(--dialog-text-muted);
        font-size: 0.95rem;
        line-height: 1.5;
    }

.signup-gate-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.signup-gate-input,
.nr-dialog-input {
    width: 100%;
    padding: 0.8rem 1rem;
    box-sizing: border-box;
    background: var(--dialog-input-bg);
    border: 1px solid var(--dialog-border);
    border-radius: 10px;
    color: var(--dialog-text);
    font-family: inherit;
    font-size: 1rem;
}

    .signup-gate-input:focus,
    .nr-dialog-input:focus {
        outline: none;
        border-color: var(--dialog-accent);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }

    .signup-gate-input::placeholder,
    .nr-dialog-input::placeholder {
        color: var(--dialog-text-muted);
        opacity: 0.8;
    }

.signup-gate-submit {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--dialog-accent);
    border: none;
    border-radius: 10px;
    color: var(--dialog-on-accent);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .signup-gate-submit:hover {
        background: var(--dialog-accent-hover);
    }

    .signup-gate-submit:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.signup-gate-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.25rem 0;
}

    .signup-gate-divider span {
        color: var(--dialog-text-muted);
        font-size: 0.85rem;
    }

    .signup-gate-divider::before,
    .signup-gate-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--dialog-border);
    }

.signup-gate-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--dialog-surface-raised);
    border: 1px solid var(--dialog-border);
    border-radius: 10px;
    color: var(--dialog-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .signup-gate-google:hover {
        background: var(--dialog-hover);
    }

    .signup-gate-google svg {
        width: 18px;
        height: 18px;
    }

/* Soft gate: Google and the dismiss share one row, so the decline path is visible whenever
   the accept path is, at every size. Google sizes to its label; the dismiss takes the rest
   (all of it on the password step, where Google is hidden). Wraps only on screens too narrow
   for both, which keeps the dismiss directly under Google rather than off the card edge. */
.signup-gate-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .signup-gate-pair > .signup-gate-google {
        flex: 0 0 auto;
        width: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        white-space: nowrap;
    }

.signup-gate-secondary {
    flex: 1 1 auto;
    padding: 0.875rem 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--dialog-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

    .signup-gate-secondary:hover {
        background: var(--dialog-hover);
    }

.signup-gate-skip {
    text-align: center;
    margin-top: 0.5rem;
}

    .signup-gate-skip button {
        background: none;
        border: none;
        color: var(--dialog-text-muted);
        font-family: inherit;
        font-size: 0.875rem;
        text-decoration: underline;
        cursor: pointer;
    }

        .signup-gate-skip button:hover {
            color: var(--dialog-text);
        }

.signup-gate-message {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

    .signup-gate-message.success {
        color: var(--dialog-success);
    }

    .signup-gate-message.error {
        color: var(--dialog-error);
    }

    /* "Check your email" panel - stays until dismissed. Its own colour pair on purpose:
       #14532d on #dcfce7 is 8.3:1 in either theme. */
    .signup-gate-message.notice {
        margin: 0.25rem 0 1.25rem;
        padding: 1rem;
        border-radius: 10px;
        background: #dcfce7;
        border: 1px solid #86efac;
        color: #14532d;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.45;
    }

.signup-gate-professional-note {
    margin-top: 1rem;
    color: var(--dialog-success);
    font-size: 0.9rem;
    text-align: center;
}

.signup-gate-password-row {
    position: relative;
}

    .signup-gate-password-row .signup-gate-input {
        padding-right: 2.75rem;
    }

.signup-gate-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--dialog-text-muted);
    cursor: pointer;
}

    .signup-gate-password-toggle:hover {
        color: var(--dialog-text);
    }

    .signup-gate-password-toggle svg {
        width: 20px;
        height: 20px;
    }

.signup-gate-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    min-height: 120px;
}

.signup-gate-loading-message {
    margin-top: 1rem;
    color: var(--dialog-text-muted);
    font-size: 1rem;
}

.auth-gate-spinner {
    width: 40px;
    height: 40px;
    color: var(--dialog-accent);
    animation: nr-dialog-spin 1s linear infinite;
}

.auth-gate-spinner-inline {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}

.signup-gate-benefits {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

    .signup-gate-benefits li {
        position: relative;
        padding: 8px 0 8px 28px;
        color: var(--dialog-text-muted);
        font-size: 0.95rem;
    }

        .signup-gate-benefits li::before {
            content: '\2713';
            position: absolute;
            left: 0;
            color: var(--dialog-success);
            font-weight: bold;
        }