/* ══════════════════════════════════════════════════════════════════
   FPTI quiz — immersive multi-screen flow
   Pairs with ../../css/style.css (inherits design tokens + dark mode)
   ══════════════════════════════════════════════════════════════════ */

/* ── i18n (replicated here so quiz page works without global-nav.js) ──
   .i18n-zh is kept as a legacy alias for zh-hans (backward compat). */
[data-lang="en"]      :is(.i18n-zh, .i18n-zh-hans, .i18n-zh-hant, .i18n-es) { display: none !important; }
[data-lang="zh-hans"] :is(.i18n-en, .i18n-zh-hant, .i18n-es)                { display: none !important; }
[data-lang="zh-hant"] :is(.i18n-en, .i18n-zh, .i18n-zh-hans, .i18n-es)      { display: none !important; }
[data-lang="es"]      :is(.i18n-en, .i18n-zh, .i18n-zh-hans, .i18n-zh-hant) { display: none !important; }

/* The HTML `hidden` attribute should always collapse an element. Many of our
   component classes set explicit `display: flex/inline-block` which by CSS
   specificity override the user-agent `[hidden] { display: none }` default.
   Restore the intended behavior so toggling `hidden` in JS actually hides. */
[hidden] { display: none !important; }

/* ── Page shell ─────────────────────────────────────────────── */
.fpti-root {
  /* dynamic personality color, set by quiz.js on result screen */
  --fpti-theme: var(--primary);
  min-height: 100svh;
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
}
.fpti-root[data-active-screen="intro"],
.fpti-root[data-active-screen="quiz"],
.fpti-root[data-active-screen="loading"],
.fpti-root[data-active-screen="auth"] {
  overflow: hidden; /* full-viewport screens don't scroll */
}

/* ── Top bar (logo + exit) ─────────────────────────────────── */
.fpti-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: flex-start;   /* right side reserved for hamburger (global-nav.js) */
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  pointer-events: none; /* let children opt in */
}
.fpti-topbar a,
.fpti-topbar button { pointer-events: auto; }
.fpti-brand {
  pointer-events: none;
  cursor: default;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  opacity: 0.75;
  transition: opacity 160ms ease;
}
.fpti-brand:hover { opacity: 0.75; }
.fpti-exit {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-primary) 25%, transparent);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.fpti-exit:hover { opacity: 1; border-color: var(--text-primary); }
.fpti-root[data-active-screen="intro"] .fpti-exit,
.fpti-root[data-active-screen="loading"] .fpti-exit,
.fpti-root[data-active-screen="result"] .fpti-exit { display: none; }

/* ── Progress bar (quiz screen top) ────────────────────────── */
.fpti-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  z-index: 40;
  opacity: 0;
  transition: opacity 300ms ease;
}
.fpti-root[data-active-screen="quiz"] .fpti-progress { opacity: 1; }
.fpti-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 420ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── Screens ───────────────────────────────────────────────── */
.fpti-screen { display: none; }
.fpti-root[data-active-screen="intro"]   .fpti-screen[data-screen="intro"]   { display: flex; }
.fpti-root[data-active-screen="quiz"]    .fpti-screen[data-screen="quiz"]    { display: flex; }
.fpti-root[data-active-screen="loading"] .fpti-screen[data-screen="loading"] { display: flex; }
.fpti-root[data-active-screen="auth"]    .fpti-screen[data-screen="auth"]    { display: flex; }
.fpti-root[data-active-screen="result"]  .fpti-screen[data-screen="result"]  { display: block; }

