/* ==========================================================================
   CIBL Obsidian — the sign-in stage (login, two-factor setup / verify)

   Loaded AFTER obsidian.css and consumes only its tokens. Two layouts share
   one card language:

   * .login-body.login-split  — cinematic split. LEFT ~58% is the hero film
     full-bleed (Remotion render, muted loop) under a soft vignette that
     dissolves into the seam; RIGHT ~42% is a near-black panel holding the
     glass sign-in card.
   * .login-body (plain)      — the two-factor pages: centred card over the
     slow ember drift, same card / field / button refinements.

   Restraint is the brief. One entrance per page load, one slow film,
   nothing loops in the card. Every motion rule lives under
   prefers-reduced-motion: no-preference; reduced motion gets the poster
   still (or the static ember ground) and a fully settled card.
   ========================================================================== */

/* ---- ground ---------------------------------------------------------------- */

.login-body {
  color-scheme: dark;
  overflow-x: hidden;
}
.login-body.login-split {
  display: block;
  /* obsidian.css centres the plain login body with place-items; on a block
     body that still sets justify-items, and current engines honour
     justify-self on block-level children — the stage would shrink to
     fit-content and float centred. Reset it so the stage fills the viewport. */
  place-items: normal;
  padding: 0;
  background: var(--ground);
}

/* ---- stage: film | panel --------------------------------------------------- */

.login-stage {
  display: grid;
  width: 100%;
  justify-self: stretch;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* film (left) ---------------------------------------------------------------- */

.login-film {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  isolation: isolate;
}
/* the ember drift from obsidian.css sits underneath as the always-on CSS
   fallback; the film (when rendered) fades in over it. */
.login-film .login-ember-drift { z-index: 0; }

.login-film .login-video,
.login-film .login-poster {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.login-film .login-video { opacity: 0.92; }
/* the still is only ever shown to reduced-motion users */
.login-film .login-poster { display: none; }

/* soft dark vignette: heavier on the seam so the film dissolves into the
   panel rather than meeting it at a hard edge; a light top/bottom fall-off
   keeps the caption legible over any frame. */
.login-seam {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11, 10, 9, 0.18) 0%, transparent 18%,
      transparent 58%, rgba(11, 10, 9, 0.42) 82%, var(--ground) 100%),
    linear-gradient(180deg,
      rgba(11, 10, 9, 0.28) 0%, transparent 26%,
      transparent 62%, rgba(11, 10, 9, 0.62) 100%);
}

.login-caption {
  position: absolute; left: 44px; bottom: 34px; right: 44px; z-index: 3;
  margin: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
  text-shadow: 0 1px 12px rgba(11, 10, 9, 0.8);
}

/* panel (right) --------------------------------------------------------------- */

.login-panel {
  position: relative;
  display: grid; place-items: center;
  padding: 48px 56px;
  background: var(--ground);
  border-left: 1px solid var(--hairline);
}
/* a single quiet ember bloom high on the panel — the only warmth on the
   right, so the eye keeps returning to the film. */
.login-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 420px at 100% -10%, rgba(255, 107, 0, 0.07), transparent 62%),
    radial-gradient(520px 520px at -20% 115%, rgba(255, 163, 51, 0.035), transparent 60%);
}

/* ---- the glass card ---------------------------------------------------------- */

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 40px 36px 30px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* wordmark stacked over its eyebrow — one line each, never wrapping */
.login-card .brand {
  flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 0; margin-bottom: 30px;
}
.login-card .brand-mark.brand-logo { height: 36px; }
.login-card .brand-sub { display: block; letter-spacing: 0.14em; white-space: nowrap; }

.login-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 6px;
}
.login-sub { color: var(--ink-dim); font-size: 14px; margin: 0 0 26px; }

/* fields: ember focus glow blooms in, settles, never pulses */
.login-card .field { margin-bottom: 18px; }
.login-card .field label { color: var(--ink-faint); margin-bottom: 8px; }
.login-card .field input {
  padding: 12px 14px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hairline-strong);
  transition: border-color 200ms ease, box-shadow 260ms ease, background-color 200ms ease;
}
.login-card .field input:hover { border-color: rgba(255, 255, 255, 0.18); }
.login-card .field input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ember-ring);
  box-shadow:
    0 0 0 4px rgba(255, 138, 26, 0.14),
    0 0 28px rgba(255, 107, 0, 0.14);
}
.login-card .field input::placeholder { color: var(--ink-faint); }

/* error state: the message and the fields agree */
.login-card .form-error {
  display: flex; align-items: flex-start; gap: 10px;
  border-left: 2px solid var(--bad);
  margin-bottom: 20px;
}
.login-card .form-error::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 6px;
  border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
}
.login-card .has-error .field input { border-color: rgba(255, 107, 107, 0.45); }
.login-card .has-error .field input:focus {
  border-color: var(--ember-ring);
}

