/* ═══════════════════════════════════════════════════════════════════════════
   sk2-auth.css — Daylight, applied to the signup funnel and the sign-in shell
   ───────────────────────────────────────────────────────────────────────────
   Loaded ONLY by templates/landing/signup_base.html and
   users/templates/users/auth_base.html, both of which are standalone shells
   (they do not extend base_public.html and have no navbar).

   ADDITIVE ON PURPOSE — this file renames nothing.

   The funnel is the conversion path. Its six step templates carry their own
   markup, auth.js binds to those hooks, and landing/test_funnel_buttons.py
   pins the button classes, the label/spinner spans and the element ids. So
   this restyles the EXISTING `.slayout-*` / `.auth-*` shell classes in place
   rather than converting them to Daylight's `.split`/`.panel`/`.formcol`.
   Nothing about form binding, validation, spam protection or the JS hooks is
   touched, and every step keeps rendering exactly the markup it rendered
   before.

   `.slayout-*` and `.auth-*` live in auth/css/auth.css, which this file
   loads after and overrides by source order at equal specificity. auth.css is
   NOT edited: sign-in and the funnel share it, and it is outside this
   rebuild's blast radius.

   No `!important` anywhere (test_sk_css enforces it across sk2-*), and no
   font-size below the 12px floor.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sk2 .slayout-wrap,
body.sk2 .auth-split { background:var(--sk2-paper); }

/* ── the brand panel ────────────────────────────────────────────────
   Daylight's gradient plus the faint grid, replacing the flat navy. Same
   treatment as the marketing pages' .final band, so a visitor arriving from
   /start/ meets one product, not two. */
