/* Page-specific overrides — populated during polish phase */

/* Dashboard greeting */
.dashboard__greeting {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.dashboard__subtext {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

/* Result page wider container */
@media (min-width: 768px) {
  .result-page .container {
    max-width: 640px;
  }
}

/* Quiz styles */
.quiz-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.quiz-header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.quiz-form {
  margin-top: var(--space-md);
}

.quiz-question {
  margin-bottom: var(--space-lg);
}

.quiz-question__label {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--space-sm);
  color: var(--ink);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s;
}

.quiz-option:hover {
  background-color: var(--bg-page);
}

.quiz-option input[type="radio"] {
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
}

.quiz-option label {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--body);
}

.quiz-feedback {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}

.quiz-feedback--error {
  background-color: #FEE2E2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.quiz-feedback--success {
  background-color: #DCFCE7;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.alert--success {
  background-color: #DCFCE7;
  border: 1px solid #BBF7D0;
  color: #166534;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
}

/* "How this works" callout — used on screening.html to make
   the book-externally → return → confirm flow unmissable. */
.how-it-works {
  background: var(--primary-50);
  border: 1px solid var(--primary-300);
  border-radius: var(--radius-md);
  padding: 18px 22px 16px;
}

.how-it-works__title {
  margin: 0 0 10px 0;
  color: var(--primary-700);
  font-size: 16px;
  font-weight: 700;
}

.how-it-works__list {
  margin: 0;
  padding-left: 20px;
  color: var(--primary-700);
  font-size: 14px;
  line-height: 1.7;
}

.how-it-works__list li {
  margin-bottom: 4px;
}

.how-it-works__list em {
  font-style: normal;
  font-weight: 600;
  background: rgba(0, 163, 96, 0.14);
  padding: 0 4px;
  border-radius: 3px;
}

/* Step labels above the booking button / confirmation form. */
.step-marker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-left: 4px;
}

/* Vimeo player wrap — 16:9 aspect ratio, responsive. */
.vimeo-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
}
.vimeo-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Quiz language toggle (EN / ES / FR / JA). Display-only — answer values
   are unchanged, so scoring is identical in every language. */
.lang-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
}
.lang-toggle__btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}
.lang-toggle__btn:hover { color: var(--ink); }
.lang-toggle__btn--active {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Watch-status indicator below the video. Yellow dot = still watching,
   green dot = complete. The text is updated by education.js. */
.video-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 12px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
}
.video-status__indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F59E0B;
  flex-shrink: 0;
}
.video-status--complete {
  background: #DCFCE7;
  border-color: #BBF7D0;
  color: #166534;
}
.video-status--complete .video-status__indicator {
  background: #10B981;
}
.video-status--complete .video-status__text {
  font-weight: 600;
}

/* Fallback link — only shown if the SDK fails to fire 'ended' in 30s. */
.video-fallback {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.video-fallback a {
  color: var(--brand);
  font-weight: 600;
}

/* ============================================================
   Step nav strip — rendered by WTS.renderStepNav into <div id="stepNav">.
   Shows Prev / All Steps / Next on every step page so patients can
   move sequentially without going back to the dashboard each time.
   ============================================================ */
.step-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* All three buttons share the same base — same min height, same padding,
   same border-radius, same font sizing. Side buttons (prev / next) carry
   a bordered card look; the center button (All Steps) is a quieter ghost
   style to subordinate it to the directional flow. */
.step-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg, #fff);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: border-color .15s, background-color .15s, color .15s;
}
.step-nav__btn:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
  color: var(--brand);
}

.step-nav__btn--prev   { justify-self: start;  justify-content: flex-start; }
.step-nav__btn--next   { justify-self: end;    justify-content: flex-end; text-align: right; }

.step-nav__btn--center {
  justify-self: center;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 14px;
}
.step-nav__btn--center:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--ink);
}

.step-nav__btn--empty    { visibility: hidden; }
.step-nav__btn--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.step-nav__arrow {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.step-nav__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 640px) {
  .step-nav { gap: 8px; }
  .step-nav__btn { font-size: 13px; padding: 0 12px; }
  .step-nav__btn--center { font-size: 11px; padding: 0 10px; }
  /* On very narrow screens, the side buttons get more breathing room
     by hiding the All Steps text and showing just a small dashboard icon. */
  .step-nav__btn--center .step-nav__name { display: none; }
  .step-nav__btn--center::before {
    content: '\2630'; /* ≡ trigram for heaven */
    font-size: 18px;
    line-height: 1;
  }
}

/* ============================================================
   Dashboard "is-pending" step card — for steps that exist on the
   dashboard so patients can SEE what's coming, but can't be
   completed by the patient themselves (e.g. result, which arrives
   via the CSV upload by the medical team).
   ============================================================ */
.card--step.is-pending {
  opacity: .68;
  background: var(--bg-subtle);
  border-color: var(--border);
  cursor: default;
}
.card--step.is-pending .card__step-number {
  background: #FEF3C7;
  color: #B45309;
}
.card--step.is-pending .card__step-title::after {
  content: ' · Pending';
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}