/* ShareView login v2 — two-pane brand navy/cyan design.
   Tokens sampled from the product logo and companion apps (see docs of the
   Claude Design "ui-v2" project). Self-contained: does not depend on the
   Tailwind build. */

:root {
    --sv-navy: #13406a;
    --sv-cyan: #01a5e5;
    --sv-mid: #1d6cb0;
    --sv-sky: #4ec0ee;
    --sv-deep: #0a2548;
    --sv-bg: #0c1530;
    --sv-bg2: #131e3e;
    --sv-bg3: #1a2952;
    --sv-grad-cta: linear-gradient(90deg, #0e2a4c 0%, #1d6cb0 50%, #2a9ddc 100%);
}

/* ---- Shell ------------------------------------------------------------- */

.sv-login {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sv-bg);
    color: #eaf1fb;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* One shared swirl backdrop bleeding behind both panes (visible on all
   screen sizes, including when the QR side pane is hidden). */
.sv-login::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Dedicated cropped asset — new filename so deploys never collide with
       cached copies of the original shareview-background.png. */
    background-image: url("/img/shareview-background-cropped.png");
    /* Single-pane: cover keeps the art's hard edges off-canvas on small
       screens. The two-pane breakpoint overrides this to 60% below. */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
    /* Dimmer in single-pane so the form keeps contrast over the art; the
       two-pane breakpoint restores 0.66 behind the QR pane. */
    opacity: 0.45;
    pointer-events: none;
}

.sv-login * {
    box-sizing: border-box;
}

.sv-login a {
    color: var(--sv-sky);
    font-weight: 600;
    text-decoration: none;
}

.sv-login a:hover {
    color: #8fd8f6;
    text-decoration: underline;
}

.sv-login-pane {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 48px;
}

.sv-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    text-decoration: none;
}

.sv-login-brand:hover {
    text-decoration: none;
}

.sv-login-brand img {
    width: 30px;
    height: 30px;
    display: block;
}

.sv-login-brand span {
    font-weight: 700;
    font-size: 20px;
    color: #eaf1fb;
    letter-spacing: -0.01em;
}

.sv-login-brand sup {
    font-size: 0.5em;
    font-weight: 400;
    margin-left: 2px;
}

.sv-login-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 28px 0;
}

.sv-login-footer {
    font-size: 13px;
    color: #5e6b85;
    text-align: center;
}

/* ---- Headings ---------------------------------------------------------- */

.sv-login-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #f4f8ff;
    letter-spacing: -0.02em;
}

.sv-login-subtitle {
    margin: 9px 0 30px;
    font-size: 16px;
    color: #9fb0cc;
}

.sv-login-subtitle strong {
    color: #dbe4f3;
    font-weight: 600;
}

/* ---- Form primitives --------------------------------------------------- */

.sv-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sv-field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.sv-field-head label,
.sv-field-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #dbe4f3;
    letter-spacing: 0.005em;
}

.sv-field-head a {
    font-size: 14px;
}

.sv-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #eaf1fb;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sv-input::placeholder {
    color: #6b7a97;
}

.sv-input:focus {
    border-color: var(--sv-cyan);
    box-shadow: 0 0 0 3px rgba(1, 165, 229, 0.18);
}

.sv-input-code {
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.sv-btn-primary {
    width: 100%;
    height: 50px;
    border-radius: 9px;
    font-size: 16.5px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    letter-spacing: 0.005em;
    cursor: pointer;
    /* Same border as .sv-btn-ghost so the two buttons read as one family.
       Clip the fill to the padding box so the gradient doesn't bleed under
       the translucent border and tint it blue. */
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--sv-grad-cta) padding-box;
    transition: filter 0.15s, box-shadow 0.15s;
}

.sv-btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 20px rgba(1, 165, 229, 0.35);
}

.sv-btn-ghost {
    width: 100%;
    height: 50px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: #dbe4f3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.15s;
}

.sv-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sv-btn-ghost svg {
    flex: 0 0 auto;
}

