/* Phase 3 — hosted screening page (/screen/{intent_id}).
   Extends common.css + verify.css; defines only NEW components.
   UI-SPEC §"Component Inventory — New in screen.css".

   Color policy: zero new color literals. All color values via
   var(--...) tokens defined in common.css (UI-SPEC §"Color —
   Phase 3 must not introduce new color literals").
 */

/* 5-dot progress variant (D-21 amended — "Step N of 5"). Reuses
   .progress-dots / .dot from verify.css; this modifier adjusts nothing
   visually but marks the intent-driven variant for tests to detect. */
.progress-dots--five {
  /* Visual parity with .progress-dots — no overrides. Marker class. */
}

.progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* --- Journey stepper (high-level Consent / Screening / Proceed) ---
   Three labeled dots connected by a thin line. Used for the hosted
   screening consent flow per the design handoff — replaces the old
   Step-N-of-5 counter on that page. */
.journey-stepper {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  max-width: 480px;
  margin: 1.5rem auto 2rem;
  padding: 0 1.5rem;
}
.journey-stepper::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(1.5rem + 16%);
  right: calc(1.5rem + 16%);
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.journey-step {
  flex: 1 1 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
  min-width: 0;
}
.journey-step__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.journey-step.active .journey-step__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
[data-theme="light"] .journey-step.active .journey-step__dot {
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.18);
}
.journey-step.done .journey-step__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.journey-step__num {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.journey-step.active .journey-step__num { color: var(--accent); }
.journey-step__name {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-dim);
}
.journey-step.active .journey-step__name { color: var(--text); }
@media (max-width: 480px) {
  .journey-stepper { padding: 0 0.75rem; }
  .journey-stepper::before {
    left: calc(0.75rem + 16%);
    right: calc(0.75rem + 16%);
  }
  .journey-step__name { font-size: 0.72rem; }
}

.step-count {
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* --- Consent gate --- */
.consent-gate {
  max-width: 560px;
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
}
.consent-gate__headline {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

/* --- Prior-decline amber notice (Consent.html redesign) ---
   Subtle informational banner shown above the headline when the identity
   system detects the user previously declined. Warm amber — more visible
   than neutral, less alarming than red. Colours use oklch() to match the
   design 1:1. oklch preserves perceptual lightness across alpha, so 8%
   of a L=0.78 amber reads as a visible tint against the dark surface —
   an sRGB rgba() equivalent at the same alpha appeared washed-out. */
.consent-prev-notice {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  margin: 0 auto 2rem;
  border: 1px solid oklch(0.78 0.12 75 / 0.35);
  background: oklch(0.78 0.12 75 / 0.12);
  border-radius: 10px;
  text-align: left;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.consent-prev-notice strong {
  color: var(--text);
  font-weight: 500;
}
.consent-prev-notice__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: oklch(0.78 0.12 75 / 0.22);
  color: oklch(0.82 0.14 75);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
[data-theme="light"] .consent-prev-notice {
  border-color: oklch(0.62 0.14 70 / 0.5);
  background: oklch(0.62 0.14 70 / 0.1);
}
[data-theme="light"] .consent-prev-notice__icon {
  background: oklch(0.62 0.14 70 / 0.2);
  color: oklch(0.55 0.15 70);
}
@media (max-width: 480px) {
  .consent-prev-notice {
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
  }
}

/* Translation-fallback notice — same amber treatment as .consent-prev-notice
   but a different semantic class so the trigger condition is obvious in the
   HTML. Visible when the intent's locale lacks a shipped translation and the
   gate is rendering the English fallback wording. */
.consent-fallback-notice {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  margin: 0 auto 2rem;
  border: 1px solid oklch(0.78 0.12 75 / 0.35);
  background: oklch(0.78 0.12 75 / 0.12);
  border-radius: 10px;
  text-align: left;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.consent-fallback-notice__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: oklch(0.78 0.12 75 / 0.22);
  color: oklch(0.82 0.14 75);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  font-size: 0.7rem;
  line-height: 1;
}
[data-theme="light"] .consent-fallback-notice {
  border-color: oklch(0.62 0.14 70 / 0.5);
  background: oklch(0.62 0.14 70 / 0.1);
}
[data-theme="light"] .consent-fallback-notice__icon {
  background: oklch(0.62 0.14 70 / 0.2);
  color: oklch(0.55 0.15 70);
}
@media (max-width: 480px) {
  .consent-fallback-notice {
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
  }
}
.consent-gate__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 56ch;
  margin: 0 auto 1.5rem auto;
  text-align: left;
}
.consent-gate__meta {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.consent-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 480px) {
  .consent-gate__actions {
    flex-direction: row-reverse;
    justify-content: center;
  }
}
.consent-gate__error {
  color: var(--red);
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* --- Shared button primitives (used by gate + stepper) --- */
.btn-primary,
.btn-secondary,
.primary-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  min-width: 180px;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:hover:not(:disabled),
.primary-cta:hover:not(:disabled) {
  border-color: var(--accent);
}
.btn-secondary {
  background: transparent;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.primary-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Back navigation --- */
.back-link {
  font-size: 0.85rem;
  color: var(--text-dim);
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
}
.back-link:hover {
  color: var(--text);
  text-decoration: underline;
}

/* --- Step actions row (Back + Continue + Submit) --- */
.step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 480px;
}

/* ==========================================================================
   Screening Question UI (design handoff — V1).
   One-question-per-screen profiling stepper with:
   - Centered prompt + sub copy + animated input slot
   - Card-style single/multi options (auto-advance on single)
   - Centered numeric / date / left-aligned free-text inputs
   - Hashed-email pill hint for HASHED_EMAIL
   - Fixed bottom action bar with ↵ keyboard hint
   - Q N / M position chip in the top-right
   - Sub-progress bar below the journey stepper
   All colours via CSS tokens (no new literals); rgba accent rings reuse
   the existing 52,211,153 / 5,150,105 channel triplets used elsewhere
   in this file.
   ========================================================================== */

/* Question position chip (top-right, just left of theme toggle).
   Position: fixed so it doesn't shift the journey stepper layout. */
.qstep-pos {
  position: fixed;
  top: 1.05rem;
  right: 4rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  z-index: 99;
  line-height: 36px; /* match theme-toggle height for vertical centering */
}

/* Sub-progress bar + label (Question N of M). */
.qstep-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0.5rem;
}
.qstep-progress {
  height: 2px;
  width: 100%;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.qstep-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.35s ease;
}
.qstep-progress__label {
  margin-top: 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Returning-visitor variant: 👋 greeting + bolded mixed-case question count.
   Drops the uppercase / wide-letter-spacing styling so the greeting reads
   naturally; the .qcount-bold span re-applies a bold weight to the count. */
.qstep-progress__label--greet {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0 1rem;
  text-transform: none;
  letter-spacing: -0.005em;
}
.qstep-progress__label--greet .greet {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
}
.qstep-progress__label--greet .greet .name {
  color: var(--accent);
  font-weight: 600;
}
.qstep-progress__label--greet .greet .wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: qstep-wave 1.6s ease-in-out 1;
}
@keyframes qstep-wave {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(14deg); }
  50%      { transform: rotate(-8deg); }
  75%      { transform: rotate(10deg); }
}
.qstep-progress__label--greet .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
}
.qstep-progress__label--greet .qcount {
  font-variant-numeric: tabular-nums;
}
.qstep-progress__label--greet .qcount-bold {
  font-weight: 700;
}

