/* ==========================================================================
   lux.css — B2B sign-in (login_b2b.php)
   Brand colours come from the --sko-* variables (tenant theme / skolarli.css) with
   Skolarli defaults; the lime / orange / purple accents are decorative and fixed.
   ========================================================================== */

:root {
    --lux-primary: var(--sko-primary, #1E5F69);
    --lux-primary-dark: var(--sko-primary-dark, #154951);
    --lux-primary-rgb: var(--sko-primary-rgb, 39, 109, 119);
    --lux-ink: #121a1c;
    --lux-text: #2a3335;
    --lux-muted: #5b6668;
    --lux-line: #dde3e3;
    --lux-cream: #f8f2ea;
    /* --lux-paper: #fcfbf8; */
      --lux-paper: #fff;
    --lux-lime: #b8d82a;
    --lux-orange: #ef7a2e;
    --lux-brand-orange: #e45824; /* the logo's orange */
    --lux-purple: #9b59d0;
    --lux-danger: #c2410c;
}

html, body.lux-body { height: 100%; }
body.lux-body {
    margin: 0;
    background: var(--lux-paper);
    color: var(--lux-text);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* same as the app (assets/ux2/type.css) */
    -webkit-font-smoothing: antialiased;
}

.lux-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    min-height: 100vh;
}

/* -------------------------------------------------------------------------
   Left: brand panel
   ------------------------------------------------------------------------- */
.lux-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 150px 64px 40px; /* headline sits lower, closer to the illustration */
    background:
        radial-gradient(1200px 700px at 10% 0%, #fdf8f1 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 100%, #f6ece0 0%, transparent 65%),
        var(--lux-cream);
}
/* faint dotted grid + soft rings */
.lux-aside::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(120, 100, 80, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 45% 60%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at 45% 60%, #000 0%, transparent 70%);
    pointer-events: none;
}
.lux-aside::after {
    content: "";
    position: absolute; width: 900px; height: 900px; left: -260px; bottom: -420px;
    border-radius: 50%;
    border: 1px solid rgba(160, 130, 100, .14);
    outline: 1px solid rgba(160, 130, 100, .08);
    outline-offset: 110px;
    pointer-events: none;
}
.lux-aside > * { position: relative; z-index: 1; }

/* Logo: same 25px left inset as the app sidebar logo (.aside-logo), 21px from the top */
.lux-brandbar {
    position: absolute; top: 21px; left: 0; z-index: 2;
    display: flex; align-items: flex-start; /* logo top edge exactly 21px from the top */
    padding: 0 25px;
}
.lux-logo { display: block; height: auto; width: 175px; }

.lux-headline {
    margin: 0;
    /* Two lines, always split after the comma (<br> in the markup) */
    font-size: clamp(20px, 1.8vw, 30px);
    white-space: nowrap;
    line-height: 1.5;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -.015em;
    color: var(--lux-ink);
}
.lux-accent { color: var(--lux-primary); }
.lux-accent-orange { color: var(--lux-brand-orange); }
.lux-dot { color: var(--lux-lime); }

.lux-network-wrap { flex: 1; display: flex; align-items: center; margin: 4px -12px 0; min-height: 0; }
.lux-network { width: 100%; max-width: 820px; height: auto; overflow: visible; }

.lux-t { font-size: 17px; font-weight: 700; fill: var(--lux-ink); font-family: inherit; }
.lux-s { font-size: 13.5px; font-weight: 500; fill: var(--lux-muted); font-family: inherit; }

.lux-aside-foot { margin-top: 16px; }
.lux-aside-foot p { margin: 14px 0 0; font-size: 18px; font-weight: 500; color: #4a4f50; }
.lux-bars { display: flex; gap: 8px; }
.lux-bars span { width: 34px; height: 5px; border-radius: 3px; background: var(--lux-primary); }
.lux-bars span:nth-child(2) { width: 22px; background: var(--lux-lime); }
.lux-bars span:nth-child(3) { width: 30px; background: var(--lux-orange); }
.lux-bars span:nth-child(4) { width: 20px; background: var(--lux-purple); }

/* -------------------------------------------------------------------------
   Network animation (motion is driven by CSS; lux.js adds particles)
   ------------------------------------------------------------------------- */
.lux-node > * { transform-box: fill-box; }
.lux-node {
    opacity: 0; /* fade only: a CSS transform here would override the SVG translate() */
    animation: lux-fade .8s ease-out forwards;
    animation-delay: var(--d, 0s);
}
.lux-halo {
    transform-box: fill-box; transform-origin: center;
    animation: lux-breathe 6s ease-in-out infinite;
    animation-delay: var(--f, 0s);
}
.lux-line {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: lux-draw 1.4s ease-out .4s forwards;
}
.lux-dash {
    stroke-dasharray: 4 7;
    animation: lux-march 2.2s linear infinite;
}
.lux-junctions circle {
    transform-box: fill-box; transform-origin: center;
    animation: lux-twinkle 3.6s ease-in-out infinite;
}
.lux-junctions circle:nth-child(2n) { animation-delay: -1.2s; }
.lux-junctions circle:nth-child(3n) { animation-delay: -2.4s; }
.lux-hub .lux-pulse {
    transform-box: fill-box; transform-origin: center;
    animation: lux-ring 2.8s ease-out infinite;
}
.lux-particle { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }

/* Signing in: everything flows faster towards Evidence */
.lux-busy .lux-dash { animation-duration: .7s; }
.lux-busy .lux-hub .lux-pulse { animation-duration: 1s; }
.lux-busy .lux-halo { animation-duration: 1.6s; }

/* The network illustration (sign-in, sign-up) animates ONCE on load — nodes fade in, lines draw — and is
   then still: a page people open every day shouldn't keep moving beside the form. Motion comes back only
   as feedback while signing in / creating a workspace: the hub pulses and the dots (lux.js) flow into it.
   (The trails on forgot / reset / verify use .lux-dash outside .lux-network and keep their own motion.) */
.lux-network .lux-halo,
.lux-network .lux-dash,
.lux-network .lux-junctions circle,
.lux-network .lux-hub .lux-pulse { animation: none; }
.lux-network .lux-hub .lux-pulse { opacity: 0; }
.lux-busy .lux-network .lux-hub .lux-pulse { opacity: 1; animation: lux-ring 1s ease-out infinite; }

@keyframes lux-breathe{ 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes lux-draw   { to { stroke-dashoffset: 0; } }
@keyframes lux-march  { to { stroke-dashoffset: -22; } }
@keyframes lux-twinkle{ 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes lux-ring   { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.65); opacity: 0; } }

@keyframes lux-fade   { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------------------
   Right: sign-in
   ------------------------------------------------------------------------- */
.lux-main {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lux-paper);
    padding: 48px 56px 28px;
}
/* Hairline between the two panels: a warm 1px edge (not a shadow — neither panel sits on the other),
   fading out at the top and bottom so it doesn't hit the window edges */
.lux-main::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(120, 95, 70, 0) 0%, rgba(120, 95, 70, .15) 12%,
        rgba(120, 95, 70, .60) 88%, rgba(120, 95, 70, 0) 100%);
    pointer-events: none;
}
.lux-form-wrap { width: 100%; max-width: 460px; margin: auto; padding: 24px 0; }
.lux-logo-mobile { display: none; width: 150px; margin-bottom: 32px; }

