/* Quizzes page: Explore the map on the left; heading, Save your results and four quiz cards on the right */

.quiz-layout { display: grid; gap: 16px; padding: 16px; max-width: 1680px; margin: 0 auto; }
/* Below two columns the quizzes come first and the map follows them */
.quiz-layout > .quiz-map-panel { order: 1; }
/* Phones: the heading and Save your results lead, then the results map, then the quiz list. The cards
   section (no accessible name, so no landmark) joins the layout's grid so the map can sit between
   the save box and the list. */
@media (max-width: 700px) {
  .quiz-layout > .quiz-cards { display: contents; }
  .quiz-layout > .quiz-cards > .qc-head { order: 1; }
  .quiz-layout > .quiz-cards > .qc-save { order: 2; }
  .quiz-layout > .quiz-map-panel { order: 3; }
  .quiz-layout > .quiz-cards > .qc-list { order: 4; }
}

/* Explore the map */
.quiz-map-panel { display: grid; gap: 12px; align-content: start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.quiz-map-panel h2 { margin: 0; font-size: 1.25rem; }
.quiz-map-panel p { margin: 0; }
.quiz-map-pick, .quiz-map-race { display: grid; gap: 8px; font-size: .9rem; }
.quiz-map-pick select, .quiz-map-race select { width: 100%; max-width: 460px; }
.quiz-map-legend { font-size: .82rem; color: var(--muted); }
/* Inside the standard box: the layer's name and the RCV race picker live in the box, so their presence (RCV only)
   and any length never move the map below the box. */
.quiz-map-legend .quiz-map-name { margin: 0 0 10px; font-size: .9rem; font-weight: 650; color: var(--ink); }
.quiz-map-legend .quiz-map-race { margin: 0 0 10px; }
.quiz-map-ramp { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px 12px; width: min(100%, 400px); margin: 0 0 8px; }
.quiz-ramp-bar { grid-column: 1 / -1; height: 14px; border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, #fff), color-mix(in srgb, var(--accent) 55%, #fff), var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.quiz-ramp-high { text-align: right; }
.quiz-map-none { display: inline-flex; align-items: center; gap: 8px; }
.quiz-map-none .no-data-swatch { display: inline-block; width: 24px; height: 14px; border-radius: 3px; }
.quiz-map-outline { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--map-bg); }
.quiz-map-outline .city-label { font-size: 17px; stroke-width: 4px; }
.quiz-map-outline .map-label { font-size: 16px; }
.quiz-map-outline .city-dot { r: 5px; }
.outline-counties path { stroke: var(--line); stroke-width: .5; vector-effect: non-scaling-stroke; }
/* Statewide: the state reads as one shape — the county boundary lines go away, the shape and its fill stay
   (county and district views keep their boundaries). The class is toggled on the level change. */
.quiz-map-outline.quiz-map-statewide .outline-counties path,
.quiz-map-outline.quiz-map-statewide .outline-counties path.selected { stroke: none; }
.quiz-map-about { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: .86rem; }
.quiz-map-about h3 { margin: 0 0 6px; font-size: .95rem; }

/* Heading and Save your results */
.quiz-cards { display: grid; gap: 12px; margin: 0; }
.quiz-cards .qc-head { display: block; align-self: center; }
.quiz-cards .qc-head h1 { margin: 0 0 6px; font-size: 2.1rem; }
.quiz-cards .qc-lede { margin: 0; max-width: 46ch; color: var(--muted); }
.quiz-cards .qc-save { display: grid; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .86rem; }
.quiz-cards .qc-save h2 { margin: 0; font-size: 1rem; }
.quiz-cards .qc-save p { margin: 0; color: var(--muted); }
.qc-save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.qc-save-actions button { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 650; }
.qc-save-actions button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.qc-save-actions button[disabled] { opacity: .55; cursor: not-allowed; }

/* Cards */
.quiz-cards .qc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quiz-cards .qc-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 18px; align-items: start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.quiz-cards .qc-card h2 { margin: 2px 0 6px; font-size: 1.15rem; }
.quiz-cards .qc-intro { margin: 0 0 4px; font-size: .92rem; line-height: 1.45; }
.quiz-cards .qc-icon { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.quiz-cards .qc-icon-svg { width: 32px; height: 32px; color: var(--accent); }
.quiz-cards .qc-meta { color: var(--muted); font-size: .84rem; margin: 0 0 10px; }
.quiz-cards .qc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-cards .qc-start { min-width: 140px; padding: 8px 14px; border-radius: 8px; background: transparent; border: 1px solid var(--ink); color: var(--ink); font-weight: 650; font-size: .84rem; }
.quiz-cards .qc-start.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.quiz-cards .qc-start small { font-size: .7rem; margin-left: 4px; font-weight: 500; }
.qc-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* Preview map, See results on map and what the layer shows */
.qc-thumb { display: none; }
.qc-thumb .quiz-map-outline .city-label { font-size: 17px; stroke-width: 4px; }
.quiz-map-outline .map-label { font-size: 16px; }
.quiz-map-outline .city-dot { r: 5px; }
.outline-counties path { stroke-width: .35; }
.qc-preview { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.qc-show { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent);
  font: inherit; font-size: .88rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qc-show-arrow { width: 16px; height: 16px; }
.qc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; color: var(--muted); }
.qc-facts li { display: grid; grid-template-columns: 18px 1fr; }
.qc-facts li::before { content: "✓"; color: var(--muted); }

@media (min-width: 860px) {
  .quiz-cards { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .quiz-cards .qc-list { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .quiz-layout { grid-template-columns: minmax(320px, 37%) minmax(0, 1fr); align-items: start; }
  .quiz-layout > .quiz-map-panel { order: 0; position: sticky; top: 12px; }
  .quiz-cards .qc-card { grid-template-columns: 72px minmax(0, 1fr) minmax(180px, 210px); }
  .quiz-cards .qc-icon { width: 72px; height: 72px; }
  .qc-preview { grid-column: auto; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--line); align-self: stretch; align-content: start; }
}
/* Wide enough for the preview map between the text and the checklist, as in the mockup */
@media (min-width: 1440px) {
  .quiz-cards .qc-card { grid-template-columns: 72px minmax(0, 1fr) 140px minmax(180px, 210px); }
  .qc-thumb { display: block; width: 140px; height: 140px; padding-left: 14px; border-left: 1px solid var(--line); align-self: center; box-sizing: content-box; }
}
@media (max-width: 519px) {
  .quiz-cards .qc-card { grid-template-columns: 1fr; text-align: center; }
  .quiz-cards .qc-card > .qc-icon { justify-self: center; }
  .quiz-cards .qc-actions { justify-content: center; }
  .qc-preview { text-align: left; }
}

/* A result's group colour (Votely's region colours, Pew's group colours) and the official websites line */
.group-chip { display: inline-block; width: .8em; height: .8em; margin-right: .45em; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); vertical-align: baseline; }
.official-sites { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; }
.quiz-map-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; width: 100%; color: var(--ink); }
.quiz-map-groups li { display: flex; align-items: center; }
.quiz-map-groups .group-chip { flex: none; width: 14px; height: 14px; }
.quiz-map-colors { margin-top: 6px !important; color: var(--muted); }

/* Account dialog forms (Create account, Sign in) and a quiz result's Save to my account */
.account-form { display: grid; gap: 12px; font-size: .9rem; }
.account-form h2 { margin: 0; }
.account-lede, .account-hint { margin: 0; color: var(--muted); }
.account-field { display: grid; gap: 4px; }
.account-field label { font-weight: 650; }
.account-field input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg, var(--surface)); color: var(--ink); font: inherit; }
.account-check { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.account-check input { margin-top: 3px; }
.account-details ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.account-primary, .save-result-button { justify-self: start; padding: 9px 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 650; cursor: pointer; }
.account-primary[disabled], .save-result-button[disabled] { opacity: .6; cursor: progress; }
.account-status:empty { display: none; }
.account-status { margin: 0; color: var(--bad, var(--accent)); }
.account-alt { margin: 0; }
.account-switch { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.account-saved { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.account-saved h3 { margin: 0 0 6px; font-size: .95rem; }
.account-saved ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.save-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.save-result-status { margin: 0; color: var(--muted); font-size: .88rem; }
.save-result-status:empty { display: none; }
.account-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.account-status.account-ok { color: var(--ink); }
.account-check-more { display: block; margin-top: 4px; font-weight: 400; color: var(--muted); }
.account-check label { font-weight: 650; }
.account-history summary { cursor: pointer; }
.account-history ol { margin: 6px 0 4px; padding-left: 22px; display: grid; gap: 2px; }
.save-result-note { flex-basis: 100%; margin: 0; font-size: .84rem; color: var(--muted); }
.qc-count { margin: 0; font-size: .8rem; color: var(--muted); }
.quiz-map-levels { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; justify-self: start; }
.quiz-map-levels button { padding: 6px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; }
.quiz-map-levels button + button { border-left: 1px solid var(--line); }
.quiz-map-levels button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); font-weight: 650; }
.quiz-map-trait { grid-column: 1 / -1; justify-self: start; }
.quiz-map-counts { margin: 0; font-size: .86rem; color: var(--muted); }
.outline-counties path { transition: fill .3s, stroke .3s; }

/* Result screens: Save and More quizzes are where we point people (purple); Retake stays plain. */
body button.quiz-more, body .save-result button.save-result-button { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink, #fff); font-weight: 650; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
body .pew-estimate .pew-retake, body .personality-retake, body .ideology .quiz-retake { background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
/* "Active quiz takers" flash (off until deployed: meta tt-activity) */
.activity-flash { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: .86rem; font-weight: 600; }
.activity-flash::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.activity-pulse { animation: activity-pulse 1.2s ease-out 2; }
@keyframes activity-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .activity-pulse { animation: none; } }
.ideology .ideology-credit { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; font-size: .9rem; }
/* What you last saved for a quiz (signed in) */
.quiz-cards .qc-yours { margin: -4px 0 10px; font-size: .86rem; color: var(--ink); }
.quiz-cards .qc-yours b { color: var(--accent); font-weight: 650; }
/* My account: demographics, all optional (birth year, three menus, race or ethnicity as checkboxes) */
.account-demographics { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.account-demographics h3 { margin: 0; font-size: 1rem; }
.account-demo-form { display: grid; gap: 12px; }
.account-demo-field { display: grid; gap: 4px; }
.account-demo-field label, .account-demo-checks legend { font-weight: 600; font-size: .9rem; }
.account-demo-field input, .account-demo-field select { max-width: 340px; }
.account-demo-checks { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.account-demo-checks label { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.account-demo-form button[type="submit"] { justify-self: start; }

/* Quiz map: quizzes div and levels as flex rows, legend as standard box, area details */
.quiz-map-quizzes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quiz-map-levels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quiz-map-quizzes button, .quiz-map-levels button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.quiz-map-levels button + button { border-left: none; }
.quiz-map-levels button[aria-pressed="true"], .quiz-map-quizzes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.quiz-map-levels, .quiz-map-quizzes { justify-self: center; }
/* The standard legend box: one size in every quiz and in the statewide / district / county views, so the map below
   it stays in the same place, and just tall enough for the biggest legend at that window width without scrolling
   (Nate, 2026-10-28; re-measured with the one-list legend: Quizzes map 338px below 1100 wide, 454px at 1100–1279 where
   the legend is narrowest, 372px from 1280; the ranked choice quiz's own map 270px). An unusual extra line grows the
   box rather than scrolling it; on phones it takes its own height. */
.quiz-map-legend { min-height: 345px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-sizing: border-box; }
@media (min-width: 1100px) { .quiz-map-legend { min-height: 456px; } }
@media (min-width: 1280px) { .quiz-map-legend { min-height: 376px; } }
.rank-map .quiz-map-legend { min-height: 272px; }
@media (max-width: 700px) { .quiz-map-legend, .rank-map .quiz-map-legend { min-height: 0; } }
.quiz-map-legend-title { margin: 0 0 8px; font-size: 1rem; }
.quiz-map-outline path.selected { stroke: var(--ink); stroke-width: 2; }
.quiz-map-outline .outline-counties path { cursor: pointer; }
.quiz-map-area { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.quiz-map-area-name { margin: 0 0 4px; font-size: .95rem; }
.quiz-map-area-hint { margin: 0; }
.quiz-map-area-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.quiz-map-area-list li { display: flex; align-items: center; gap: 8px; }
.quiz-map-area-list b { margin-left: auto; font-weight: 600; }
/* Ranked choice: first and final round side by side (lib/rcv-rounds.js). */
.rcv-rounds { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .85rem; }
.rcv-rounds th { font-size: .75rem; font-weight: 600; color: var(--muted); text-align: right; padding: 0 0 4px 8px; white-space: nowrap; }
.rcv-rounds th:first-child { text-align: left; padding-left: 0; }
.rcv-rounds td { padding: 2px 0 2px 8px; text-align: right; font-weight: 600; white-space: nowrap; }
.rcv-rounds td.rcv-rounds-name { text-align: left; padding-left: 0; font-weight: 400; white-space: normal; }
.rcv-rounds td.rcv-rounds-out { font-weight: 400; color: var(--muted); }
/* The result-count status and the out-of-state line, in the standard box. */
.quiz-map-legend .quiz-map-counts { margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
/* Out-of-state results get their own visually distinct status line, apart from the Texas result totals. */
.account-out-of-state { margin: 6px 0 0; }
.quiz-map-legend .quiz-map-out { margin: 8px 0 0; }
.account-out-of-state, .quiz-map-legend .quiz-map-out { padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .85rem; }
/* See my results, below the Start buttons: only once you have a saved result */
.quiz-cards .qc-see-row { margin-top: 8px; }
.quiz-cards .qc-see { min-width: 140px; padding: 8px 14px; border-radius: 8px; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-weight: 650; font-size: .84rem; cursor: pointer; }
.quiz-cards .qc-see[disabled] { border-color: var(--line); color: var(--muted); cursor: default; }

.quiz-map-options { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-map-options button { flex: 1 1 auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.quiz-map-options button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.quiz-map-traits { grid-column: 1 / -1; }
.quiz-map-traits button { flex-basis: 30%; }
.quiz-map-panel.is-ideology .quiz-map-name { margin-bottom: 4px; }
.quiz-map-panel.is-ideology .quiz-map-area { margin-top: 4px; padding-top: 4px; }
.quiz-map-panel.is-ideology .quiz-map-area-list { gap: 2px; font-size: .8rem; }
.quiz-map-area-list li { min-width: 0; }
.quiz-map-area-list b { flex-shrink: 0; white-space: nowrap; }
.save-result-count { display: block; margin-top: 6px; }
.account-signin-prompt { padding: 14px; border: 2px solid var(--accent); background: var(--accent-soft); border-radius: 10px; }
.quiz-map-panel.is-ideology .quiz-map-legend-title { display: none; }
.quiz-map-panel.is-ideology .quiz-map-area-list { font-size: .76rem; line-height: 1.2; gap: 3px; }
/* Two columns (more on a wide legend), each name on one line beside its percentage; where a name would not fit,
   pages/quiz.js drops the list to one column (.one-col). */
.quiz-map-area-list.two-col { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 6px; font-size: .74rem; line-height: 1.25; }
.quiz-map-area-list.two-col li { gap: 5px; white-space: nowrap; }
.quiz-map-area-list.two-col .group-chip { width: 12px; height: 12px; }
.quiz-map-area-list.two-col b { margin-left: auto; padding-left: 2px; }
.quiz-map-area-list.two-col.one-col { grid-template-columns: 1fr; }
.quiz-map-area-list.two-col.one-col li { white-space: normal; }
/* Ideology: its long names in one column, before an area is clicked too, as in the statewide results list. */
.quiz-map-panel.is-ideology .quiz-map-groups { grid-template-columns: 1fr; gap: 3px; font-size: .76rem; line-height: 1.2; margin-top: 6px; }
.quiz-map-panel.is-ideology .quiz-map-groups li { gap: 8px; }

/* One legend layout (pages/quiz.js): no "Legend" heading or separate key; the list itself is the key. */
.quiz-map-legend .quiz-map-area { margin-top: 0; padding-top: 0; border-top: 0; }
.quiz-map-legend .quiz-map-none { margin-top: 8px; }