/*
 * SiteLyns sign-in / sign-up page (resources/views/auth/login.blade.php + resources/views/auth/partials/*).
 * Self-contained: no Bootstrap. The view overrides the brand tokens (--sl-accent, --sl-link, --sl-btn-*) for client hosts.
 */
:root {
    --sl-bg: #0d1a2c;
    --sl-bg-deep: #08111f;
    --sl-text: #ffffff;
    --sl-text-soft: rgba(255, 255, 255, 0.88);
    --sl-text-muted: rgba(255, 255, 255, 0.74);
    --sl-accent: #F05A22;            /* card title (large text) and divider */
    --sl-link: #FF7240;              /* links / small accent text on the dark card (>= 4.5:1) */
    --sl-btn-bg: #D2460D;            /* primary button: white text >= 4.5:1 */
    --sl-btn-text: #ffffff;
    --sl-glow: rgba(240, 90, 34, 0.24);
    --sl-focus: #FFB38F;
    --sl-card-bg: rgba(27, 39, 57, 0.64);
    --sl-card-border: rgba(255, 255, 255, 0.26);
    --sl-input-bg: #ffffff;
    --sl-input-text: #141c2b;
    --sl-input-border: #d5dae3;
    --sl-placeholder: #6b7280;
    --sl-error: #FFA094;
    --sl-error-border: #f04438;
    --sl-success: #4ADE80;
    --sl-radius-card: 12px;
    --sl-radius-input: 8px;
    --sl-font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sl-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sl-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    /* the space the cookie banner reserves at the bottom while it is shown (set by sitelyns-auth.js): the page uses
       the rest of the window, so it fits instead of scrolling by the banner's height */
    --sl-reserve: 0px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sl-auth {
    position: relative;
    margin: 0;
    min-height: 100vh;
    background-color: var(--sl-bg);
    color: var(--sl-text);
    font-family: var(--sl-font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sl-auth [hidden] {
    display: none !important;
}

.sl-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sl-auth :focus {
    outline: none;
}

.sl-auth :focus-visible {
    outline: 3px solid var(--sl-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ background */

.sl-bg {
    position: absolute;  /* the whole page height (body is relative), so a long signup card stays on the background */
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 80% 28%, rgba(240, 90, 34, 0.09), transparent 62%),
        radial-gradient(1100px 760px at 8% 96%, rgba(48, 92, 160, 0.22), transparent 64%),
        radial-gradient(800px 520px at 30% 10%, rgba(42, 72, 120, 0.25), transparent 60%),
        linear-gradient(160deg, #10223a 0%, var(--sl-bg) 46%, var(--sl-bg-deep) 100%);
}

.sl-bg__image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.32;
}

.sl-bg__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(13, 26, 44, 0.78), rgba(8, 17, 31, 0.9));
}

/* SiteLyns background video (master site; the user's Login_Page_Video_2.0.mp4): an animated code/chart texture that
   replaces the CSS code texture, dimmed so the headline and the card stay readable */
.sl-bg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.sl-bg--video .sl-bg__code,
.sl-bg--video .sl-bg__ticks,
.sl-bg--video .sl-bg__charts {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sl-bg__video {
        display: none;
    }

    .sl-bg--video .sl-bg__code,
    .sl-bg--video .sl-bg__ticks,
    .sl-bg--video .sl-bg__charts {
        display: block;
    }
}

.sl-bg__code {
    position: absolute;
    margin: 0;
    font-family: var(--sl-font-mono);
    font-size: 13px;
    line-height: 1.7;
    color: #a9c1e4;
    white-space: pre;
    opacity: 0.085;
    filter: blur(0.7px);
    transform: rotate(-4deg);
    transform-origin: left top;
    user-select: none;
}

.sl-bg__code--1 { top: -12px; left: 11%; font-size: 15px; opacity: 0.1; }
.sl-bg__code--2 { top: 4%; left: 44%; font-size: 11px; opacity: 0.07; filter: blur(1.1px); }
.sl-bg__code--3 { top: 6%; right: -4%; font-size: 10px; transform: rotate(-6deg); opacity: 0.08; }
.sl-bg__code--4 { top: 30%; left: 13%; font-size: 14px; opacity: 0.06; filter: blur(1.4px); }
.sl-bg__code--5 { bottom: 4%; left: 46%; font-size: 10px; opacity: 0.07; filter: blur(1px); }
.sl-bg__code--6 { top: 22%; right: 0.5%; font-size: 9px; transform: rotate(0deg); opacity: 0.09; }

.sl-bg__ticks {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        repeating-linear-gradient(to bottom, rgba(169, 193, 228, 0.12) 0 2px, transparent 2px 14px);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: 41% 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.sl-bg__charts {
    position: absolute;
    left: 22%;
    bottom: -14%;
    width: min(46vw, 760px);
    height: auto;
    opacity: 0.16;
    filter: blur(1.5px);
}

.sl-bg__glow {
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 820px;
    max-height: 820px;
    right: 2%;
    top: 6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--sl-glow), transparent 72%);
    opacity: 0.55;
    filter: blur(30px);
}

/* ------------------------------------------------------------------ layout */

.sl-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(400px, 620px);
    align-items: start;
    gap: clamp(40px, 7vw, 170px);
    width: 100%;
    max-width: 1880px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 clamp(24px, 6.2vw, 120px);
}

