/* Shared styles of the maquette (identity: fiches/identite-visuelle.md).
   Polychrome palette: sun, aqua, lilac, peach, always mixed so that no
   single colour (hence no party) dominates. Forbidden: red, blue-white-red,
   a dominant party colour. The Assembly is drawn in stone: that is how it is
   told apart. Two themes, dark by default (js/theme.js, toggle in the top bar). */

@font-face {
  font-family: "Tektur";
  src: url("/fonts/tektur-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Lexend Exa";
  src: url("/fonts/lexend-exa-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #fbf8f0;
  --bg-2: #f3efe5;
  --sky: #e3eff0;
  --dawn: #f9ecd9;
  --ink: #24221f;
  --muted: #585349;
  --line: #e2dbcd;
  --link: #0d6670;

  --sun: #efb033;
  --aqua: #2398a1;
  --lilac: #9286d2;
  --peach: #eb9f78;
  --sun-soft: #f8e2ab;
  --aqua-soft: #cde6e5;
  --lilac-soft: #e2def2;
  --peach-soft: #f6ddcd;

  /* Oui / Non: green / red, the UX convention, at the founder's request
     (2026-10-02). DEROGATION(D-001, à inscrire dans docs/derogations.md):
     rule 9 of CLAUDE.md ("ni rouge") and docs/context/design.md. Always
     paired with an icon (tick / cross) and a word, never colour alone
     (colour blindness); green darker than red so that they also differ in
     lightness. The Assembly uses the same hues, dull. */
  --yes: #24935a;
  --no: #d4533c;
  --yes-soft: #d4ecdc;
  --no-soft: #f7d9d2;
  --asm-yes: #7f9886;
  --asm-no: #a8807a;
  /* Participants who have not settled yet (animation of an open vote). */
  --pending: #e6dccb;
  /* The Assembly, in dark and dull stone: quieter than the participants,
     but clearly visible on the light backgrounds. */
  --stone-yes: #a1998b;
  --stone-no: #565049;
  --stone-idle: #8b8478;
  --stone-line: #a39b8d;
  --stone-soft: #ebe6dd;
  --logo-dome: var(--stone-no);
  /* Text on a sun-coloured surface (buttons), the same in both themes. */
  --on-sun: #1d1a14;
  --glow: color-mix(in srgb, var(--sun) 30%, transparent);

  /* Display: Unbounded (2022), wide and contemporary, set lighter than its
     default to stay legible; for titles and large numbers only (variants in
     the simulation panel). Text: Atkinson Hyperlegible Next, designed to be
     read by everyone. */
  --display: "Unbounded", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.01em;

  /* The two sides of every picture: the citizens who take part (sun) and
     the Assembly (lilac, v15: stone was too close to the sun and to the
     background). Far apart in hue, and from the oui / non green and red. */
  --cit: var(--sun);
  --cit-soft: color-mix(in srgb, var(--sun) 16%, var(--bg));
  --asm: #8174d6;
  --asm-soft: color-mix(in srgb, var(--asm) 15%, var(--bg));
  --asm-ink: #4a3ea3;
  --cit-ink: #7a4f00;
  --text: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  /* Generous side margins: the page breathes on wide screens. */
  --gutter: clamp(1.25rem, 6vw, 6rem);
  color-scheme: light;
}

/* Dark theme (default): charcoal, warm light text, the same roles. */
:root[data-theme="dark"] {
  --bg: #17181a;
  --bg-2: #202225;
  --sky: #1a2124;
  --dawn: #221f1b;
  --ink: #ece8e0;
  --muted: #aaa49a;
  --line: #34363a;
  --link: #7fcfd5;

  --sun: #e6aa3a;
  --aqua: #33a6ae;
  --lilac: #8f86c9;
  --peach: #d99472;
  --sun-soft: #3a3020;
  --aqua-soft: #1c3437;
  --lilac-soft: #2a2838;
  --peach-soft: #392a22;

  --yes: #3db878;
  --no: #ec6a52;
  --yes-soft: #1d3428;
  --no-soft: #3a2420;
  --asm-yes: #8aa592;
  --asm-no: #b58b84;
  --pending: #4b4842;
  --stone-yes: #a59d90;
  --stone-no: #6b655c;
  --stone-idle: #7a746b;
  --stone-line: #7a746b;
  --stone-soft: #26241f;
  --logo-dome: var(--stone-yes);
  --asm: #968be0;
  --asm-ink: #b9b0f2;
  --cit-ink: #f0c060;
  --glow: color-mix(in srgb, var(--sun) 13%, transparent);
  color-scheme: dark;
}

/* Maquette: display font under test (simulation panel). */
:root[data-votes="sun-aqua"] { --yes: #e3a325; --no: #1f8f98; --yes-soft: var(--sun-soft); --no-soft: var(--aqua-soft); --asm-yes: var(--stone-yes); --asm-no: var(--stone-no); }
:root[data-theme="dark"][data-votes="sun-aqua"] { --yes: #e3a325; --no: #2ba3ad; }
:root[data-font="lexend-exa"] { --display: "Lexend Exa", system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.03em; }
:root[data-font="geist"] { --display: "Geist", system-ui, sans-serif; --display-weight: 650; --display-tracking: -0.02em; }
:root[data-font="tektur"] { --display: "Tektur", system-ui, sans-serif; --display-weight: 600; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

a { color: var(--link); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Shell: one sticky top bar (navigation, brand, theme, account) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem var(--gutter);
  /* Solid background: a blurred backdrop costs a repaint at every frame of
     the animations underneath. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}
/* Optical centring: the name sits on the logo's floor line. */
.brand-name { display: block; padding-top: 0.08em; }
.logo { display: block; width: 2.1rem; height: 2.1rem; }
.logo .logo-dome { fill: var(--aqua); }
.logo .logo-ring { fill: none; stroke: var(--sun); stroke-width: 2.6; stroke-linecap: round; }
.logo .logo-floor-stone { fill: none; stroke: var(--logo-dome); stroke-width: 2.2; stroke-linecap: round; }
.logo .logo-floor { fill: none; stroke: var(--aqua); stroke-width: 2.2; stroke-linecap: round; }
/* Ring of dots: circumference 2π × 13 ≈ 81.68, 16 dots alternating. */
.logo .logo-dots { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0 10.21; }
.logo .logo-dots-a { stroke: var(--yes); }
.logo .logo-dots-b { stroke: var(--no); stroke-dashoffset: -5.105; }
.logo .logo-dome-stone { fill: var(--logo-dome); }
.logo .logo-thick { fill: none; stroke: var(--sun); stroke-width: 4.2; }

.glyph { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.top-nav { grid-column: 1; display: flex; gap: 0.25rem; }
/* Home: the logo, which turns into a reception bell when clicked. */
.nav-home .bell-dome { fill: currentColor; }
.nav-home .bell-knob { opacity: 0; transition: opacity 0.15s ease; }
.nav-home .bell-arc { transform-origin: 12px 15px; transition: opacity 0.15s ease, transform 0.2s ease; }
.nav-home.is-ringing .bell-arc { opacity: 0; transform: scale(1.25); }
.nav-home.is-ringing .bell-knob { opacity: 1; }
.nav-home.is-ringing .glyph { animation: ring 0.4s ease-in-out; transform-origin: 12px 18px; }
@keyframes ring {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -12deg; }
  50% { rotate: 10deg; }
  75% { rotate: -6deg; }
}
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav-item:hover { color: var(--ink); background: var(--bg-2); }
/* Current tab: a plain pill (v11's underline and dome-like corners looked odd). */
.nav-item[aria-current="page"] { color: var(--ink); background: var(--bg-2); }

.top-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); background: var(--bg-2); }
.account { display: flex; align-items: center; gap: 0.35rem; }
.nav-item, .account .button { white-space: nowrap; }
/* Medium screens: "Se connecter" as an icon only, its label kept for screen readers. */
@media (max-width: 75rem) {
  .account-signin .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.account-me { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; }
.avatar {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--on-sun);
  font-family: var(--display);
  font-weight: 700;
}
.account-who { display: grid; line-height: 1.2; }
.account-name { font-weight: 700; }
/* The voice is qualified, never the person (docs/context/vocabulaire.md). */
.account-voice { color: var(--muted); font-size: 0.75rem; }

/* Bottom tab bar: small screens only. */
.tab-bar { display: none; }
@media (max-width: 59.99rem) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .top-nav { display: none; }
  .brand { grid-column: 1; }
  .top-actions { grid-column: 3; }
  .top-actions .account-signup, .top-actions .account-voice { display: none; }
  /* Icon only; the label stays for screen readers. */
  .account-signin .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body { padding-bottom: 4.5rem; }
  .tab-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .tab-bar .nav-item { flex-direction: column; gap: 0.15rem; padding: 0.3rem 0.8rem; font-size: 0.8125rem; border-radius: 0.75rem; }
}

/* --- Buttons: flat, no fake relief ----------------------------------------------- */

.button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--on-sun);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.button:hover { background: var(--yes); }
/* Button with an icon; the "vote" button also carries a small condition. */
.button-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.button-vote { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.7rem 2.2rem 0.7rem 1.4rem; }
.button-vote .glyph { width: 1.7rem; height: 1.7rem; }
.button-texts { display: grid; text-align: left; line-height: 1.15; }
.button-sub { font-size: 0.75rem; font-weight: 600; opacity: 0.8; }
.button-small { padding: 0.45rem 0.9rem; font-size: 0.875rem; }
.button-quiet { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.button-quiet:hover { background: var(--bg-2); }

/* Round buttons (timeline, texts line). */
.round-button {
  font: inherit;
  font-weight: 700;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.round-button:hover { background: var(--bg); }

/* Reminder menu (js/ui/reminder.js). */
.reminder { position: relative; display: inline-flex; }
.reminder > .button { align-self: stretch; }
/* Next to "Voter", second but clearly an action (v11's outline faded away
   on the dawn background): solid aqua tint, same shape as the vote button. */
.button-remind {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.4rem 0.6rem 1.1rem;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--aqua-soft); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--aqua);
}
.button-remind:hover, .button-remind[aria-expanded="true"] { background: color-mix(in srgb, var(--aqua) 30%, var(--aqua-soft)); }
.button-remind .glyph { color: var(--aqua); width: 1.5rem; height: 1.5rem; }
.reminder-menu {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.4rem);
  left: 0;
  display: grid;
  gap: 0.15rem;
  width: max-content;
  max-width: min(22rem, 90vw);
  padding: 0.5rem;
  border-radius: 0.7rem;
  background: var(--bg);
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5), 0 0 0 1px var(--line);
}
.reminder-menu[hidden] { display: none; }
.reminder-title { margin: 0.2rem 0.5rem 0.35rem; color: var(--muted); font-size: 0.8125rem; }
.reminder-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.reminder-item:hover, .reminder-item:focus-visible { background: var(--bg-2); }
.reminder-texts { display: grid; font-weight: 700; line-height: 1.25; }
.reminder-sub { color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 5.5rem;
  translate: -50% 0;
  max-width: min(32rem, 92vw);
  margin: 0;
  padding: 0.75rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.5);
}