/* Question form + content. The form has no visible chrome; it just wraps
   the hidden inputs + the action bar so submit/Enter still work natively. */
.qstep-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 96px; /* leave room for the fixed bottom action bar */
}
.qstep-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  margin-top: 2rem;
  animation: qstep-slide-in 0.32s cubic-bezier(.2,.7,.3,1);
}
@keyframes qstep-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qstep-prompt {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: center;
  max-width: 480px;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.qstep-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: -4px 0 0;
  text-align: center;
  max-width: 420px;
  line-height: 1.45;
  text-wrap: pretty;
}
.qstep-input-slot {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.625rem;
}
.qstep-error {
  color: var(--red);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}

/* Card-style single/multi options. */
.qstep-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 380px;
}
.qstep-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  min-height: 52px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  outline: none;
}
.qstep-option:hover { border-color: var(--text-dim); }
.qstep-option:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
[data-theme="light"] .qstep-option:focus-visible {
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}
.qstep-option.is-checked {
  border-color: var(--accent);
  background: rgba(52, 211, 153, 0.05);
}
[data-theme="light"] .qstep-option.is-checked {
  background: rgba(5, 150, 105, 0.06);
}
.qstep-option:active { transform: scale(0.99); }
.qstep-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}
.qstep-option--multi .qstep-radio { border-radius: 5px; }
.qstep-option.is-checked .qstep-radio { border-color: var(--accent); }
.qstep-option.is-checked .qstep-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--accent);
}
.qstep-option-label {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Centered / themed inputs for numeric, date, free-text. */
.qstep-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  color: var(--text);
  font-size: 1.05rem;
  font-family: inherit;
  outline: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s;
}
.qstep-input:focus { border-color: var(--accent); }
.qstep-input::placeholder { color: var(--text-dim); }
.qstep-input--numeric { max-width: 200px; }
.qstep-input--date    { max-width: 240px; }
.qstep-input--text    { max-width: 380px; text-align: left; }
textarea.qstep-input--text { min-height: 6em; resize: vertical; }

.qstep-text-wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

/* Slice 9 — generic per-locale info-note pill rendered under the input.
   The content (icon kind + body parts) is catalog-driven; this style
   block applies to every `kind`. Reuses the accent-soft colour family
   already established for option "is-checked" backgrounds. */
