/*
 * voter2027.fr — icons with presence (Hakon, 27 Sep 2026: "a bit too bland"). Loaded after the page stylesheets.
 *
 * A meaningful icon sits in a tinted disc, the way the comparer artifact draws its effects: the fill a light tint
 * of the tone's colour, the stroke the colour itself (the 700 step in light, the 400 step in dark, both AA).
 * Colour follows meaning: the semantic scale keeps its feasibility/verdict colours, cyan = better or pole A,
 * magenta = worse or pole B, grey = neutral, a dashed outline = unknown. The word is always beside it.
 * Controls (expanders, close, arrows) stay plain ink or accent so the meaningful icons stand out.
 * Markup: icon_disc_html() / level_icon_html() in scripts/util.php, V27Icon.disc()/level() in icons.js.
 */

.icd {
  --icd-c: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 1.6em; height: 1.6em; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; line-height: 1;
  color: var(--icd-c); background: color-mix(in srgb, var(--icd-c) 15%, var(--color-bg));
}
.icd.icd > .ic { width: 0.9em; height: 0.9em; margin: 0; vertical-align: 0; }
.icd-4 { --icd-c: var(--color-badge-4); }
.icd-3 { --icd-c: var(--color-badge-3); }
.icd-2 { --icd-c: var(--color-badge-2); }
.icd-1 { --icd-c: var(--color-badge-1); }
.icd-p { --icd-c: var(--color-accent); }
.icd-m { --icd-c: var(--color-accent-2); }
.icd-n { --icd-c: var(--color-neutral-700); }
.icd-u { --icd-c: var(--color-text-muted); background: transparent; border: 1px dashed var(--color-border-strong); }
.icd-cur { --icd-c: currentColor; }
.icd-strong { background: color-mix(in srgb, var(--icd-c) 30%, var(--color-bg)); }
/* Loud: the disc filled with the colour, the stroke in the paper's contrast (white in light, ink in dark). */
.icd.icd-solid { background: var(--icd-c); color: var(--color-accent-contrast); }

/* In context: badges (the disc replaces the CSS glyph), level marks in counts and legends, verdict lines. */
.badge.badge:has(.icd)::before { content: none; }
.badge > .icd { font-size: 0.95em; margin-left: -3px; }
.g > .icd { margin-right: 4px; }
.fi-chip .g > .icd { font-size: 0.95em; margin-left: -3px; }
.ths-mix .icd { margin-right: 3px; }
.lv-g > .icd { font-size: 1.05em; }
.quiz-mark .icd { font-size: 0.95em; }
.sheet-tile .tile-sub .icd { font-size: 0.95em; }

/* The questionnaire's 5-point scale: neutral on both sides (owner decision 27 Sep 2026: colouring the answers steers,
   cyan reads as "better" and blue against red as left against right). Both poles are the same ink; the tint and the
   chevrons grow from the centre towards each end. The chosen disc fills with the accent whichever side it is on.
   The pole labels and the aria-labels carry the words. */
.icd-q { --icd-c: var(--color-text); }
.icd-q0 { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text) 6%, var(--color-bg)); }
.icd-q1 { background: color-mix(in srgb, var(--color-text) 12%, var(--color-bg)); }
.icd-q2 { background: color-mix(in srgb, var(--color-text) 22%, var(--color-bg)); }
.scale-seg .segbtn { min-height: 56px; }
.scale-seg .segbtn .icd { width: 2.1em; height: 2.1em; transition: background-color .15s, color .15s; }
.scale-seg .segbtn .icd.icd > .ic { width: 1.1em; height: 1.1em; }
.scale-seg .segbtn[aria-pressed="true"] { background: var(--color-surface-2); color: var(--color-text); font-weight: 400; }
.scale-seg .segbtn[aria-pressed="true"] .icd { background: var(--color-accent); color: var(--color-accent-contrast); }
@media (prefers-reduced-motion: reduce) { .scale-seg .segbtn .icd { transition: none; } }

