/* Quiz (/quiz). Scoped to .s4d-diag; buttons and inputs use the theme's UIkit classes. */

/* Vertically center a single question in the viewport, below the navbar, without page scroll.
   80px matches the theme's UIkit navbar min-height (.uk-navbar-item { min-height: 80px }). */
main.s4d-diag-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 80px);
}
main.s4d-diag-page > .uk-container { width: 100%; }

.s4d-diag { --s4d-diag-accent: #006d8f; max-width: 720px; margin: 0 auto; }
.s4d-diag h1:focus { outline: none; }
.s4d-diag__eyebrow, .s4d-diag__progress { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: .5rem; }
.s4d-diag__meta, .s4d-diag__hint, .s4d-diag__note { font-size: .9rem; opacity: .75; }
.s4d-diag__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 1.5rem 0; }
.s4d-diag__card { text-align: left; padding: 16px 18px; min-height: 56px; border: 2px solid rgba(0, 0, 0, .12); border-radius: 12px; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.s4d-diag__card:hover, .s4d-diag__card:focus-visible { border-color: var(--s4d-diag-accent); }
.s4d-diag__card[aria-pressed="true"] { border-color: var(--s4d-diag-accent); background: color-mix(in srgb, var(--s4d-diag-accent) 10%, transparent); font-weight: 600; }
.s4d-diag__range { display: flex; align-items: center; gap: 16px; margin: 1.5rem 0; }
.s4d-diag__range .uk-range { flex: 1; }
.s4d-diag__range .uk-input { max-width: 140px; }
.s4d-diag__value { min-width: 100px; font-weight: 700; }
.s4d-diag__reaction { min-height: 1.5em; font-style: italic; }
.s4d-diag__nav, .s4d-diag__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.s4d-diag__nav { justify-content: space-between; }
.s4d-diag__score { margin: 0; line-height: 1; }
.s4d-diag__scorenum { font-size: 3.5rem; font-weight: 800; color: var(--s4d-diag-accent); }
.s4d-diag__score span:last-child { font-size: 1.25rem; opacity: .7; margin-left: 4px; }
.s4d-diag__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 1.5rem 0; }
.s4d-diag__figure { padding: 18px; border-radius: 12px; background: rgba(0, 0, 0, .04); }
.s4d-diag__figure strong { display: block; font-size: 2rem; color: var(--s4d-diag-accent); }
.s4d-diag__formula { font-size: .85rem; opacity: .75; margin: .5rem 0 0; }
.s4d-diag__details--blurred { filter: blur(6px); user-select: none; pointer-events: none; }
.s4d-diag__gate { padding: 20px; border: 2px solid rgba(0, 0, 0, .12); border-radius: 12px; margin: 1.5rem 0; }
.s4d-diag__gate label { display: block; margin-bottom: 12px; }
.s4d-diag__gate .uk-input { margin-top: 4px; }
.s4d-diag__consent { font-size: .9rem; }
.s4d-diag__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s4d-diag__formmsg { min-height: 1.5em; }
.s4d-diag__thanks { padding: 12px 16px; border-left: 4px solid var(--s4d-diag-accent); background: rgba(0, 0, 0, .03); }
@media (max-width: 639px) {
  .s4d-diag__range { flex-wrap: wrap; }
  .s4d-diag__nav .uk-button { flex: 1; }
}
@media print {
  header, footer, nav, .uk-navbar-container, .uk-offcanvas, .s4d-diag__actions, .s4d-diag__nav, .s4d-diag__thanks { display: none !important; }
  .s4d-diag__details--blurred { display: none !important; }
}

/* Phones: the Start button on the intro screen sits centred. */
@media (max-width: 639.98px) {
  .s4d-diag__start { display: block; margin: 1.5rem auto 0; }
}