/*
 * voter2027.fr — shared candidate "scorecard" vocabulary: the icon sprite sizing, the level colour
 * tokens, and every chip/bar/dot component used to show a candidate's subscores at a glance.
 * Used by BOTH /candidats (the dense list) and /candidat/<slug> (the fiche's scorecard), and their
 * $styles arrays in scripts/pages-public.php both load this file alongside public.css. Extracted
 * out of public.css on 2026-09-27 when /candidats became a separate agent's page, so the two pages
 * share one definition instead of two drifting copies. Colour is never the only cue: every chip
 * pairs an icon and/or a word with the colour (SPEC.md "Design").
 *
 * Ownership: the public builder (candidat.php, theme.php, resultat.js) is the source of truth for
 * this file. If /candidats needs a new variant, extend a class here rather than forking it.
 */

/* ---------------------------------------------------------------- icon sprite */

.icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------------------------------------------------------------- level colour tokens */

.lvl-4 { --lvl: var(--color-badge-4); }
.lvl-3 { --lvl: var(--color-badge-3); }
.lvl-2 { --lvl: var(--color-badge-2); }
.lvl-1 { --lvl: var(--color-badge-1); }
.lvl-unknown { --lvl: var(--color-text-muted); }

/* ---------------------------------------------------------------- avatar */

.avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }

/* ---------------------------------------------------------------- status chip */

.status-chip {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2em 0.6em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- metric chip (icon + word, coloured by --lvl) */

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text);
  background: color-mix(in srgb, var(--lvl, var(--color-text-muted)) 14%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--lvl, var(--color-border)) 55%, var(--color-border));
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.metric-chip .icon { color: var(--lvl, var(--color-text-muted)); }

/* ---------------------------------------------------------------- mini stacked bar (faisabilité distribution) */

.stacked-bar { display: inline-flex; width: 44px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--color-border); flex-shrink: 0; }
/*
 * flex-basis, not width: a percentage `width` on an empty flex-item span computed to 0 in testing
 * (2026-09-27) — flex-basis is the spec-correct way to size a flex child proportionally, and is
 * what the inline style the PHP helpers emit actually sets (style="flex-basis:N%"). flex-shrink:0
 * stops rounding (segments can sum to slightly over 100%) from squeezing every segment instead of
 * just slightly overflowing into the bar's own overflow:hidden.
 */
.stacked-bar span { height: 100%; flex-shrink: 0; flex-grow: 0; }
.stacked-bar .seg-4 { background: var(--color-badge-4); }
.stacked-bar .seg-3 { background: var(--color-badge-3); }
.stacked-bar .seg-2 { background: var(--color-badge-2); }
.stacked-bar .seg-1 { background: var(--color-badge-1); }

/* ---------------------------------------------------------------- fact-check verdict dots */

.verif-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; }
.verif-dot.v-vrai { background: var(--color-badge-4); }
.verif-dot.v-imprecis { background: var(--color-badge-3); }
.verif-dot.v-trompeur { background: var(--color-badge-2); }
.verif-dot.v-faux { background: var(--color-badge-1); }

/* ---------------------------------------------------------------- red-flag chips (pledge cards, scorecard, /candidats) */

.flag-chip-row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.flag-chip .icon { width: 12px; height: 12px; }
.flag-chip-fort { background: var(--color-badge-1); color: var(--color-badge-1-contrast); border: 1px solid var(--color-badge-1); }
.flag-chip-fort .icon { color: var(--color-badge-1-contrast); }
.flag-chip-modere { background: transparent; color: var(--color-badge-2); border: 1px solid var(--color-badge-2); }
.flag-chip-modere .icon { color: var(--color-badge-2); }

.warning-chip { --lvl: var(--color-badge-2); }
.warning-chip.no-flags { --lvl: var(--color-text-muted); }

/* ---------------------------------------------------------------- visually-hidden text (accessible labels) */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * CSP-safe percentage steps (style-src is 'self', so an inline style="flex-basis:N%" or
 * style="left:N%" is silently dropped — found 2026-09-27, it's why a feasibility mini-bar or an
 * axis-track dot rendered with no visible width/position). Use a class instead of an inline
 * style: .pctN sets flex-basis (for a stacked-bar segment), .posN sets left (for a dot on a
 * 0-100 track). Round to the nearest 5 for .pctN; the five axis positions (-2..2) map exactly
 * to .pos-0/.pos-25/.pos-50/.pos-75/.pos-100.
 */
.pct-0 { flex-basis: 0%; }
.pct-5 { flex-basis: 5%; }
.pct-10 { flex-basis: 10%; }
.pct-15 { flex-basis: 15%; }
.pct-20 { flex-basis: 20%; }
.pct-25 { flex-basis: 25%; }
.pct-30 { flex-basis: 30%; }
.pct-35 { flex-basis: 35%; }
.pct-40 { flex-basis: 40%; }
.pct-45 { flex-basis: 45%; }
.pct-50 { flex-basis: 50%; }
.pct-55 { flex-basis: 55%; }
.pct-60 { flex-basis: 60%; }
.pct-65 { flex-basis: 65%; }
.pct-70 { flex-basis: 70%; }
.pct-75 { flex-basis: 75%; }
.pct-80 { flex-basis: 80%; }
.pct-85 { flex-basis: 85%; }
.pct-90 { flex-basis: 90%; }
.pct-95 { flex-basis: 95%; }
.pct-100 { flex-basis: 100%; }
.pos-0 { left: 0%; }
.pos-25 { left: 25%; }
.pos-50 { left: 50%; }
.pos-75 { left: 75%; }
.pos-100 { left: 100%; }