/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Per-product theme tokens. Copy comes from ProductBranding config; colors live
   here, keyed off the data-product attribute AuthLayout sets on the shell.
   Base values double as the neutral "saundy" brand. */
.auth-shell[b-kovsmnn8yn] {
    --auth-primary: #007AFF;
    --auth-primary-hover: #006AE0;
    --auth-ring: rgba(0, 122, 255, 0.15);
    --auth-ink: #1D2536;
    --auth-line: #E4E9EE;
    --auth-muted: #6B7885;
    --auth-heading: #1F2A33;
    --auth-mark-stroke: #94A3B8;
    --auth-mark-fill: #007AFF;
    --auth-motif-stroke: #333E56;
    --auth-motif-fill: #2A5FA0;
    --auth-motif-stroke-2: #2B3448;
    --auth-motif-fill-2: #234E85;
    /* The Register brand panel is a deliberately dark marketing surface in
       both themes - its own tokens, so flipping the shell never washes it out. */
    --auth-panel-bg: #1D2536;
    --auth-panel-motif-stroke: #333E56;
    --auth-panel-motif-fill: #2A5FA0;
    --auth-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    --auth-legal: rgba(255, 255, 255, 0.45);
    --auth-legal-link: rgba(255, 255, 255, 0.65);
    --auth-legal-link-hover: #fff;
}

.auth-shell[data-product="flags"][b-kovsmnn8yn] {
    --auth-mark-stroke: #007AFF;
    --auth-mark-fill: #00D4FF;
}

.auth-shell[data-product="inspect"][b-kovsmnn8yn] {
    --auth-primary: #1E85FF;
    --auth-primary-hover: #1668CC;
    --auth-ring: rgba(30, 133, 255, 0.15);
    --auth-ink: #1F2A33;
    --auth-mark-stroke: #9BA8B4;
    --auth-mark-fill: #1E85FF;
    --auth-motif-stroke: #35454F;
    --auth-motif-fill: #2A64A6;
    --auth-motif-stroke-2: #2E3E48;
    --auth-motif-fill-2: #24547F;
    --auth-panel-bg: #1F2A33;
    --auth-panel-motif-stroke: #35454F;
    --auth-panel-motif-fill: #2A64A6;
}

.auth-shell[data-product="loop"][b-kovsmnn8yn] {
    --auth-primary: #7C3AED;
    --auth-primary-hover: #6D28D9;
    --auth-ring: rgba(124, 58, 237, 0.15);
    --auth-ink: #221E33;
    --auth-mark-stroke: #007AFF;
    --auth-mark-fill: #00D4FF;
    --auth-motif-stroke: #3A3450;
    --auth-motif-fill: #5B3FA8;
    --auth-motif-stroke-2: #302B42;
    --auth-motif-fill-2: #4C3590;
    --auth-panel-bg: #221E33;
    --auth-panel-motif-stroke: #3A3450;
    --auth-panel-motif-fill: #5B3FA8;
}

/* LIGHT SHELL - <html data-bs-theme> follows the browser (App.razor's inline
   script; there is no signed-in user to carry a stored choice). The cards are
   light in both modes (they opt in with data-bs-theme="light"), so only the
   ink behind them, the corner motifs, the card shadow and the legal links
   change. Motif tints sit just off the backdrop, as they do on dark. */
:root[data-bs-theme="light"] .auth-shell[b-kovsmnn8yn] {
    --auth-ink: #E9EEF5;
    --auth-motif-stroke: #C9D3E0;
    --auth-motif-fill: #A9C3E4;
    --auth-motif-stroke-2: #D3DBE6;
    --auth-motif-fill-2: #B7CDE9;
    --auth-card-shadow: 0 0 0 1px rgba(30, 42, 68, 0.06), 0 20px 50px rgba(30, 42, 68, 0.14);
    --auth-legal: rgba(30, 42, 68, 0.55);
    --auth-legal-link: rgba(30, 42, 68, 0.75);
    --auth-legal-link-hover: #1E2A44;
}

