/* ============================================================================
   SkyQon — sign-in ("Trust Slate v2")

   This page is intentionally SELF-CONTAINED (skyqon-ui.css, the older shared
   token system, was retired in Trust Slate B6 — the satellites now ride
   css/trust-slate.css). All Trust Slate tokens + components live here so the
   redesign can't drift the other auth surfaces. Behaviour, form field names,
   element ids, api.js and theme.js are all preserved verbatim.

   The one color rule: BLUE = system / verified (status pulse, links, metric
   underlines, icon tiles, framework seals, input focus). GOLD = identity + the
   action (the emphasized headline word + the Sign-in button) and NOTHING else.
   Status chips keep their own OK / WARN / CRITICAL semantics.
   ============================================================================ */

/* ── Tokens: light "slate" is the base; dark is a full mirror ─────────────── */
:root {
  --font:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --paper:      #F4F7FB;
  --ink:        #0E1B2E;
  --ink-soft:   #46566B;
  --muted:      #8695A8;
  --card:       #FFFFFF;
  --line:       #E3E9F1;
  --line-soft:  #EEF2F8;

  --blue:        #0E6FBF;
  --blue-strong: #0B588F;
  --blue-tint:   #E8F1FB;
  --blue-line:   #CFE2F5;

  --gold:        #B98A22;
  --gold-strong: #98700F;
  --cta:         linear-gradient(180deg, #D0A63E, #B98A22);
  --cta-on:      #241905;

  --ok-bg:#E7F4EC;  --ok-tx:#1B7A49;  --ok-ln:#CBE7D6;
  --warn-bg:#FBF0DC; --warn-tx:#8D5A11; --warn-ln:#EFD8AC;
  --crit-bg:#FCEAEA; --crit-tx:#B23636; --crit-ln:#F2CCCC;

  --shadow:    0 18px 44px -32px rgba(14,27,46,.34);
  --shadow-lg: 0 34px 72px -38px rgba(14,27,46,.36);

  /* background-treatment tints */
  --glow:      rgba(14,111,191,.09);
  --top-grad:  linear-gradient(180deg, #EDF3FA 0%, transparent 30%);
  --dot:       rgba(14,111,191,.14);
}

/* Dark mirror — dark slate surfaces, lifted blue, same gold. */
[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
[data-theme="dark"] {
  --paper:      #0A1524;
  --ink:        #E9EFF7;
  --ink-soft:   #AEBCCF;
  --muted:      #7688A0;
  --card:       #10203A;
  --line:       rgba(255,255,255,.09);
  --line-soft:  rgba(255,255,255,.055);

  --blue:        #4C9BE8;
  --blue-strong: #7FB8F2;
  --blue-tint:   rgba(76,155,232,.13);
  --blue-line:   rgba(76,155,232,.32);

  --gold:        #D0A63E;
  --gold-strong: #E7C063;   /* lifted so the headline em + links read AA on slate */
  --cta:         linear-gradient(180deg, #D8B24E, #BE9530);
  --cta-on:      #241905;

  --ok-bg:rgba(52,180,120,.14);  --ok-tx:#63D6A0;  --ok-ln:rgba(52,180,120,.32);
  --warn-bg:rgba(214,158,60,.14); --warn-tx:#E9B85C; --warn-ln:rgba(214,158,60,.34);
  --crit-bg:rgba(224,90,90,.15);  --crit-tx:#F0888A; --crit-ln:rgba(224,90,90,.36);

  --shadow:    0 22px 50px -30px rgba(0,0,0,.62);
  --shadow-lg: 0 40px 80px -34px rgba(0,0,0,.66);

  --glow:      rgba(76,155,232,.14);
  --top-grad:  linear-gradient(180deg, rgba(76,155,232,.06) 0%, transparent 32%);
  --dot:       rgba(127,184,242,.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex; flex-direction: column;
  /* This sheet defaults to LIGHT (dark ink on #F4F7FB), where grayscale
     smoothing thins every stroke. Grayscale is restored only for the dark
     theme, which is genuinely light-on-dark. (Legibility pass, 2026-08-30.) */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-weight: 420;
  text-rendering: optimizeLegibility;
}

/* ── Passive background treatment (three layers, behind content) ─────────── */
.page { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
/* 1) radial blue glow, top-right  +  2) top cool gradient */
.page::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 92% -6%, var(--glow), transparent 60%),
    var(--top-grad);
}
/* 3) dotted grid across the top ~520px, masked to fade out */
.page::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 520px;
  z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}
/* Real children (header / main / footer) sit above the pseudo backgrounds. */
.page > * { position: relative; z-index: 1; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 1260px; width: 100%;
  margin: 0 auto; padding: 20px 44px 0;
}
.hdr-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  /* Now an outbound link to skyqon.com; without this it inherits the UA
     default link blue, which is unreadable on the ink header if any text
     is ever placed directly in the anchor. The pill keeps its own colour. */
  color: inherit; }
.hdr-logo {
  height: 30px; display: block; flex: none;
}
/* wordmark fallback if the logo image ever 404s (logoFallback) */
.brand-fallback { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.brand-fallback .tri {
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 12px solid var(--gold);
}
.brand-fallback .q { color: var(--gold); }
.hdr-divider { width: 1px; height: 20px; background: var(--line); }
.hdr-label { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.hdr-pill {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-strong);
  background: var(--blue-tint); border: 1px solid var(--blue-line);
  padding: 4px 9px; border-radius: 100px;
}
.hdr-right { display: inline-flex; align-items: center; gap: 14px; }

/* theme toggle — pinned right, active state = blue-tint (per spec) */
.theme-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.theme-toggle button {
  width: 30px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); border-radius: 7px;
  transition: color .15s, background .15s;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.active { background: var(--blue-tint); color: var(--blue-strong); }
.theme-toggle button svg { width: 15px; height: 15px; display: block; }

/* ── Two-column shell ────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 60px;
  max-width: 1260px; width: 100%;
  margin: 0 auto; padding: 26px 44px 60px;
  align-items: start;
}

/* ── Hero (left) ─────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--blue-strong); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 20px;
}
.dot-pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(14,111,191,.55);
}
.h1 {
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
  color: var(--ink); margin-bottom: 20px;
}
.h1 em { font-style: normal; color: var(--gold-strong); }
.accent-rule {
  width: 60px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 22px;
}
.subcopy {
  max-width: 36em; font-size: 16px; line-height: 1.72;
  color: var(--ink-soft); margin-bottom: 34px;
}

/* Live certificate monitor — a styled table, not a terminal */
.monitor {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 34px;
}
.monitor-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.monitor-head .active-n { color: var(--ink); }
.monitor-scan { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.monitor-scan .dot-pulse { width: 6px; height: 6px; }
.monitor-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
}
.monitor-row:last-child { border-bottom: none; }
.monitor-host { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.monitor-host .port { color: var(--muted); }
.monitor-days { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); text-align: right; min-width: 44px; }
.chip {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; min-width: 66px; text-align: center;
}
.chip-ok   { background: var(--ok-bg);   color: var(--ok-tx);   border: 1px solid var(--ok-ln); }
.chip-warn { background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-ln); }
.chip-crit { background: var(--crit-bg); color: var(--crit-tx); border: 1px solid var(--crit-ln); }

/* Proof metrics rail */
.metrics { display: flex; gap: 46px; flex-wrap: wrap; margin-bottom: 36px; }
.metric-num { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.metric-underline { width: 26px; height: 2px; background: var(--blue); border-radius: 2px; margin: 9px 0 8px; }
.metric-cap { font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 15em; }

/* Value pillars (2×2) */
.pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px;
  margin-bottom: 34px;
}
.pillar { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; }
.pillar-icon {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--blue-tint); border: 1px solid var(--blue-line);
  color: var(--blue-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.pillar-icon svg { width: 16px; height: 16px; }
.pillar-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.pillar-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Framework seal strip */
.seals { border-top: 1px solid var(--line); padding-top: 22px; }
.seals-cap {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 13px;
}
.seal-row { display: flex; flex-wrap: wrap; gap: 10px; }
.seal {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 12px;
}
.seal svg { width: 14px; height: 14px; color: var(--blue); flex: none; }

/* ── Sign-in card (right) ────────────────────────────────────────────────── */
.auth-col { position: sticky; top: 24px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 38px 36px;
}
.card-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-strong); margin-bottom: 12px;
}
.card-title {
  font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  color: var(--ink); margin-bottom: 8px;
}
.card-lead { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 24px; }

/* Fields */
.field { margin-bottom: 16px; }
.field > label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 7px;
}
.field input {
  width: 100%; height: 48px; padding: 0 14px;
  background: #F8FAFC; border: 1px solid var(--line);
  border-radius: 11px; color: var(--ink);
  font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
[data-theme="dark"] .field input { background: rgba(255,255,255,.03); }
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-tint);
  background: var(--card);
}

