/* ══════════════════════════════════════════════════════════════════
   Auth surfaces — sign-in, SSO redirect, invitation acceptance.
   ══════════════════════════════════════════════════════════════════
   2026-05-19 overhaul: editorial split layout with a video brand
   canvas on the left, form on the right. Uses --slate-* brand
   tokens (scheme-independent) instead of --aqos-* product tokens.
   Auth is a brand surface — unauthenticated, public-facing — so it
   lives on the brand layer per tokens.css v1.5 and the rationale
   in docs/login-overhaul-plan.md.

   Visual budget (was 15+ hairline borders, now ≤2 per screen):
     - Brand panel: 0 borders. Surface is the video + dark overlay.
     - Form panel:  1 border, the hairline above .aq-auth-card-foot.
     - Inputs:      0 borders at rest, focus ring only.
     - Buttons:     0 borders.
     - Chips:       0 borders (the wordmark + dev pill use blurred
                    dark backdrops, no outline).

   Class-name compatibility: existing JSX still uses .aq-auth-card,
   .aq-auth-field, .aq-auth-input, .aq-auth-btn. Those names are
   retained — only the styles change. New container classes
   (.aq-auth-brand-panel, .aq-auth-form-panel) replace the old
   single-column .aq-auth-top / .aq-auth-stage / .aq-auth-foot
   layout. The old classes are kept as `display: none` no-ops so any
   in-flight JSX changes that still reference them degrade gracefully.
   ══════════════════════════════════════════════════════════════════ */

/* ── Shell: 2-column split ─────────────────────────────────────── */
.aq-auth {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--slate-canvas);
  color: var(--slate-text);
  font-family: var(--aqos-ff-sans);
  overflow: hidden;
}

@media (max-width: 900px) {
  .aq-auth { grid-template-columns: 1fr; }
  .aq-auth-brand-panel { display: none; }
}

/* ── Brand canvas (left) ───────────────────────────────────────── */
.aq-auth-brand-panel {
  position: relative;
  padding: 32px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
  /* Fallback colour so the panel isn't black if the video fails. */
  background-color: #050810;
}

/* Photographic brand image (aquarium kiosk hero). The filter is
   lighter than the cyan-jellyfish video tuning: drop the hue-rotate
   entirely (would shift skin tones + the yellow butterflyfish),
   ease the saturation reduction (0.85 instead of 0.6 keeps colours
   recognisable), and lighten the dim slightly (0.82 vs 0.75). The
   legacy .aq-auth-brand-video selector is kept as an alias so any
   in-flight markup still using it stays positioned. */
.aq-auth-brand-image,
.aq-auth-brand-video {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: brightness(0.82) contrast(1.05) saturate(0.85);
}

.aq-auth-brand-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Lighter than before — there's no overlaid type to protect
     anymore (wordmark moved to the form column). Just a soft dim
     pass to ground the video in the slate-canvas palette and give
     the dev pill a slightly darker bottom-right corner to sit on. */
  background:
    linear-gradient(135deg, rgba(8,10,14,0.20) 0%, rgba(8,10,14,0.05) 50%, rgba(8,10,14,0.35) 100%),
    linear-gradient(to bottom, rgba(8,10,14,0.15) 0%, transparent 30%, transparent 70%, rgba(8,10,14,0.45) 100%);
}

/* Wordmark chip + brand-hero from earlier draft: deprecated. The
   wordmark is now in the form column (see .aq-auth-wordmark below)
   and there is no overlaid hero text. Selectors kept as no-ops in
   case stale markup still references them. */
.aq-auth-brand-chip,
.aq-auth-brand-chip-name,
.aq-auth-brand-hero { display: none; }

/* Region pill — bottom-right, blurred chip backdrop so it's not
   floating text. Replaces the previous top-right "local · dev" pill
   AND the bottom-left "DEV · signed out · ..." chip; one piece of
   dev-chrome instead of three. */
.aq-auth-region-chip {
  position: absolute;
  z-index: 2;
  right: 24px; bottom: 22px;
  padding: 5px 11px 5px 9px;
  background: rgba(10,11,14,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center;
}
.aq-auth-region-chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: oklch(0.78 0.13 160);
  display: inline-block; margin-right: 6px;
  box-shadow: 0 0 6px oklch(0.78 0.13 160 / 0.5);
}