.fpti-screen[data-screen="intro"],
.fpti-screen[data-screen="quiz"],
.fpti-screen[data-screen="loading"],
.fpti-screen[data-screen="auth"] {
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px 32px;
  animation: fptiFadeIn 420ms ease both;
}
@keyframes fptiFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ══ Intro screen ══════════════════════════════════════════ */
.fpti-intro__kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 22px;
  opacity: 0.9;
}
.fpti-intro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 14vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: center;
  margin: 0;
  color: var(--text-primary);
}
.fpti-intro__title em {
  font-style: italic;
  color: var(--primary);
}
.fpti-intro__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--text-secondary);
  margin: 16px 0 44px;
  text-align: center;
  max-width: 30ch;
}
.fpti-preview {
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-radius: 20px;
  padding: 24px 28px;
  max-width: 480px;
  width: 100%;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(8px);
  text-align: center;
  cursor: pointer;
  opacity: 0.45;
  transform: scale(0.98);
  transition: opacity 400ms ease, transform 400ms ease, border-color 400ms ease;
}
.fpti-preview:hover,
.fpti-preview:focus-visible { opacity: 0.7; }
.fpti-preview.is-activating {
  opacity: 1;
  transform: scale(1.02);
  border-color: var(--primary);
}
.fpti-preview__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 600;
}
.fpti-preview__text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
}
.fpti-preview__hint {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* ══ Quiz screen ═══════════════════════════════════════════ */
.fpti-quiz-inner {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.fpti-q__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.fpti-q__counter { font-weight: 600; color: var(--primary); }
.fpti-q__eta { opacity: 0.75; }
.fpti-q__back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  color: var(--text-secondary);
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.fpti-q__back:hover,
.fpti-q__back:focus-visible { opacity: 1; color: var(--primary); }
.fpti-q__back[hidden] { display: none; }
.fpti-q__prompt {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 32px;
  animation: fptiQSlideIn 420ms ease both;
}
@keyframes fptiQSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.fpti-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fpti-option {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
  width: 100%;
}
.fpti-option:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
}
.fpti-option.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--bg-card));
  transform: translateX(4px);
}
.fpti-option:disabled { cursor: default; }
.fpti-option__bullet {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary);
  opacity: 0.75;
}


/* ══ Loading screen ═══════════════════════════════════════ */
.fpti-loading__bear {
  font-size: 4rem;
  line-height: 1;
  animation: fptiBounce 1.2s ease-in-out infinite;
  margin-bottom: 24px;
}
@keyframes fptiBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.05); }
}
.fpti-loading__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  color: var(--text-primary);
  margin: 0 0 12px;
  text-align: center;
}
.fpti-loading__sub {
  color: var(--text-secondary);
  max-width: 28ch;
  text-align: center;
  font-style: italic;
  font-family: var(--font-display);
}
.fpti-loading__dots::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: fptiDots 1.4s steps(4, end) infinite;
}
@keyframes fptiDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* ══ Auth screen ═══════════════════════════════════════════ */
.fpti-auth-inner {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
/* Chef-bear mascot above the auth title. align-self:center keeps it
   horizontally centered while the rest of the auth card stretches. */
.fpti-auth__mascot {
  align-self: center;
  width: clamp(135px, 31.5vw, 192px);
  height: auto;
  margin: -8px 0 18px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.fpti-auth__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  /* Noto Serif 700 has generous default letter spacing — every other
     display title on the site (intro title, result title, etc.) tightens
     with a negative tracking nudge. Match that here so English text
     doesn't read as sparse. */
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.fpti-auth__sub {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
  /* Sub sits BELOW the two sign-in buttons now — small top gap, no
     bottom margin (legal is absolute-positioned at screen bottom). */
  margin: 10px 0 0;
  text-align: center;
}
.fpti-auth__btn {
  appearance: none;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--text-primary) 20%, transparent);
  border-radius: 12px;
  padding: 14px 20px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
  transition: border-color 160ms ease, background 160ms ease;
  /* Same warm-brown pulse halo used on the fpti.html "Start the quiz"
     ghost-btn and Q1 preview card — draws the eye to the sign-in buttons
     after the user finishes the 12-question quiz. */
  animation: fpti-q1-pulse 2s ease-out infinite;
}
/* Stagger Apple by 1s so Google + Apple pulses alternate instead of
   both strobing together. Two simultaneous halos feels busy; alternating
   feels like a calm "pick either" cue. */
.fpti-auth__btn--apple { animation-delay: 1s; }
.fpti-auth__btn:hover,
.fpti-auth__btn:focus-visible { animation-play-state: paused; }
.fpti-auth__btn:hover { border-color: var(--text-primary); }
.fpti-auth__btn--apple {
  background: #000;
  color: #fff;
  border-color: #000;
}
.fpti-auth__btn--apple:hover { background: #1a1a1a; border-color: #1a1a1a; }
.fpti-auth__btn svg { flex-shrink: 0; }
/* Shared pulse keyframes — same rgb + timing as fpti.html inline style
   so Q1 card, "Start the quiz" ghost-btn, and the two auth buttons all
   use one visual language. */
@keyframes fpti-q1-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(196, 154, 108, .55); }
  70%  { box-shadow: 0 0 0 4px rgba(196, 154, 108, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(196, 154, 108, 0);   }
}
.fpti-auth__error {
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 12px;
  min-height: 1.2em;
}
/* Legal disclaimer now inlined into .fpti-auth__sub (single paragraph
   combining account-creation notice + terms/privacy links). Link styling
   lives here so the sub picks up the blue underlined look. */