/* Primary CTA — gold gradient (identity + the action) */
.btn-cta {
  width: 100%; height: 50px; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cta); color: var(--cta-on);
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; font-family: inherit; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(185,138,34,.7);
  transition: transform .1s, box-shadow .15s, filter .15s;
}
.btn-cta svg { width: 17px; height: 17px; }
.btn-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 30px -14px rgba(185,138,34,.8); }
.btn-cta:active:not(:disabled) { transform: translateY(0); }
.btn-cta:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.btn-cta:disabled { opacity: .6; cursor: default; box-shadow: none; filter: saturate(.7); }

/* "or" divider */
.or-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--muted); font-size: 12px;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Passkey — outline button, blue on hover */
.btn-passkey {
  width: 100%; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-passkey svg { width: 16px; height: 16px; }
.btn-passkey:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-strong); }
.btn-passkey:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-passkey:disabled { opacity: .6; cursor: default; }

/* Secondary button used inside MFA panels (reuse CTA look, smaller top gap) */
.btn-cta.btn-mfa { margin-top: 4px; }

.support {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
}
.support a { color: var(--blue-strong); text-decoration: none; }
.support a:hover { text-decoration: underline; }

/* Trust row — three architecturally-true, green-checked claims */
.trust-row {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-soft);
}
.trust-item svg { width: 14px; height: 14px; color: var(--ok-tx); flex: none; }

