/* Diagnosis, staged like the presentation: full screen, the question big and bold, moving
   lines behind it on large screens, the red progress line on top, and each question entering
   the way a slide headline does. The flow and its logic are unchanged. */
.diag .flux-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.diag .flux-lines-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.diag > header, .diag > main { position: relative; z-index: 1; }
.diag-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.06); z-index: 20; }
.diag-progress > span { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.45s cubic-bezier(0.23, 1, 0.32, 1); }

/* Large screens scale like the presentation: one unit = 1% of a 16:9 frame (the smaller of
   width and height decides), so an iMac shows the question as big as a slide headline. Every
   size has a floor so a small laptop still reads comfortably. */
.diag { --u: min(1vw, 1.78vh); }
.diag-top { width: calc(100% - var(--u) * 13); max-width: none; }
.diag-top img { height: max(44px, calc(var(--u) * 3.4)); }
.diag-top #counter { color: var(--muted); font-size: max(0.78rem, calc(var(--u) * 0.95)); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.diag-stage { width: calc(100% - var(--u) * 13); margin-inline: auto; min-height: calc(100dvh - 92px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 6); }
.diag #step, .diag #loading, .diag #retry, .diag #belowMin { padding: 0 !important; width: 100%; }
.diag #belowMin, .diag #retry { max-width: max(720px, calc(var(--u) * 60)); }
.diag .eyebrow { font-size: max(0.75rem, calc(var(--u) * 0.95)); }
.diag #loading p { font-size: max(1.05rem, calc(var(--u) * 1.5)); }

.diag .lead-in { color: #cfcfcf; font-size: max(1.1rem, calc(var(--u) * 1.6)); line-height: 1.45; max-width: 58ch; margin: 0 0 calc(var(--u) * 1); }
.diag .question { font-size: max(2rem, calc(var(--u) * 3.9)); font-weight: 600; line-height: 1.04; letter-spacing: -0.032em; max-width: 24ch; margin: 0; }
.diag .reveal-clip { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.diag .reveal-in { display: block; }
.diag .q-rule { display: block; width: max(120px, calc(var(--u) * 10)); height: 3px; border-radius: 2px; background: var(--red); margin: calc(var(--u) * 1.8) 0 calc(var(--u) * 2); transform-origin: left center; }
.diag #hint { font-size: max(1.05rem, calc(var(--u) * 1.3)); margin: calc(var(--u) * -0.6) 0 calc(var(--u) * 1.6); max-width: 60ch; }

.diag .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(12px, calc(var(--u) * 1)); }
.diag .choice { min-height: max(60px, calc(var(--u) * 4.6)); padding: max(14px, calc(var(--u) * 1.3)) max(18px, calc(var(--u) * 1.8)); gap: max(14px, calc(var(--u) * 1.2)); border-radius: max(16px, calc(var(--u) * 1.4)); background: linear-gradient(135deg, var(--surface), #151313); font-size: max(1.05rem, calc(var(--u) * 1.45)); line-height: 1.3; }
.diag .choice .mark { width: max(22px, calc(var(--u) * 1.8)); height: max(22px, calc(var(--u) * 1.8)); }
.diag .choice[aria-pressed="true"] { background: radial-gradient(ellipse 80% 120% at 0% 50%, rgba(237, 30, 36, 0.22), transparent 70%), var(--surface); box-shadow: 0 0 0 1px var(--red), 0 18px 40px -24px rgba(237, 30, 36, 0.6); }
.diag #otherWrap { max-width: max(720px, calc(var(--u) * 60)); }
.diag #otherWrap label { font-size: max(1rem, calc(var(--u) * 1.25)); }
.diag #otherWrap input { font-size: max(1rem, calc(var(--u) * 1.3)); min-height: max(48px, calc(var(--u) * 4.4)); }
.diag .actions { margin-top: calc(var(--u) * 1.8); }
.diag .actions .btn { min-height: max(52px, calc(var(--u) * 4.6)); padding: 0 max(26px, calc(var(--u) * 2.6)); font-size: max(1.05rem, calc(var(--u) * 1.4)); }
.diag .lang-switch a { min-height: max(32px, calc(var(--u) * 2.6)); min-width: max(38px, calc(var(--u) * 3.2)); font-size: max(0.8rem, calc(var(--u) * 0.95)); }

/* Entrances: the rule draws, the question rises, the options follow one by one. */
.diag .step-enter-fwd, .diag .step-enter-back { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .diag .enter .q-rule { animation: diag-rule 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.05s backwards; }
  .diag .enter .reveal-in { animation: diag-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
  .diag .enter .lead-in, .diag .enter #hint { animation: diag-fade 0.5s ease-out backwards; }
  .diag .enter .choice { animation: diag-choice 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.28s + var(--i, 0) * 45ms); }
  .diag .enter .actions { animation: diag-fade 0.4s ease-out 0.45s backwards; }
}
@keyframes diag-rule { from { transform: scaleX(0); } }
@keyframes diag-rise { from { transform: translateY(105%); } }
@keyframes diag-fade { from { opacity: 0; } }
@keyframes diag-choice { from { opacity: 0; transform: translateY(14px); } }

/* Phones: one column, the question still large, the same rhythm. */
@media (max-width: 760px) {
  .diag-top { width: calc(100% - 32px); }
  .diag-top img { height: 40px; }
  .diag .lead-in { font-size: 1.05rem; margin-bottom: 10px; }
  .diag #hint { font-size: 0.98rem; margin: -6px 0 14px; }
  .diag .actions .btn { min-height: 52px; padding: 0 24px; font-size: 1.05rem; }
  .diag .choice .mark { width: 22px; height: 22px; }
  .diag-stage { width: calc(100% - 40px); justify-content: flex-start; padding: 8px 0 48px; min-height: 0; }
  .diag .question { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  .diag .q-rule { width: 72px; margin: 16px 0 18px; }
  .diag .choices { grid-template-columns: 1fr; gap: 10px; }
  .diag .choice { min-height: 60px; font-size: 1.05rem; padding: 14px 16px; }
  .diag-top #counter { font-size: 0.66rem; letter-spacing: 0.06em; white-space: nowrap; }
}