/* ==========================================================================
   diagnostic.css — interactive diagnostic UI (Phase 5)
   --------------------------------------------------------------------------
   Austere editorial register: paper/ink, Fraunces for the question + result
   headings, the single accent reserved for emphasis (selected state, the
   primary button, the "Today" tag). Reuses tokens.css + the .reveal hooks
   from nav.css. All z-index stays well below the nav system (spine-z 60-65).
   ========================================================================== */

#diagnostic-app {
  margin-top: var(--space-xl);
  min-height: 4rem;
  text-align: left;
}

/* Screen-reader announcement region, visually hidden but reachable. */
.dx__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.dx__card {
  max-width: 52ch;
  margin-inline: auto;
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--rule);
  border-radius: 4px;
  padding: var(--space-l) var(--space-m);
  box-shadow: none;
}

/* --- Progress ------------------------------------------------------------- */
.dx__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}
.dx__count {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dx__dots { display: flex; gap: 0.4rem; }
.dx__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--rule-strong);
  transition: background 0.3s var(--reveal-curve), transform 0.3s var(--reveal-curve);
}
.dx__dot.is-on {
  background: var(--accent);
  transform: scale(1.1);
}

/* --- Question ------------------------------------------------------------- */
.dx__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dx__legend {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: var(--step-2);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  padding: 0;
  margin-bottom: var(--space-m);
  text-wrap: balance;
}

.dx__options { display: flex; flex-direction: column; gap: var(--space-2xs); }

.dx__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: var(--rule-hair) solid var(--rule);
  border-radius: 8px;
  padding: var(--space-2xs) var(--space-xs);
  cursor: pointer;
  color: var(--ink);
  line-height: 1.4;
  transition:
    border-color 0.2s var(--reveal-curve),
    background 0.2s var(--reveal-curve),
    transform 0.12s var(--reveal-curve);
}
.dx__option:hover { border-color: var(--rule-strong); background: var(--paper-raised); }
.dx__option:active { transform: translateY(1px); }
.dx__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dx__option-mark {
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.18em;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  background: transparent;
  transition: border-color 0.2s var(--reveal-curve), box-shadow 0.2s var(--reveal-curve);
}
.dx__option-label { flex: 1 1 auto; font-size: var(--step-0); }

.dx__option.is-selected {
  border-color: var(--accent);
  background: var(--paper-raised);
}
.dx__option.is-selected .dx__option-mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 0.28rem var(--accent);
}

/* --- Nav buttons ---------------------------------------------------------- */
.dx__nav {
  display: flex;
  gap: var(--space-2xs);
  justify-content: space-between;
  margin-top: var(--space-m);
}

.dx__btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  border-radius: 7px;
  padding: 0.7em 1.3em;
  cursor: pointer;
  border: var(--rule-hair) solid transparent;
  transition: background 0.2s var(--reveal-curve), color 0.2s var(--reveal-curve), border-color 0.2s var(--reveal-curve);
}
.dx__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dx__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.dx__btn--primary { background: var(--accent); color: var(--paper-raised); }
.dx__btn--primary:not(:disabled):hover { background: var(--accent-strong); }

.dx__btn--ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); }
.dx__btn--ghost:not(:disabled):hover { color: var(--ink); border-color: var(--ink-soft); }

/* --- Result --------------------------------------------------------------- */
.dx__result { max-width: 56ch; }
.dx__result-overline { margin-bottom: var(--space-2xs); }
.dx__result-title {
  font-size: var(--step-3);
  margin: 0 0 var(--space-s);
  outline: none;
}
.dx__result-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dx__result-body {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.55;
  margin-bottom: var(--space-s);
}
.dx__result-action {
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  padding: var(--space-xs);
  background: var(--paper-sunk);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  margin-bottom: var(--space-l);
}
.dx__action-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.4em;
}

/* --- Subscribe form ------------------------------------------------------- */
.dx__form {
  border-top: var(--rule-hair) solid var(--rule);
  padding-top: var(--space-m);
  margin-bottom: var(--space-m);
}
.dx__form-heading {
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}
.dx__form-copy {
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}
.dx__form-copy--soft { color: var(--ink-faint); font-size: var(--step--1); }

.dx__field { margin-bottom: var(--space-xs); }
.dx__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-3xs);
}
.dx__input {
  width: 100%;
  font-size: max(1rem, var(--step-0)); /* never trigger iOS zoom */
  padding: 0.7em 0.85em;
  background: var(--paper);
  border: var(--rule-hair) solid var(--rule-strong);
  border-radius: 7px;
  color: var(--ink);
}
.dx__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.dx__turnstile {
  min-height: 65px;
  margin-bottom: var(--space-xs);
  /* Inert placeholder until the Turnstile script loads (Phase 7). */
}
.dx__turnstile:empty::before {
  content: "Spam check loads here";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  font-size: var(--step--1);
  color: var(--ink-faint);
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
}

.dx__submit { width: 100%; }

.dx__form-status {
  font-size: var(--step--1);
  color: var(--accent);
  margin-top: var(--space-2xs);
  min-height: 1.2em;
}
.dx__form-status.is-ok { color: var(--ink-soft); }

.dx__fine {
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-style: italic;
  margin-top: var(--space-2xs);
}

.dx__restart {
  display: block;
  margin: 0 auto;
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dx__option, .dx__dot, .dx__btn { transition: none; }
}

@media (max-width: 36rem) {
  .dx__card { padding: var(--space-m) var(--space-s); }
  .dx__nav { flex-direction: row; }
  .dx__btn { padding: 0.7em 1.1em; }
}