/* fire button: bloom on hover, sink when pressed */
.login-card .btn-ember {
  position: relative; overflow: hidden;
  margin-top: 8px; padding: 13px 16px;
  font-size: 15px; letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition: box-shadow 260ms ease, filter 200ms ease, transform 90ms ease;
}
.login-card .btn-ember::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 120%, rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0; transition: opacity 260ms ease;
}
.login-card .btn-ember:hover {
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 10px 34px rgba(255, 107, 0, 0.38),
    0 0 0 1px rgba(255, 163, 51, 0.35);
}
.login-card .btn-ember:hover::after { opacity: 1; }
.login-card .btn-ember:active {
  transform: translateY(1px);
  filter: brightness(0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 3px 12px rgba(255, 107, 0, 0.28);
}
.login-card .btn-ember:focus-visible {
  outline: 2px solid var(--ember-hi);
  outline-offset: 3px;
}

/* footnote: mono, hairline above, a quiet mint point for "secured" */
.login-foot {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 0; padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.login-foot::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%;
  background: #3ECF8E;
  box-shadow: 0 0 8px rgba(62, 207, 142, 0.55);
}

/* ---- motion (only when the visitor allows it) ------------------------------- */

@keyframes login-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes login-film-in {
  from { opacity: 0; }
  to { opacity: 0.92; }
}
@keyframes login-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .login-card {
    animation: login-rise 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 140ms;
  }
  /* the film arrives slowly, after the card has begun to settle */
  .login-film .login-video { animation: login-film-in 1800ms ease-out both; animation-delay: 200ms; }
  .login-caption { animation: login-fade 900ms ease-out both; animation-delay: 900ms; }
  .login-panel::before { animation: login-fade 1400ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  /* no film: the poster still if it was rendered, else the static ember ground */
  .login-film .login-video { display: none; }
  .login-film .login-poster { display: block; }
  .login-card, .login-caption, .login-panel::before { animation: none; }
  .login-card .field input,
  .login-card .btn-ember, .login-card .btn-ember::after { transition: none; }
  .login-card .btn-ember:active { transform: none; }
}

/* ---- responsive ------------------------------------------------------------------
   <=900  the film becomes the whole background under a darker veil; the card
          centres over it.
   <=480  the card runs edge to edge; every control is at least 44px tall. */

@media (max-width: 1080px) {
  .login-panel { padding: 40px 36px; }
  .login-caption { left: 32px; right: 32px; bottom: 26px; }
}

@media (max-width: 900px) {
  .login-stage { grid-template-columns: 1fr; }
  .login-film {
    position: fixed; inset: 0; z-index: 0;
  }
  .login-seam {
    background:
      radial-gradient(900px 640px at 50% 38%, rgba(11, 10, 9, 0.38), rgba(11, 10, 9, 0.9));
  }
  .login-caption {
    left: 20px; right: 20px; bottom: 18px;
    text-align: center; font-size: 10px; letter-spacing: 0.14em;
  }
  .login-panel {
    position: relative; z-index: 1;
    min-height: 100vh; min-height: 100dvh;
    padding: 56px 20px 64px;
    background: transparent; border-left: none;
  }
  .login-panel::before { display: none; }
  .login-card { max-width: 440px; }
}

@media (max-width: 480px) {
  .login-panel { padding: 0; align-items: center; }
  .login-card {
    max-width: none;
    border-radius: 0; border-left: none; border-right: none;
    padding: 36px 22px 28px;
  }
  .login-card .brand { margin-bottom: 26px; }
  .login-card .brand-mark.brand-logo { height: 32px; }
  .login-title { font-size: 28px; }
  .login-card .field input { min-height: 44px; padding: 12px 14px; }
  .login-card .btn-ember { min-height: 48px; padding: 14px 16px; }
  .login-caption { display: none; }
}

/* ---- two-factor pages (plain .login-body) --------------------------------------
   Same card refinements; the ember drift ground from obsidian.css stays. */

.login-body:not(.login-split) .login-bg::after {
  background: radial-gradient(1100px 760px at 50% 42%, transparent, rgba(11, 10, 9, 0.8));
}
.login-body:not(.login-split) .login-card { max-width: 420px; }
.login-body:not(.login-split) .login-title { font-size: 26px; }
.login-body:not(.login-split) .otp-secret { margin-bottom: 20px; }

/* ---- sign-in notices: inactivity + lockout ---------------------------------------
   Same family as .form-error (left rule + dot) — the idle notice is neutral
   ember, the lockout is the red signal with the controls disabled beneath. */

.login-notice {
  position: relative;
  padding: 11px 14px 11px 26px; margin-bottom: 20px;
  font-size: 13px; line-height: 1.5; color: var(--ink-dim);
  background: var(--glass); border: 1px solid var(--hairline-strong);
  border-left: 2px solid var(--ember-hi); border-radius: var(--radius-sm);
}
.login-notice strong { color: var(--ink); font-weight: 600; }
.login-notice::before {
  content: ""; position: absolute; left: 12px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember-hi); box-shadow: 0 0 8px rgba(255, 163, 51, 0.6);
}
.login-notice-locked {
  color: var(--ink-dim);
  background: var(--bad-soft); border-color: rgba(255, 107, 107, 0.35);
  border-left-color: var(--bad);
}
.login-notice-locked strong { color: var(--bad); }
.login-notice-locked::before { background: var(--bad); box-shadow: 0 0 8px rgba(255, 107, 107, 0.6); }
.login-form[aria-disabled="true"] .field input,
.login-form[aria-disabled="true"] .btn-ember { opacity: 0.45; cursor: not-allowed; }
.login-form[aria-disabled="true"] .btn-ember:hover { filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset; }
.btn-passkey:disabled { opacity: 0.45; cursor: not-allowed; }

