/*
 * voter2027.fr — the theme page (/theme/<slug>), templates/public/theme.php. Loaded after fiche.css,
 * whose fi-* components (pledge expander, level glyphs, flags, dots, poles) it reuses; this file only
 * adds the multi-candidate tracks, the candidate rows and the filter strip. Prefix th-. No inline
 * styles (CSP). Meaning never by colour alone: glyphs and words, as on the fiche.
 */

.th .th-head { padding-bottom: var(--space-2); }
.th-head .kicker a { color: inherit; text-decoration: none; }
.th-head .kicker a:hover { text-decoration: underline; }
.th-counts { margin: var(--space-3) 0 0 !important; font-size: 0.9375rem; color: var(--color-text-muted); }
.th-counts b { color: var(--color-text); font-weight: 600; }
.th-counts a { white-space: nowrap; }

/* ---------------------------------------------------------------- immigration: the hub, prominently */

.th-hub { padding: var(--space-3) 0; margin: var(--space-3) 0; }
.th-hub-line { margin: 2px 0 4px !important; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.th-hub-note { margin: 0 !important; font-size: 0.9375rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- positions: every candidate on one track per axis */

.th-pos { margin-top: var(--space-3); }
.th-tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-6); }
@media (min-width: 52rem) { .th-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.th-axis { min-width: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-rule); }
.th-axis-q { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; margin: 0 0 var(--space-2) !important; }
.th-track { position: relative; padding-top: 18px; }
/* The line runs from the first to the last column centre (5 equal columns: 10 % to 90 %). */
.th-line { position: absolute; top: 0; left: 10%; right: 10%; height: 16px; }
.th-line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 2px solid var(--color-neutral-300); }
.th-line .fi-ticks { inset: 3px 0; }
.th-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.th-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; width: 100%; }
/* Each candidate is a dot with the surname under it (persona test, 29 Sep 2026: initials such as ÉZ or
   FRu meant nothing to a first-time voter). The name wraps only at a hyphen (Dupont-Aignan); spaces are
   non-breaking (Le Pen). Small type on phones so the longest surname fits one fifth of a 360 px screen. */
.th-pin {
  display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%;
  min-height: 34px; padding: 3px 1px; border-radius: 6px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.1; letter-spacing: 0;
  color: var(--color-text); text-decoration: none; text-align: center;
}
.th-pin:hover, .th-pin:focus-visible { background: var(--color-surface-2); color: var(--color-accent); }
.th-pin .fi-dot { position: static; transform: none; width: 11px; height: 11px; flex: 0 0 auto; }
.th-sn { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (min-width: 26rem) { .th-pin { font-size: 0.75rem; } }
.th-axis .fi-poles { margin: 6px 0 0 !important; }
.th-unknown { margin: 6px 0 0 !important; font-size: 0.8125rem; color: var(--color-text-muted); }
.th-why { margin-top: 6px; }
.th-why > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 0.875rem; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.th-why > summary .pm-mark { font-size: 1.125rem; }
.th-why p { margin: 4px 0 0 !important; font-size: 0.9375rem; line-height: 1.55; }
@media (min-width: 52rem) {
  .th-pin { font-size: 0.8125rem; }
}

/* ---------------------------------------------------------------- filters (chips from public.css) */

.th-props { padding-top: var(--space-4); }
.th-filters { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-3); }
.th-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.th-flabel { flex: 0 0 100%; font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.th-chip { min-height: 40px; padding: 0.25em 0.7em; font-size: 0.9375rem; gap: 5px; text-decoration: none; }
.th-chip .icon { width: 14px; height: 14px; }
.th-chip .fi-n .g .ic { margin-right: 0; }
.th-chip[aria-pressed="true"] .fi-n .g { color: inherit; }
.th-chip-n { font-weight: 400; color: var(--color-text-muted); }
.th-chip[aria-pressed="true"] .th-chip-n { color: inherit; }
.th-fstatus { margin: 0 !important; font-size: 0.9375rem; min-height: 1.5em; }
@media (min-width: 44rem) {
  .th-filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
  .th-flabel { flex: 0 0 auto; margin-right: 4px; }
  .th-fstatus { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- one row per candidate */

.th-rows { border-top: 1px solid var(--color-rule); overflow-anchor: auto; }
.th-row { border-bottom: 1px solid var(--color-divider); scroll-margin-top: calc(var(--sticky-top, 0px) + 12px); }
.th-cand > summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 36px 12px 0; }
.th-cand > summary > .pm-mark { position: absolute; right: 4px; top: 14px; font-size: 1.625rem; }
.th-cand-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.th-name { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--color-text); text-decoration: none; }
.th-name:hover { color: var(--color-accent); text-decoration: underline; }
.th-count { font-size: 0.875rem; color: var(--color-text-muted); }
.th-mix { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.875rem; }
.th-mix .fi-n { font-weight: 600; }
.th-first { font-size: 0.9375rem; line-height: 1.45; color: var(--color-text-muted); }
.th-cand[open] > summary .th-first { display: none; }
.th-cand-body { padding: 0 0 var(--space-3) var(--space-3); border-left: 2px solid var(--color-divider); margin-bottom: var(--space-2); }
.th-cand-body .fi-pledges > li:last-child { border-bottom: 0; }
.th-cand-body .fi-p-text { font-size: 1rem; font-weight: 400; }
.th-cand-body .fi-p[open] .fi-p-text { font-weight: 600; }
.th-lbl { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.th-more { margin: 4px 0 0 !important; font-size: 0.875rem; }
.th-without { margin: var(--space-3) 0 0 !important; font-size: 0.9375rem; color: var(--color-text-muted); }
.th-none { margin-top: var(--space-3) !important; }

/* Desktop: the heading and the filters in a sticky aside, the list at a readable measure beside it. */
@media (min-width: 62rem) {
  .th-props { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 46rem); column-gap: var(--space-6); align-items: start; }
  .th-aside { position: sticky; top: calc(var(--sticky-top, 0px) + 16px); }
  .th-aside .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .th-aside .sec-note { font-size: 0.875rem; }
  .th-filters { flex-direction: column; align-items: flex-start; gap: 10px; }
  .th-flabel { flex: 0 0 100%; }
  .th-list { min-width: 0; }
}

/* « Faisabilité » opens its glossary definition in place (lecture.js); the definition takes the full row. */
.th-flabel:has(> .gl-def:not([hidden])) { flex-basis: 100%; }

/* /jeunes (templates/public/jeunes.php): the pledge's theme above its text, since the list mixes themes. */
.th-ptheme { display: block; font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
.th-rule { margin: var(--space-2) 0 0; }
.th-rule > div { margin-top: 4px; font-size: 0.9375rem; line-height: 1.55; }
.th-limit { margin: 6px 0 0 !important; font-size: 0.9375rem; color: var(--color-text-muted); }