/* The pledge chips of scripts/pledge-marks.php (fiche, /theme, /immigration) and their JS twins (/resultat):
   flag, cost and related-warning chips. Here rather than in fiche.css so every page that lists pledges draws them
   the same. */
.fi-flag {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; max-width: 100%;
  font-size: 0.8125rem; line-height: 1.3; padding: 0 5px; border-radius: var(--radius);
  color: var(--color-badge-2); border: 1.5px solid var(--color-badge-2); font-weight: 600;
}
/* the full words wrap inside the chip on a narrow row instead of running past the right edge */
.fi-flag-t { min-width: 0; }
.fi-flag .num { white-space: nowrap; }
.fi-flag .icon { width: 12px; height: 12px; }
.fi-flag.is-fort {
  color: var(--color-badge-1); border: 1.5px solid var(--color-badge-1); font-weight: 600;
  background: color-mix(in srgb, var(--color-badge-1) 10%, transparent);
}
/* A pledge's related fiabilité item going against it (« Contredit par … (2024) », « Déjà promis, non tenu (2024) »):
   a strong chip that links to the item on the fiche. */
a.fi-related { text-decoration: none; }
a.fi-related:hover .fi-flag-t { text-decoration: underline; }

/* Red-flag chips (Constitution, Traités UE, Droit de l'UE, UE incertain, >= 10 Md€/an): a tinted chip, the icon in
   its own disc. The shape of the chip (solid = fort, dashed = modéré) and the word stay. */
.fi-flag > svg.icon, .flag-chip > svg.icon {
  box-sizing: border-box; width: 1.6em; height: 1.6em; padding: 0.24em; margin-left: -3px;
  border-radius: 50%; background: color-mix(in srgb, currentColor 18%, transparent);
}
.fi-flag.is-modere, .flag-chip-modere { background: color-mix(in srgb, var(--color-badge-2) 10%, transparent); }
.fi-flag { padding-top: 1px; padding-bottom: 1px; }
.flag-chip-fort > svg.icon { background: color-mix(in srgb, var(--color-badge-1-contrast) 24%, transparent); }

/* Fiabilité (fiabilite_badge_html() / V27Icon.fiab()): faible loud (solid magenta warning disc, bold magenta word),
   fragile a quieter amber caution, correcte/élevée calm, "pas assez d'éléments" neutral with a dashed outline.
   Programme not costed uses the same loud warning (costing_mark_html()), so the two read as one family. */
.fiab-st { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; vertical-align: middle; }
.fiab-st-w { font-weight: 600; }
.fiab-st-1 .fiab-st-w { color: var(--color-accent-2); font-weight: 700; }
.fiab-st-2 .fiab-st-w { color: var(--color-badge-2); }
.fiab-st-3 .fiab-st-w { color: var(--color-badge-3); }
.fiab-st-4 .fiab-st-w { color: var(--color-badge-4); }
.fiab-st-u .fiab-st-w { color: var(--color-text-muted); font-weight: 400; }
.fiab-st-lg { font-size: 1.25em; gap: 0.35em; }
.badge .fiab-st { gap: 0.3em; }
.badge .fiab-st .icd { font-size: 0.95em; }
.badge.fiab-badge { gap: 0.3em; }
.metric-chip .fiab-st, .cmp-bar-val .fiab-st { gap: 0.35em; }
.cmp-bar-val .fiab-st { vertical-align: baseline; }

/* Programme costing: "non" as loud as fiabilité faible, "oui" a calm cyan check. */
.cost-chip.is-uncosted { color: var(--color-accent-2); font-weight: 700; }
.fi-costing { display: flex; flex-direction: column; gap: 2px; }
.fi-cost-line { display: inline-flex; align-items: center; gap: 10px; }
.fi-costing .fi-cost-line .icd { font-size: 1.125rem; }
.fi-costing.is-uncosted .fi-big { color: var(--color-accent-2); }