/* ============================================================================
   Your Reading - quiz.css
   Scoped styles for improvementcamp.com/reading/
   IC editorial premium palette via brand-overlay-vars in index.html.
   Mobile-first; min-width 768px desktop tier. WCAG AA contrast.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-heading); /* Direction B reads in serif; furniture keeps --font-body (grotesk) */
  color: var(--color-text);
  background: var(--color-surface-alt);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------- Container -------- */
.reading-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-5);  /* 20px = sub-grid (5×4); permitted per §4 4px sub-grid */
}
@media (min-width: 768px) {
  .reading-container { max-width: 680px; padding: 0 var(--space-6); }
}

/* -------- Skip link (a11y) -------- */
.skip-to-content {
  position: absolute;
  left: -9999px;
}
.skip-to-content:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  z-index: 100;
}

/* -------- Header -------- */
.reading-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
  padding: 20px 0;
}
.reading-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.reading-brand-link {
  text-decoration: none;
  color: var(--color-base);
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.reading-brand-name {
  font-size: 1.0625rem;
}
.reading-nav {
  display: flex;
  gap: 16px;
}
.reading-nav-link {
  text-decoration: none;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
}
.reading-nav-link:hover,
.reading-nav-link:focus { color: var(--color-accent); }

/* -------- Main -------- */
.reading-main {
  padding: 48px 0 64px;
  flex: 1 0 auto;
  outline: none;
}
@media (min-width: 768px) {
  .reading-main { padding: 64px 0 80px; }
}

/* -------- Intro panel -------- */
.reading-intro {
  text-align: left;
  margin-bottom: 48px;
}
.reading-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--color-base);
}
.reading-subtitle {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--color-fg-soft, #3A352F);
  margin: 0 0 24px;
  max-width: 36em;
  font-weight: 400;
}
.reading-lead {
  /* §1 hierarchy: lead drops to body-base (1rem) so subtitle (1.125rem)
     has visible authority. 1.0625 vs 1.125 was 6% difference, read as
     same level. 1rem vs 1.125 is 12% + register shift to body. */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 var(--space-8);
  max-width: 36em;
}

/* -------- Progress bar -------- */
.reading-progress {
  margin-bottom: 36px;
}
.reading-progress-track {
  width: 100%;
  height: 4px;
  background: var(--color-rule);
  border-radius: 2px;
  overflow: hidden;
}
.reading-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 280ms var(--ease-out);
  width: 14.28%;
}
.reading-progress-label {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  font-family: var(--font-body);
}

/* -------- Quiz form -------- */
.reading-form {
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);  /* 32 24, on-scale */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-rule);
}
@media (min-width: 768px) {
  .reading-form { padding: var(--space-12); }  /* 48, on-scale (was 40 off-scale) */
}

.reading-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-8);  /* 32 on-scale */
}

.reading-question {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-base);
  margin: 0 0 24px;
  padding: 0;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) {
  .reading-question { font-size: 1.5rem; }
}

/* -------- Answer options -------- */
.reading-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reading-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);              /* 12 on-scale */
  cursor: pointer;
  padding: var(--space-4);          /* 16 on-scale (was 14 off-scale) */
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-surface);
  /* §17 named ease token instead of built-in `ease` keyword */
  transition: border-color 140ms var(--ease-out),
              background 140ms var(--ease-out),
              transform 160ms var(--ease-out);
  min-height: 48px;
}
/* §18 compounding edge case: gate hover behind pointer:fine so touch
   devices don't get stuck in hover state after tap */
@media (hover: hover) and (pointer: fine) {
  .reading-option:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-tint-3);
  }
}
/* §17 :active compression. Every pressable surface compresses on press. */
.reading-option:active {
  transform: scale(var(--press-scale));
}
.reading-option input[type="radio"] {
  margin-top: var(--space-1);       /* 4 sub-grid permitted */
  flex-shrink: 0;
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
}
.reading-option-text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
}
.reading-option:has(input[type="radio"]:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-tint-6);
}
.reading-option:has(input[type="radio"]:focus-visible) {
  outline: 3px solid var(--color-accent-tint-25);
  outline-offset: 2px;
}

/* -------- Error states -------- */
.reading-error {
  font-size: 0.9375rem;
  color: var(--color-warning);
  margin: 16px 0 0;
  font-family: var(--font-body);
}
.reading-error[hidden] { display: none; }

/* -------- Actions -------- */
.reading-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 480px) {
  .reading-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* -------- Buttons -------- */
.btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: var(--space-3) var(--space-6);  /* 12 24, on-scale (was 14 28 off-scale) */
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  /* §17 named ease + transform transition for :active compression */
  transition: background 140ms var(--ease-out),
              border-color 140ms var(--ease-out),
              color 140ms var(--ease-out),
              transform 160ms var(--ease-out);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  letter-spacing: 0.04em;
}
.btn:focus-visible {
  outline: 3px solid var(--color-accent-tint-30);
  outline-offset: 2px;
}
/* §17: every pressable element compresses 0.97 on press. Single most
   universally-skipped polish detail. */