/* the identifier label carries its own quiet hint ("or username") */
.field-hint {
  text-transform: none; letter-spacing: 0; font-family: var(--font-body);
  font-size: 11px; color: var(--ink-faint); margin-left: 6px;
}
.field-invalid input { border-color: rgba(255, 107, 107, 0.45); }
.field-error {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bad);
}

/* ---- "or" seam between the password form and the passkey button --------------- */

.login-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline-strong);
}

/* ---- passkey button: glass, the fingerprint glyph, a title and a sub-line ------- */

.btn-passkey {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 260ms ease;
}
.btn-passkey:hover { border-color: var(--ember-ring); background: rgba(255, 255, 255, 0.05); }
.btn-passkey:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 3px; }
.btn-passkey[aria-busy="true"] { border-color: var(--ember-ring); box-shadow: 0 0 0 4px rgba(255, 138, 26, 0.12); }
.passkey-glyph { flex: 0 0 22px; color: var(--ember-hi); }
.btn-passkey-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.btn-passkey-title { font-size: 14.5px; font-weight: 600; letter-spacing: 0.005em; }
.btn-passkey-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* on the second-factor page the passkey IS the primary action */
.btn-passkey-primary {
  background: var(--ember-soft); border-color: rgba(255, 138, 26, 0.35);
  padding: 13px 16px; margin-bottom: 8px;
}
.btn-passkey-primary:hover { background: rgba(255, 138, 26, 0.2); box-shadow: 0 8px 28px rgba(255, 107, 0, 0.22); }
.btn-passkey-primary .btn-passkey-title { font-size: 15.5px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-passkey[aria-busy="true"] .passkey-glyph { animation: passkey-breathe 1.6s ease-in-out infinite; }
}
@keyframes passkey-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 163, 51, 0)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 163, 51, 0.7)); }
}

/* status line under the button; the unsupported note swaps in for the button
   once passkeys.js has decided (html[data-passkeys]). */
.passkey-status {
  margin: 10px 0 0; font-size: 13px; color: var(--ink-dim);
}
.passkey-status[data-kind="error"] { color: var(--bad); }
.passkey-status[data-kind="ok"] { color: var(--ok); }
.passkey-unsupported {
  display: none; margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint);
}
html[data-passkeys="unsupported"] .btn-passkey { display: none; }
html[data-passkeys="unsupported"] .passkey-unsupported { display: block; }

/* the authenticator-code fallback folded under the passkey button */
.otp-fallback { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.otp-fallback summary {
  cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 500; color: var(--ember-hi);
}
.otp-fallback summary::-webkit-details-marker { display: none; }
.otp-fallback summary::before { content: "→ "; color: var(--ink-faint); }
.otp-fallback[open] summary::before { content: "↓ "; }
.otp-fallback summary:hover { text-decoration: underline; }
.otp-fallback[open] summary { margin-bottom: 14px; }
html[data-passkeys="unsupported"] .otp-fallback { border-top: none; padding-top: 0; margin-top: 4px; }
html[data-passkeys="unsupported"] .otp-fallback summary { display: none; }

/* quiet links under a card's form (password change, done) */
.login-links { margin: 16px 0 0; font-size: 13px; text-align: center; color: var(--ink-dim); }
.btn-link { display: block; text-align: center; text-decoration: none; }
.btn-link:hover { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-passkey, .btn-passkey[aria-busy="true"] .passkey-glyph { transition: none; animation: none; }
}
@media (max-width: 480px) {
  .btn-passkey { min-height: 52px; }
}