/* ── Form panel (right) ────────────────────────────────────────── */
.aq-auth-form-panel {
  position: relative;
  padding: 32px 56px;
  background: var(--slate-canvas);
  display: grid;
  grid-template-rows: auto 1fr;
}
/* Subtle atmospheric wash so the right side doesn't read as a stark
   cliff next to the rich left panel. Single soft radial in the top-
   right corner, near-invisible but enough to give the eye somewhere
   to land. */
.aq-auth-form-panel::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 85% 15%, rgba(255,255,255,0.025) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.aq-auth-form-panel > * { position: relative; z-index: 1; }

/* Middle row — vertically + horizontally center the form column. */
.aq-auth-form-stage {
  display: grid;
  place-items: center;
}

/* Form column — wordmark + form stacked together. Single source
   of brand presence on the screen. */
.aq-auth-form-col {
  width: 100%;
  max-width: 360px;
}

/* ── Wordmark above the form ──────────────────────────────────────
   "slate" + small terminator square. The square is the entire mark
   in the new identity — no separate icon. Sized so the wordmark
   reads as the primary element on the right column, sits ~52px
   above the "Welcome back" headline. Square is 0.18em tall, set on
   the baseline (with a hair of lift via translate so it visually
   sits where a period would). */
.aq-auth-wordmark {
  display: flex; align-items: baseline; gap: 0.08em;
  margin-bottom: 52px;
  font-size: 46px;
  color: var(--slate-bone);
}
.aq-auth-wordmark-name {
  font-family: var(--aqos-ff-display);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1;
}
.aq-auth-wordmark-square {
  display: inline-block;
  width: 0.20em;
  height: 0.20em;
  background: currentColor;
  /* Lift slightly so the square sits in the period zone, not the
     descender zone. */
  transform: translateY(-0.07em);
}
/* Optional neutral descriptor — appears only if the JSX adds the
   .aq-auth-wordmark-tag span. Strict palette: slate-dim, small,
   factual. Not a slogan. */
.aq-auth-wordmark-tag {
  display: block;
  margin-top: 4px;
  font-family: var(--aqos-ff-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--slate-dim);
  letter-spacing: 0;
}

.aq-auth-form-top {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--slate-dim);
}
.aq-auth-form-top a {
  color: var(--slate-text);
  text-decoration: none;
}
.aq-auth-form-top a:hover { color: var(--slate-bone); }

/* ── Form container (legacy class name kept; visually borderless) ─ */
.aq-auth-card {
  align-self: center;
  width: 100%; max-width: 360px;
  margin: 0 auto;
  padding: 24px 0;
  /* The form-panel canvas is the surface. The form itself has no
     background, no border, no shadow. */
  background: transparent;
  border: 0;
  box-shadow: none;
}
.aq-auth-card.is-wide { max-width: 440px; }

/* Eyebrow killed visually but kept selectable so existing JSX
   doesn't break — the .aq-auth-eyebrow div is still in some screens
   while we iterate on the JSX. */
.aq-auth-eyebrow { display: none; }

.aq-auth-card h1 {
  margin: 0 0 6px;
  font-family: var(--aqos-ff-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--slate-bone);
  text-wrap: pretty;
}
.aq-auth-card-sub {
  margin: 0 0 32px;
  font-size: 13.5px;
  color: var(--slate-dim);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Fields ────────────────────────────────────────────────────── */
.aq-auth-field {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.aq-auth-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 500;
  color: var(--slate-dim);
}
.aq-auth-label-link {
  font-size: 12px;
  color: var(--slate-dim);
  text-decoration: none;
}
.aq-auth-label-link:hover { color: var(--slate-text); }

.aq-auth-input {
  display: flex; align-items: center;
  height: 42px;
  padding: 0 14px;
  background: var(--slate-raised);
  border: 0;
  border-radius: 9px;
  color: var(--slate-bone);
  font-size: 14px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.aq-auth-input:hover {
  background: color-mix(in srgb, var(--slate-raised) 70%, var(--slate-surface) 30%);
}
/* Focus ring — 2px slate-bone instead of indigo accent (the brand
   layer has no saturated accent). */
.aq-auth-input.is-focused,
.aq-auth-input:focus-within {
  box-shadow: 0 0 0 2px var(--slate-bone);
  background: var(--slate-raised);
}
.aq-auth-input input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  color: inherit;
  font: inherit;
  font-size: 14px;
}
.aq-auth-input input::placeholder { color: var(--slate-faint); }
.aq-auth-input input:disabled {
  color: var(--slate-dim);
  cursor: not-allowed;
}

/* Icons-inside-inputs killed — Linear dropped these in 2024 because
   they add visual weight without helping scanning. Class kept so old
   markup degrades quietly. */
.aq-auth-input-icon { display: none; }

/* ── Buttons ───────────────────────────────────────────────────── */
.aq-auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%; height: 44px;
  margin-top: 8px;
  background: var(--slate-bone);
  border: 0;
  border-radius: 9px;
  color: var(--slate-canvas);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: filter 120ms ease, transform 60ms ease;
}
.aq-auth-btn:hover { filter: brightness(0.94); }
.aq-auth-btn:active { transform: translateY(1px); }
.aq-auth-btn:disabled { opacity: 0.6; cursor: default; }
.aq-auth-btn .aq-auth-kbd {
  background: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.55);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.aq-auth-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%; height: 42px;
  margin-top: 10px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--slate-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 450;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.aq-auth-btn-ghost:hover {
  background: var(--slate-surface);
  color: var(--slate-bone);
}
.aq-auth-btn-ghost svg { width: 14px; height: 14px; opacity: 0.75; }