.btn:active {
  transform: scale(var(--press-scale));
}
.btn--primary {
  background: var(--color-base);          /* Direction B: ink primary, garnet on hover (matches homepage CTA) */
  color: var(--color-text-on-accent);
  border-color: var(--color-base);
}
.btn--secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--ghost {
  background: transparent;
  color: var(--color-muted);
  border-color: transparent;
}
/* §18 gate hover effects behind pointer:fine */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  .btn--secondary:hover {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
  }
  .btn--ghost:hover {
    color: var(--color-accent);
  }
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* .btn sets display:inline-flex, which overrides the UA [hidden] rule; restore it
   so backBtn.hidden (true on the first question) actually hides the button. */
.btn[hidden] { display: none; }

/* -------- Email panel -------- */
.reading-email-panel {
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);  /* 32 24 on-scale */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .reading-email-panel { padding: var(--space-12); }  /* 48, on-scale (was 40) */
}
.reading-email-title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--color-base);
}
.reading-email-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-8);
  max-width: 32em;
}

.reading-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.reading-field-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-base);
}
.reading-field-input {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);  /* 12 16, on-scale (was 14 16) */
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out);
}
.reading-field-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint-18);
}
.reading-field-group[data-valid="false"] .reading-field-input {
  border-color: var(--color-warning);
}

.reading-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text);
}
.reading-consent input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
}

.reading-disclosure {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0 0 24px;
  line-height: 1.55;
}

/* -------- Result panels -------- */
.reading-result {
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);  /* 32 24, on-scale */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-rule);
  border-top: 4px solid var(--color-accent);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .reading-result { padding: var(--space-12); }  /* 48 on-scale (was 44 off-scale) */
}

.reading-result--soft-exit {
  border-top-color: var(--color-muted);
}

.reading-result-heading {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--color-base);
}
@media (min-width: 768px) {
  .reading-result-heading { font-size: 1.875rem; }
}

.reading-result-paragraph {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--color-text);
  margin: 0 0 18px;
  max-width: 34em;
}
.reading-result-paragraph:last-of-type {
  margin-bottom: var(--space-8);
}
.reading-result-followup {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fg-soft, #3A352F);
  margin: 0 0 var(--space-8);
  max-width: 34em;
  font-style: italic;
}
.reading-result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 480px) {
  .reading-result-actions {
    flex-direction: row;
    align-items: center;
  }
}
.reading-result-note {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin: 16px 0 0;
  line-height: 1.55;
}

.reading-result-confirm {
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
  text-align: left;
}
@media (min-width: 768px) {
  .reading-result-confirm { padding: var(--space-12); }
}

/* -------- How-it-works (visible at bottom) -------- */
.reading-howto {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
}
.reading-howto-heading {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--color-base);
  letter-spacing: 0;
}
.reading-howto p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
  max-width: 36em;
}

/* -------- Footer -------- */
.reading-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-8) 0;  /* 32 on-scale (was 28 off-scale) */
  margin-top: auto;
}
.reading-footer-inner {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.55;
}
.reading-footer-disclaimer {
  margin: 0 0 8px;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}
.reading-footer-links {
  margin: 0 0 10px;
  font-family: var(--font-body);  /* grotesk furniture */
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}
.reading-footer-links a {
  color: var(--color-muted);
  text-decoration: none;
}
.reading-footer-links a:hover,
.reading-footer-links a:focus { color: var(--color-accent); }
.reading-footer-copyright {
  margin: 0;
  font-size: 0.8125rem;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reading-progress-fill { transition: none; }
}

/* -------- Panel entry motion (§17 @starting-style)
   Subtle 8px translateY + opacity fade as panels become visible.
   No JS workaround needed; modern CSS @starting-style handles entry. */
.reading-intro,
.reading-quiz,
.reading-email-panel,
.reading-result,
.reading-result-confirm {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms var(--ease-out),
              transform 250ms var(--ease-out);
}
@supports (transition-behavior: allow-discrete) {
  @starting-style {
    .reading-intro,
    .reading-quiz,
    .reading-email-panel,
    .reading-result,
    .reading-result-confirm {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reading-intro,
  .reading-quiz,
  .reading-email-panel,
  .reading-result,
  .reading-result-confirm {
    transition: none;
  }
}

/* ===========================================================================
   Auto-advance option buttons + question face-turn (2026-06-02 quiz redesign)
   =========================================================================== */

/* radio -> button: keep the card look, fix button defaults */
button.reading-option {
  width: 100%;
  text-align: left;
  font-family: var(--font-heading);
  color: var(--color-text);
  background: var(--color-surface);
}
.reading-option-text { pointer-events: none; }
.reading-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-tint-6);
}

/* reassurance microcopy under the progress bar */
.reading-quiz-reassure {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: -16px 0 28px;
}

/* question "face" turns out/in: subtle 3D rotateY + brief blur to fuse the swap.
   premium-design §9/§17: transform+opacity (+short filter), custom ease, ~280ms,
   reduced-motion fully disables. */
.reading-form { perspective: 1200px; }
#question-fieldset {
  transition: transform 300ms var(--ease-out),
              opacity 300ms var(--ease-out),
              filter 300ms var(--ease-out);
  transform-origin: center center;
}
#question-fieldset.is-entering {
  opacity: 0;
  transform: rotateY(10deg) translateX(5%) scale(0.985);
  filter: blur(2px);
}
#question-fieldset.is-leaving {
  opacity: 0;
  transform: rotateY(-10deg) translateX(-5%) scale(0.985);
  filter: blur(2px);
  transition-duration: 200ms;
}
@media (prefers-reduced-motion: reduce) {
  #question-fieldset,
  #question-fieldset.is-entering,
  #question-fieldset.is-leaving {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}