/* Sentinel v2 - auth.css
   Sign-in + password gate redesign, the lattice mark, favicon, per-page titles.
   Owned by the 'auth' (brand) area of the v2 redesign; tokens come from v2/tokens.css.

   1. The brand mark (.v2-mark) - the Landing's three-blade path, always currentColor. Any area may use the class.
   2. The sign-in screen's palette per theme (--au-*). #authScreen and #pwGate are children of <body>, outside #app, so the
      `.app[data-theme=X]` tokens never reach them: the reader's theme is read from body[data-theme] (theme-boot.js stamps it
      before the first paint, applyTheme on every change). Values follow the v2 spec (one cobalt brand, ink-3 #5f6874 for
      labels, the Landing's dark palette); when tokens.css lists .auth-screen in its body-portal selectors, these blocks can
      be replaced by aliases of those tokens.
   3. The lattice stage, the pause control and the mark's flight into the sidebar on a successful sign-in. */

/* ---- 1 · the brand mark ---- */
/* zero specificity, so any area's own rule for its mark (size, colour) wins whatever the stylesheet order */
:where(.v2-mark) { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; overflow: visible; }
:where(.v2-mark) path { fill: currentColor; }
.v2-mark--brand { color: var(--au-brand, var(--brand-navy)); }
/* A loader: the three blades breathe in turn. */
.v2-mark--loader { width: 28px; height: 28px; color: var(--au-brand, var(--brand-navy)); opacity: .9; }
.v2-mark--loader path { transform-box: fill-box; transform-origin: 50% 50%; }
.v2-mark--loader path { animation: v2BladeBreath 3.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.v2-mark--loader path:nth-child(2) { animation-delay: .4s; }
.v2-mark--loader path:nth-child(3) { animation-delay: .8s; }
@keyframes v2BladeBreath { 0%, 100% { opacity: 1; transform: none; } 40% { opacity: .35; transform: scale(.94); } }
.v2-brand-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }

/* ---- 2 · the screen's palette ---- */
/* Parchment (the default, and any theme this file does not know) */
.auth-screen {
  --au-bg: #f5f2ec;
  --au-panel: #faf8f3;
  --au-field: #ffffff;
  --au-hover: rgba(31, 41, 51, 0.05);
  --au-line: #e6e0d2;
  --au-line-strong: #cfc7b7;
  --au-ink: #1a2330;
  --au-ink-2: #4f5764;
  --au-ink-3: #5f6874;
  --au-ink-4: #8b94a0;
  --au-brand: #1a2fe6;
  --au-brand-hover: #1424b8;
  --au-on-brand: #ffffff;
  --au-brand-soft: rgba(26, 47, 230, 0.09);
  --au-focus: rgba(26, 47, 230, 0.24);
  --au-danger: #9f1239;
  --au-danger-soft: rgba(159, 18, 57, 0.07);
  --au-danger-line: rgba(159, 18, 57, 0.24);
  --au-warn: #c2410c;
  --au-shadow-1: 0 1px 0 rgba(26, 35, 48, 0.03);
  --au-dot: #1a2330;
}
body[data-theme="paper"] > .auth-screen {
  --au-bg: #f3f3f3; --au-panel: #fafafa; --au-field: #ffffff; --au-line: #e3e3e3; --au-line-strong: #c7c7c7;
}
body[data-theme="slate"] > .auth-screen {
  --au-bg: #e8ecf2; --au-panel: #f1f4f8; --au-field: #ffffff; --au-line: #d6dce6; --au-line-strong: #b6bdc9;
  --au-ink-3: #56606d;
}
body[data-theme="sage"] > .auth-screen {
  --au-bg: #e6ede2; --au-panel: #eef3ea; --au-field: #fbfdf6; --au-line: #d2dac4; --au-line-strong: #a9b692;
  --au-ink-3: #555f55;
}
body[data-theme="sand"] > .auth-screen {
  --au-bg: #ecdfc7; --au-panel: #f3eadb; --au-field: #fcf6e6; --au-line: #d2c39d; --au-line-strong: #b3a079;
  --au-ink-2: #463f33; --au-ink-3: #574f40; --au-ink-4: #7d725e;
}
body[data-theme="lavender"] > .auth-screen {
  --au-bg: #ebe6f2; --au-panel: #f2eff7; --au-field: #ffffff; --au-line: #ddd5e6; --au-line-strong: #b9aecc;
  --au-ink-3: #5c5868;
}
body[data-theme="graphite"] > .auth-screen {
  --au-bg: #d4d6d8; --au-panel: #dde0e2; --au-field: #f3f4f5; --au-line: #bcc0c3; --au-line-strong: #8e9296;
  --au-ink: #181a1d; --au-ink-2: #33373d; --au-ink-3: #42464d; --au-ink-4: #63676e;
  --au-brand: #1726c4; --au-brand-hover: #111d9a; --au-dot: #181a1d;
}
/* Midnight - the Landing's dark interface (v2.css .sd-demo): surfaces, lines and text verbatim, the periwinkle brand
   with dark text on it (white on a light brand fails contrast). */