/* ------------------------------------------------------------------ brand column */

/* Desktop: the brand column stays in view (vertically centred) while a long signup card scrolls */
.sl-brand {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 100vh;
    padding: clamp(32px, 6vh, 72px) 0;
}

.sl-logo {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    align-self: flex-start;
    color: var(--sl-text);
    text-decoration: none;
    border-radius: 6px;
}

.sl-logo__mark {
    flex: 0 0 auto;
    width: 66px;
    height: 73px;
}

.sl-logo__text {
    display: flex;
    flex-direction: column;
}

.sl-logo__name {
    font-family: var(--sl-font-body);
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: 0.075em;
}

.sl-logo__tag {
    margin-top: 10px;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

.sl-logo__img {
    display: block;
    max-width: min(280px, 100%);
    max-height: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sl-logo__wordmark {
    font-family: var(--sl-font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
}

.sl-headline {
    margin: clamp(48px, 13vh, 132px) 0 0;
    font-family: var(--sl-font-display);
    font-weight: 500;
    font-size: clamp(2.75rem, 5.05vw, 5.9rem);
    line-height: 1.01;
    letter-spacing: -0.005em;
    color: var(--sl-text);
}

.sl-headline__line {
    display: block;
}

.sl-divider {
    width: 140px;
    height: 0;
    margin: clamp(36px, 8vh, 76px) 0 clamp(32px, 7vh, 72px);
    border: 0;
    border-top: 1px solid var(--sl-accent);
    opacity: 0.9;
}

.sl-lead {
    max-width: 35em;
    margin: 0;
    font-size: clamp(1.0625rem, 0.92rem + 0.34vw, 1.25rem);
    line-height: 1.55;
    color: var(--sl-text-soft);
}

/* ------------------------------------------------------------------ card */

.sl-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 100vh;
    padding: clamp(24px, 5vh, 56px) 0;
}

.sl-card {
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 4.3vw, 64px) clamp(24px, 3.6vw, 64px) clamp(32px, 3.6vw, 56px);
    background: var(--sl-card-bg);
    border: 1px solid var(--sl-card-border);
    border-radius: var(--sl-radius-card);
    box-shadow: 0 30px 80px rgba(2, 8, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
}

.sl-card::before,
.sl-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
}

.sl-card::before {
    top: -18%;
    right: -22%;
    width: 72%;
    height: 62%;
    background: radial-gradient(closest-side, var(--sl-glow), transparent 75%);
}

.sl-card::after {
    bottom: -32%;
    left: 8%;
    width: 64%;
    height: 56%;
    background: radial-gradient(closest-side, rgba(203, 216, 236, 0.13), transparent 78%);
}

.sl-card > * {
    position: relative;
    z-index: 1;
}

.sl-card.is-entering {
    animation: sl-card-in 0.28s ease-out both;
}

@keyframes sl-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.sl-card__title {
    margin: 0 0 10px;
    font-family: var(--sl-font-display);
    font-weight: 500;
    font-size: clamp(1.625rem, 1.25rem + 0.9vw, 2.125rem);
    line-height: 1.18;
    color: var(--sl-accent);
}

.sl-card__title:focus {
    outline: none;
}

.sl-card__subtitle {
    margin: 0 0 30px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--sl-text-soft);
}

.sl-card__footer {
    margin: 22px 0 0;
    text-align: center;
    color: var(--sl-text-soft);
}

.sl-card__footer .sl-link {
    margin-left: 6px;
}

/* ------------------------------------------------------------------ alerts */

.sl-alerts:empty {
    display: none;
}

.sl-card .alert {
    display: block;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}

