/* W1 sign-in pages: split screen (brand panel + form), brand panel stacks above the form under 1024px.
   Flat rule: the brand panel is a solid brand-teal surface (white text, AA on --sb-teal-strong) with the official stacked
   white logo; on phones it turns into a soft-tint strip with the teal lockup above the form. No gradients, glows or blur. */
@layer layout {
  .sb-auth {
    min-block-size: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 30rem), 42rem);
  }

  .sb-auth__brand {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-8);
    padding: clamp(var(--sb-space-6), 4vw, var(--sb-space-12));
    --sb-focus: var(--sb-on-accent);
    color: var(--sb-on-accent);
    background: var(--sb-teal-strong);
  }

  .sb-auth__main {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: var(--sb-space-4) clamp(var(--sb-space-4), 4vw, var(--sb-space-12)) var(--sb-space-8);
    background: var(--sb-bg);
  }
  .sb-auth__main:focus { outline: none; }

  .sb-auth__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); }
  .sb-auth__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sb-space-8); }
  .sb-auth__form { display: flex; flex-direction: column; gap: var(--sb-space-5); }

  @media (max-width: 1023.98px) {
    .sb-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .sb-auth__brand { gap: var(--sb-space-4); padding: var(--sb-space-6) var(--sb-gutter); }
    .sb-auth__main { padding-inline: var(--sb-gutter); }
    .sb-auth__body { justify-content: flex-start; padding-block: var(--sb-space-6); }
  }
}

@layer components {
  /* Logo lockup: large in the panel, medium when the panel stacks above the form; clear space from the padding. */
  .sb-auth__logo { display: inline-flex; align-self: flex-start; padding: var(--sb-space-2); margin: calc(-1 * var(--sb-space-2)); border-radius: var(--sb-radius-md); }
  .sb-auth__logo-stacked { --sb-logo-h: clamp(64px, 6vw, 88px); }
  .sb-auth__logo-lockup { display: none; --sb-logo-h: 32px; }
  .sb-auth__headline { font-size: clamp(var(--sb-fs-2xl), 3.2vw, var(--sb-fs-5xl)); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; max-inline-size: 18ch; color: var(--sb-on-accent); }
  .sb-auth__lead { font-size: var(--sb-fs-lg); max-inline-size: 40ch; color: var(--sb-on-accent); }
  .sb-auth__points { display: grid; gap: var(--sb-space-3); padding: 0; list-style: none; }
  .sb-auth__points li { display: flex; align-items: center; gap: var(--sb-space-3); font-weight: 600; }
  .sb-auth__points .sb-icon {
    inline-size: 40px; block-size: 40px; padding: 10px; border-radius: var(--sb-radius-md);
    background: var(--sb-teal-dark); color: var(--sb-on-accent);
  }
  /* Hand-drawn style card illustration on the teal panel: white shapes at two opacities, a white card, solid only. */
  .sb-auth__art { inline-size: min(100%, 26rem); margin-block-start: auto; align-self: center; color: var(--sb-on-accent); }
  .sb-auth__art .sb-auth__art-soft { opacity: 0.25; }
  .sb-auth__art .sb-auth__art-mid { opacity: 0.5; }
  .sb-auth__art-card { color: var(--sb-on-accent); }
  .sb-auth__art-lines { color: var(--sb-teal-strong); }
  .sb-auth__art-badge { color: var(--sb-teal-strong); }
  .sb-auth__art-check { color: var(--sb-on-accent); }

  .sb-auth__title { font-size: clamp(var(--sb-fs-2xl), 2.4vw, var(--sb-fs-3xl)); }
  .sb-auth__subtitle { color: var(--sb-ink-2); margin-block-start: var(--sb-space-2); }
  .sb-auth__heading { margin-block-end: var(--sb-space-6); }
  .sb-auth__icon-badge {
    display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: var(--sb-space-4);
    border-radius: var(--sb-radius-lg); background: var(--sb-teal-strong); color: var(--sb-on-accent);
  }
  .sb-auth__icon-badge .sb-icon { inline-size: 26px; block-size: 26px; }
  .sb-auth__link { color: var(--sb-teal-ink); font-weight: 700; font-size: var(--sb-fs-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .sb-auth__link:hover { text-decoration-thickness: 2px; }
  .sb-auth__link--block { display: inline-flex; align-items: center; gap: var(--sb-space-1); min-block-size: 44px; }
  .sb-auth__footer { color: var(--sb-ink-2); font-size: var(--sb-fs-sm); text-align: center; }

  .sb-auth__toolbar .sb-btn { min-block-size: 44px; }
  .sb-auth__home { margin-inline-end: auto; }
  .sb-auth__theme { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); background: var(--sb-surface-2); }
  .sb-auth__theme button { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: calc(var(--sb-radius-md) - 3px); color: var(--sb-ink-2); }
  .sb-auth__theme button[aria-checked="true"] { background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-sm); }

  .sb-auth .sb-menu { inline-size: 220px; inset-block-start: var(--sb-space-12); }

  @media (max-width: 1023.98px) {
    .sb-auth .sb-menu { inset-block: auto var(--sb-space-4); inset-inline: var(--sb-gutter); inline-size: auto; }
    .sb-auth__logo-stacked { --sb-logo-h: 56px; }
    .sb-auth__headline { max-inline-size: none; }
    .sb-auth__points { grid-auto-flow: column; justify-content: start; gap: var(--sb-space-5); }
    .sb-auth__points .sb-icon { inline-size: 32px; block-size: 32px; padding: 7px; }
    .sb-auth__art { display: none; }
  }
  @media (max-width: 767.98px) {
    .sb-auth__brand { --sb-focus: var(--sb-teal-ink); color: var(--sb-ink); background: var(--sb-teal-surface); border-block-end: 1px solid var(--sb-border); }
    .sb-auth__headline { color: var(--sb-teal-ink); }
    .sb-auth__logo-stacked { display: none; }
    .sb-auth__logo-lockup { display: inline-flex; }
    .sb-auth__lead, .sb-auth__points { display: none; }
    .sb-auth__headline { font-size: var(--sb-fs-xl); }
  }
}

@layer flat {
  @media (prefers-reduced-motion: no-preference) {
    .sb-auth__body > * { animation: sb-auth-rise var(--sb-dur-page) var(--sb-ease) both; }
  }
  @keyframes sb-auth-rise { from { opacity: 0; translate: 0 12px; } }
}