.lux-title { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--lux-ink); }
.lux-sub { margin: 12px 0 36px; font-size: 18px; font-weight: 500; color: var(--lux-muted); }

.lux-form .lux-field { margin-bottom: 22px; }
.lux-form .lux-collapsed { display: none; }
.lux-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--lux-ink); }
.lux-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* "Forgot password?" shows at the top right of the password field, but comes after the box in the page, so Tab goes
   email → password → show password → Forgot password? → Sign in (login_b2b.php) */
.lux-field-pw { position: relative; }
.lux-field-pw .lux-forgot { position: absolute; top: 1px; right: 0; }
/* After a failed sign-in, "Forgot password?" glows for a moment (l.js handleLoginError) */
.lux-field-pw .lux-forgot.is-hint { border-radius: 6px; animation: luxForgotHint 1.2s ease-in-out 2; }
@keyframes luxForgotHint { 50% { background: rgba(var(--lux-primary-rgb), .12); box-shadow: 0 0 0 4px rgba(var(--lux-primary-rgb), .12); } }
@media (prefers-reduced-motion: reduce) { .lux-field-pw .lux-forgot.is-hint { animation: none; text-decoration: underline; } }

.lux-input-wrap { position: relative; }
.lux-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    fill: none; stroke: #6f7a7c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
}
.lux-form .form-control.lux-input {
    height: 45px;
    padding: 0 16px 0 48px;
    border: 1px solid var(--lux-line);
    border-radius: 10px;
    background: #fff;
    color: var(--lux-ink);
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lux-form .form-control.lux-input::placeholder { color: #8a9496; font-weight: 400; }
.lux-form .form-control.lux-input:focus {
    border-color: var(--lux-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lux-primary) 25%, transparent); /* as the app's fields */
    outline: none;
}
.lux-form .form-control.lux-input.form-control-solid { background: #f4f6f6; } /* l.js: read-only while signing in */
.lux-form .lux-input-pw { padding-right: 52px; }
.lux-eye {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 8px; background: transparent;
    cursor: pointer; color: #6f7a7c; font-size: 16px; z-index: 2;
}
.lux-eye:hover { color: var(--lux-ink); background: #f1f4f4; }
@media (pointer: coarse) {
    .lux-eye { right: 1px; width: 44px; height: 44px; }
}
.lux-eye:focus-visible { outline: 2px solid var(--lux-primary); border-radius: 6px; }

/* Validation (FormValidation Bootstrap5 plugin, driven by l.js) */
.lux-form .form-control.lux-input.is-invalid { border-color: #e2554f; background-image: none; }
.lux-form .fv-plugins-message-container,
.lux-form .invalid-feedback { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #c62f2a; }

.lux-note {
    margin-top: 8px; padding: 10px 12px;
    border-radius: 8px; background: #fff3ed; border: 1px solid #fbd3bf;
    font-size: 13.5px; color: #8a3410;
}

/* Sign-in errors, just above the button (lux.js luxFormError) */
.lux-form-error {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 14px; padding: 11px 14px;
    border: 1px solid #f5c2bf; border-radius: 10px; background: #fef3f2;
    font-size: 14px; font-weight: 500; line-height: 1.45; color: #a3231e;
}
.lux-form-error::before {
    content: "!"; flex: none; display: inline-grid; place-items: center;
    width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    background: #d92d20; color: #fff; font-size: 12px; font-weight: 700;
}

.lux-link {
    background: none; border: 0; padding: 0;
    color: var(--lux-primary); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer;
}
.lux-link:hover { color: var(--lux-primary-dark); text-decoration: underline; }

.lux-ws-line {
    display: flex; align-items: center; gap: 8px;
    margin: -8px 0 22px; padding: 12px 14px;
    border: 1px solid #d8e7e8; border-radius: 10px; background: #f1f7f7;
    font-size: 15px; color: var(--lux-text);
}
.lux-ws-line svg { width: 18px; height: 18px; fill: none; stroke: var(--lux-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lux-ws-line strong { color: var(--lux-ink); }
.lux-ws-change { margin-left: auto; white-space: nowrap; } /* "Change" sits at the right end of the line, on one line */
.lux-ws-change i { font-style: normal; color: inherit; } /* <i>Change?</i> took the theme's grey icon colour (2.3:1) */

/* The remembered person (LXP-2696): photo, email and workspace in one box; the email field hides (still filled) */
.lux-me {
    display: flex; align-items: center; gap: 12px;
    margin: -8px 0 22px; padding: 12px 14px;
    border: 1px solid var(--lux-line); border-radius: 12px; background: #f8fafc;
}
.lux-me-face {
    position: relative; flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: color-mix(in srgb, var(--lux-primary) 14%, #fff);
    color: var(--lux-primary); font-size: 18px; font-weight: 600;
}
.lux-me-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lux-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.lux-me-text strong { overflow: hidden; color: var(--lux-ink); font-size: 15.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lux-me-text span { color: var(--lux-muted); font-size: 14px; }
.lux-me-text b { font-weight: 600; color: var(--lux-text); }
.lux-form.lux-known #luxEmailRow { display: none; }

.lux-btn.btn {
    position: relative; overflow: hidden;
    height: 45px; margin-top: 8px;
    border: 0; border-radius: 10px;
    /* the app's main button (assets/ux2/btn-rich.css): a soft top edge, a close shadow */
    background: linear-gradient(180deg, color-mix(in srgb, var(--lux-primary) 92%, #fff) 0%, var(--lux-primary) 100%);
    color: #fff; font-size: 16px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(15 23 42 / .14);
    transition: background .15s ease, box-shadow .15s ease;
}
.lux-btn.btn:hover, .lux-btn.btn:focus {
    background: linear-gradient(180deg, color-mix(in srgb, var(--lux-primary) 88%, #fff) 0%, var(--lux-primary) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(15 23 42 / .12), 0 6px 16px -6px color-mix(in srgb, var(--lux-primary) 45%, transparent);
}
.lux-btn.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lux-primary) 35%, transparent); outline-offset: 2px; }
.lux-btn.btn:active { background: var(--lux-primary-dark); box-shadow: inset 0 1px 3px rgb(9 10 12 / .28); }
.lux-btn:not([data-kt-indicator="on"]) .indicator-label { display: inline-flex; align-items: center; gap: 12px; }
.lux-btn[data-kt-indicator="on"] .indicator-label { display: none; }
/* l.js disables the button while signing in: faded = "wait", text kept readable */
.lux-btn.btn:disabled, .lux-btn.btn.disabled { opacity: .7; color: #fff; cursor: progress; box-shadow: none; }
.lux-btn.btn.lux-btn-success:disabled { opacity: 1; }
.lux-btn .indicator-label svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.lux-btn:hover .indicator-label svg { transform: translateX(3px); }
/* Signing in: moving sheen + animated ellipsis */
.lux-btn[data-kt-indicator="on"]::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    animation: lux-sheen 1.1s ease-in-out infinite;
}
.lux-progress { display: inline-flex; align-items: center; white-space: pre; }
.lux-progress em { font-style: italic; }
.lux-progress strong { font-weight: 700; }

/* Verifying: shield icon, gently pulsing */
.lux-shield {
    width: 20px; height: 20px; margin-right: 10px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    animation: lux-shield-pulse 1.2s ease-in-out infinite;
}
@keyframes lux-shield-pulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }

/* Success: green button, white disc with a green tick that draws in.
   #15803d keeps white text at ~5:1 contrast (WCAG AA) */
.lux-btn.btn.lux-btn-success,
.lux-btn.btn.lux-btn-success:disabled { background: #15803d; opacity: 1; box-shadow: 0 6px 18px rgba(21, 128, 61, .3); }
.lux-btn.btn.lux-btn-success::after { animation: none; }
.lux-success-icon { width: 22px; height: 22px; margin-right: 10px; flex: none; }
.lux-success-icon circle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: lux-pop-in .25s ease-out both; }
.lux-success-icon path {
    fill: none; stroke: #15803d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 16; stroke-dashoffset: 16; animation: lux-draw-check .3s ease-out .15s forwards;
}
@keyframes lux-pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lux-draw-check { to { stroke-dashoffset: 0; } }
.lux-ellipsis i { font-style: normal; animation: lux-blink 1.2s infinite; }
.lux-ellipsis i:nth-child(2) { animation-delay: .2s; }
.lux-ellipsis i:nth-child(3) { animation-delay: .4s; }
@keyframes lux-sheen { to { left: 110%; } }
@keyframes lux-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* Footer: trust badges + links */
.lux-footer { width: 100%; max-width: 520px; margin: 0 auto; text-align: center; }
.lux-badges {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
    margin: 0 0 14px; padding: 0; list-style: none;
    font-size: 12px; font-weight: 500; color: var(--lux-muted);
}
.lux-badges li { display: inline-flex; align-items: center; gap: 6px; }
.lux-badges svg { width: 14px; height: 14px; fill: none; stroke: var(--lux-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lux-badges svg .lux-fill { fill: var(--lux-primary); stroke: none; }
.lux-badges svg.lux-flag { width: 16px; height: 11px; stroke: none; border-radius: 1px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15); }
.lux-links-row { display: flex; justify-content: center; gap: 10px; font-size: 13px; color: #9aa4a6; }
.lux-links-row a { color: var(--lux-muted); text-decoration: none; }
.lux-links-row a:hover { color: var(--lux-primary); text-decoration: underline; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .lux-aside { padding: 138px 40px 32px; }
    .lux-main { padding: 40px 36px 24px; }
}
@media (max-width: 991.98px) {
    .lux-shell { grid-template-columns: minmax(0, 1fr); }
    .lux-aside { display: none; }
    .lux-main::before { display: none; } /* single column: nothing to separate */
    .lux-logo-mobile { display: block; }
    .lux-main { min-height: 100vh; padding: 32px 20px 20px; }
    .lux-title { font-size: 34px; }
    .lux-sub { font-size: 16px; margin-bottom: 28px; }
}

/* Users who ask for less motion get a still illustration */
@media (prefers-reduced-motion: reduce) {
    .lux-node, .lux-halo, .lux-line, .lux-dash, .lux-junctions circle, .lux-hub .lux-pulse,
    .lux-btn[data-kt-indicator="on"]::after, .lux-ellipsis i, .lux-shield,
    .lux-success-icon circle, .lux-success-icon path {
        animation: none !important;
        opacity: 1;
        stroke-dashoffset: 0;
    }
    .lux-line { stroke-dasharray: none; }
    .lux-particles { display: none; }
}

/* =========================================================================
   SKOLARLI TEAL PANEL (2026-10-05) — the left panel in the brand teal, so the auth pages read as
   Skolarli at a glance (the cream panel + orange looked generic). Right side unchanged.
   Applies to every auth page (sign-in, sign-up, forgot, reset, verify); page CSS adds its own bits.
   To go back to the cream panel, delete this block (and the matching blocks in luxfp.css / skosignup.css).
   ========================================================================= */
.lux-aside {
    --lux-panel-ink: #ffffff;
    --lux-panel-text: rgba(255, 255, 255, .78);
    --lux-panel-muted: rgba(255, 255, 255, .62);
    --lux-panel-accent: #9fd8de;   /* light teal: "evidence", "account", … */
    --lux-panel-orange: #f39a63;   /* the logo's orange, lifted for contrast on teal */
    background:
        radial-gradient(900px 600px at 0% 0%, rgba(84, 160, 170, .35) 0%, transparent 60%),
        radial-gradient(800px 600px at 100% 100%, rgba(5, 25, 28, .55) 0%, transparent 65%),
        linear-gradient(165deg, #2a7782 0%, #1e5c64 42%, #133f45 75%, #0e272a 100%);
    color: var(--lux-panel-text);
}
.lux-aside::before { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); }
.lux-aside::after  { border-color: rgba(255, 255, 255, .07); outline-color: rgba(255, 255, 255, .04); }

.lux-aside .lux-headline { color: var(--lux-panel-ink); }
.lux-aside .lux-accent { color: var(--lux-panel-accent); }
.lux-aside .lux-accent-orange { color: var(--lux-panel-orange); }
.lux-aside .lux-aside-foot p { color: var(--lux-panel-text); }
.lux-aside .lux-bars span:nth-child(1) { background: var(--lux-panel-accent); }

/* Network illustration on teal: labels light, teal lines pale, beige dashes faint white */
.lux-aside .lux-t { fill: var(--lux-panel-ink); }
.lux-aside .lux-s { fill: var(--lux-panel-muted); }
.lux-aside .lux-links path[stroke="#276d77"],
.lux-aside .lux-links path[stroke="#2e7d86"],
.lux-aside .lux-links path[stroke="#5f8f95"],
.lux-aside .lux-links path[stroke="#7aa7ad"],
.lux-aside .lux-links path[stroke="#9fb7ba"] { stroke: rgba(159, 216, 222, .62); }
.lux-aside .lux-links path[stroke="#c9b37a"],
.lux-aside .lux-links path[stroke="#cfa98f"],
.lux-aside .lux-links path[stroke="#c9b39a"] { stroke: rgba(255, 255, 255, .26); }
.lux-aside .lux-junctions circle[fill="#1f5c64"] { fill: var(--lux-panel-accent); }
.lux-aside .lux-hub circle[fill="#1f5f68"] { fill: #0f3a40; }
.lux-aside .lux-network { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .12)); }

/* =========================================================================
   THE PHOTO + SHEET (LXP-2696) — <aside class="lux-aside is-photo">: a still photo fills the window and the form sits
   on the app frame's white sheet (assets/ux2/shell-next.css: 12px gap, 18px corners), on the right, with the logo on
   the sheet. The photo is --lux-photo (a url()); a teal wash keeps any photo in the brand colours. No photo set: a
   deep teal background. No words on the photo. Phones: a plain white page; the photo is never downloaded there.
   ========================================================================= */
.lux-shell:has(> .lux-aside.is-photo) {
    --lux-ink: #010b13;   /* the app frame's ink, grey and line */
    --lux-muted: #64748b;
    --lux-line: #e2e8f0;
}
.lux-aside.is-photo { padding: 0; background: transparent; }
.lux-aside.is-photo::before,
.lux-aside.is-photo::after { display: none; }
@media (min-width: 992px) {
    .lux-shell:has(> .lux-aside.is-photo) {
        grid-template-columns: minmax(0, 1fr) minmax(520px, 44%);
        padding: 12px 12px 12px 0;
        background-color: #0f3d44;
        --lux-photo: image-set(url("auth/login-hills.webp") 1x, url("auth/login-hills-2x.webp") 2x); /* LXP-2701 */
        background-image:
            linear-gradient(135deg, rgb(15 61 68 / .55) 0%, rgb(30 95 105 / .25) 55%, rgb(15 61 68 / .45) 100%),
            var(--lux-photo, radial-gradient(900px 700px at 20% 25%, #2e7d86 0%, transparent 65%)),
            radial-gradient(800px 600px at 75% 90%, #1e5f69 0%, transparent 60%);
        background-size: cover;
        background-position: center;
    }
    .lux-shell:has(> .lux-aside.is-photo) .lux-main {
        border-radius: 18px;
        box-shadow: 0 24px 60px -24px rgb(1 11 19 / .45), 0 2px 6px rgb(1 11 19 / .12);
    }
    .lux-shell:has(> .lux-aside.is-photo) .lux-main::before { display: none; } /* the sheet's own edge; no hairline */
    .lux-shell:has(> .lux-aside.is-photo) .lux-logo-mobile { display: block; } /* the logo lives on the sheet */
}
.lux-title + .lux-form { margin-top: 32px; } /* no subtitle under the title */
/* The title a step below the logo, not above it: 32 px (phones 28 px), was 44 / 34 */
.lux-shell:has(> .lux-aside.is-photo) .lux-title { font-size: 32px; line-height: 1.15; letter-spacing: -.02em; }
@media (max-width: 991.98px) {
    .lux-shell:has(> .lux-aside.is-photo) .lux-title { font-size: 28px; }
}
/* The logo centred at the top of the sheet: the sheet's header */
.lux-shell:has(> .lux-aside.is-photo) .lux-logo-mobile { margin-left: auto; margin-right: auto; }