.fpti-auth__sub a {
  color: #5b82a0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .fpti-auth__sub a { color: #7da8c8; }

/* Divider between social and phone login options */
.fpti-auth__divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.fpti-auth__divider::before,
.fpti-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--text-primary) 14%, transparent);
}

/* Phone button — same sizing as Google/Apple but uses the border-only style */
.fpti-auth__btn--phone {
  animation-delay: 1.85s;
}

/* ══ Phone auth bottom sheet ══════════════════════════════════════════
   The overlay sits over everything with a dark scrim; the sheet
   slides up from the bottom. Visibility transitions use opacity +
   visibility so children are not keyboard-reachable while closed. */
.fpti-phone-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  /* Hide children from keyboard/AT when closed */
  visibility: hidden;
  /* backdrop fades in, visibility jumps visible at t=0 on open */
  transition: background 240ms ease, visibility 0s linear 240ms;
}
.fpti-phone-overlay.is-open {
  background: rgba(0, 0, 0, 0.48);
  visibility: visible;
  transition: background 240ms ease, visibility 0s linear 0s;
}
.fpti-phone-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  padding: 8px 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
  /* Cap sheet height and allow internal scroll on tiny screens */
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fpti-phone-overlay.is-open .fpti-phone-sheet {
  transform: translateY(0);
}

/* Drag handle pill at the top of the sheet */
.fpti-phone-sheet__handle {
  width: 36px;
  height: 4px;
  background: color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* Header row: back ← title → ✕ */
.fpti-phone-sheet__header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.fpti-phone-sheet__title {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.fpti-phone-sheet__nav-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
.fpti-phone-sheet__nav-btn:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-primary); }