/* --- Text illustrations (js/ui/illustrations.js) ------------------------------------ */

/* Illustrations look like stickers: light pastel disc, dark ink line, in
   both themes (light lines on a dark disc read badly). */
.illustration {
  --ill-ink: #2a2620;
  --ill-paper: #fffaf0;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--disc);
}
.illustration svg { width: 78%; height: 78%; fill: none; stroke: var(--ill-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.illustration .fa { fill: var(--ill-paper); }
.illustration .fb { fill: var(--fill); }
.illustration.ill-md { width: 3.4rem; height: 3.4rem; }
.illustration.ill-lg { width: 6.5rem; height: 6.5rem; }
.illustration.ill-xl { width: clamp(5rem, 12vh, 7.5rem); height: clamp(5rem, 12vh, 7.5rem); }
.illustration.ill-lg svg, .illustration.ill-xl svg { stroke-width: 1.6; }
.disc-sun { --disc: #f6dd9f; --fill: #e8a72d; }
.disc-aqua { --disc: #c8e4e3; --fill: #2b9ca4; }
.disc-lilac { --disc: #ddd8f1; --fill: #8a7fc8; }
.disc-peach { --disc: #f4d8c6; --fill: #e0926a; }
:root[data-theme="dark"] .illustration { filter: brightness(0.92); }

/* --- Reading pages (text, method) ------------------------------------------------ */

.reading { max-width: 44rem; padding: 1rem var(--gutter) 4rem; }
@media (min-width: 60rem) {
  .reading { margin-left: clamp(2rem, 10vw, 10rem); }
}
.page-title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 1.5rem 0 1rem; }
.lead { font-size: 1.2rem; color: var(--muted); }
.reading h2 { font-size: 1.5rem; margin: 2.5rem 0 0.5rem; }
.reading h3 { font-size: 1.1rem; margin: 1.75rem 0 0.25rem; }
/* Anchored sections stay clear of the sticky top bar. */
[id] { scroll-margin-top: 5rem; }
.note { color: var(--muted); font-size: 0.9375rem; }
.empty { padding: 1rem 1.25rem; background: var(--bg-2); color: var(--muted); }
.summary { white-space: pre-line; }
.kicker { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--muted); font-weight: 700; }

.calendar { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1rem; }
.calendar dt { font-weight: 700; margin-top: 0.5rem; }
.calendar dd { margin: 0; color: var(--muted); }
@media (min-width: 36rem) {
  .calendar { grid-template-columns: max-content 1fr; }
  .calendar dt, .calendar dd { margin-top: 0.4rem; }
}

.site-footer { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding: 2rem var(--gutter); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.site-footer a { color: var(--muted); }
.footer-mock { flex-basis: 100%; }

/* Short facts, a label and one or two sentences each ("Qui est derrière"). */
.facts { margin: 0; }
.facts dt { font-weight: 700; margin-top: 1rem; }
.facts dd { margin: 0.2rem 0 0; }

/* --- Results of a closed text (js/ui/results.js) --------------------------------- */

/* v16: the two verdicts first, side by side, then the drawing alone. */
.results-block { display: grid; gap: 2.5rem; max-width: 80rem; margin-inline: auto; }
.result-figure { margin: 0; display: grid; justify-items: center; gap: 0.6rem; }
.result-figure .hemicycle { width: 100%; max-width: 34rem; }
.result-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.25rem; color: var(--muted); font-size: 0.875rem; }
.result-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.result-legend-item .glyph { width: 1.1rem; height: 1.1rem; }
.result-legend-item.is-citizens .glyph { color: var(--cit); }
.result-legend-item.is-assembly .glyph { color: var(--asm); }
.result-legend-item.is-gauge::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: linear-gradient(90deg, var(--yes) 50%, var(--no) 50%); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; }
.result-meta { margin: 0; color: var(--muted); }
.result-title { margin: 0.3rem 0 1.5rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-wrap: balance; }
.result-title a { color: var(--ink); text-decoration: none; }
.result-title a:hover { text-decoration: underline; }

/* Labels and half marks written on the infographic. */
/* Each side has its zone behind it and its box, tied by a line in the
   side's colour: citizens who take part in sun, the Assembly in stone. */
/* Zones: a neutral wash (a coloured tint muddied the oui / non dots, v11),
   the side's colour only on a thin outline, like its leader line. */
/* v18: the side's colour as a soft background, no outline. */
.h-zone-citizens { fill: color-mix(in srgb, var(--cit) 16%, transparent); }
.h-zone-assembly { fill: color-mix(in srgb, var(--asm) 24%, transparent); }
/* People: marks are groups. Deputies: light shirt and sash over their own
   colour, lapels in a darker line. */
g.s-yes { fill: var(--yes); }
g.s-no { fill: var(--no); }
.s-tie { fill: var(--muted); }
.h-shirt { fill: #fff; fill-opacity: 0.9; }
.h-sash { fill: #fff; fill-opacity: 0.78; }
.h-lapels { fill: none; stroke: rgb(0 0 0 / 0.35); stroke-linecap: round; }
.h-leader { stroke-width: 0.009; }
.h-callout-citizens .h-leader { stroke: var(--cit); }
.h-callout-assembly .h-leader { stroke: var(--asm); }
.h-callout-citizens .h-leader-dot { fill: var(--cit); }
.h-callout-assembly .h-leader-dot { fill: var(--asm); }
.h-callout-citizens .h-box { fill: var(--cit-soft); }
.h-callout-assembly .h-box { fill: var(--asm-soft); }
.h-camp-icon { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-box-name { fill: var(--ink); font-family: var(--text); font-weight: 700; }
.h-box-outcome { fill: var(--ink); font-family: var(--display); font-weight: var(--display-weight); }
/* How many voted: written large, in the side's colour. */
.h-box-voters { font-family: var(--display); font-weight: 650; }
.h-callout-citizens .h-box-voters { fill: var(--cit-ink); }
.h-callout-assembly .h-box-voters { fill: var(--asm-ink); }
.h-box-share { fill: var(--muted); font-family: var(--display); font-variant-numeric: tabular-nums; }
/* Vote express: how long there was to vote, written on the infographic. */
.h-note-box { fill: none; stroke: var(--muted); stroke-width: 0.006; }
.h-note-text { fill: var(--ink); font-family: var(--text); font-weight: 700; }
.h-num { font-family: var(--display); font-weight: 700; }
.h-num-yes { fill: var(--yes); }
.h-num-no { fill: var(--no); }
.h-half { stroke: var(--muted); stroke-width: 0.008; stroke-dasharray: 0.025 0.02; }
.hemicycle-small .h-half { stroke-width: 0.02; stroke-dasharray: 0.05 0.04; }

/* One card per side, in the side's colour; "=" or "≠" between them. The
   card is a link to the explanation; its detail shows on hover and focus. */
.sides { display: grid; gap: 0.75rem; align-items: stretch; }
@media (min-width: 44rem) {
  .sides { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.sides-agree { display: grid; justify-items: center; align-content: center; gap: 0.2rem; margin: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 700; text-align: center; }
.sides-agree-sign { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.sides-agree.is-different .sides-agree-sign { background: var(--ink); color: var(--bg); }
.stat {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0 1.1rem 1rem;
  border-radius: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}
.stat:hover, .stat:focus-visible { filter: brightness(1.04); }
.stat-citizens { background: var(--cit-soft); }
.stat-assembly { background: var(--asm-soft); }
/* The band: the side's colour, as on the share image and the drawing's outline. */
.stat-who { display: flex; align-items: center; gap: 0.5rem; margin: 0 -1.1rem 0.4rem; padding: 0.55rem 1.1rem; border-radius: 0.8rem 0.8rem 0 0; font-weight: 700; color: #1d1a14; }
.stat-citizens .stat-who { background: var(--cit); }
.stat-assembly .stat-who { background: var(--asm); }
.stat-main { display: flex; align-items: center; gap: 0.5rem; }
.stat-main .outcome-glyph { width: 1.7rem; height: 1.7rem; }
.stat-outcome { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 650; line-height: 1.1; }
/* How many voted: the figure the founder wants read first after the decision. */
.stat-voters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.stat-voters-num { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 650; line-height: 1.1; }
.stat-citizens .stat-voters-num { color: var(--cit-ink); }
.stat-assembly .stat-voters-num { color: var(--asm-ink); }
.stat-voters-unit { color: var(--muted); font-weight: 700; }
.stat-share { color: var(--muted); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.stat-more { margin-top: 0.2rem; color: var(--link); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.18em; }
.stat-tip {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.stat:hover .stat-tip, .stat:focus-visible .stat-tip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .stat-tip { transition: none; }
}

.changed { display: flex; align-items: baseline; gap: 0.75rem; margin: 0.5rem 0 0; }
.changed-num { white-space: nowrap; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 500; color: var(--aqua); }

/* Outcome icons (js/ui/glyphs.js): the Assembly in stone, the participants
   in the colour of their outcome. */
.outcome-glyph { width: 1.25rem; height: 1.25rem; flex: none; }
.og-disc { fill: var(--stone-yes); }
.og-assembly.og-adopted .og-disc { fill: var(--asm-yes); }
.og-assembly.og-rejected .og-disc { fill: var(--asm-no); }
.og-citizens.og-adopted .og-disc { fill: var(--yes); }
.og-citizens.og-rejected .og-disc { fill: var(--no); }
.og-citizens.og-tied .og-disc { fill: var(--pending); }
.og-mark { fill: none; stroke: var(--on-sun); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Compact verdicts (js/ui/verdict.js). */
.verdict-rows { display: grid; gap: 0.3rem; }
.vr { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.8125rem; }
.vr-who { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); line-height: 1.2; }
.vr-who .glyph { width: 1.05rem; height: 1.05rem; }
.vr-share { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vr-agree { margin: 0.1rem 0 0; font-size: 0.8125rem; }
.vr-agree.is-same { color: var(--muted); }
.vr-agree.is-same::before { content: "= "; }
.vr-agree.is-different { font-weight: 700; }
.vr-agree.is-different::before { content: "≠ "; }

/* --- Hemicycle seats (js/ui/hemicycle.js) ------------------------------------------- */

.hemicycle { display: block; width: 100%; height: auto; overflow: visible; }
.s-yes { fill: var(--yes); }
.s-no { fill: var(--no); }
.s-open-0 { fill: var(--yes); }
.s-open-1 { fill: var(--no); }
.s-open-2 { fill: var(--pending); }
.s-empty { fill: none; stroke: var(--stone-line); stroke-width: 0.004; }
.hemicycle-small .s-empty { stroke-width: 0.012; }
.s-asm-yes { fill: var(--asm-yes); }
.s-asm-no { fill: var(--asm-no); }
.s-asm-idle { fill: var(--stone-idle); }
.s-asm-absent { fill: none; stroke: var(--stone-idle); stroke-width: 0.004; }
.hemicycle-small .s-asm-absent { stroke-width: 0.01; }

/* Open vote: every participant, at their own pace (random period and
   phase, set by the script), fades between the colours of the vote and a
   pale "not settled" tone. It shows that people are voting right now; half
   the dots start on each side so that the picture never suggests a result. */
.s-voting {
  animation: var(--period, 8s) ease-in-out var(--delay, 0s) infinite;
}
.s-voting-0 { fill: var(--yes); animation-name: voting-a; }
.s-voting-1 { fill: var(--no); animation-name: voting-b; }
/* Every change goes through the pale tone: a direct sun → aqua fade would
   pass through an olive green. */
@keyframes voting-a {
  0%, 25% { fill: var(--yes); }
  35%, 45% { fill: var(--pending); }
  55%, 80% { fill: var(--no); }
  90% { fill: var(--pending); }
  100% { fill: var(--yes); }
}
@keyframes voting-b {
  0%, 25% { fill: var(--no); }
  35%, 45% { fill: var(--pending); }
  55%, 80% { fill: var(--yes); }
  90% { fill: var(--pending); }
  100% { fill: var(--no); }
}
@media (prefers-reduced-motion: reduce) {
  .s-voting { animation: none; }
}

/* Social network visuals (js/ui/social.js): the carousel in a dialog, one
   image per slide, scrolled sideways like on the network itself. */
.carousel-dialog { width: min(64rem, 94vw); max-height: 92vh; padding: 1rem; border: 0; border-radius: 1rem; background: var(--bg); color: var(--ink); }
.carousel-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.carousel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.carousel-title { flex: 1 1 auto; margin: 0; font-weight: 700; }
.carousel { display: flex; gap: 1rem; margin: 0; padding: 0 0 0.75rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.carousel li { flex: 0 0 min(20rem, 78vw); display: grid; gap: 0.4rem; justify-items: center; scroll-snap-align: start; }
.carousel img { width: 100%; height: auto; border-radius: 0.6rem; box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.5); }
.carousel-download { font-weight: 700; }

/* --- Results as one picture (v21, js/ui/duo.js) ---------------------------------
   The participants' dome above, bathed in sun; the Assembly's hemicycle
   below, in lilac light, a little smaller; one axis through both. */
.duo { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 40rem; margin: 0 auto; }
/* The glow fades out inside the box (closest-side): no cut edge (v24). */
.duo-part { display: grid; justify-items: center; gap: 0.6rem; width: 100%; padding: 1.5rem 0.5rem 1rem; }
.duo-part-assembly { width: 84%; }
/* No glow behind (v25): each side's colour only on the floor under its feet. */
.duo-floor { fill: none; stroke-width: 0.02; stroke-linecap: round; }
.duo-citizens .duo-floor { stroke: var(--cit); }
.duo-assembly .duo-floor { stroke: var(--asm); }
.duo-gauge { display: block; width: 100%; overflow: visible; }
.duo-yes { fill: var(--yes); }
.duo-no { fill: var(--no); }
.duo-tie { fill: var(--muted); }
.duo-axis { stroke: var(--muted); stroke-width: 0.008; stroke-dasharray: 0.03 0.022; }
.duo-needle { stroke: var(--ink); stroke-width: 0.014; stroke-linecap: round; }
.duo-needle-tip { fill: var(--ink); }
.duo-icon { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.duo-name { fill: var(--ink); font-family: var(--text); font-size: 0.072px; font-weight: 700; }
.duo-share { fill: var(--ink); font-family: var(--display); font-size: 0.14px; font-weight: 650; }
.duo-foot { font-family: var(--display); font-size: 0.07px; font-weight: 700; }
.duo-foot-yes { fill: var(--yes); }
.duo-foot-no { fill: var(--no); }
/* The decision under each drawing, an HTML pill sized by its text (v28). */
.duo-decision { display: inline-flex; align-items: center; gap: 0.45rem; margin: -0.4rem 0 0; padding: 0.3rem 0.95rem 0.3rem 0.4rem; border-radius: 999px; background: var(--bg-2); font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 650; white-space: nowrap; }
.duo-decision .outcome-glyph { width: 1.6em; height: 1.6em; }
.duo-decision.is-adopted .og-disc { fill: var(--yes); }
.duo-decision.is-rejected .og-disc { fill: var(--no); }
.duo-decision .og-mark { stroke: #fff; }
.duo-facts { display: grid; justify-items: center; gap: 0.1rem; text-align: center; }
.duo-voters { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.5rem; margin: 0; }
.duo-voters-num { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 650; line-height: 1.1; }
.duo-facts-citizens .duo-voters-num { color: var(--cit-ink); }
.duo-facts-assembly .duo-voters-num { color: var(--asm-ink); }
.duo-voters-unit { color: var(--muted); font-weight: 700; }
/* The detail of the count: a small round "i", and a card over the page. */
.duo-info {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--bg-2); color: var(--muted); font: italic 700 0.875rem/1 Georgia, serif; cursor: pointer; align-self: center;
}
.duo-info:hover, .duo-info:focus-visible { background: var(--ink); color: var(--bg); }
.duo-card {
  max-width: min(26rem, 92vw); margin: auto; padding: 1.1rem 1.25rem; border: 0; border-radius: 1rem;
  background: var(--bg); color: var(--ink); font-size: 0.9375rem; line-height: 1.45; text-align: left;
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.6), 0 0 0 1px var(--line);
}
.duo-card::backdrop { background: rgb(0 0 0 / 0.35); }
.duo-card p { margin: 0 0 0.5rem; color: var(--muted); }
.duo-card .duo-card-title { color: var(--ink); font-weight: 700; }
.duo-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.75rem 0 0 !important; }
.duo-card-link { font-weight: 700; }
.duo-between { display: grid; justify-items: center; gap: 0.3rem; padding: 0.4rem 0; }
.duo-between .sides-agree { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; }
.duo-express { margin: 0; padding: 0.25rem 0.8rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--muted); font-size: 0.875rem; font-weight: 700; }
.duo-caption { margin-top: 0.25rem; color: var(--muted); font-size: 0.875rem; text-align: center; }

/* v22: side by side on wide screens (stacked on phones). The two gauges
   the same size, so that their needles compare. */
@media (min-width: 56rem) {
  /* The participants' dome a little larger (v23): the image of the dome
     first, the hemicycle still close enough in size to compare. Floors aligned. */
  .duo-layout-side { grid-template-columns: minmax(0, 1.22fr) auto minmax(0, 1fr); align-items: end; max-width: 80rem; column-gap: 2.5rem; }
  .duo-layout-side .duo-part-assembly { width: 100%; }
  .duo-layout-side .duo-between { align-self: center; }
  .duo-layout-side .duo-caption { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 55.99rem) { .duo-layout-side .duo-part-assembly { width: 86%; } }

/* v22 variant: nested, a much larger dome around the hemicycle. */
.duo-layout-nested { max-width: 46rem; }
.duo-nested { max-width: 40rem; }
.duo-halo-citizens { fill: color-mix(in srgb, var(--cit) 12%, transparent); }
.duo-halo-assembly { fill: color-mix(in srgb, var(--asm) 18%, transparent); }
.duo-tip text { font-family: var(--display); font-size: 0.062px; font-weight: 650; }
.duo-tip-box { fill: var(--bg); }
.duo-tip-citizens text { fill: var(--cit-ink); }
.duo-tip-assembly text { fill: var(--asm-ink); }
.duo-tip-citizens .duo-tip-box { stroke: var(--cit); stroke-width: 0.006; }
.duo-tip-assembly .duo-tip-box { stroke: var(--asm); stroke-width: 0.006; }
/* Under the drawing: same decision or not, then one block per side, of equal height. */
.duo-sides { display: grid; gap: 0.75rem; width: 100%; }
.duo-sides > .duo-between { padding: 0; }
@media (min-width: 40rem) {
  .duo-sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .duo-sides > .duo-between { grid-column: 1 / -1; }
}
.duo-side { display: grid; justify-items: center; gap: 0.25rem; padding: 0.8rem; border-radius: 1rem; text-align: center; }
.duo-side-citizens { background: color-mix(in srgb, var(--cit) 12%, transparent); }
.duo-side-assembly { background: color-mix(in srgb, var(--asm) 15%, transparent); }
.duo-head, .duo-main { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 0.5rem; margin: 0; }
.duo-head-place { color: var(--muted); font-size: 0.8125rem; }
.duo-key { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--cit); }
.duo-key-assembly { border-radius: 0.2rem; background: var(--asm); }
.duo-main-share { font-size: 1.6rem; font-weight: 650; }
.duo-main-outcome { padding: 0.1rem 0.6rem; border-radius: 999px; font-weight: 700; color: #fff; }
.duo-main-outcome.is-adopted { background: var(--yes); }
.duo-main-outcome.is-rejected { background: var(--no); }
.duo-main-outcome.is-tied { background: var(--muted); }

/* --- Argument cards (js/ui/arg-card.js): home page and Arguments tab ---------- */
/* Portrait cards (the proportions of a passport), in the colour of their side
   (pour like oui, contre like non). */
.arg {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  aspect-ratio: 5 / 7;
  padding: 1rem 1.05rem 0.9rem;
  border-radius: 0.8rem;
  font-size: 0.9375rem;
  box-shadow: 0 10px 20px -12px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.15);
  transition: translate 0.2s ease;
}
.arg-pour { background: var(--yes-soft); }
.arg-contre { background: var(--no-soft); }
.arg:hover, .arg:focus-within { translate: 0 -3px; }
.arg p { margin: 0; }
.arg-side { display: flex; align-items: center; gap: 0.45rem; font-family: var(--display); font-size: 1.25rem; font-weight: 650; line-height: 1; }
.arg-side::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.arg-pour .arg-side::before { background: var(--yes); }
.arg-contre .arg-side::before { background: var(--no); }
.arg-body { font-size: 1rem; line-height: 1.45; }
/* The author's formatting: bold in full ink, highlight in sun. */
.arg-body strong { font-weight: 800; }
.arg-body mark { background: color-mix(in srgb, var(--sun) 45%, transparent); color: inherit; padding: 0 0.15em; border-radius: 0.2em; }
.arg-source { margin-top: auto !important; font-size: 0.8125rem; }
.arg-source.is-empty { color: var(--muted); }
.arg-source a { color: var(--ink); font-weight: 700; text-decoration-thickness: 1.5px; }
.arg-source a::after { content: " ↗"; }
.arg-supports { font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .arg { transition: none; }
}