.sl-card .alert-danger {
    color: #ffe1dc;
    background: rgba(240, 68, 56, 0.16);
    border-color: rgba(240, 68, 56, 0.55);
}

.sl-card .alert-success {
    color: #dcfce7;
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(74, 222, 128, 0.5);
}

.sl-card .alert-info,
.sl-card .alertInfoMessage {
    color: #e0ecff;
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.5);
}

.sl-card .alert a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ fields */

.sl-form {
    margin: 0;
}

.sl-field {
    margin: 0 0 22px;
}

.sl-label {
    display: block;
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--sl-text);
}

.sl-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -6px 0 2px;
}

.sl-label-row .sl-label {
    margin: 0;
}

.sl-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.sl-input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--sl-input-text);
    background: var(--sl-input-bg);
    border: 1px solid var(--sl-input-border);
    border-radius: var(--sl-radius-input);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sl-input::placeholder {
    color: var(--sl-placeholder);
    opacity: 1;
}

.sl-input:focus,
.sl-input:focus-visible {
    border-color: var(--sl-btn-bg);
    outline: 3px solid var(--sl-focus);
    outline-offset: 2px;
}

.sl-input.is-invalid,
.sl-input[aria-invalid="true"] {
    border-color: var(--sl-error-border);
    box-shadow: inset 0 0 0 1px var(--sl-error-border);
}

.sl-input:disabled {
    background: #e7ebf1;
    color: #5b6576;
    cursor: not-allowed;
}

.sl-input[readonly] {
    background: #eef2f6;
}

.sl-input--toggle {
    padding-right: 52px;
}

.sl-input--spin {
    padding-right: 44px;
}

.sl-input--code {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.32em;
}

.sl-input--code::placeholder {
    letter-spacing: 0.04em;
    font-weight: 400;
    font-size: 0.9375rem;
}

.sl-field-error {
    display: block;
    margin-top: 7px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--sl-error);
}

.sl-field-error:empty {
    display: none;
}

.sl-field-error a {
    color: #ffffff;
    font-weight: 600;
}

.sl-hint {
    display: block;
    margin-top: 7px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sl-text-muted);
}

.sl-inline {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* in-input spinner of the SSO e-mail check */
.spinInput {
    display: none;
    position: absolute;
    top: 50%;
    right: 14px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid #9aa6b8;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sl-spin 0.7s linear infinite;
}

/* ------------------------------------------------------------------ buttons and links */

.sl-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sl-link);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
}

.sl-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sl-link--sm {
    font-size: 0.8125rem;
    font-weight: 500;
}

.sl-textbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    font: inherit;
    font-weight: 600;
    color: var(--sl-link);
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.sl-textbtn:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sl-textbtn:disabled {
    color: rgba(255, 255, 255, 0.62);
    cursor: default;
}

.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 22px;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sl-btn-text);
    background: var(--sl-btn-bg);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 12px 26px rgba(210, 70, 13, 0.26);
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.sl-btn:hover:not(:disabled) {
    filter: brightness(0.92);
}

.sl-btn:disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

.sl-btn[aria-busy="true"] {
    cursor: progress;
}

.sl-btn--inline {
    width: auto;
    flex: 0 0 auto;
    box-shadow: none;
}

.sl-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sl-spin 0.7s linear infinite;
}

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

.sl-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--sl-text);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.sl-iconbtn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sl-iconbtn svg {
    width: 22px;
    height: 22px;
}

.sl-iconbtn.is-spinning svg {
    animation: sl-spin 0.6s linear;
}

.sl-pw-toggle {
    position: absolute;
    top: 50%;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #4b5563;
    background: transparent;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
    cursor: pointer;
}

.sl-pw-toggle:hover {
    color: #111827;
}

.sl-pw-toggle svg {
    width: 20px;
    height: 20px;
}

.sl-pw-toggle .sl-icon-hide,
.sl-pw-toggle[aria-pressed="true"] .sl-icon-show {
    display: none;
}

.sl-pw-toggle[aria-pressed="true"] .sl-icon-hide {
    display: block;
}

/* ------------------------------------------------------------------ captcha */

.sl-captcha__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    align-items: center;
    gap: clamp(12px, 2vw, 30px);
}

.sl-captcha__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--sl-input-border);
    border-radius: var(--sl-radius-input);
}

.sl-captcha__img img {
    display: block;
    max-width: 100%;
    max-height: 42px;
}

.sl-recaptcha {
    min-height: 78px;
}