/* Step containers */
.fpti-phone-step { display: flex; flex-direction: column; gap: 14px; }
.fpti-phone-step[hidden] { display: none; }
.fpti-phone-step__hint {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* Phone number input row: [select▼][input] */
.fpti-phone-input-row {
  display: flex;
  gap: 8px;
}
/* ── Custom country-code picker ─────────────────────────── */
.fpti-cc-picker {
  position: relative;
  flex-shrink: 0;
}
.fpti-cc-picker__btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 10px 13px 12px;
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  min-width: 104px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fpti-cc-picker__btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fpti-cc-picker__btn[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fpti-cc-picker__arrow {
  margin-left: auto;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.fpti-cc-picker__btn[aria-expanded="true"] .fpti-cc-picker__arrow {
  transform: rotate(180deg);
}

/* Dropdown menu */
.fpti-cc-picker__menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-radius: 13px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  z-index: 9999;
  list-style: none;
  margin: 0;
  padding: 5px;
  /* Slide-in animation */
  transform-origin: bottom left;
  animation: ccMenuIn 160ms cubic-bezier(.22,1,.36,1) both;
}
.fpti-cc-picker__menu[hidden] { display: none; }
@keyframes ccMenuIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Option row */
.fpti-cc-picker__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 120ms ease;
  user-select: none;
}
.fpti-cc-picker__opt:hover,
.fpti-cc-picker__opt:focus { background: color-mix(in srgb, var(--text-primary) 6%, transparent); outline: none; }
.fpti-cc-picker__opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.fpti-cc-picker__opt[aria-selected="true"] .fpti-cc-picker__code {
  color: var(--primary);
  font-weight: 700;
}
.fpti-cc-picker__flag  { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.fpti-cc-picker__name  { flex: 1; font-size: 0.87rem; color: var(--text-secondary); }
.fpti-cc-picker__code  { font-size: 0.87rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; }

[data-theme="dark"] .fpti-cc-picker__menu {
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
}
.fpti-phone-number {
  flex: 1;
  appearance: none;
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-radius: 11px;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.fpti-phone-number:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fpti-phone-number::placeholder { color: color-mix(in srgb, var(--text-secondary) 60%, transparent); }

/* Error text under inputs */
.fpti-phone__error {
  color: #c0392b;
  font-size: 0.83rem;
  min-height: 1.1em;
  text-align: center;
  display: none;
}
.fpti-phone__error:not(:empty) { display: block; }

/* Primary action button inside the sheet */
.fpti-phone-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 160ms ease, transform 80ms ease;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.fpti-phone-btn:hover  { opacity: 0.88; }
.fpti-phone-btn:active { transform: scale(0.98); }
.fpti-phone-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* OTP 6-box row */
.fpti-otp-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.fpti-otp-box {
  appearance: none;
  width: 46px;
  height: 56px;
  border: 1.5px solid color-mix(in srgb, var(--text-primary) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-card));
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  caret-color: var(--primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fpti-otp-box:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.fpti-otp-box.is-filled {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
}

/* Resend row */
.fpti-phone-resend-row {
  display: flex;
  justify-content: center;
  min-height: 1.4em;
}
.fpti-phone-countdown {
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.fpti-phone-resend-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.83rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: none;
}
.fpti-phone-resend-btn.is-visible { display: inline; }

/* Dark-mode tweaks */
[data-theme="dark"] .fpti-phone-sheet { background: var(--bg-card); }
[data-theme="dark"] .fpti-phone-cc,
[data-theme="dark"] .fpti-phone-number,
[data-theme="dark"] .fpti-otp-box {
  background: color-mix(in srgb, var(--text-primary) 7%, var(--bg-card));
}

@media (max-width: 380px) {
  .fpti-otp-box { width: 40px; height: 50px; font-size: 1.3rem; gap: 5px; }
  .fpti-otp-row { gap: 5px; }
}

/* ══ Result screen ═════════════════════════════════════════ */
.fpti-result {
  position: relative;
  min-height: 100svh;
  padding: 90px 24px 80px;
}
.fpti-result__hero {
  position: relative;
  border-radius: 28px;
  padding: 56px 36px 48px;
  text-align: center;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--fpti-theme) 28%, var(--bg-card)) 0%,
    color-mix(in srgb, var(--fpti-theme) 10%, var(--bg-card)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--fpti-theme) 25%, transparent);
  overflow: hidden;
  margin: 0 auto 32px;
  max-width: 720px;
}
.fpti-result__hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--fpti-theme) 35%, transparent) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Persona portrait: chef-bear illustration at the top of the hero card.
   Source PNGs are pre-processed with transparent background so they sit
   cleanly on both the light gradient and the dark-mode equivalent. */
.fpti-result__portrait {
  display: block;
  position: relative;
  width: min(260px, 62%);
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--fpti-theme) 35%, transparent));
  animation: fptiPortraitIn 640ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes fptiPortraitIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fpti-result__portrait { animation: none; }
}

/* ── Rare ("shiny") hero card ─────────────────────────────────────────
   Applied when scoring.isRare(result) is true AND the personality has a
   rareImage. Paints the hero card with an iridescent gold→rose→violet→blue
   gradient, adds a slow looping shimmer, floats the portrait, and runs
   a gold text-gradient shimmer across the 4-letter code. Everything
   collapses to a static variant under prefers-reduced-motion. */
