/* ============================================================================
 * auth.css — split-screen layout for the portal's pre-login pages
 * (sign-in, forgot/reset password, onboarding notice). Loaded ON TOP of Omah's
 * style.css so form controls / buttons / cards match the portal; this file only
 * provides the two-pane "brand aside + form" shell, the teal brand panel and the
 * responsive stack. Brand name + logo are DATA (settings), never hard-coded.
 * ========================================================================== */

:root {
    --auth-teal:#0E7C7B;
    --auth-teal-dark:#0B5E5C;
    --auth-teal-900:#083f3e;
    --auth-ink:#0b0d12;
    --auth-muted:#6b7280;
    --auth-canvas:#f7f8fa;
    --auth-line:#e6e8eb;
}

/* reset the centered body Omah/BS might impose */
html, body { height:auto; }
body.auth-split-body { margin:0; background:var(--auth-canvas); color:var(--auth-ink); overflow-x:hidden; }

.auth-split { display:flex; min-height:100vh; min-height:100dvh; }

/* ---- Brand panel (coloured) ---------------------------------------------- */
.auth-aside {
    flex:1 1 44%;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:var(--auth-teal); /* solid (operator: no gradients) */
    display:flex; flex-direction:column; justify-content:space-between;
    padding:clamp(32px, 4vw, 56px);
}
/* soft decorative glow + grid, purely atmospheric */
.auth-aside::before {
    content:none; display:none; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(520px 360px at 82% -8%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(420px 320px at -10% 110%, rgba(255,255,255,.10), transparent 60%);
}
.auth-aside::after {
    content:none; display:none; position:absolute; inset:0; pointer-events:none; opacity:.08;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.auth-aside > * { position:relative; z-index:1; }

.auth-brand { display:flex; align-items:center; gap:12px; }
.auth-brand img { height:42px; width:auto; display:block; filter:brightness(0) invert(1); }
.auth-brand .mark {
    height:42px; width:42px; border-radius:11px; display:grid; place-items:center;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
    font-weight:700; font-size:1.15rem; letter-spacing:-.02em;
}
.auth-brand .wm { font-size:1.2rem; font-weight:600; letter-spacing:-.02em; color:#fff; }

/* Omah's style.css colours headings/spans dark — force the panel's own text white. */
.auth-aside, .auth-aside h1, .auth-aside h2, .auth-aside h3, .auth-aside p, .auth-aside span, .auth-aside li { color:#fff; }

.auth-pitch { max-width:30ch; }
.auth-pitch h2 { font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:0 0 14px; color:#fff; }
.auth-pitch p { color:rgba(255,255,255,.82); font-size:.98rem; line-height:1.6; margin:0 0 22px; }
.auth-feats { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.auth-feats li { display:flex; align-items:flex-start; gap:11px; font-size:.92rem; color:rgba(255,255,255,.92); }
.auth-feats li i { margin-top:2px; width:20px; text-align:center; color:#fff; opacity:.85; }

.auth-aside .foot { font-size:.78rem; color:rgba(255,255,255,.62); }

/* ---- Form panel ----------------------------------------------------------- */
.auth-main { flex:1 1 56%; display:flex; align-items:center; justify-content:center; padding:clamp(28px, 4vw, 56px); }
.auth-card { width:100%; max-width:420px; }
.auth-card.auth-card--wide { max-width:560px; }
/* onboarding wizard bits */
.auth-steps { display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
.auth-steps .dot { width:28px; height:28px; border-radius:50%; background:#e3e7ee; color:#67707d; display:grid; place-items:center; font-size:.85rem; font-weight:600; }
.auth-steps .dot.active { background:var(--auth-teal); color:#fff; }
.auth-card .ro { background:#f7f8fa; }
.auth-card .card { height:auto; }        /* undo Omah's forced 100% height */
.auth-card-head { margin-bottom:22px; }
.auth-card-head h1 { font-size:1.45rem; font-weight:650; letter-spacing:-.02em; margin:0 0 6px; color:var(--auth-ink); }
.auth-card-head p { color:var(--auth-muted); margin:0; font-size:.92rem; }
/* a compact brand row shown only on the form side when the aside is hidden (mobile) */
.auth-topbrand { display:none; align-items:center; gap:10px; margin-bottom:22px; }
.auth-topbrand img { height:34px; filter:none; }
.auth-topbrand .mark { height:34px; width:34px; border-radius:9px; display:grid; place-items:center; background:var(--auth-teal); color:#fff; font-weight:700; }
.auth-topbrand .wm { font-weight:600; letter-spacing:-.02em; color:var(--auth-ink); }

.auth-card .form-control { padding:11px 13px; }
.auth-card .btn-primary { padding:11px; font-weight:600; }
.code-input { letter-spacing:.4em; font-size:1.15rem; text-align:center; }
.auth-foot-links { margin-top:18px; text-align:center; font-size:.88rem; }
.auth-foot-links a { color:var(--auth-teal); text-decoration:none; font-weight:600; }
.auth-foot-links a:hover { text-decoration:underline; }

/* entrance motion (respecting reduced-motion) */
@keyframes authRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.auth-card, .auth-aside > * { animation:authRise .5s cubic-bezier(.4,0,.2,1) both; }
.auth-aside .auth-pitch { animation-delay:.06s; }
.auth-aside .foot { animation-delay:.12s; }

/* ---- Responsive: stack, hide the big panel, show the compact brand row ---- */
@media (max-width: 900px) {
    .auth-split { flex-direction:column; }
    .auth-aside { flex:none; min-height:auto; padding:22px clamp(20px,5vw,32px); flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
    .auth-aside .auth-pitch, .auth-aside .foot { display:none; }
    .auth-main { flex:1 1 auto; }
    .auth-topbrand { display:none; }           /* aside still shows the brand compactly */
}
@media (max-width: 560px) {
    .auth-aside { display:none; }              /* drop the panel entirely on phones */
    .auth-topbrand { display:flex; }           /* and show the inline brand instead */
    .auth-main { padding:24px 16px; }
}

/* ---- Teal brand on the form controls (auth pages don't load omah-shim.css) --- */
.auth-split-body .btn-primary { background:var(--auth-teal); border-color:var(--auth-teal); }
.auth-split-body .btn-primary:hover,
.auth-split-body .btn-primary:focus { background:var(--auth-teal-dark); border-color:var(--auth-teal-dark); }
.auth-split-body .btn-link,
.auth-split-body .text-primary { color:var(--auth-teal) !important; }
.auth-split-body .form-control:focus,
.auth-split-body .form-select:focus { border-color:var(--auth-teal); box-shadow:0 0 0 3px rgba(var(--brand-rgb,14,124,123),.15); }
.auth-split-body .form-check-input:checked { background-color:var(--auth-teal); border-color:var(--auth-teal); }

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

/* Full-lockup logo variants (Admin → Settings). The lockup already contains the
   brand name, so it stands alone in place of the letter-mark + wordmark. */
.auth-brand img.lockup { height:auto; max-height:48px; max-width:80%; display:block; }
.auth-topbrand img.lockup { height:38px; width:auto; max-width:100%; display:block; }
@media (prefers-reduced-motion: reduce) { .auth-card, .auth-aside > * { animation:none; } }

/* --- Logo-only side panel (operator 2026-10-20): no pitch text; the logo big and centred.
   Applies to every page using this panel (login, forgot/reset password, onboarding, OTP). */
.auth-aside--logo { justify-content:center; align-items:center; text-align:center; }
.auth-aside--logo .auth-brand { flex-direction:column; justify-content:center; gap:18px; }
.auth-aside--logo .auth-brand img.lockup { width:min(82%, 460px); max-width:none; height:auto; max-height:none; }
.auth-aside--logo .auth-brand img.lockup.is-light { filter:none; }   /* real colours: gold mark + white text */
.auth-aside--logo .auth-brand img:not(.lockup) { height:140px; width:140px; object-fit:contain; }
.auth-aside--logo .auth-brand .mark { height:120px; width:120px; border-radius:24px; font-size:3rem; }
.auth-aside--logo .auth-brand .wm { font-size:2rem; }
.auth-aside--logo .foot { position:absolute; left:0; right:0; bottom:clamp(20px, 3vw, 32px); text-align:center; }