/* ── Card foot — single hairline ──────────────────────────────── */
.aq-auth-card-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px;
  color: var(--slate-dim);
  text-align: left;
}
.aq-auth-card-foot a {
  color: var(--slate-bone);
  text-decoration: none;
  font-weight: 500;
}
.aq-auth-card-foot a:hover { text-decoration: underline; }

/* ── Inline error ──────────────────────────────────────────────── */
.aq-auth-err {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--aqos-danger, oklch(0.70 0.16 25)) 12%, transparent);
  color: var(--aqos-danger, oklch(0.70 0.16 25));
  font-size: 12px;
  border-radius: 8px;
}

/* ── SSO handoff (SsoScreen) ──────────────────────────────────── */
/* Borderless row showing the IDP being handed off to. Replaces the
   previous bordered tile + dashed-arrow trail.  */
.aq-auth-sso-handoff {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0;
  margin: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aq-auth-sso-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f25022 0% 25%, #7fba00 25% 50%, #00a4ef 50% 75%, #ffb900 75% 100%);
}
.aq-auth-sso-icon.is-google { background: linear-gradient(135deg, #f9d34a, #ea7868 50%, #5d8df0); }
.aq-auth-sso-icon.is-saml {
  background: var(--slate-raised);
  color: var(--slate-bone);
  display: grid; place-items: center;
}
.aq-auth-sso-name {
  font-family: var(--aqos-ff-display);
  font-size: 14px; font-weight: 500;
  color: var(--slate-bone);
}
.aq-auth-sso-meta {
  font-size: 12px;
  color: var(--slate-dim);
  margin-top: 2px;
}
.aq-auth-sso-spin {
  width: 13px; height: 13px;
  border: 1.5px solid rgba(255,255,255,0.08);
  border-top-color: var(--slate-bone);
  border-radius: 50%;
  animation: aq-auth-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes aq-auth-spin { to { transform: rotate(360deg); } }

/* ── Invite acceptance ────────────────────────────────────────── */
.aq-auth-invite-org {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aq-auth-invite-org-mark {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--slate-raised);
  color: var(--slate-bone);
  display: grid; place-items: center;
  font-family: var(--aqos-ff-display);
  font-size: 17px; font-weight: 600;
  flex-shrink: 0;
}
.aq-auth-invite-org-name {
  font-family: var(--aqos-ff-display);
  font-size: 14px; font-weight: 500;
  color: var(--slate-bone);
  letter-spacing: -0.005em;
}
.aq-auth-invite-org-email {
  margin-top: 2px;
  font-size: 12px;
  color: var(--slate-dim);
}
.aq-auth-invite-role {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: var(--slate-surface);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--slate-text);
  flex-shrink: 0;
}
.aq-auth-invite-expires {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--slate-faint);
  text-align: center;
}

/* ── Deprecated legacy classes — keep as no-ops while iterating ── */
.aq-auth-top,
.aq-auth-stage,
.aq-auth-foot,
.aq-auth-foot-links,
.aq-auth-glow,
.aq-auth-grid,
.aq-auth-region,
.aq-auth-mark,
.aq-auth-name,
.aq-auth-top-meta,
.aq-auth-or,
.aq-auth-sso-list,
.aq-auth-sso-row,
.aq-auth-sso-logo,
.aq-auth-sso-text { display: none; }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Image content has no motion, so reduced-motion users get the
     same hero — only video would have been hidden. Kept the legacy
     .aq-auth-brand-video rule in case markup reverts to a clip. */
  .aq-auth-brand-video { display: none; }
}