.fpti-result__hero--rare {
  background: linear-gradient(135deg,
    #fff3b0   0%,
    #ffd36e  22%,
    #ffb4a2  45%,
    #cdb4db  68%,
    #a0c4ff  88%,
    #fff3b0 100%);
  background-size: 280% 280%;
  animation: fptiRareShimmer 9s ease-in-out infinite;
  border-color: color-mix(in srgb, #e0a94b 55%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, #ffd36e 40%, transparent),
              0 16px 44px rgba(220, 160, 60, 0.18);
}
.fpti-result__hero--rare::before {
  background: radial-gradient(circle,
    rgba(255, 215, 110, 0.55) 0%,
    transparent 70%);
}
.fpti-result__hero--rare .fpti-result__portrait {
  filter: drop-shadow(0 10px 24px rgba(255, 180, 60, 0.55))
          drop-shadow(0 0 28px rgba(255, 220, 130, 0.45));
  animation:
    fptiPortraitIn 640ms cubic-bezier(.22, 1, .36, 1) both,
    fptiRareFloat 5s ease-in-out 640ms infinite;
}
.fpti-result__hero--rare .fpti-result__code {
  background: linear-gradient(100deg,
    #c97f2a   0%,
    #f5c451  28%,
    #fff2a8  50%,
    #f5c451  72%,
    #c97f2a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fptiRareTextShimmer 6s linear infinite;
  text-shadow: none; /* gradient-clipped text can't wear the default theme shadow */
}
.fpti-result__hero--rare .fpti-result__kicker {
  color: #8a5a1f;
  opacity: 1;
}
.fpti-result__hero--rare .fpti-result__name,
.fpti-result__hero--rare .fpti-result__tagline {
  color: #3b2a0f;
}

@keyframes fptiRareShimmer {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes fptiRareFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes fptiRareTextShimmer {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .fpti-result__hero--rare,
  .fpti-result__hero--rare .fpti-result__portrait,
  .fpti-result__hero--rare .fpti-result__code {
    animation: none;
  }
}

/* Dark-mode palette: warm golds dimmed, cool accents darkened, keeping the
   same iridescence arc but legible against the dark card theme. Text inside
   the rare card stays warm cream — the iridescent bg + the dark shell frame
   it without needing heavy contrast. */
[data-theme="dark"] .fpti-result__hero--rare {
  background: linear-gradient(135deg,
    #5a4210   0%,
    #8a6920  22%,
    #7a4238  45%,
    #4a3b5c  68%,
    #2c3e5c  88%,
    #5a4210 100%);
  background-size: 280% 280%;
  border-color: color-mix(in srgb, #e0a94b 45%, transparent);
  box-shadow: 0 0 36px rgba(255, 195, 90, 0.25),
              0 16px 44px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .fpti-result__hero--rare::before {
  background: radial-gradient(circle,
    rgba(255, 200, 110, 0.30) 0%,
    transparent 70%);
}
[data-theme="dark"] .fpti-result__hero--rare .fpti-result__kicker { color: #ffd88a; }
[data-theme="dark"] .fpti-result__hero--rare .fpti-result__name,
[data-theme="dark"] .fpti-result__hero--rare .fpti-result__tagline { color: #f7e8c4; }

.fpti-result__kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fpti-theme);
  opacity: 0.95;
  position: relative;
  z-index: 1;
}
.fpti-result__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--fpti-theme);
  margin: 14px 0 10px;
  position: relative;
  z-index: 1;
  text-shadow: 0 6px 30px color-mix(in srgb, var(--fpti-theme) 35%, transparent);
}
.fpti-result__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
.fpti-result__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--text-primary);
  opacity: 0.85;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Cross-track mismatch card — shown on the result screen when the saved
   result's track doesn't match the current UI language. Forces retake. */
.fpti-result-mismatch {
  max-width: 560px;
  margin: 48px auto 64px;
  padding: 0 20px;
}
.fpti-result-mismatch[hidden] { display: none; }
.fpti-result-mismatch__card {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-radius: 18px;
  padding: 32px 28px 28px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.fpti-result-mismatch__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.fpti-result-mismatch__body {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0 0 24px;
}
.fpti-result-mismatch #fpti-r-mismatch-retake { display: inline-block; min-width: 200px; }

.fpti-result__section {
  max-width: 720px;
  margin: 0 auto 40px;
}
.fpti-result__section-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fpti-theme);
  margin: 0 0 18px;
}

/* Dimensions */
.fpti-dim {
  margin-bottom: 18px;
}
.fpti-dim__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.fpti-dim__label--neg { opacity: 0.55; }
.fpti-dim__label--pos { opacity: 0.55; }
.fpti-dim__label--active { opacity: 1; font-weight: 700; color: var(--fpti-theme); }
.fpti-dim__bar {
  height: 8px;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.fpti-dim__bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--fpti-theme);
  border-radius: 999px;
  transition: width 900ms cubic-bezier(0.33, 1, 0.68, 1) 200ms;
}
.fpti-dim__bar-fill--pos { left: 50%; width: 0%; }
.fpti-dim__bar-fill--neg { right: 50%; width: 0%; }
.fpti-dim__center {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 2px;
  background: color-mix(in srgb, var(--text-primary) 25%, transparent);
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Deep read (3 sections) */
.fpti-deep {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fpti-deep__block {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.fpti-deep__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fpti-theme);
  margin: 0 0 10px;
}
.fpti-deep__body {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}

/* Matches */
.fpti-matches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fpti-match {
  border-radius: 18px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  background: var(--bg-card);
}
.fpti-match__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fpti-match--cp .fpti-match__tag { color: #2e7d32; }
.fpti-match--conflict .fpti-match__tag { color: #c0392b; }
.fpti-match__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  color: var(--text-primary);
}
.fpti-match__name {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0 0 8px;
  font-weight: 600;
}
.fpti-match__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}
@media (max-width: 480px) {
  .fpti-matches { grid-template-columns: 1fr; }
}

/* Share bar (placeholder) */
.fpti-share {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 28px;
  max-width: 720px;
}
.fpti-share__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 160ms ease;
}
.fpti-share__btn:hover { border-color: var(--fpti-theme); }
.fpti-share__btn--primary {
  background: var(--fpti-theme);
  color: #fff;
  border-color: var(--fpti-theme);
}

/* CTA */
.fpti-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 24px;
  border-radius: 24px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--fpti-theme) 18%, var(--bg-card)),
    var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--fpti-theme) 20%, transparent);
}
.fpti-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 20px;
  max-width: 26ch;
  margin-inline: auto;
}