.sl-recaptcha__widget {
    max-width: 100%;
}

/* ------------------------------------------------------------------ signup specifics */

.sl-verify-slot {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sl-input-wrap.is-verified .sl-input {
    padding-right: 44px;
}

.sl-verified-tick {
    display: none;
    position: absolute;
    top: 50%;
    right: 14px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: #15803d;
}

.sl-input-wrap.is-verified .sl-verified-tick {
    display: block;
}

.sl-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--sl-success);
}

.sl-status:empty {
    display: none;
}

.sl-code-panel {
    margin-top: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
}

.sl-code-panel .sl-label {
    font-size: 0.9375rem;
}

.sl-code-panel .sl-hint {
    margin: 0 0 12px;
}

.sl-phone {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px;
}

.sl-cc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 48px;
    padding: 0 12px 0 16px;
    color: var(--sl-input-text);
    font-size: 0.9375rem;
    background: var(--sl-input-bg);
    border: 1px solid var(--sl-input-border);
    border-radius: var(--sl-radius-input);
}

.sl-cc:focus-within {
    border-color: var(--sl-btn-bg);
    outline: 3px solid var(--sl-focus);
    outline-offset: 2px;
}

.sl-cc.is-invalid {
    border-color: var(--sl-error-border);
    box-shadow: inset 0 0 0 1px var(--sl-error-border);
}

.sl-cc svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #374151;
}

.sl-cc__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 16px;
    color: var(--sl-input-text);
    opacity: 0;
    cursor: pointer;
}

.sl-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0 4px;
    color: var(--sl-text-soft);
    cursor: pointer;
}

.sl-check input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--sl-btn-bg);
    cursor: pointer;
}

.sl-check a {
    color: var(--sl-link);
    font-weight: 600;
}

.sl-field--terms {
    margin-bottom: 18px;
}

/* ------------------------------------------------------------------ cookie banner */

.sl-cookie {
    /* full-width bar like the cookie notice of the other SiteLyns pages (master-home page.css #cookie-banner) */
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: center;
    background: #11233b;
    border-top: 2px solid var(--sl-accent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
}

.sl-cookie__btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 6px 18px;
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    background: #D84006;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.sl-cookie__btn:hover {
    background: #bf3805;
}

.sl-cookie__btn:focus-visible {
    outline: 3px solid var(--sl-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1199.98px) {
    .sl-shell {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 540px);
        gap: clamp(32px, 5vw, 72px);
    }

    .sl-headline {
        font-size: clamp(2.5rem, 5.4vw, 4.25rem);
    }
}

/* ------------------------------------------------------------------ frontend pages fit the window (2026-10-07) */
/* Only the frontend sign-in, sign-up and password pages: the admin /login (body.sl-auth--admin) keeps the layout above.
   1. The background covers the window, not the page: the video (object-fit: cover) is the same on every card. As tall
      as the long signup page it was zoomed in about 1.5x (only code text, the charts cut off) and scrolled away. */
.sl-auth:not(.sl-auth--admin) .sl-bg {
    position: fixed;
}

/* 2. Desktop (two columns): the page boxes use the window minus the space the cookie banner reserves while it is shown
      (--sl-reserve, set by sitelyns-auth.js), so the reserve no longer adds a scroll */
@media (min-width: 992px) {
    .sl-auth:not(.sl-auth--admin) .sl-shell,
    .sl-auth:not(.sl-auth--admin) .sl-brand,
    .sl-auth:not(.sl-auth--admin) .sl-panel {
        min-height: calc(100vh - var(--sl-reserve));
        min-height: calc(100dvh - var(--sl-reserve));
    }
}

/* 3. Shorter desktop windows (a 1080p screen at 125% = about 1536x730, a 1366x768 laptop = about 1366x650): the page
      fits without scrolling. Only the vertical spacing and the headline size follow the window height; windows taller
      than 860px keep the spacing above. Below about 600px the page scrolls as before. */