:root[data-bs-theme="light"] .auth-shell[data-product="loop"][b-kovsmnn8yn] {
    --auth-motif-fill: #C4B5EC;
    --auth-motif-fill-2: #CFC2EF;
}

/* SHELL — flat ink backdrop; flex column so legal links sit in normal flow
   below the content and tall cards push the page to scroll instead of clipping. */
.auth-shell[b-kovsmnn8yn] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--auth-ink);
    overflow-x: clip;
    position: relative;
}

/* Corner motifs (viewport-pinned, behind everything) */
.auth-motif[b-kovsmnn8yn] {
    position: fixed;
    z-index: 0;
    pointer-events: none;
}

.auth-motif-br[b-kovsmnn8yn] { right: -60px; bottom: -70px; width: 440px; opacity: 0.55; }
.auth-motif-tl[b-kovsmnn8yn] { left: -50px; top: -60px; width: 360px; opacity: 0.4; }

.auth-motif[b-kovsmnn8yn]  svg { width: 100%; height: auto; display: block; }
.auth-motif-br[b-kovsmnn8yn]  .mark-stroke { stroke: var(--auth-motif-stroke); }
.auth-motif-br[b-kovsmnn8yn]  .mark-fill { fill: var(--auth-motif-fill); }
.auth-motif-tl[b-kovsmnn8yn]  .mark-stroke { stroke: var(--auth-motif-stroke-2); }
.auth-motif-tl[b-kovsmnn8yn]  .mark-fill { fill: var(--auth-motif-fill-2); }

@media (max-width: 640px) {
    .auth-motif[b-kovsmnn8yn] { display: none; }
}

/* CONTAINER (page-owned) — centered card page */
[b-kovsmnn8yn] .auth-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 24px 24px;
    position: relative;
    z-index: 1;
}

/* CARD */
[b-kovsmnn8yn] .auth-card {
    width: 100%;
    max-width: 468px;
    padding: 56px 52px 46px;
    background: #fff;
    color: #1e293b;
    border-radius: 18px;
    box-shadow: var(--auth-card-shadow);
    animation: rise-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (max-width: 480px) {
    [b-kovsmnn8yn] .auth-card { padding: 36px 24px 30px; }
}

/* LOGO ROW */
[b-kovsmnn8yn] .auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px;
}

[b-kovsmnn8yn] .auth-logo-left { justify-content: flex-start; }
[b-kovsmnn8yn] .auth-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
[b-kovsmnn8yn] .auth-logo .mark-stroke { stroke: var(--auth-mark-stroke); }
[b-kovsmnn8yn] .auth-logo .mark-fill { fill: var(--auth-mark-fill); }

[b-kovsmnn8yn] .auth-wordmark {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--auth-heading);
}

[b-kovsmnn8yn] .auth-wordmark-accent { color: var(--auth-primary); }

/* HEADER */
[b-kovsmnn8yn] .auth-header { text-align: center; margin-bottom: 30px; }

[b-kovsmnn8yn] .auth-header h2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 600;
    color: var(--auth-heading);
    letter-spacing: -0.4px;
}

[b-kovsmnn8yn] .auth-header p { margin: 8px 0 0; font-size: 14.5px; color: var(--auth-muted); }

/* Plain-copy body used by the Login SSO state, Verify, and CheckEmail */
[b-kovsmnn8yn] .auth-body {
    font-size: 14.5px;
    color: var(--auth-muted);
    text-align: center;
    margin-bottom: 8px;
}

/* FORM */
[b-kovsmnn8yn] .form-group { margin-bottom: 18px; }

[b-kovsmnn8yn] .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
}

[b-kovsmnn8yn] .form-control {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-size: 15px;
    border: 1px solid var(--auth-line);
    border-radius: 11px;
    background: #fff;
    color: var(--auth-heading);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-kovsmnn8yn] .form-control:focus {
    outline: none;
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px var(--auth-ring);
}

