/* kronos_gate.css — Knox spawn 1384 (kronos-phone-ux-2026-05).
 *
 * WHAT THIS IS
 *   The PRE-AUTH gate styles for the two screens that did not exist in the app
 *   yet: 01 Sign-in (Layout A, centered hero) and 02 Biometric (Face ID,
 *   on-brand sheet). Markup + values lifted VERBATIM from the approved FINAL
 *   gallery (kronos_locked_ui_FINAL_2026-06-03.html, sha b83edd…) screens 01/02.
 *
 * ISOLATION
 *   Every selector is scoped under `.kronos-gate` so these styles cannot bleed
 *   onto the byte-frozen Sequence T chatbot or the tabbed shell. The gate reads
 *   brand tokens from tokens.css (:root) which is loaded by index.html — the
 *   SAME single-source token values the FINAL gallery inlines.
 *
 * PALETTE
 *   tokens.css only. --paper #FAF6EC, --merlot (primary button), --accent
 *   (#6E2532 bordeaux), --mist / --mist-2 / --mist-3 (tan-greys), --onyx.
 */

/* full-bleed paper gate overlay; covers the whole viewport pre-auth */
.kronos-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.kronos-gate[hidden] { display: none; }

/* the 390-wide phone column; on a real phone it fills the viewport width */
.kronos-gate .phone {
  width: 100%;
  max-width: 390px;
  background: var(--paper);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* gate view switch: only one of .signin / .biometric-screen shows at a time */
.kronos-gate .gate-view[hidden] { display: none; }

/* ---- shared Kronos-logo anchor — identical x/y on Sign-in A and Biometric --- */
.kronos-gate .kronos-anchor {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 48px;
  z-index: 2;
}
.kronos-gate .kronos-anchor svg { width: 42px; height: 48px; display: block; }

/* ===================== SIGN-IN (Layout A, centered hero) ===================== */
.kronos-gate .signin-a {
  padding: 48px 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* CE wordmark sits at the very top, ABOVE the anchored K icon (anchor top 120). */
.kronos-gate .signin-a .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-bottom: auto;
  padding-top: 0;
}
.kronos-gate .ce-wordmark { display: block; width: 108px; height: auto; margin: 0 auto; }
/* product/tag block pushed BELOW the icon (anchor top 120 + 48 tall = 168) */
.kronos-gate .signin-a .hero .below-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 104px;
}
.kronos-gate .signin-a .hero .product {
  font: 600 30px 'Cormorant Garamond', Georgia, serif;
  color: var(--onyx);
  letter-spacing: .03em;
}
.kronos-gate .signin-a .hero .tag {
  font: 400 10px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mist-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 2px;
}
.kronos-gate .signin-a .form { margin-top: auto; }
.kronos-gate .signin label {
  font: 500 10px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mist-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.kronos-gate .signin input.email {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--mist-2);
  background: transparent;
  padding: 10px 0;
  font: 400 16px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--onyx);
  outline: none;
  margin-bottom: 22px;
}
.kronos-gate .signin input.email:focus { border-color: var(--accent); }
/* "Email me a sign-in link" — LIGHTER merlot tone (not dark vino/bordeaux). */
.kronos-gate .signin button.primary {
  width: 100%;
  background: var(--merlot);
  color: var(--paper);
  border: 0;
  border-radius: 2px;
  padding: 14px;
  font: 500 12px 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.kronos-gate .signin .helper {
  font: 400 12px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mist-3);
  text-align: center;
  margin-top: 14px;
  line-height: 1.55;
}
.kronos-gate .signin .helper a { color: var(--accent); }
/* collapsed 6-digit OTP fallback toggle */
.kronos-gate .otp-toggle {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 18px;
  background: 0;
  border: 0;
  cursor: pointer;
  font: 500 12px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--accent);
}
.kronos-gate .otp-fallback {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mist);
  display: none;
}
.kronos-gate .otp-fallback.open { display: block; }
.kronos-gate .otp-fallback .hint {
  font: 400 11px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mist-3);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.5;
}
.kronos-gate .code-row { display: flex; gap: 8px; }
.kronos-gate .code-row input {
  flex: 1;
  text-align: center;
  font: 500 18px 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid var(--mist-2);
  border-radius: 2px;
  padding: 12px 0;
  color: var(--onyx);
  outline: none;
}
.kronos-gate .code-row input:focus { border-color: var(--accent); }

/* ===================== BIOMETRIC (on-brand Face ID sheet) ===================== */
.kronos-gate .biometric-screen {
  position: relative;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.kronos-gate .bio-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 184px 32px 0;
}
.kronos-gate .bio-hero .product {
  font: 600 28px 'Cormorant Garamond', Georgia, serif;
  color: var(--onyx);
  letter-spacing: .03em;
}
.kronos-gate .bio-hero .welcome {
  font: 400 13px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mist-3);
}
/* on-brand Face ID sheet: paper card, accent ring, serifed title */
.kronos-gate .bio-sheet {
  background: var(--paper);
  border-top: 1px solid var(--mist-2);
  border-radius: 18px 18px 0 0;
  padding: 26px 28px 34px;
  box-shadow: 0 -8px 28px rgba(61, 22, 32, .10);
}
.kronos-gate .bio-sheet .faceid-ring {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border: 2px solid var(--accent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kronos-gate .bio-sheet .faceid-ring svg { width: 34px; height: 34px; }
.kronos-gate .bio-sheet .bt-title {
  font: 600 19px 'Cormorant Garamond', Georgia, serif;
  color: var(--onyx);
  text-align: center;
  margin-bottom: 4px;
}
.kronos-gate .bio-sheet .bt-sub {
  font: 400 12px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mist-3);
  text-align: center;
  margin-bottom: 22px;
}
.kronos-gate .bio-sheet .cancel {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--accent);
  font: 500 13px 'IBM Plex Sans', system-ui, sans-serif;
  background: 0;
  border: 0;
  padding: 13px 0 0;
  cursor: pointer;
}
.kronos-gate .bio-sheet .fallback {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--mist-3);
  font: 400 12px 'IBM Plex Sans', system-ui, sans-serif;
  background: 0;
  border: 0;
  padding: 10px 0 0;
  cursor: pointer;
  border-top: 1px solid var(--mist);
  margin-top: 14px;
}

/* universal visible focus ring inside the gate */
.kronos-gate button:focus-visible,
.kronos-gate input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}