body[data-theme="midnight"] > .auth-screen {
  --au-bg: #0b0d12;
  --au-panel: #11141b;
  --au-field: #171b24;
  --au-hover: rgba(255, 255, 255, 0.06);
  --au-line: rgba(255, 255, 255, 0.08);
  --au-line-strong: rgba(255, 255, 255, 0.16);
  --au-ink: #f2f3f5;
  --au-ink-2: #b6bcc6;
  --au-ink-3: #9aa1ad;
  --au-ink-4: #6b717c;
  --au-brand: #8ea0ff;
  --au-brand-hover: #a4b3ff;
  --au-on-brand: #07080b;
  --au-brand-soft: rgba(142, 160, 255, 0.12);
  --au-focus: rgba(142, 160, 255, 0.32);
  --au-danger: #ff5c7a;
  --au-danger-soft: rgba(255, 92, 122, 0.10);
  --au-danger-line: rgba(255, 92, 122, 0.30);
  --au-warn: #ff9f43;
  --au-shadow-1: none;
  --au-dot: #f2f3f5;
}
/* Eclipse - pure grey-black; the same brand, so no white-on-pastel anywhere. */
body[data-theme="eclipse"] > .auth-screen {
  --au-bg: #141414;
  --au-panel: #1b1b1b;
  --au-field: #222222;
  --au-hover: rgba(255, 255, 255, 0.06);
  --au-line: #2c2c2c;
  --au-line-strong: #4a4a4a;
  --au-ink: #f0f0f0;
  --au-ink-2: #c2c2c2;
  --au-ink-3: #a0a0a0;
  --au-ink-4: #6e6e6e;
  --au-brand: #8ea0ff;
  --au-brand-hover: #a4b3ff;
  --au-on-brand: #0b0b0b;
  --au-brand-soft: rgba(142, 160, 255, 0.11);
  --au-focus: rgba(142, 160, 255, 0.30);
  --au-danger: #ff6b81;
  --au-danger-soft: rgba(255, 107, 129, 0.10);
  --au-danger-line: rgba(255, 107, 129, 0.30);
  --au-warn: #ff9657;
  --au-shadow-1: none;
  --au-dot: #f0f0f0;
}
/* "System": the light default, or Midnight when the device is dark. */
@media (prefers-color-scheme: dark) {
  body[data-theme="system"] > .auth-screen {
    --au-bg: #0b0d12; --au-panel: #11141b; --au-field: #171b24; --au-hover: rgba(255, 255, 255, 0.06);
    --au-line: rgba(255, 255, 255, 0.08); --au-line-strong: rgba(255, 255, 255, 0.16);
    --au-ink: #f2f3f5; --au-ink-2: #b6bcc6; --au-ink-3: #9aa1ad; --au-ink-4: #6b717c;
    --au-brand: #8ea0ff; --au-brand-hover: #a4b3ff; --au-on-brand: #07080b;
    --au-brand-soft: rgba(142, 160, 255, 0.12); --au-focus: rgba(142, 160, 255, 0.32);
    --au-danger: #ff5c7a; --au-danger-soft: rgba(255, 92, 122, 0.10); --au-danger-line: rgba(255, 92, 122, 0.30);
    --au-warn: #ff9f43; --au-shadow-1: none; --au-dot: #f2f3f5;
  }
}
/* the screen's surround on overscroll and while it fades: the page colour of its own theme */
.auth-screen { color-scheme: light; }
body[data-theme="midnight"] > .auth-screen, body[data-theme="eclipse"] > .auth-screen { color-scheme: dark; }

/* ---- 3 · the lattice stage ---- */
.auth-stage {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 420px, 52vh);
  aspect-ratio: 1 / 1;
  min-height: 0;
  z-index: 1;
}
.auth-lattice { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* the static mark: shown until the canvas has drawn, on phones and without a canvas */
.auth-stage-mark {
  position: absolute; left: 50%; top: 48%;
  width: 54%; height: 54%;
  transform: translate(-50%, -50%);
  color: var(--au-ink);
  opacity: .92;
}
.auth-stage[data-mode="canvas"] .auth-stage-mark { visibility: hidden; }
.auth-stage[data-mode="svg"] .auth-lattice { display: none; }
.auth-stage[data-mode="svg"] .auth-stage-mark { visibility: visible; }
/* a short screen: the stage gives way to the words */
@media (max-height: 640px) and (min-width: 881px) {
  .auth-stage { width: min(100%, 260px, 40vh); }
  .auth-headline { font-size: 32px; line-height: 40px; }
}

/* ---- the mark's flight into the sidebar (v2/auth.js flyToSidebar) ---- */
.auth-flight {
  position: fixed; left: 0; top: 0;
  z-index: 1100;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

/* "Forgot your password?": the request's answer is news, not an error - said in the card's own ink on the brand's soft wash,
   never the danger red .auth-msg wears for a refused sign-in. The note above the field sits closer to it. */
.auth-msg.is-ok { background: var(--au-brand-soft); border-color: var(--au-line); color: var(--au-ink); }
.auth-reset-note { margin: 0 0 4px; }
.auth-switch .auth-switch-btn { margin-left: 0; }