body.sk2 .slayout-brand {
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(155deg,#3A2FC4 0%,#4F46E5 42%,#7B4FE0 100%);
  border-right:0;
}
body.sk2 .slayout-brand::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
}
body.sk2 .slayout-brand > * { position:relative; z-index:2; }
body.sk2 .slayout-brand-logo,
body.sk2 .slayout-brand-logo span { color:#fff; font-weight:800; letter-spacing:-.03em; }
body.sk2 .slayout-brand-headline {
  font-size:clamp(23px,2.9vw,32px); font-weight:800; letter-spacing:-.04em; line-height:1.12; color:#fff;
}
body.sk2 .slayout-brand-sub { font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.88); }
body.sk2 .slayout-brand-sub strong { color:#fff; }
body.sk2 .slayout-trust-item { font-size:13.5px; color:rgba(255,255,255,.86); }
body.sk2 .slayout-trust-item i { color:#fff; }
body.sk2 .slayout-brand-footer { font-size:12.5px; color:rgba(255,255,255,.72); }

/* Sign-in uses its own panel class (.auth-brand-panel) rather than
   .slayout-brand, so it gets the same treatment by name. Same gradient, same
   grid, so signing in and signing up look like one product. */
body.sk2 .auth-brand-panel {
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(155deg,#3A2FC4 0%,#4F46E5 42%,#7B4FE0 100%);
}
body.sk2 .auth-brand-panel::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
}
body.sk2 .auth-brand-panel__inner { position:relative; z-index:2; }
body.sk2 .auth-brand-panel__logo,
body.sk2 .auth-brand-panel__logo span { color:#fff; font-weight:800; letter-spacing:-.03em; }
body.sk2 .auth-brand-panel__headline {
  font-size:clamp(23px,2.9vw,34px); font-weight:800; letter-spacing:-.04em; line-height:1.12; color:#fff;
}
body.sk2 .auth-brand-panel__sub { font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.88); }
body.sk2 .auth-brand-panel__sub strong { color:#fff; }
body.sk2 .auth-brand-panel__trust { font-size:13.5px; color:rgba(255,255,255,.82); }
body.sk2 .auth-back-link { font-size:13.5px; font-weight:600; color:var(--sk2-ink-3); }
body.sk2 .auth-back-link:hover { color:var(--sk2-ink); }

/* ── the form column ────────────────────────────────────────────────── */
body.sk2 .slayout-form,
body.sk2 .auth-split__main { background:var(--sk2-paper); }
body.sk2 .slayout-topbar-brand,
body.sk2 .slayout-topbar-brand span { color:var(--sk2-ink); font-weight:800; letter-spacing:-.03em; }
body.sk2 .slayout-signin-link { font-size:13.5px; color:var(--sk2-ink-3); }
body.sk2 .slayout-signin-link b { color:var(--sk2-brand); }
body.sk2 .slayout-mobile-trust { font-size:12px; color:var(--sk2-ink-3); }
body.sk2 .slayout-mobile-trust i { color:var(--sk2-good); }

body.sk2 .slayout-inner h1,
body.sk2 .auth-split__main h1 {
  font-size:clamp(25px,3vw,32px); font-weight:800; letter-spacing:-.04em; color:var(--sk2-ink);
}
body.sk2 .slayout-inner p { color:var(--sk2-ink-2); }

/* ── fields ─────────────────────────────────────────────────────────
   auth.css declares 38px fields while the widgets also carry
   `.premium-input`, which landing.css forces to 48px — the mismatch the
   funnel's own comment already records. Both are matched here to Daylight's
   46px input so the field, the Google button and the submit button finally
   agree on one height. */
body.sk2 .slayout-inner input[type="text"],
body.sk2 .slayout-inner input[type="email"],
body.sk2 .slayout-inner input[type="tel"],
body.sk2 .slayout-inner input[type="password"],
body.sk2 .slayout-inner select,
body.sk2 .auth-split__main input[type="text"],
body.sk2 .auth-split__main input[type="email"],
body.sk2 .auth-split__main input[type="password"] {
  border-radius:var(--sk2-r1); border:1px solid var(--sk2-line-2);
  background:var(--sk2-paper); color:var(--sk2-ink); font-size:15.5px;
  box-shadow:var(--sk2-sh-1);
  transition:border-color .16s ease, box-shadow .16s ease;
}
body.sk2 .slayout-inner input:focus,
body.sk2 .slayout-inner select:focus,
body.sk2 .auth-split__main input:focus {
  border-color:var(--sk2-brand); box-shadow:var(--sk2-ring); outline:none;
}
body.sk2 .form-label { font-size:13.5px; font-weight:700; color:var(--sk2-ink); }

/* ── the step's own heading block ────────────────────────────────────
   Daylight's sign-up column is left-aligned: heading, sub, then the form,
   reading top-down on one axis. The funnel's centred heading over
   left-aligned fields is what still read as the old page even after the
   panel beside it changed. Restyled by class, markup untouched. */
body.sk2 .su-section-header { text-align:left; }
body.sk2 .su-heading {
  font-size:clamp(24px,3vw,30px); font-weight:800; letter-spacing:-.04em;
  line-height:1.12; color:var(--sk2-ink);
}
body.sk2 .su-subtitle { font-size:15.5px; line-height:1.55; color:var(--sk2-ink-2); margin-top:10px; }
body.sk2 .su-oauth-btn { border-radius:var(--sk2-r1); }
body.sk2 .auth-divider span { color:var(--sk2-ink-3); }

/* Error states in Daylight's risk palette rather than Bootstrap's red. */
body.sk2 .alert-error, body.sk2 .alert-danger {
  background:var(--sk2-risk-wash); color:var(--sk2-risk);
  border:1px solid rgba(211,63,47,.22); border-radius:var(--sk2-r1);
  font-size:14px;
}

/* ── the step rail ──────────────────────────────────────────────────── */
body.sk2 .slayout-step-circle {
  border-radius:50%; font-weight:800; font-size:13px;
  border:1px solid var(--sk2-line-2); color:var(--sk2-ink-3); background:var(--sk2-paper);
}
body.sk2 .slayout-step.is-active .slayout-step-circle,
body.sk2 .slayout-step--active .slayout-step-circle {
  background:var(--sk2-brand); border-color:var(--sk2-brand); color:#fff;
  box-shadow:0 0 0 5px var(--sk2-brand-wash);
}
body.sk2 .slayout-step.is-done .slayout-step-circle,
body.sk2 .slayout-step--done .slayout-step-circle {
  background:var(--sk2-good-wash); border-color:var(--sk2-good); color:var(--sk2-good);
}
body.sk2 .slayout-step-label { font-size:12px; font-weight:700; color:var(--sk2-ink-3); letter-spacing:.04em; }
body.sk2 .slayout-check-icon { color:var(--sk2-good); }

body.sk2 .auth-divider { font-size:12.5px; color:var(--sk2-ink-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   Shell v2 (founder-approved preview, 2026-09-26/29): ONE light layout for
   sign-in and the sign-up steps. Form on the left on white; the product on the
   right on the page's soft paper with the hero's faint grid. Replaces the purple
   brand panel. New classes (.au-*, .su-*) so none of landing.css's old
   !important tablet rules on .slayout-brand / .slayout-mobile-trust apply.
   ═══════════════════════════════════════════════════════════════════════════ */
body.sk2.su-page, body.sk2.au-page { background:var(--sk2-paper); }

/* the grid: sign-up (.slayout-wrap) and sign-in (.auth-split) */
body.sk2 .slayout-wrap,
body.sk2 .auth-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100vh; }
body.sk2 .slayout-wrap { padding-top:var(--sk-offer-h, 0px); box-sizing:border-box; }
body.sk2 .slayout-form,
body.sk2 .auth-split__main { min-width:0; min-height:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  padding:0 clamp(16px,4vw,56px); background:var(--sk2-paper); overflow:visible; }

/* top row: logo, and the other door (sign in / start free trial) */
body.sk2 .slayout-topbar,
body.sk2 .au-top { display:flex; align-items:center; justify-content:space-between; gap:12px; height:auto; min-height:76px; padding:0; border:0; }
body.sk2 .slayout-topbar-brand,
body.sk2 .au-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
body.sk2 .slayout-topbar-brand img,
body.sk2 .au-logo img { width:26px; height:26px; }
body.sk2 .slayout-topbar-brand span,
body.sk2 .au-logo span { font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--sk2-ink); }
body.sk2 .slayout-signin-link,
body.sk2 .au-top__alt { margin-left:auto; font-size:14px; color:var(--sk2-ink-2); text-align:right; }
body.sk2 .slayout-signin-link b,
body.sk2 .au-top__alt a { font-weight:800; color:var(--sk2-brand); text-decoration:none; }

/* the form column */
body.sk2 .slayout-content { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 0 40px; }
body.sk2 .slayout-inner { width:100%; max-width:420px; }
body.sk2 .auth-form-wrap { width:100%; max-width:420px; margin:auto; padding:24px 0 40px; }
body.sk2 .auth-title-block h2, body.sk2 .su-heading { font-size:clamp(30px,3vw,38px); font-weight:900; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; }
body.sk2 .auth-title-block p, body.sk2 .su-subtitle { font-size:16px; line-height:1.55; color:var(--sk2-ink-2); }

/* footer line */
body.sk2 .su-foot,
body.sk2 .au-foot { display:flex; flex-wrap:wrap; gap:6px 18px; padding:18px 0 22px; font-size:12.5px; color:var(--sk2-ink-3); background:transparent; border:0; }
body.sk2 .su-foot a,
body.sk2 .au-foot a { color:var(--sk2-ink-3); text-decoration:none; }
body.sk2 .su-foot a:hover,
body.sk2 .au-foot a:hover { color:var(--sk2-ink); }

/* progress: four segments, the current step named */
body.sk2 .su-prog { margin-bottom:26px; }
body.sk2 .su-prog__lab { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:9px; }
body.sk2 .su-prog__lab b { color:var(--sk2-brand); font-weight:800; }
body.sk2 .su-prog__lab span { color:var(--sk2-ink-3); font-weight:700; }
body.sk2 .su-prog__bar { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
body.sk2 .su-prog__bar li { height:5px; border-radius:3px; background:var(--sk2-line); position:relative; overflow:hidden; }
body.sk2 .su-prog__bar li span { position:absolute; left:-9999px; }
body.sk2 .su-prog__bar li.is-done { background:var(--sk2-brand); }
body.sk2 .su-prog__bar li.is-on { background:linear-gradient(90deg, var(--sk2-brand) 50%, var(--sk2-brand-line) 50%); }

/* the phone strip: one line, scrolls rather than wraps */
body.sk2 .su-strip { display:none; }

/* the product side */
body.sk2 .su-side,
body.sk2 .au-side { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  padding:48px clamp(24px,4vw,64px); background:var(--sk2-paper-2); border-left:1px solid var(--sk2-line); }
body.sk2 .su-side::before,
body.sk2 .au-side::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--sk2-line) 1px, transparent 1px), linear-gradient(90deg, var(--sk2-line) 1px, transparent 1px);
  background-size:56px 56px; opacity:.55;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent); mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent); }
