/* Scope all full ideology quiz styles to avoid changing the ballot or the fun quiz. */
.ideology { max-width: 960px; margin: 0 auto; display: grid; gap: 18px; min-width: 0; }
.ideology h1, .ideology h2, .ideology h3, .ideology p, .ideology figure { margin: 0; }
.ideology button, .ideology input { font: inherit; }
.ideology button { cursor: pointer; padding: 10px 14px; line-height: 1.35; }
.ideology button:disabled { opacity: .5; cursor: default; }
.ideology .ideology-back { justify-self: start; }
.ideology .ideology-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
.ideology .ideology-lede { font-size: 1rem; max-width: 75ch; }
.ideology .ideology-privacy, .ideology .ideology-progress { color: var(--muted); font-size: .88rem; }
.ideology .ideology-mode-grid, .ideology .ideology-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ideology .ideology-mode, .ideology .ideology-profile, .ideology .ideology-method, .ideology .ideology-answer-review { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px; }
.ideology .ideology-mode { display: grid; gap: 14px; }
.ideology .ideology-mode h2 { font-size: 1.25rem; }
.ideology progress { width: 100%; height: 10px; accent-color: var(--accent); }
.ideology .ideology-form { display: grid; gap: 20px; }
.ideology .ideology-question { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; background: var(--surface); }
.ideology .ideology-question legend { float: left; width: 100%; padding: 0; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.ideology .ideology-question[data-answered="true"] { border-left: 4px solid var(--accent); }
.ideology .ideology-question input[type="range"] { width: 100%; min-width: 0; padding: 4px 0; accent-color: var(--accent); }
.ideology .ideology-poles { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; color: var(--muted); font-size: .78rem; }
.ideology .ideology-reading { font-size: .95rem; font-weight: 700; color: var(--ink); text-align: center; min-width: 9ch; }
.ideology .ideology-poles span:last-child { text-align: right; }
.ideology .ideology-answer-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ideology .ideology-answer-buttons button { padding: 8px 4px; font-size: .78rem; font-weight: 500; }
.ideology .ideology-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ideology .ideology-actions .ideology-primary { margin-left: auto; }
.ideology .ideology-result-title { font-size: 1.5rem; font-weight: 650; color: var(--accent); }
.ideology .ideology-notice { border-left: 3px solid var(--accent); padding: 12px; background: var(--accent-soft); }
.ideology .ideology-score-bars { display: grid; gap: 22px; padding-block: 16px; min-width: 0; }
.ideology .ideology-score-row { display: grid; gap: 8px; }
.ideology .ideology-score-value { font-size: .88rem; color: var(--muted); }
.ideology .ideology-score-track { height: 8px; margin-inline: 7px; position: relative; border-radius: 5px; background: var(--line); }
.ideology .ideology-score-track::before { content: ''; position: absolute; width: 1px; height: 16px; top: -4px; left: 50%; background: var(--muted); }
.ideology .ideology-score-dot { position: absolute; top: -3px; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.ideology .ideology-chart { min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ideology .ideology-chart svg { width: 100%; display: block; max-height: 350px; touch-action: pan-y; cursor: grab; }
.ideology .ideology-chart-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ideology .ideology-chart-controls button { padding: 6px 9px; font-size: .8rem; }
.ideology .ideology-chart figcaption { color: var(--muted); font-size: .8rem; margin-top: 12px; }
.ideology .ideology-cube-edge { stroke: var(--muted); stroke-width: 1; fill: none; }
.ideology .ideology-cube-axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 3; }
.ideology .ideology-anchor { fill: var(--muted); opacity: .55; }
.ideology .ideology-position { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.ideology .ideology-matches, .ideology .ideology-library-group { display: grid; gap: 12px; }
.ideology .ideology-profile summary { font-size: 1.05rem; }
.ideology .ideology-profile p, .ideology .ideology-method p { margin-top: 12px; }
.ideology .ideology-profile h4 { margin: 14px 0 0; }
.ideology .ideology-profile a { display: inline-block; margin-top: 12px; }
.ideology .ideology-library { display: grid; gap: 28px; }
.ideology .ideology-answer-review li { margin-block: 12px; }
.ideology .ideology-method a { overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .ideology .ideology-mode-grid, .ideology .ideology-result-grid { grid-template-columns: 1fr; }
  .ideology .ideology-answer-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ideology .ideology-answer-buttons button:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .ideology .ideology-question { padding: 12px; }
  .ideology .ideology-actions button { flex: 1; }
  .ideology .ideology-result-title { font-size: 1.25rem; }
}
/* A result in its region's colour, as on the Quizzes map (Nate, 2026-10-28); a dark outline keeps pale colours visible */
.ideology .ideology-result-title { color: var(--ink); }
.ideology .ideology-result-title .group-chip { width: 18px; height: 18px; outline: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.ideology .ideology-score-dot { background: var(--result-colour, var(--accent)); border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.ideology .ideology-position { fill: var(--result-colour, var(--accent)); stroke: var(--ink); stroke-width: 1.5; }