/* ══ Exit modal ════════════════════════════════════════════ */
.fpti-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(4px);
  animation: fptiFadeIn 240ms ease both;
  padding: 24px;
}
.fpti-modal[hidden] { display: none; }
.fpti-modal__card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 28px 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.fpti-modal__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.fpti-modal__body {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 24px;
}
.fpti-modal__actions {
  display: flex;
  gap: 10px;
}
.fpti-modal__btn {
  flex: 1;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: transparent;
  color: var(--text-primary);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
.fpti-modal__btn--danger {
  /* Transparent fill + muted burgundy outline. Reads as an intentional
     destructive action without visually dominating the cancel option. */
  background: transparent;
  color: #7a3330;
  border-color: #7a3330;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.fpti-modal__btn--danger:hover {
  background: rgba(122, 51, 48, 0.1);
  border-color: #632826;
  color: #632826;
}
/* Dark mode — lighten the red so it stays legible on dark card bg */
[data-theme="dark"] .fpti-modal__btn--danger {
  color: #c8726e;
  border-color: #c8726e;
}
[data-theme="dark"] .fpti-modal__btn--danger:hover {
  background: rgba(200, 114, 110, 0.12);
  color: #d98b87;
  border-color: #d98b87;
}
/* Cancel / "继续" button — soft sage green fill for a "safe" feel */
#fpti-exit-cancel {
  background: rgba(74, 111, 76, 0.09);
  border-color: rgba(74, 111, 76, 0.28);
  color: #3a5e3c;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
#fpti-exit-cancel:hover {
  background: rgba(74, 111, 76, 0.15);
  border-color: rgba(74, 111, 76, 0.45);
}
[data-theme="dark"] #fpti-exit-cancel {
  background: rgba(100, 150, 102, 0.1);
  border-color: rgba(100, 150, 102, 0.25);
  color: #8ec990;
}
[data-theme="dark"] #fpti-exit-cancel:hover {
  background: rgba(100, 150, 102, 0.18);
  border-color: rgba(100, 150, 102, 0.4);
}

/* ══ Returning-user banner (quiz screen top, non-blocking) ═════
   Shows for authenticated users whose Firestore has a saved result.
   Compact pill above Q1 — user can click to view their saved result,
   or simply ignore and answer Q1 (which starts a fresh quiz). */
.fpti-returning-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 10px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  font-size: 0.85rem;
  color: var(--text-primary);
  animation: fptiFadeIn 420ms ease both;
}
.fpti-returning-banner[hidden] { display: none; }
.fpti-returning-banner__text {
  flex: 1;
  min-width: 0;
}
.fpti-returning-banner__code {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.fpti-returning-banner__btn {
  appearance: none;
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 160ms ease;
}
.fpti-returning-banner__btn:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  .fpti-returning-banner {
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 0.8rem;
  }
  .fpti-returning-banner__btn { width: 100%; }
}