body.sk2 .su-side::after,
body.sk2 .au-side::after { content:""; position:absolute; left:50%; top:30%; width:720px; height:520px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(45% 45% at 40% 50%, rgba(109,94,248,.20), transparent 70%), radial-gradient(35% 40% at 70% 60%, rgba(46,155,214,.14), transparent 70%); filter:blur(8px); }
body.sk2 .su-side__in,
body.sk2 .au-side__in { position:relative; z-index:1; width:100%; max-width:520px; display:flex; flex-direction:column; gap:14px; }
body.sk2 .su-side__k,
body.sk2 .au-side__k { font:500 12px var(--sk2-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sk2-brand); }
body.sk2 .su-side__h,
body.sk2 .au-side__h { margin:0; font-size:clamp(22px,2.1vw,28px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--sk2-ink); text-wrap:balance; }
body.sk2 .su-side__card { margin-top:8px; }
body.sk2 .sqb--compact .sqb__row:nth-child(n+4) { display:none; }
body.sk2 .su-trust { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:nowrap; gap:18px; white-space:nowrap;
  overflow-x:auto; scrollbar-width:none; font-size:13.5px; font-weight:600; color:var(--sk2-ink-2); }
body.sk2 .su-trust::-webkit-scrollbar { display:none; }
body.sk2 .su-trust li { flex:none; display:flex; align-items:center; gap:7px; }
body.sk2 .su-trust i { color:var(--sk2-good); }
body.sk2 .au-ship { background:#fff; border:1px solid var(--sk2-line); border-radius:var(--sk2-r3); padding:6px 20px; box-shadow:var(--sk2-sh-2); margin:0; }
body.sk2 .au-ship li:first-child { border-top:0; }

@media (max-width:1100px){
  body.sk2 .slayout-wrap, body.sk2 .auth-split { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}
@media (max-width:900px){
  body.sk2 .slayout-wrap, body.sk2 .auth-split { grid-template-columns:minmax(0,1fr); min-height:0; }
  body.sk2 .su-side, body.sk2 .au-side { display:none; }
  /* .slayout-content is a COLUMN flexbox (landing.css): align-items is the
     horizontal axis, so the form stays centred; justify-content anchors it at the top. */
  body.sk2 .slayout-content { align-items:center; justify-content:flex-start; padding:20px 0 32px; }
  body.sk2 .auth-form-wrap { margin:0 auto; padding:20px 0 32px; }
  body.sk2 .slayout-topbar, body.sk2 .au-top { min-height:64px; }
  body.sk2 .su-strip { display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; white-space:nowrap;
    margin:0 calc(-1 * clamp(16px,4vw,56px)); padding:9px clamp(16px,4vw,56px);
    background:var(--sk2-paper-2); border-block:1px solid var(--sk2-line); font-size:13px; font-weight:700; color:var(--sk2-ink-2); }
  body.sk2 .su-strip::-webkit-scrollbar { display:none; }
  body.sk2 .su-strip span { flex:none; }
  body.sk2 .su-strip i { color:var(--sk2-good); margin-right:6px; }
  body.sk2 .su-foot, body.sk2 .au-foot { justify-content:center; }
}
@media (max-width:470px){
  body.sk2 .slayout-signin-link, body.sk2 .au-top__alt { font-size:13px; }
}
/* auth.css makes <body> its own scroller (overflow-y:auto), which drew a second
   scrollbar beside the page; the document scrolls instead. */
body.sk2.au-page { overflow:visible; height:auto; }
body.sk2 .auth-title-block p { margin-top:10px; }
body.sk2 .auth-label-row a { font-size:13px; font-weight:700; color:var(--sk2-brand); }
body.sk2 .btn-auth { font-size:16px; font-weight:700; border-radius:12px; }
body.sk2 .auth-oauth-btn { font-size:15.5px; font-weight:700; color:var(--sk2-ink); border-radius:12px; }
body.sk2 .auth-remember { font-size:14px; color:var(--sk2-ink-2); }
body.sk2 .auth-footer-link span { font-size:14.5px; color:var(--sk2-ink-2); }
body.sk2 .auth-footer-link a { font-weight:800; }
body.sk2 .au-side .more-link { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--sk2-brand); text-decoration:none; }
body.sk2 .au-side .more-link i { font-size:12px; }
body.sk2 .slayout-inner .sk-btn--field { font-size:16px; font-weight:700; }
body.sk2 .au-ship { padding:4px 20px; }