.card-cta-line {
  margin-top: 22px; text-align: center; font-size: 13px; color: var(--ink-soft);
}
.card-cta-line a { color: var(--gold-strong); text-decoration: none; font-weight: 600; }
.card-cta-line a:hover { text-decoration: underline; }

/* Domain-check acquisition hook */
.domain-hook { margin-top: 14px; text-align: center; }
.domain-hook a {
  font-size: 12.5px; color: var(--blue-strong); text-decoration: none; font-weight: 500;
}
.domain-hook a:hover { text-decoration: underline; }

/* ── Alerts / notices (ids preserved for the auth script) ────────────────── */
.auth-error-v2 {
  display: none;
  background: var(--crit-bg); border: 1px solid var(--crit-ln);
  border-left: 3px solid var(--crit-tx);
  color: var(--crit-tx); font-size: 13px; line-height: 1.5;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 18px;
}
.auth-notice {
  display: none; margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  background: var(--warn-bg); border: 1px solid var(--warn-ln); color: var(--warn-tx);
}

/* MFA panels — inherit the field/button styles; a little shared prose styling */
.mfa-prose { margin: 0 0 14px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.mfa-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
#mfa-secret { display: block; margin-top: 4px; font-family: var(--mono); word-break: break-all; color: var(--ink); }
#mfa-recovery-codes {
  background: var(--line-soft); padding: 10px; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; white-space: pre-wrap; color: var(--ink);
}
.mfa-recovery-title { font-weight: 700; margin: 0 0 6px; color: var(--ink); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  max-width: 1260px; width: 100%; margin: 0 auto;
  padding: 20px 44px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em;
}
.foot-status { display: inline-flex; align-items: center; gap: 7px; }
.foot-status .dot-pulse { width: 6px; height: 6px; background: var(--ok-tx); }

/* ── Motion: pulses only when the user hasn't asked to reduce motion ──────── */
@media (prefers-reduced-motion: no-preference) {
  .dot-pulse { animation: dot-pulse 2s infinite; }
  @keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(14,111,191,.5); }
    70%  { box-shadow: 0 0 0 9px rgba(14,111,191,0); }
    100% { box-shadow: 0 0 0 0 rgba(14,111,191,0); }
  }
  .foot-status .dot-pulse, .monitor-scan .dot-pulse {
    animation-name: dot-pulse-green;
  }
  @keyframes dot-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(27,122,73,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(27,122,73,0); }
    100% { box-shadow: 0 0 0 0 rgba(27,122,73,0); }
  }
  .chip-crit { animation: chip-blink 2.4s infinite; }
  @keyframes chip-blink { 0%,60%,100% { opacity: 1; } 80% { opacity: .58; } }
}

/* ── Responsive: collapse to one column ──────────────────────────────────── */
@media (max-width: 940px) {
  .hdr { padding: 18px 22px 0; flex-wrap: wrap; }
  .shell { grid-template-columns: 1fr; gap: 40px; padding: 20px 22px 48px; }
  .auth-col { position: static; }
  .pillars { grid-template-columns: 1fr; }
  .metrics { gap: 30px; }
  .foot { padding: 18px 22px; }
}
@media (max-width: 560px) {
  .hdr-divider, .hdr-label { display: none; }
  .card { padding: 30px 22px; }
  .h1 { line-height: 1.08; }
}

/* Inline-style migration (toward dropping style-src 'unsafe-inline'). Toggled
   elements use the native `hidden` attribute; the rest use these classes. */
.lg-notice { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.lg-fright { text-align: right; margin: -6px 0 6px; }
.lg-fs12 { font-size: 12px; }
/* "Forgot password?" carried no colour rule, so it fell through to the UA
   default link blue (#0000EE) — 1.89:1 on the ink form panel, effectively
   unreadable. Uses the same token as this page's other secondary links
   (.support a): 9.6:1 on dark, 8.95:1 on light. */
#forgot-link { color: var(--blue-strong); text-decoration: none; }
#forgot-link:hover { text-decoration: underline; }
.lg-note { font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; color: var(--ink-soft, #9aa7c2); }
.lg-center { text-align: center; margin: 0 0 10px; }
.lg-mt16 { margin-top: 16px; }
.lg-mb8 { margin: 0 0 8px; }
.lg-mt12 { margin-top: 12px; }
.lg-plainlink { color: inherit; text-decoration: none; }

/* ── Mobile responsiveness pass (2026-08-15) — max-width guarded only ── */
@media (max-width: 560px) {
  /* 16px stops iOS Safari's focus-zoom; height already a 48px tap target. */
  .field input { font-size: 16px; }
}