/* Programmes 2027 — mise en page du site. Les composants viennent de bundle.css. */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 720px) { .wrap { padding: 0 var(--space-5); } }
@media (min-width: 1024px) { .wrap { padding: 0 var(--space-6); } }
.wrap--narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--space-4); top: var(--space-2); z-index: 10; background: var(--paper); padding: var(--space-2) var(--space-3); }

/* ---------- En-tête ---------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-head__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); min-height: 64px; padding-top: 6px; padding-bottom: 6px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font: 800 22px/28px var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
@media (min-width: 720px) { .wordmark { font-size: 24px; line-height: 30px; } }
.site-nav { display: flex; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 22px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: var(--radius-xs); }
.site-nav a:hover { background: var(--highlight-soft); }
.site-nav a[aria-current="page"] { text-decoration: none; background: var(--highlight); color: var(--on-highlight); }

/* Menu du téléphone : un bouton « Menu », un écran entier */
.menu-btn, .menu-close { min-height: 44px; margin-right: -8px; text-decoration: none; }
.menu-btn { display: none; }
@media (max-width: 719px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 720px) { .menu { display: none !important; } }
html.menu-open { overflow: hidden; }
.menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); }
.menu__head { position: sticky; top: 0; z-index: 1; background: var(--paper); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.menu__body { display: flex; flex-direction: column; padding-top: var(--space-4); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
.menu__quiz { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--space-1) var(--space-3); padding: 18px var(--space-4); border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--highlight); color: var(--on-highlight); text-decoration: none; }
.menu__quiz .cc-icon { width: 24px; height: 24px; grid-row: span 2; }
.menu__quiz-t { font: 800 24px/28px var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.menu__quiz-d { font-size: 15px; line-height: 22px; }
.menu__list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; padding: var(--space-2) 0; color: var(--ink); text-decoration: none; }
.menu__list a > .cc-icon { color: var(--ink-2); }
.menu__list a[aria-current="page"] .menu__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--highlight); }
.menu__t { display: block; font-weight: 700; font-size: 18px; line-height: 24px; }
.menu__d { display: block; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.menu__label { margin: var(--space-5) 0 0; font: 700 12px/16px var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.menu__themes { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.menu__themes .cc-tab { min-height: 44px; padding: 0 var(--space-3); font-size: 15px; }
.menu__foot { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.menu__foot .cc-link { display: inline-flex; align-items: center; min-height: 44px; }
.menu__date { font-family: var(--font-mono); }

/* ---------- Pied ---------- */
.site-foot { margin-top: var(--space-7); border-top: 1px solid var(--line); padding: var(--space-5) 0 var(--space-6); font-size: 15px; line-height: 22px; }
.site-foot p { margin: 0; color: var(--ink-2); }
.site-foot nav { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Bouton « Propulsé par Studio PR » : même dessin que sur Neurotopia. */
.site-foot__studio { margin-top: var(--space-4); }
.pf-powered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.pf-powered:hover { border-color: currentColor; color: var(--ink); text-decoration: none; }
.pf-powered:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pf-studio-logo { width: auto; height: 18px; flex: none; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .pf-powered { transition: none; } }

/* ---------- Titres de page ---------- */
.page-top { padding-top: var(--space-2); }
.back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 15px; line-height: 22px; font-weight: 700; }
.h-hero { margin: var(--space-5) 0 0; font: 800 36px/38px var(--font-display); letter-spacing: -0.02em; }
.h-page { margin: var(--space-1) 0 0; font: 800 30px/34px var(--font-display); letter-spacing: -0.02em; }
.h-sec { margin: 0; font: 700 24px/30px var(--font-display); }
.h-label { margin: 0; font: 700 13px/16px var(--font-text); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.lead { margin: var(--space-3) 0 0; font-size: 17px; line-height: 27px; }
.hint { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.sec { padding-top: var(--space-6); }
@media (min-width: 720px) {
  .h-hero { font-size: 52px; line-height: 54px; }
  .h-page { font-size: 40px; line-height: 44px; }
  .lead { font-size: 20px; line-height: 30px; }
}

/* ---------- Monogrammes : tailles ---------- */
.cc-mono--lg { width: 56px; height: 56px; font-size: 20px; }
.cc-mono--xl { width: 72px; height: 72px; font-size: 26px; }
.cc-mono--photo img { object-position: 50% 20%; }

/* ---------- Accueil : liste de candidats ---------- */
.pick { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
@media (min-width: 720px) { .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 1024px) { .pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pick .cc-chip { flex: 1 1 auto; min-width: 0; }
.pick .cc-chip__text { display: block; min-width: 0; }
.pick .cc-chip__name { display: block; }
.pick .cc-party { font-weight: 400; font-size: 14px; line-height: 18px; color: var(--ink-2); }
.cc-chip[aria-pressed="true"] .cc-party { color: var(--on-highlight); }
.pick .cc-chip .cc-check { margin-left: auto; }
.pick__fiche { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 48px; font-size: 15px; line-height: 22px; }

/* Barre de sélection collée en bas */
.tray-slot { position: sticky; bottom: 12px; z-index: 5; margin-top: var(--space-4); }
.tray-slot[hidden] { display: none; }
.cc-tray__who .cc-mono { box-shadow: 0 0 0 2px var(--paper); }

/* ---------- Onglets de thèmes ---------- */
.themes-nav { margin: var(--space-4) calc(-1 * var(--space-4)) 0; }
.themes-nav .cc-tabs { padding: 0 var(--space-4) var(--space-2); }
@media (min-width: 720px) {
  .themes-nav { margin-left: 0; margin-right: 0; }
  .themes-nav .cc-tabs { padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
}
.sticky-tabs { position: sticky; top: 0; z-index: 4; background: var(--paper); border-bottom: 1px solid var(--line); padding-top: var(--space-2); }
.sticky-tabs .themes-nav { margin-top: 0; }

/* ---------- Comparer : en-tête ---------- */
.compare-who { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.compare-who__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.compare-who__label { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; }

/* ---------- Carte de question ---------- */
.qgrid { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 1024px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-5); } }
.cc-qcard { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); background: var(--paper); min-width: 0; }
@media (min-width: 720px) { .cc-qcard { padding: var(--space-5); } }
.cc-qcard__q { margin: 0 0 var(--space-4); font: 700 20px/26px var(--font-display); }
.cc-qcard__q a { color: inherit; text-decoration: none; }
.cc-qcard__q a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cc-qcard__visual { min-width: 0; }

/* ---------- Échelle (épingles) ---------- */
.cc-chart--scale { padding: 0 18px; }
.cc-pins { position: relative; }
.cc-pin { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-pin__value { font: 800 24px/28px var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.cc-pin__monos { display: flex; flex-direction: column; gap: 2px; }
.cc-pin__monos > span { display: block; line-height: 0; }
.cc-pin__stem { width: 2px; background: var(--ink); }
.cc-pin__dot { position: absolute; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--paper); background: var(--cc-parti, var(--ink)); z-index: 1; }
.cc-pin--multi { align-items: center; }
.cc-pin__monos--values { align-items: flex-start; transform: translateX(22px); }
.cc-pin__row { display: flex; align-items: center; gap: 4px; line-height: 0; }
.cc-pin__v { font: 800 18px/22px var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.cc-pin__dot--multi { background: var(--ink); }
.cc-axis { position: relative; height: 30px; border-top: 2px solid var(--ink); font: 400 13px/18px var(--font-mono); color: var(--ink-2); }
.cc-axis--ref { height: 52px; }
.cc-axis__tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0; }
.cc-axis__tick::before { content: ""; width: 1px; height: 8px; background: var(--line-strong); }
.cc-axis__ref { position: absolute; top: -8px; width: 2px; height: 18px; margin-left: -1px; background: var(--ink); }
.cc-axis__ref-label { position: absolute; top: 30px; white-space: nowrap; font: 700 13px/18px var(--font-text); color: var(--ink); }
.cc-axis__ref-label--mid { transform: translateX(-50%); }
.cc-axis__ref-label--start { transform: translateX(-8px); }
.cc-axis__ref-label--end { transform: translateX(calc(-100% + 8px)); }
.cc-scale__none { flex-wrap: wrap; }

/* « Pas d'info » replié : une ligne, la liste s'ouvre à la demande */
.cc-none { margin-top: var(--space-4); border-radius: var(--radius-md); background: var(--paper-2); }
.cc-none__sum { list-style: none; display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-3); cursor: pointer; border-radius: var(--radius-md); }
.cc-none__sum::-webkit-details-marker { display: none; }
.cc-none__sum .cc-scale__none-label { flex: none; }
.cc-none__count { flex: 1; font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cc-none__sum .cc-icon { flex: none; color: var(--ink-2); transition: transform .15s; }
.cc-none[open] > .cc-none__sum .cc-icon { transform: rotate(180deg); }
.cc-none > .cc-scale__none-list { padding: 0 var(--space-3) var(--space-3); }
.cc-none--rows { background: transparent; border: 1px solid var(--line); }
.cc-none--rows > .rows { margin: 0; padding: 0 var(--space-3); border-bottom: 0; }
.cc-detail__none { margin: var(--space-4) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.cc-detail__none strong { color: var(--ink); }
.tiles-none { margin: var(--space-3) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.tiles-none strong { color: var(--ink); }
.tiles-none .cc-scale__none-label { margin-right: 4px; }
.tiles-none a { color: var(--ink-2); }
.cc-scale__none--other { background: transparent; border: 1px solid var(--line); }
.cc-scale__none-list li { font-size: 15px; }

/* ---------- Barres ---------- */
.cc-bars__ref { margin: 0 0 var(--space-3); font-size: 15px; line-height: 22px; color: var(--ink-2); }
.cc-bars__ref strong { color: var(--ink); }
.cc-bars + .cc-scale__caption { margin-top: var(--space-3); }

/* ---------- Positions ---------- */
.cc-stances { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(min(var(--cc-n, 3), 4), minmax(0, 1fr)); gap: var(--space-3) var(--space-2); }
.cc-stances li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; min-width: 0; }
.cc-stances__name { font-size: 14px; line-height: 18px; font-weight: 700; }
.cc-stances .cc-stance__word { font-size: 17px; line-height: 21px; }
.cc-groups { display: grid; gap: var(--space-3); }
.cc-group { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.cc-group:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-group__label { font: 800 20px/26px var(--font-display); }
.cc-group__members { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.cc-group__members li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 700; }

/* ---------- Texte court ---------- */
.cc-texts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.cc-texts li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.cc-texts__body { display: grid; }
.cc-texts__name { font-size: 14px; line-height: 18px; color: var(--ink-2); }
.cc-texts__value { font: 800 22px/28px var(--font-display); }
.cc-texts__value--empty { font-weight: 700; color: var(--ink-2); }

/* ---------- Détail ---------- */
.cc-disclosure__list > li { display: grid; gap: var(--space-1); }
.cc-detail__title { font-weight: 700; color: var(--ink); }
.cc-detail__quote { margin: var(--space-1) 0 0; padding-left: var(--space-3); border-left: 3px solid var(--highlight); font-style: normal; }
.cc-detail__empty { color: var(--ink-2); }
.cc-detail__more { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; }
.cc-context { margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper-2); }
.cc-context p { margin: 0; }
.cc-context__label { font: 700 13px/16px var(--font-text) !important; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--space-1) !important; }

/* ---------- Fiche candidat ---------- */
.cand-head { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-1); }
.cand-head h1 { margin: 0; font: 800 32px/36px var(--font-display); letter-spacing: -0.02em; }
.cand-head .cc-party { font-size: 16px; line-height: 22px; color: var(--ink-2); }
.cand-meta { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.cand-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-top: var(--space-4); }
.cand-actions .cc-btn--primary { flex: 1 1 100%; }
@media (min-width: 720px) { .cand-actions .cc-btn--primary { flex: 0 0 auto; } }
.cand-actions a.cc-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 15px; line-height: 22px; }
.credit { margin: var(--space-2) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.credit a { color: inherit; }
.theme-sec { padding-top: var(--space-6); scroll-margin-top: 72px; }
.theme-sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.tiles { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles > li { display: flex; }
.cc-tile--link { flex: 1; text-decoration: none; color: var(--ink); padding: var(--space-3); gap: var(--space-2); transition: border-color .15s; }
.cc-tile--link:hover { border-color: var(--ink); }
.cc-tile__q { font-size: 14px; line-height: 18px; color: var(--ink-2); }
.cc-tile .cc-tile__value { font-size: 30px; line-height: 34px; }
.cc-tile .cc-tile__value--text { font-size: 20px; line-height: 25px; }
.cc-tile .cc-tile__value--empty { font: 700 18px/24px var(--font-display); color: var(--ink-2); letter-spacing: 0; }
.cc-tile .cc-stance__word { font-size: 18px; line-height: 22px; }
.others { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.others li { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.others p { margin: 0; }

/* ---------- Page sujet : candidat par candidat ---------- */
.rows { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.rows > li { border-top: 1px solid var(--line); }
.row-btn { appearance: none; -webkit-appearance: none; width: 100%; min-height: 64px; margin: 0; padding: 10px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; }
.row-btn__who { display: grid; }
.row-btn__who strong { font: 700 17px/22px var(--font-display); }
.row-btn__who .cc-party { font-size: 14px; line-height: 18px; color: var(--ink-2); }
.row-btn__value { font: 800 22px/28px var(--font-display); letter-spacing: -0.01em; text-align: right; max-width: 11ch; }
.row-btn__value--text { font: 700 17px/22px var(--font-display); letter-spacing: 0; max-width: 14ch; }
.row-btn__value--empty { font: 400 16px/22px var(--font-text); color: var(--ink-2); }
.row-btn .cc-icon { width: 20px; height: 20px; color: var(--ink-2); transition: transform .15s; }
.row-btn[aria-expanded="true"] .cc-icon { transform: rotate(180deg); }
.row-body { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper-2); display: grid; gap: 6px; }
.row-body[hidden] { display: none; }
.row-body p { margin: 0; }

/* ---------- Fiche proposition ---------- */
.prop-who { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.prop-who strong { display: block; font: 700 20px/24px var(--font-display); }
.prop-answer { margin: var(--space-4) 0 0; }
.prop-answer .cc-tile__value { font: 800 48px/52px var(--font-display); letter-spacing: -0.02em; }
.prop-answer .cc-tile__value--text { font-size: 30px; line-height: 36px; }
.prop-block { margin-top: var(--space-5); }
.prop-block blockquote { margin: var(--space-2) 0 0; padding-left: var(--space-4); border-left: 3px solid var(--highlight); font-size: 19px; line-height: 29px; }
.prop-sources { display: grid; gap: var(--space-4); margin-top: var(--space-3); }

/* ---------- Thèmes et recherche ---------- */
.qlist { margin: var(--space-3) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.qlist li { border-top: 1px solid var(--line); }
.qlist a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; color: var(--ink); text-decoration: none; font-weight: 700; }
.qlist a:hover { background: var(--highlight-soft); }
.qlist small { display: block; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--ink-2); }
.search-results { margin-top: var(--space-2); }
.search-results[hidden] { display: none; }

/* ---------- Méthode ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin: var(--space-6) 0 var(--space-2); font: 700 24px/30px var(--font-display); }
.prose p, .prose ul { margin: var(--space-2) 0 0; }
.prose li { margin-top: var(--space-1); }
.table-wrap { overflow-x: auto; margin-top: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.table th, .table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { border-top: 0; background: var(--paper-2); font-weight: 700; }

/* ---------- Questionnaire ---------- */
.home-quiz { padding: var(--space-5); border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--highlight-soft); }
.home-quiz .hint { margin-top: var(--space-2); }
.qz-rules { margin: var(--space-4) 0 0; padding-left: 20px; display: grid; gap: var(--space-2); font-size: 16px; line-height: 24px; }

/* Page du questionnaire */
.qz-hero { padding-top: var(--space-5); }
.qz-hero__t { margin: var(--space-3) 0 0; font: 800 40px/42px var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 720px) { .qz-hero__t { font-size: 52px; line-height: 54px; } }
.qz-facts { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 15px; line-height: 22px; color: var(--ink-2); }
.qz-facts li { display: inline-flex; align-items: center; gap: 6px; }
.qz-cta { margin-top: var(--space-5); display: grid; gap: var(--space-2); justify-items: center; }
.qz-cta__go { width: 100%; }
@media (min-width: 560px) { .qz-cta { justify-items: start; } .qz-cta__go { width: auto; } .qz-cta .cc-btn--quiet { margin-left: calc(-1 * var(--space-2)); } }
.qz-progressbox { margin-top: var(--space-5); padding: var(--space-4); border: 1.5px solid var(--ink); border-radius: var(--radius-md); display: grid; gap: var(--space-3); }
.qz-progressbox__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-2); }
.qz-progressbox__t { margin: 0; font-weight: 700; }
.qz-progressbox__n { margin: 0; font: 400 14px/20px var(--font-mono); color: var(--ink-2); }
.qz-progressbox .qz-progress { height: 6px; border-radius: 3px; }
.qz-progressbox .cc-btn--quiet { justify-self: center; }
.qz-steps { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.qz-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--space-3); }
.qz-step__n { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--ink-inverse); display: grid; place-items: center; font: 800 18px/1 var(--font-display); }
.qz-step__body { min-width: 0; }
.qz-step__t { margin: var(--space-1) 0 0; font-size: 19px; line-height: 26px; }
.qz-step__d { margin: var(--space-1) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.qz-demo { margin-top: var(--space-3); max-width: 420px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-2); }
.qz-demo__q { margin: 0; font: 700 17px/22px var(--font-display); }
.qz-demo__x2 { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--highlight); color: var(--on-highlight); font-size: 13px; line-height: 18px; font-weight: 700; }
.qz-demo__x2 .cc-icon { width: 14px; height: 14px; fill: currentColor; }
.qz-demo__opts { margin-top: 10px; display: grid; gap: 6px; }
.qz-demo__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font-weight: 700; font-size: 15px; }
.qz-demo__opt.is-on { border-color: var(--ink); background: var(--highlight); color: var(--on-highlight); box-shadow: 0 0 0 1px var(--ink); }
.qz-demo--res { padding: var(--space-1) 14px; background: var(--paper); }
.qz-demo__tag { margin: var(--space-2) 0 0; font: 700 12px/16px var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.qz-demo__rows { margin: 0; padding: 0; list-style: none; }
.qz-demo__row { padding: 10px 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-1) 10px; align-items: center; }
.qz-demo__row + .qz-demo__row { border-top: 1px solid var(--line); }
.qz-demo__name { font-weight: 700; font-size: 15px; line-height: 20px; }
.qz-demo__pct { font: 800 20px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.qz-demo__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.qz-demo__bar span { display: block; height: 100%; background: var(--ink); }
.qz-demo__conf { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.qz-themes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.qz-intro .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-intro .qz-theme { align-items: flex-start; min-height: 64px; }
.qz-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin: var(--space-5) -4px 0; transition: opacity .2s, transform .2s; }
.qz-bar.is-off { opacity: 0; transform: translateY(12px); pointer-events: none; }
.qz-bar .cc-tray { flex-wrap: nowrap; }
.qz-neutral { border-top: 1px solid var(--line); padding-top: var(--space-6); }
.qz-neutral__list { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.qz-neutral__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
.qz-neutral__list .cc-icon { width: 24px; height: 24px; margin-top: 2px; }
.qz-neutral__list p { margin: 0; }
.qz-neutral__list span { color: var(--ink-2); }
.qz-neutral__more, .qz-alt__go { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.qz-alt { padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper-2); }
.qz-alt__t { margin: 0; font-weight: 700; }
.qz-alt .hint { margin: var(--space-1) 0 0; }
.qz-alt__go { margin-top: var(--space-1); }
.qz-themes { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
@media (min-width: 560px) { .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qz-theme { width: 100%; justify-content: space-between; padding: var(--space-2) var(--space-3); }
.qz-theme > span:first-child { display: grid; }
.qz-theme__n { font-weight: 400; font-size: 14px; line-height: 18px; color: var(--ink-2); }
.cc-chip[aria-pressed="true"] .qz-theme__n { color: var(--on-highlight); }
.qz-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.qz-start .cc-btn--primary { flex: 1 1 100%; }
@media (min-width: 560px) { .qz-start .cc-btn--primary { flex: 0 0 auto; } }
.qz-start [aria-disabled="true"] { border-style: dashed; background: transparent; color: var(--ink-2); border-color: var(--line-strong); cursor: not-allowed; }

.qz { padding-bottom: var(--space-6); }
.qz-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }
.qz-count { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-2); }
.qz-top .cc-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.qz-progress { height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.qz-progress span { display: block; height: 100%; background: var(--ink); }
.qz-q { margin: var(--space-5) 0 0; font: 800 28px/32px var(--font-display); letter-spacing: -0.01em; }
@media (min-width: 720px) { .qz-q { font-size: 36px; line-height: 40px; } }
.qz-opts { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.qz-opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-opt { appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; }
.qz-opt:hover { border-color: var(--ink); }
.qz-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--highlight); color: var(--on-highlight); box-shadow: 0 0 0 1px var(--ink); }
.qz-opt .cc-stance__word { font-size: 20px; line-height: 24px; }
.qz-opt[aria-pressed="true"] .cc-stance--pour .cc-stance__disc { background: var(--on-highlight); color: var(--highlight); }
.qz-opt--choice { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.qz-opt__label { font: 800 20px/24px var(--font-display); }
.qz-opt__detail { font-size: 15px; line-height: 20px; color: var(--ink-2); }
.qz-opt__ref { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); vertical-align: 1px; }
.qz-opt[aria-pressed="true"] .qz-opt__detail, .qz-opt[aria-pressed="true"] .qz-opt__ref { color: var(--on-highlight); }
.qz-ref { margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper-2); font-size: 16px; line-height: 22px; }
.qz-ref__label { display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.qz-skip { margin-top: var(--space-3); }
.qz-weight { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: var(--space-4); padding: 0 14px 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.qz-weight svg { width: 18px; height: 18px; }
.qz-weight__x { display: none; padding: 1px 6px; border-radius: 4px; background: var(--on-highlight); color: var(--highlight); font-size: 13px; line-height: 18px; }
.qz-weight[aria-pressed="true"] { border-color: var(--ink); background: var(--highlight); color: var(--on-highlight); }
.qz-weight[aria-pressed="true"] svg { fill: currentColor; }
.qz-weight[aria-pressed="true"] .qz-weight__x { display: inline-block; }
.qz-weight + .qz-opts { margin-top: var(--space-3); }
.qz-x2 { margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; line-height: 16px; font-weight: 700; vertical-align: 1px; }
.qz-skip[aria-pressed="true"] { background: var(--highlight-soft); }
.qz-ctx { margin-top: var(--space-5); }
.qz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }

.qz-warn { margin-top: var(--space-4); }
.qz-results { margin: var(--space-3) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.qz-res { border-top: 1px solid var(--line); }
.qz-res__btn { grid-template-columns: 40px minmax(0, 1fr) auto 20px; grid-template-areas: "mono who pct chev" "bar bar bar bar" "conf conf conf conf"; row-gap: 6px; padding: 12px 0; }
.qz-res--flat { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "mono who pct" "bar bar bar" "conf conf conf"; gap: 6px 10px; align-items: center; padding: 12px 0; }
.qz-res__btn > .cc-mono, .qz-res--flat > .cc-mono { grid-area: mono; }
.qz-res__who { grid-area: who; display: grid; min-width: 0; }
.qz-res__who strong { font: 700 17px/22px var(--font-display); }
.qz-res__who .cc-party { font-size: 14px; line-height: 18px; color: var(--ink-2); }
.qz-res__pct { grid-area: pct; font: 800 24px/28px var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.qz-res__btn > .cc-icon { grid-area: chev; }
.qz-res__bar { grid-area: bar; display: block; height: 10px; border-radius: 5px; background: var(--paper-2); overflow: hidden; }
.qz-res__fill { display: block; height: 100%; width: calc(100% * var(--cc-ratio, 0)); border-radius: 0 5px 5px 0; background: var(--cc-parti, var(--ink)); box-shadow: inset 0 0 0 1px var(--cc-parti-edge, transparent); }
.qz-res__conf { grid-area: conf; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; color: var(--ink-2); }
.qz-meter { display: inline-flex; gap: 3px; }
.qz-meter__dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-2); }
.qz-meter__dot.is-on { background: var(--ink-2); }
.qz-res__body { padding: 0 0 var(--space-4); }
.qz-res__body[hidden] { display: none; }
.qz-mini { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.qz-mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5em; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.qz-mini__v { font-weight: 700; text-align: right; }
.qz-mini__n { font: 400 13px/22px var(--font-mono); color: var(--ink-2); text-align: right; }
.qz-details { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.qz-d { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 2px var(--space-2); font-size: 15px; line-height: 21px; }
.qz-d__v { grid-row: span 2; display: inline-flex; align-items: flex-start; gap: 4px; font-weight: 700; }
.qz-d__v .cc-icon { margin-top: 2px; }
.qz-d--none .qz-d__v { color: var(--ink-2); font-weight: 400; }
.qz-d__q { font-weight: 700; color: var(--ink); }
.qz-d__a { color: var(--ink-2); font-size: 14px; line-height: 20px; }

.verified { margin-top: var(--space-3); font: 400 14px/20px var(--font-mono); color: var(--ink-2); }
.next-theme { margin-top: var(--space-5); width: 100%; }
@media (min-width: 720px) { .next-theme { width: auto; } }
.empty-state { margin-top: var(--space-5); }