/* Party policy quiz (election-2026-quiz.html). Linked on that page only, after custom.css.
   The quiz sits on a white card inside the navy hero and carries data-theme="light", so the
   design system's tokens resolve to their white-ground values and each party mark keeps a white
   ground. Party colours are not used: the quiz is not a chart about parties. Every class carries
   the pq- prefix and is scoped under #pq-tool or a pq- section, so nothing here touches the rest
   of the site. */

/* ---------- Page ---------- */
.pq-hero { padding-top: 3rem; }
@media screen and (max-width: 767px) { .pq-hero { padding-top: 2rem; } }
.pq-hero .pl-wrap { gap: 2.5rem; }
.pq-hero .pl-wrap > * { min-width: 0; }
.pq-hero .pl-text { flex: none; }
.pq-hero .pl-title { max-width: 16ch; font-size: clamp(2.25rem, 4vw, 3.5rem); }
.pq-hero-top { display: flex; flex-direction: column; gap: 2rem; }
@media screen and (min-width: 992px) {
  .pq-hero-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
  .pq-hero-top > .pl-text { flex: 1 1 auto; min-width: 0; }
  .pq-hero-top > .ds-tool-cta { flex: 0 0 auto; align-self: center; }
  /* The shared hero sizes the text column to the headline's longest word (a min-content grid);
     here the headline and intro run the width the row leaves beside the card. */
  .pq-hero .pl-text { display: flex; flex-direction: column; }
  .pq-hero .pl-title { max-width: none; }
  .pq-hero .pl-intro { max-width: 42rem; text-wrap: pretty; }
}

/* ---------- Closing line under the quiz, with the score, and a link to the home page ---------- */
.pq-outro { width: 100%; max-width: 60rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.pq-outro[hidden] { display: none; }
.pq-outro-text {
  margin: 0; text-wrap: balance;
  font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02rem; color: var(--white);
}
.pq-outro-text span { display: block; color: var(--cyan); }
.pq-outro-link { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--white); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.pq-outro-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.pq-outro-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }
.pq-outro-link svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform 0.2s; }
.pq-outro-link:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pq-outro-link svg { transition: none; } }

/* ---------- Quiz card ---------- */
#pq-tool {
  width: 100%; max-width: 46rem; margin: 0 auto; box-sizing: border-box;
  padding: 1.5rem 1.75rem 1.75rem; border-radius: var(--radius-card);
  background-color: var(--surface); color: var(--ink); box-shadow: var(--shadow-xlarge);
  font-size: 1rem; line-height: 1.5; text-align: left;
}
@media screen and (max-width: 479px) { #pq-tool { padding: 1.25rem 1rem 1.5rem; } }
#pq-tool *, #pq-tool *::before, #pq-tool *::after { box-sizing: border-box; }
#pq-tool button { font: inherit; color: inherit; cursor: pointer; }
#pq-tool .pq-option { font-weight: 500; }
#pq-tool .pq-options.is-figures .pq-option { font-weight: 700; }
#pq-tool .pq-btn { font-weight: 600; }
#pq-tool a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
#pq-tool :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

#pq-map-card[hidden] { display: none; }

/* Yellow is for the next step: Next question during a round; with the score, the two ways to the Policy Map (the hero
   card's Open the map and the score card's Explore the Policy Map), while the score card's other buttons are grey.
   The footer's Book a demo takes the quieter outline of the footer's LinkedIn button. */
.footer4_component .footer4_actions .button { background-color: transparent; color: var(--ink); border: 1px solid var(--control-border); }
.footer4_component .footer4_actions .button:hover { background-color: var(--fill-subtle); }

/* The page is navy from the hero to the footer: the footer takes the hero's darker navy, so there's no band between them */
.footer4_component { background-color: var(--navy-dark); }
/* No white below the footer on a tall window: the page fills the window and the hero stretches, so the
   footer sits at the bottom with the hero's navy above it. The outermost ground is navy too, for overscroll
   (on html only: the body stays white behind the translucent sticky nav, which would turn grey over navy). */
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.page-wrapper > .main-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
.pq-hero { flex: 1 0 auto; }
html { background-color: var(--navy-dark); }

.pq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.875rem; color: var(--ink-muted); }
.pq-step, .pq-score { font-weight: 500; }
.pq-step { white-space: nowrap; }
.pq-score { color: var(--ink); }
/* On the score card: the quiz's name on the right (Your score on the left), so a screenshot says whose quiz it is */
.pq-brand:not([hidden]) { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--ink); text-align: right; }
.pq-brand-mark { display: block; width: 1.25rem; height: 1.25rem; border-radius: 3px; }
.pq-bar { height: 6px; margin: 0.625rem 0 1.5rem; border-radius: 3px; background-color: var(--chart-grid); overflow: hidden; }
.pq-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background-color: var(--cyan-dark); transition: width 0.3s ease; }