/* Password field with the in-field Show/Hide text toggle */
[b-kovsmnn8yn] .password-field { position: relative; }
[b-kovsmnn8yn] .password-field .form-control { padding-right: 64px; }

[b-kovsmnn8yn] .pw-toggle {
    position: absolute;
    right: 8px;
    top: 26px;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--auth-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 10px;
    cursor: pointer;
}

[b-kovsmnn8yn] .pw-toggle:hover { color: var(--auth-primary); }

[b-kovsmnn8yn] .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    margin: 4px 0 24px;
}

[b-kovsmnn8yn] .form-options a { color: var(--auth-primary); text-decoration: none; font-weight: 500; }
[b-kovsmnn8yn] .form-options a:hover { text-decoration: underline; }

[b-kovsmnn8yn] .form-check { display: flex; align-items: center; gap: 8px; color: var(--auth-muted); }
[b-kovsmnn8yn] input[type="checkbox"] { accent-color: var(--auth-primary); }

[b-kovsmnn8yn] .form-check-input:checked {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
}

/* BUTTON */
[b-kovsmnn8yn] .btn-main {
    width: 100%;
    height: 52px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: var(--auth-primary);
    border: none;
    color: white;
    border-radius: 11px;
    transition: background 0.15s ease, transform 0.15s ease;
}

[b-kovsmnn8yn] .btn-main:hover { background: var(--auth-primary-hover); transform: translateY(-1px); }
[b-kovsmnn8yn] .btn-main:active { transform: scale(0.99); }
[b-kovsmnn8yn] .btn-main:disabled { opacity: 0.65; cursor: default; transform: none; }

/* LINKS + SMALLPRINT */
[b-kovsmnn8yn] .auth-link { text-align: center; margin-top: 26px; font-size: 14px; color: var(--auth-muted); }
[b-kovsmnn8yn] .auth-link a { color: var(--auth-primary); text-decoration: none; font-weight: 500; }
[b-kovsmnn8yn] .auth-link a:hover { text-decoration: underline; }

[b-kovsmnn8yn] .form-smallprint { margin: 0 0 16px; font-size: 12.5px; color: var(--auth-muted); line-height: 1.6; }
[b-kovsmnn8yn] .form-smallprint a { color: var(--auth-primary); text-decoration: none; }
[b-kovsmnn8yn] .form-smallprint a:hover { text-decoration: underline; }

/* Terms-acceptance checkbox row on account-creation forms */
[b-kovsmnn8yn] .form-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 13px;
    color: #334155;
}

[b-kovsmnn8yn] .form-consent input[type="checkbox"] { margin-top: 2px; }
[b-kovsmnn8yn] .form-consent a { color: var(--auth-primary); text-decoration: none; }
[b-kovsmnn8yn] .form-consent a:hover { text-decoration: underline; }

/* ERRORS + VALIDATION */
[b-kovsmnn8yn] .form-error {
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #B4231C;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

[b-kovsmnn8yn] .validation-message {
    display: block;
    color: #C2362F;
    font-size: 12.5px;
    margin-top: 6px;
}

/* app.css paints global .invalid/.valid outlines for the dark portal; on the
   light card the border + focus ring carry that signal instead. */
[b-kovsmnn8yn] .form-control.invalid {
    outline: none;
    border-color: rgba(220, 38, 38, 0.5);
}

[b-kovsmnn8yn] .form-control.valid.modified { outline: none; }

/* REGISTER SPLIT — full-bleed 50/50; brand panel collapses on small screens */
[b-kovsmnn8yn] .auth-split {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    position: relative;
    z-index: 1;
}

[b-kovsmnn8yn] .auth-split-form {
    background: #fff;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
}

[b-kovsmnn8yn] .auth-form-inner { width: 100%; max-width: 404px; }

[b-kovsmnn8yn] .auth-split .auth-header { text-align: left; }
[b-kovsmnn8yn] .auth-split .auth-header h2 { font-size: 27px; }

[b-kovsmnn8yn] .auth-split-brand {
    position: relative;
    overflow: hidden;
    background: var(--auth-panel-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 60px;
}

[b-kovsmnn8yn] .brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

[b-kovsmnn8yn] .brand-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--auth-primary);
}