@media (min-width: 992px) and (max-height: 860px) {
    .sl-auth:not(.sl-auth--admin) .sl-brand {
        padding: clamp(16px, 4vh, 48px) 0;
    }

    .sl-auth:not(.sl-auth--admin) .sl-headline {
        margin-top: clamp(24px, 8vh, 96px);
        font-size: clamp(2.5rem, min(5.05vw, 9.6vh), 5.9rem);
    }

    .sl-auth:not(.sl-auth--admin) .sl-divider {
        margin: clamp(20px, 5vh, 56px) 0 clamp(18px, 4.5vh, 52px);
    }

    .sl-auth:not(.sl-auth--admin) .sl-panel {
        padding: clamp(12px, 3vh, 40px) 0;
    }

    .sl-auth:not(.sl-auth--admin) .sl-card {
        padding-top: clamp(24px, 5.5vh, 64px);
        padding-bottom: clamp(20px, 4.5vh, 56px);
    }

    .sl-auth:not(.sl-auth--admin) .sl-card__subtitle {
        margin-bottom: clamp(14px, 3vh, 30px);
    }

    .sl-auth:not(.sl-auth--admin) .sl-field {
        margin-bottom: clamp(12px, 2.4vh, 22px);
    }

    .sl-auth:not(.sl-auth--admin) .sl-card__footer {
        margin-top: clamp(12px, 2.4vh, 22px);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 860px) {
    .sl-auth:not(.sl-auth--admin) .sl-headline {
        font-size: clamp(2.5rem, min(5.4vw, 9.6vh), 4.25rem);
    }
}

/* 4. Very short desktop windows (about 600-640px: a 1366x768 laptop with a bookmarks bar): fields and buttons 44px
      (still a comfortable target), less space around the card */
@media (min-width: 992px) and (max-height: 640px) {
    .sl-auth:not(.sl-auth--admin) .sl-panel {
        padding: 8px 0;
    }

    .sl-auth:not(.sl-auth--admin) .sl-input,
    .sl-auth:not(.sl-auth--admin) .sl-cc,
    .sl-auth:not(.sl-auth--admin) .sl-captcha__img {
        height: 44px;
    }

    .sl-auth:not(.sl-auth--admin) .sl-btn {
        min-height: 44px;
    }
}

@media (max-width: 991.98px) {
    .sl-shell {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 32px;
        max-width: 720px;
        min-height: 0;
        padding: 40px 32px 56px;
    }

    .sl-brand,
    .sl-panel {
        position: relative;
        min-height: 0;
        padding: 0;
    }

    .sl-headline {
        margin-top: 36px;
        font-size: clamp(2.25rem, 6.6vw, 3.5rem);
    }

    .sl-divider {
        margin: 28px 0 24px;
    }

    .sl-bg__charts,
    .sl-bg__code--4,
    .sl-bg__code--5 {
        display: none;
    }

    .sl-bg__glow {
        top: 30%;
        width: 90vw;
        height: 90vw;
    }
}

@media (max-width: 599.98px) {
    .sl-shell {
        gap: 22px;
        padding: 24px 16px 40px;
    }

    .sl-logo {
        gap: 12px;
    }

    .sl-logo__mark {
        width: 44px;
        height: 49px;
    }

    .sl-logo__name {
        font-size: 1.5rem;
    }

    .sl-logo__tag {
        margin-top: 6px;
        font-size: 0.5625rem;
        letter-spacing: 0.18em;
    }

    .sl-logo__img {
        max-height: 56px;
    }

    .sl-headline {
        margin-top: 22px;
        font-size: 2.125rem;
        line-height: 1.08;
    }

    .sl-headline__line {
        display: inline;
    }

    .sl-divider,
    .sl-lead {
        display: none;
    }

    .sl-card {
        padding: 28px 20px 26px;
    }

    .sl-card__subtitle {
        margin-bottom: 24px;
        font-size: 0.9375rem;
    }

    .sl-input,
    .sl-cc {
        font-size: 1rem;
    }

    .sl-captcha__row {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 44px;
        gap: 10px;
    }

    .sl-captcha__row > .sl-input {
        padding: 0 12px;
    }

    .sl-inline {
        gap: 10px;
    }

    .sl-cookie {
        font-size: 0.8125rem;
    }

    .sl-bg__code--2,
    .sl-bg__code--6 {
        display: none;
    }
}

@media (max-width: 359.98px) {
    .sl-captcha__row {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .sl-captcha__row > .sl-input {
        grid-column: 1 / -1;
    }

    .sl-inline--wrap {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .sl-inline--wrap > .sl-input-wrap {
        flex-basis: 100%;
    }

    .sl-code-panel {
        padding: 14px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .sl-spinner,
    .spinInput {
        animation: none !important;
        border-right-color: currentColor;
        opacity: 0.6;
    }
}

@media (forced-colors: active) {
    .sl-btn,
    .sl-input,
    .sl-cc,
    .sl-card {
        border: 1px solid CanvasText;
    }
}