.qstep-info-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 0.375rem 0.625rem;
  background: rgba(52, 211, 153, 0.05);
  border: 1px solid var(--border);
  border-radius: 100px;
  line-height: 1.3;
}
[data-theme="light"] .qstep-info-note {
  background: rgba(5, 150, 105, 0.06);
}
.qstep-info-note svg { color: var(--accent); flex-shrink: 0; }
.qstep-info-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text);
}

/* Fixed bottom action bar. Gradient fade hides content scrolling under it. */
.qstep-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem;
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(180deg, transparent, var(--bg) 45%);
  pointer-events: none; /* let the gradient be click-through; buttons opt back in */
  z-index: 5;
}
.qstep-actions > * { pointer-events: auto; }
.qstep-back {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem 0;
  font-family: inherit;
}
.qstep-back:hover:not(:disabled) { color: var(--text); }
.qstep-back:disabled { opacity: 0.3; cursor: not-allowed; }
/* Quick task 260504-bs1 — "Exit now" tertiary text link. Mirrors the
   .consent-decline-link treatment used on the consent gate: small,
   underlined, dim text — no border, no button chrome. The visual
   hierarchy in the action bar reads as [back-button] [quiet-link] [primary-button]. */
.qstep-exit {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-family: inherit;
  transition: color 0.15s;
}
.qstep-exit:hover:not(:disabled),
.qstep-exit:focus-visible {
  color: var(--text);
  outline: none;
}
.qstep-exit:disabled { opacity: 0.35; cursor: not-allowed; }
.qstep-continue {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
[data-theme="light"] .qstep-continue { color: #ffffff; }
.qstep-continue:hover:not(:disabled) { background: var(--accent-dim); color: #ffffff; }
.qstep-continue:disabled { opacity: 0.35; cursor: not-allowed; }
.qstep-continue kbd {
  font-size: 0.65rem;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-family: inherit;
  opacity: 0.75;
}
[data-theme="light"] .qstep-continue kbd {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 480px) {
  .qstep-pos { right: 3.5rem; font-size: 0.65rem; }
  .qstep-prompt { font-size: 1.4rem; }
  .qstep-actions { padding: 1rem 1.25rem; }
}

/* --- Consent gate (slide-to-confirm) ---
   Replaces the accept/decline button pair with a drag-to-confirm slider
   plus a small decline text link. Colours come from common.css tokens so
   the existing light/dark theme toggle and accent-hue switching keep
   working. No new literals. */
.consent-gate__prior {
  color: var(--text-dim);
}

.consent-slider {
  --h: 64px;
  --pad: 6px;
  --thumb: calc(var(--h) - 2 * var(--pad));
  position: relative;
  width: 100%;
  max-width: 420px;
  height: var(--h);
  margin: 1.5rem auto 0;
  border-radius: calc(var(--h) / 2);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  outline: none;
}
.consent-slider:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}
[data-theme="light"] .consent-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

.consent-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--h);
  background: rgba(52, 211, 153, 0.18);
  border-radius: calc(var(--h) / 2);
  pointer-events: none;
  transition: width 0.2s;
}

/* Randomized green-zone target band. Position + width set inline from JS
   (_randomizeGreenZone). Inset top/bottom so it sits inside the track like
   a pill. Sits above the progress fill so it's always visible as the user
   drags toward it. */
.consent-slider__green-zone {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: 0;
  width: 0;
  border-radius: calc(var(--h) / 2);
  background: rgba(52, 211, 153, 0.32);
  pointer-events: none;
  transition: opacity 0.25s;
}
[data-theme="light"] .consent-slider__green-zone {
  background: rgba(5, 150, 105, 0.28);
}
.consent-slider[data-state="done"] .consent-slider__green-zone {
  opacity: 0;
}
.consent-slider__fill.snapping {
  transition: width 0.35s cubic-bezier(.2,.9,.3,1.3);
}
[data-theme="light"] .consent-slider__fill {
  background: rgba(5, 150, 105, 0.15);
}

.consent-slider__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  pointer-events: none;
  padding-left: var(--h);
  padding-right: 1.25rem;
  transition: opacity 0.2s;
}

.consent-slider__check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  pointer-events: none;
  transition: opacity 0.3s 0.1s;
}

.consent-slider__thumb {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
  touch-action: none;
}
.consent-slider__thumb:active { cursor: grabbing; }
.consent-slider__thumb.snapping {
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3);
}
.consent-slider__thumb.dragging { transition: none; }
.consent-slider__thumb.in-zone {
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.35);
}
[data-theme="light"] .consent-slider__thumb.in-zone {
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.3);
}

.consent-slider[data-state="done"] .consent-slider__label { opacity: 0; }
.consent-slider[data-state="done"] .consent-slider__check { opacity: 1; }
.consent-slider[data-state="done"] .consent-slider__thumb { cursor: default; }

.consent-gate__decline {
  margin-top: 1.5rem;
  text-align: center;
}
.consent-decline-link {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.15s;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0.25rem 0.5rem;
}
.consent-decline-link:hover,
.consent-decline-link:focus-visible {
  color: var(--text);
  outline: none;
}