[b-kovsmnn8yn] .brand-tagline {
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 24px 0 0;
    max-width: 420px;
    color: #fff;
}

[b-kovsmnn8yn] .brand-tagline span { color: var(--auth-primary); font-weight: 600; }

[b-kovsmnn8yn] .brand-desc {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 400px;
}

[b-kovsmnn8yn] .brand-features {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-kovsmnn8yn] .brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

[b-kovsmnn8yn] .brand-features svg { stroke: var(--auth-primary); flex-shrink: 0; margin-top: 2px; }

[b-kovsmnn8yn] .brand-price {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 400px;
}

[b-kovsmnn8yn] .auth-motif-panel {
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 420px;
    opacity: 0.5;
    pointer-events: none;
}

[b-kovsmnn8yn] .auth-motif-panel svg { width: 100%; height: auto; display: block; }
[b-kovsmnn8yn] .auth-motif-panel .mark-stroke { stroke: var(--auth-panel-motif-stroke); }
[b-kovsmnn8yn] .auth-motif-panel .mark-fill { fill: var(--auth-panel-motif-fill); }

@media (max-width: 880px) {
    [b-kovsmnn8yn] .auth-split { display: flex; }
    [b-kovsmnn8yn] .auth-split-brand { display: none; }
    [b-kovsmnn8yn] .auth-split-form { flex: 1; padding: 40px 20px; }
}

/* LEGAL — normal flow at the bottom of the shell's flex column */
.auth-legal[b-kovsmnn8yn] {
    padding: 18px 0 22px;
    text-align: center;
    font-size: 12px;
    color: var(--auth-legal);
    position: relative;
    z-index: 1;
}

.auth-legal a[b-kovsmnn8yn] {
    color: var(--auth-legal-link);
    text-decoration: none;
    margin: 0 6px;
}

.auth-legal a:hover[b-kovsmnn8yn] { color: var(--auth-legal-link-hover); text-decoration: underline; }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-95paayjlx3],
.components-reconnect-repeated-attempt-visible[b-95paayjlx3],
.components-reconnect-failed-visible[b-95paayjlx3],
.components-pause-visible[b-95paayjlx3],
.components-resume-failed-visible[b-95paayjlx3],
.components-rejoining-animation[b-95paayjlx3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-retrying[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-failed[b-95paayjlx3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-95paayjlx3] {
    display: block;
}


#components-reconnect-modal[b-95paayjlx3] {
    /* Surface tokens from app.css, so the light layer re-pointing them
       restyles this dialog too (it has no data-bs-theme of its own). */
    background-color: var(--saundy-surface-1);
    color: var(--saundy-text-light);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(30, 42, 68, 0.25), 0 0 0 1px var(--saundy-surface-border);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-95paayjlx3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-95paayjlx3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-95paayjlx3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-95paayjlx3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-95paayjlx3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-95paayjlx3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-95paayjlx3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-95paayjlx3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-95paayjlx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-95paayjlx3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-95paayjlx3] {
    border: 0;
    background-color: #007AFF;
    color: white;
    padding: 4px 24px;
    border-radius: 6px;
}

    #components-reconnect-modal button:hover[b-95paayjlx3] {
        background-color: #006AE0;
    }

    #components-reconnect-modal button:active[b-95paayjlx3] {
        background-color: #007AFF;
    }

.components-rejoining-animation[b-95paayjlx3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-95paayjlx3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-95paayjlx3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-95paayjlx3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-95paayjlx3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}