.pq-line { margin: 0 0 1.5rem; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.35; font-weight: 700; letter-spacing: -0.01rem; }
.pq-blank { display: inline-block; min-width: 4.5em; border-bottom: 3px solid var(--cyan-dark); color: transparent; }
.pq-blank.is-filled { min-width: 0; border-bottom-color: transparent; color: inherit; background-color: var(--yellow-lighter); padding: 0 0.25em; border-radius: 4px; }
.pq-who { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.75rem; font-weight: 500; }

/* Options: party marks with names, 2 x 2 (one column on phones); figures, one row of three. */
.pq-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.pq-options.is-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 479px) { .pq-options, .pq-options.is-figures { grid-template-columns: minmax(0, 1fr); } }
.pq-option {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.5rem; padding: 0.625rem 0.875rem;
  border: 1px solid var(--control-border); border-radius: var(--radius-card); background-color: var(--surface);
  font-weight: 500; text-align: left; transition: border-color 0.15s, background-color 0.15s;
}
.pq-options.is-figures .pq-option { justify-content: center; font-size: 1.125rem; font-weight: 700; }
.pq-option:hover:not(:disabled) { border-color: var(--cyan-dark); background-color: var(--surface-hover); }
.pq-option:disabled { cursor: default; }
.pq-option.is-right { border: 2px solid var(--success); background-color: var(--success-soft); }
.pq-option.is-wrong { border: 2px solid var(--error); background-color: var(--error-soft); }
.pq-option:disabled:not(.is-right):not(.is-wrong) { opacity: 0.55; }
.pq-mark { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background-color: var(--white); object-fit: contain; }
.pq-tick { margin-left: auto; font-weight: 700; }
.pq-option.is-right .pq-tick { color: var(--success); }
.pq-option.is-wrong .pq-tick { color: var(--error); }

/* Reveal after each answer */
.pq-reveal { margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: var(--radius-card); background-color: var(--panel-grey); border: 1px solid var(--panel-grey-line); }
.pq-verdict { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 700; }
.pq-verdict.is-right { color: var(--success); }
.pq-verdict.is-wrong { color: var(--error); }
.pq-reveal p { margin: 0 0 0.375rem; }
.pq-reveal p:last-child { margin-bottom: 0; }
.pq-note { font-size: 0.9375rem; color: var(--ink-muted); }
.pq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem; }
/* Next question / See my score: at the right, in line with the feedback box's right edge, on every question;
   full width on narrow phones */
.pq-actions.is-next { justify-content: flex-end; }
.pq-arrow { flex: none; width: 1.125rem; height: 1.125rem; }
@media screen and (max-width: 479px) { .pq-actions.is-next .pq-btn { width: 100%; justify-content: center; } }
.pq-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1.5rem; border: 0; border-radius: var(--radius-pill);
  background-color: var(--cta); color: var(--on-cta) !important; font-weight: 600; text-decoration: none !important;
}
.pq-btn:hover { background-color: var(--cta-hover); }
.pq-btn.is-secondary { background-color: var(--fill-subtle); }
.pq-btn.is-secondary:hover { background-color: var(--fill-subtle-hover); }