.sv-btn-primary:disabled,
.sv-btn-ghost:disabled,
.sv-btn-primary[aria-disabled="true"],
.sv-btn-ghost[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Gate submit on client-side validity (carried over from the legacy layout). */
.sv-login form:has(:invalid) button[type="submit"] {
    pointer-events: none;
    opacity: 0.5;
}

/* ---- Checkbox ---------------------------------------------------------- */

.sv-check-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    margin-top: -2px;
}

.sv-check-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 5px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: all 0.12s;
}

.sv-check-row input[type="checkbox"]:checked {
    background-color: var(--sv-cyan);
    border-color: var(--sv-cyan);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a1226' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.sv-check-row input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 165, 229, 0.18);
}

.sv-check-row span,
.sv-check-row label {
    font-size: 15px;
    color: #b7c4dc;
    cursor: pointer;
}

/* ---- Divider / helper text --------------------------------------------- */

.sv-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7c8aa6;
    font-size: 14px;
    margin: 2px 0;
}

.sv-divider::before,
.sv-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
}

.sv-option-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sv-instruction {
    margin: 0 0 24px;
    font-size: 15px;
    color: #b7c4dc;
}

.sv-instruction strong {
    display: block;
    margin-top: 10px;
    color: #eaf1fb;
    font-weight: 600;
}

.sv-form-hint {
    text-align: center;
    font-size: 15px;
    color: #b7c4dc;
    margin: 2px 0 0;
}

.sv-muted {
    font-size: 14px;
    color: #9fb0cc;
}

/* ---- Validation / status messages -------------------------------------- */

.sv-error,
.sv-error li {
    color: #e98280;
    font-size: 14px;
}

.sv-error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-status-notice {
    font-size: 14px;
    color: #fcd34d;
    background: rgba(217, 119, 6, 0.15);
    border: 1px solid rgba(217, 119, 6, 0.55);
    border-radius: 9px;
    padding: 10px 12px;
}

/* ---- Side pane (brand / SafeShield QR) --------------------------------- */

.sv-login-side {
    display: none;
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    /* Translucent tint so the shared shell backdrop bleeds through. */
    background: linear-gradient(155deg, rgba(19, 64, 106, 0.60) 0%, rgba(14, 42, 76, 0.45) 45%, rgba(10, 31, 61, 0.35) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.sv-login-side::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 50% 30%, rgba(1, 165, 229, 0.18) 0%, rgba(1, 165, 229, 0) 70%);
}

.sv-login-side > * {
    position: relative;
    z-index: 1;
}

/* Matches the eligibility media query in badge-login.js. */
@media (min-width: 1200px) and (min-height: 680px) and (orientation: landscape) {
    .sv-login-side {
        display: flex;
    }

    /* In two-pane mode the form pane goes solid — the shared swirl backdrop
       only shows behind the QR side pane. Single-pane keeps the bleed. */
    .sv-login-pane {
        background: var(--sv-bg);
    }

    .sv-login::before {
        background-size: 60%;
        opacity: 0.66;
    }
}

/* ---- SafeShield QR panel ----------------------------------------------- */

.sv-safeshield {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #eaf1fb;
    padding: 24px;
}

.sv-safeshield-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.sv-safeshield-title svg {
    flex: 0 0 auto;
}

.sv-safeshield-sub {
    margin: 8px 0 0;
    font-size: 16px;
    color: #aebbd4;
    max-width: 280px;
}

.sv-qr-frame {
    display: grid;
    place-items: center;
    width: 248px;
    aspect-ratio: 1;
    margin-top: 26px;
    padding: 16px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    color: #0a1226;
}

.sv-qr-frame svg {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}

.sv-qr-frame.is-expired {
    opacity: 0.42;
    filter: grayscale(1);
}

.sv-safeshield-meta {
    display: grid;
    gap: 4px;
    margin-top: 24px;
    text-align: center;
}

.sv-safeshield-meta p {
    margin: 0;
    font-size: 15.5px;
    color: #aebbd4;
}

.sv-safeshield-meta strong {
    color: #eaf1fb;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
    .sv-login-pane {
        padding: 24px;
    }

    .sv-login-title {
        font-size: 26px;
    }
}