/* ══ Preview-card text: must be block-level (was <p>, now <span>) ══ */
.fpti-preview__text { display: block; }
.fpti-preview[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* ══ Returning-user card (intro screen) ═══════════════════════ */
.fpti-returning-card {
  max-width: 480px;
  width: 100%;
  margin-bottom: 32px;
  padding: 20px 24px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 15%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(8px);
  text-align: center;
  animation: fptiFadeIn 420ms ease both;
}
.fpti-returning-card[hidden] { display: none; }
.fpti-returning-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.fpti-returning-card__line {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.fpti-returning-card__code {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.25rem;
}
.fpti-returning-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.fpti-returning-card__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.fpti-returning-card__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: transparent;
  color: var(--text-primary);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 160ms ease, background 160ms ease;
}
.fpti-returning-card__btn:hover {
  border-color: var(--text-primary);
}
.fpti-returning-card__btn--primary {
  color: #fff;
  border-color: transparent;
}
.fpti-returning-card__btn--primary:hover {
  filter: brightness(1.08);
}

/* ══ Retake button (result hero) ══════════════════════════════ */
.fpti-retake {
  appearance: none;
  margin-top: 24px;
  border: 1px solid color-mix(in srgb, var(--fpti-theme) 55%, transparent);
  background: transparent;
  color: var(--text-primary);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
  position: relative;
  z-index: 1;
}
.fpti-retake:hover {
  background: color-mix(in srgb, var(--fpti-theme) 12%, transparent);
  border-color: var(--fpti-theme);
}

/* ══ Shared-link banner (guest mode, top of result) ═══════════ */
.fpti-shared-banner {
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 14px 20px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.fpti-shared-banner[hidden] { display: none; }
.fpti-shared-banner__btn {
  appearance: none;
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.fpti-shared-banner__btn:hover { filter: brightness(1.08); }

/* ══ Toast (bottom center) ════════════════════════════════════ */
.fpti-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text-primary);
  color: var(--bg-page);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 150;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.fpti-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══ Dark-mode tweaks for personality theme contrast ══════════
   A few light theme colors (CPTV honey, CPLV latte) can feel low-contrast
   against dark card backgrounds on the hero code. Add a soft glow in dark
   mode to keep the code legible without altering the per-personality hue. */
[data-theme="dark"] .fpti-result__code {
  text-shadow:
    0 6px 40px color-mix(in srgb, var(--fpti-theme) 55%, transparent),
    0 0 1px rgba(0,0,0,0.3);
}

/* ══ Mobile tweaks ════════════════════════════════════════════ */
@media (max-width: 480px) {
  .fpti-screen[data-screen="intro"],
  .fpti-screen[data-screen="quiz"],
  .fpti-screen[data-screen="loading"],
  .fpti-screen[data-screen="auth"] {
    padding: 80px 18px 28px;
  }
  .fpti-result { padding: 80px 16px 60px; }
  .fpti-result__hero { padding: 44px 22px 36px; }
  .fpti-deep__block { padding: 18px 20px; }
  .fpti-returning-card { padding: 16px 18px; }
  .fpti-shared-banner {
    padding: 12px 14px;
    font-size: 0.85rem;
  }
  .fpti-shared-banner__btn { width: 100%; }
  .fpti-toast { bottom: 20px; font-size: 0.85rem; padding: 9px 16px; }
}

/* ══ Reduced motion (a11y requirement per CLAUDE.md) ══════════
   Disable all decorative animations/transitions but keep functional
   state changes (screen switching, option selection) working. */
@media (prefers-reduced-motion: reduce) {
  .fpti-screen,
  .fpti-q__prompt,
  .fpti-loading__bear,
  .fpti-loading__dots::after,
  .fpti-preview,
  .fpti-preview.is-activating,
  .fpti-progress__fill,
  .fpti-progress,
  .fpti-dim__bar-fill,
  .fpti-option,
  .fpti-returning-card,
  .fpti-modal,
  .fpti-toast,
  .fpti-auth__btn,
  .fpti-share__btn,
  .fpti-retake {
    animation: none !important;
    transition: none !important;
  }
  /* Keep width transition on the progress fill meaningful (instant jump still
     conveys progress, just without the smooth motion). */
  .fpti-loading__dots::after {
    content: "…";  /* Static ellipsis instead of animated cycle */
  }
}