/* Result */
.pq-result { text-align: center; }
.pq-big { margin: 0.25rem 0 0; font-size: clamp(3.5rem, 9vw, 5rem); line-height: 1; font-weight: 700; letter-spacing: -0.09rem; color: var(--cyan-darker); }
.pq-big small { font-size: 0.4em; color: var(--ink-muted); letter-spacing: 0; }
.pq-title { margin: 0.75rem 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; font-weight: 700; }
.pq-dig { max-width: 32rem; margin: 0 auto; font-size: 1.125rem; color: var(--ink-muted); }
.pq-dots { display: flex; justify-content: center; gap: 0.625rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.pq-dots li { font-size: 1.25rem; line-height: 1; font-weight: 700; }
.pq-dots li.is-right { color: var(--success); }
.pq-dots li.is-wrong { color: var(--error); }
.pq-result .pq-actions { justify-content: center; }
.pq-copied { font-size: 0.875rem; color: var(--success); }
/* Review your answers, with See the latest policy changes on the same line at the right (below it on phones) */
.pq-more { position: relative; margin-top: 1.75rem; }
.pq-recap { text-align: left; border-top: 1px solid var(--line); }
#pq-tool .pq-changes { position: absolute; top: 0.875rem; right: 0; line-height: 1.5rem; font-weight: 600; }
@media screen and (max-width: 479px) { #pq-tool .pq-changes { position: static; display: inline-block; margin-top: 0.5rem; } }
/* Review your answers: a disclosure with a chevron (Material Symbols expand_more) that turns over when open */
.pq-recap summary { display: flex; align-items: center; gap: 0.25rem; padding: 0.875rem 0 0.25rem; font-weight: 600; cursor: pointer; list-style: none; }
.pq-recap summary::-webkit-details-marker { display: none; }
.pq-recap summary:hover { color: var(--link); }
.pq-chevron { flex: none; width: 1.5rem; height: 1.5rem; transition: transform 0.2s ease; }
.pq-recap[open] .pq-chevron { transform: rotate(180deg); }
.pq-recap ol { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.pq-recap li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.625rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.pq-recap li:first-child { border-top: 0; }
.pq-recap .is-right { color: var(--success); font-weight: 700; }
.pq-recap .is-wrong { color: var(--error); font-weight: 700; }
.pq-recap .pq-note { display: block; margin-top: 0.125rem; }
.pq-snapshot { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--ink-muted); text-align: center; }

@media (prefers-reduced-motion: reduce) { .pq-bar span, .pq-option, .pq-chevron { transition: none; } }

/* ---------- Completed screen (.pq-hero.is-done, set with the score): tighter, so the closing line under the
   quiz shows on a laptop screen. No eyebrow, a smaller heading, no progress bar (it's full by now), a smaller
   score and closer spacing. Play ten more puts the round's layout back. ---------- */
.pq-hero.is-done { padding-top: 2rem; }
.pq-hero.is-done .pl-wrap { gap: 1.5rem; }
.pq-hero.is-done .pl-eyebrow { display: none; }
.pq-hero.is-done .pl-title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.pq-hero.is-done .pq-bar { display: none; }
.pq-hero.is-done .pq-head { margin-bottom: 0.75rem; }
.pq-hero.is-done .pq-big { margin-top: 0; font-size: clamp(3rem, 7vw, 3.75rem); }
.pq-hero.is-done .pq-title { margin: 0.5rem 0 0.375rem; }
.pq-hero.is-done .pq-dots { margin-top: 1rem; }
.pq-hero.is-done .pq-result .pq-actions { margin-top: 1rem; }
.pq-hero.is-done .pq-more { margin-top: 1.25rem; }
.pq-hero.is-done .pq-snapshot { margin-top: 1rem; }
.pq-hero.is-done .pq-outro { gap: 0.75rem; }
/* Focus lands on the score when it appears (for keyboards and screen readers); it needs no ring */
#pq-tool .pq-result:focus { outline: none; }