:root {
  --red: #AF272F;       /* Swiss flag red */
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.75);
  --line: rgba(255, 255, 255, 0.28);
  --panel: rgba(255, 255, 255, 0.08);
  --max: 900px;
  /* Outcome palette (statistics chart/legend) — every color keeps >= 3:1
     contrast on --red and the set stays colorblind-distinguishable; white is
     the deliberate neutral for not-yet-decided initiatives. */
  --oc-accepted: #3fca77;
  --oc-rejected: #ffa4b8;
  --oc-not-qualified: #6cb7f2;
  --oc-other: #ccd2da;      /* cool silver — mid-greys read as mud on the red surface */
  --oc-in-progress: #ffffff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* override display:flex/grid on hidden items */

body {
  margin: 0;
  background: var(--red);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

/* ---- header ---- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
.site-header .brand { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.swiss-cross { width: 1.25em; height: 1.25em; flex: none; }
.site-header .nav { display: flex; gap: 1rem; }
.site-header .nav a { text-decoration: none; opacity: 0.85; }
.site-header .nav a:hover { opacity: 1; }
.site-header .lang-switch { margin-left: auto; display: flex; gap: 0.5rem; }
.lang-switch a { text-decoration: none; opacity: 0.6; font-size: 0.85rem; }
.lang-switch a:hover { opacity: 0.85; }
.lang-switch a.active { opacity: 1; font-weight: 700; }

/* Once the header wraps (narrow screens), center each stacked element instead
   of leaving them left-aligned with the lang-switch pinned to the right. */
@media (max-width: 620px) {
  .site-header { justify-content: center; text-align: center; }
  .site-header .brand { flex-basis: 100%; justify-content: center; }
  .site-header .lang-switch { margin-left: 0; }
}

/* ---- layout ---- */
.container { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem; }

h1 { font-size: 1.7rem; font-weight: 700; }
h2 { font-size: 1.2rem; margin-top: 2.25rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1rem; margin-bottom: 0.2rem; }

.notice { color: var(--muted); font-style: italic; }
.count { color: var(--muted); font-size: 0.9rem; }

/* ---- list/card toolbar + view toggle ---- */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.list-toolbar .count { margin: 0; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.view-toggle a { padding: 0.25rem 0.7rem; text-decoration: none; font-size: 1.05rem; line-height: 1.4; color: var(--muted); }
.view-toggle a:hover { color: var(--fg); }
.view-toggle a.active { background: #fff; color: var(--red); font-weight: 700; }
.view-toggle a + a { border-left: 1px solid var(--line); }
.back { font-size: 0.9rem; }
.back a { opacity: 0.85; }
.detail-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0.5rem; }
.detail-top .back { margin: 0; }
.official-link { font-size: 0.9rem; white-space: nowrap; }

/* ---- filters ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.filters input, .filters select {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
}
.filters input[type="search"] { flex: 1 1 14rem; }
.filters button {
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--red);
  font-weight: 700;
  cursor: pointer;
}
.filters button:hover { background: rgba(255, 255, 255, 0.9); }
.filters .reset { font-size: 0.85rem; color: var(--muted); }

/* ---- initiative list ---- */
.initiative-list { list-style: none; padding: 0; margin: 0; }
.initiative-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.initiative-list .item-body { min-width: 0; }

/* app-icon-style status square at the left of each list item */
.status-icon {
  flex: none;
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.status-icon img { width: 28px; height: 28px; display: block; }

/* canton code square for scraped cantonal initiatives (same slot as .status-icon) */
.canton-badge {
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 4px;
  background: #fff;
  color: var(--red);
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.card .canton-badge, h1 .canton-badge {
  min-width: auto;
  height: auto;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-size: 0.8em;
  vertical-align: middle;
}

/* accuracy warning on scraped cantonal detail pages */
.scrape-disclaimer {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
}

.initiative-list a { font-weight: 600; }
.initiative-list .meta { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.meta .deadline, .meta .vote-date { white-space: nowrap; }

/* ---- home ---- */
.home-section { margin-bottom: 2.5rem; }
.section-title { text-align: center; border-bottom: 0; }

/* ---- initiative cards ---- */
.initiative-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.initiative-cards .card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
  color: var(--fg);
}
.initiative-cards .card:hover { background: rgba(255, 255, 255, 0.14); }
.initiative-cards .card-title { font-weight: 600; }
.initiative-cards .meta { color: var(--muted); font-size: 0.85rem; margin-top: auto; }

/* ---- detail ---- */
.summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }

/* Narrow screens: the max-content label column would squeeze values into a
   sliver, so stack each label above its value instead. */
@media (max-width: 560px) {
  .summary dl { grid-template-columns: 1fr; gap: 0; }
  .summary dt { margin-top: 0.65rem; }
}

/* Wide tables (signatures) scroll horizontally inside their own container
   instead of clipping on narrow screens. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 640px; }
.initiative-text {
  margin-top: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
}
.initiative-text table { margin: 0.5rem 0; }
.note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.note strong { color: var(--fg); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 0.45rem 0; border-bottom: 1px dotted var(--line); }
.timeline .date { display: inline-block; min-width: 7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .source { color: var(--muted); font-size: 0.85rem; margin-left: 0.5rem; }

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
td:not(:first-child), th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
th { color: var(--muted); font-weight: 600; }
tr.total { font-weight: 700; }
tr.total td { border-top: 2px solid var(--fg); }

.vote-question { margin: 1.25rem 0; }

/* ---- sortable tables (click a header to sort) ---- */
table.sortable th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.sortable th:hover,
table.sortable th:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
table.sortable th::after { content: ""; display: inline-block; width: 1em; }
table.sortable th[aria-sort="ascending"]::after { content: " ▲"; }
table.sortable th[aria-sort="descending"]::after { content: " ▼"; }

/* ---- canton choropleth map (detail page) ---- */
.canton-map { position: relative; margin: 1rem 0 1.5rem; }
.map-toggle { display: inline-flex; margin-bottom: 0.5rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.map-toggle button {
  padding: 0.25rem 0.7rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}
.map-toggle button:hover { color: var(--fg); }
.map-toggle button.active { background: #fff; color: var(--red); font-weight: 700; }
.map-toggle button + button { border-left: 1px solid var(--line); }
.ch-map { display: block; width: 100%; height: auto; }
.ch-map .canton {
  fill: #fff;
  fill-opacity: 0.08;           /* map.js raises this per canton */
  stroke: var(--red);
  stroke-width: 1;
  cursor: pointer;
  outline: none;
  transition: stroke-width 0.1s;
}
.ch-map .canton:hover,
.ch-map .canton:focus-visible { stroke: #fff; stroke-width: 2; }
.ch-map .canton.no-data {
  fill-opacity: 0.03;
  stroke: var(--line);
  stroke-dasharray: 3 3;
}
.map-tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: #7d1c22;          /* darker than --red so it reads over white cantons */
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.map-tooltip .tooltip-rows {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 0.75rem;
}
.map-tooltip .tooltip-rows b { text-align: right; font-variant-numeric: tabular-nums; }
.map-credit { margin: 0.25rem 0 0; text-align: right; font-size: 0.7rem; color: var(--muted); }

/* ---- statistics page ---- */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--fg);
}
a.stat-tile:hover { background: rgba(255, 255, 255, 0.14); }
.stat-tile b { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-tile span { font-size: 0.85rem; overflow-wrap: break-word; hyphens: auto; }
.stat-tile small { color: var(--muted); font-size: 0.75rem; }

.chart-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.85rem;
}
.chart-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--line);   /* keeps the white swatch visible */
  flex: none;
}

.chart-scroll { overflow-x: auto; }
.stacked-chart {
  position: relative;              /* anchors the shared .map-tooltip */
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 640px;
}
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.chart-plot { height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.chart-count { text-align: center; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-bar {
  display: flex;
  flex-direction: column-reverse;  /* first CHART_GROUPS segment sits on the baseline */
  gap: 2px;                        /* background shows through between segments */
}
.chart-seg {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 3px;                 /* 1-count slivers stay visible and hoverable */
  flex-basis: 0;
  border-radius: 2px;
  cursor: pointer;
}
.chart-seg:hover,
.chart-seg:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.chart-x { text-align: center; font-size: 0.7rem; color: var(--muted); }
.seg-detail {                      /* visually hidden: accessible name + tooltip source */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chart-data { margin-top: 0.75rem; }
.chart-data summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }

/* the stat tables are narrower than the 640px canton tables */
.table-scroll table.matrix,
.table-scroll table.records { min-width: 480px; }

/* recommendation matrix: both axes matter equally, so it reads as a heatmap
   grid (gap-separated tiles, centered values), not a data table */
.matrix { border-collapse: separate; border-spacing: 3px; }
.matrix th,
.matrix td { border-bottom: none; text-align: center; }
.matrix td {
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
  background: var(--panel);      /* empty (–) tiles */
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.matrix td.success { border: 1px solid var(--line); }
.matrix td.success.high { color: #1c1c1c; border-color: transparent; }  /* light tiles carry dark ink */
.matrix tbody th { text-align: right; }
.matrix-wrap { display: flex; align-items: stretch; }
.matrix-wrap .table-scroll { flex: 1; min-width: 0; }
.matrix .matrix-axis-x,
.matrix-axis-y {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);      /* the base th style is muted */
}
.matrix-axis-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  padding-left: 0.3rem;
}
.matrix tr.total th,
.matrix tr.total td { border-top: none; }  /* tiles keep their gaps as the divider */

.funnel {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.funnel li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.funnel-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  min-width: max-content;    /* long labels never overflow their stage */
  padding: 0.55rem 1.1rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  color: #1c1c1c;
}
.funnel-bar.is-accepted { background: var(--oc-accepted); }
.funnel-label { font-size: 0.9rem; font-weight: 600; }
.funnel-n { font-variant-numeric: tabular-nums; }
.funnel-pct { font-size: 0.8rem; color: rgba(0, 0, 0, 0.6); }  /* share of launched */
.funnel-joint {
  width: 100%;
  height: 2.4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.funnel-joint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  clip-path: polygon(calc(50% - var(--from) / 2) 0, calc(50% + var(--from) / 2) 0,
                     calc(50% + var(--to) / 2) 100%, calc(50% - var(--to) / 2) 100%);
}
.funnel-drop { position: relative; font-size: 0.75rem; color: var(--fg); }

.share-chart { position: relative; min-width: 640px; }  /* anchors the tooltip; scrolls on phones */
.share-lines { display: block; width: 100%; height: auto; margin-top: 0.75rem; overflow: visible; }
.share-lines .grid { stroke: rgba(255, 255, 255, 0.15); }
.share-lines text { fill: var(--muted); font-size: 15px; }
.share-lines .national-label { fill: var(--fg); font-weight: 700; }
/* The layer is pointer-inert: the overlapping series would steal each other's
   hover, so stats.js resolves the nearest data point chart-wide and marks the
   matched series with .hover instead. */
.share-series { pointer-events: none; }
.share-series polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.share-series circle { fill: rgba(255, 255, 255, 0.3); }
.share-series .share-point { fill: transparent; }
.share-series.national polyline { stroke: #fff; stroke-width: 5; }
.share-series.national circle:not(.share-point) { fill: #fff; }
/* after the .national rules so the highlight also recolors the national line
   (which keeps its heavier weight) */
.share-series.hover polyline { stroke: var(--oc-accepted); }
.share-series.hover:not(.national) polyline { stroke-width: 3; }
.share-series.hover circle:not(.share-point) { fill: var(--oc-accepted); }

@media (max-width: 560px) {
  .chart-plot { height: 200px; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .stat-tile b { font-size: 1.6rem; }
}

/* Every external link (new-tab) carries the ↗ marker automatically. */
a[target="_blank"]::after {
  content: " ↗";
}

/* ---- footer ---- */
.site-footer {
  max-width: var(--max);
  margin: 2rem auto 3rem;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.9rem;
  text-align: center;
  line-height: 1.5;
}

/* Segments separated by a subtle divider; wraps only between segments. The
   divider trails its segment (::after) so it stays on the first line when the
   next segment wraps, rather than leading a wrapped line. */
.site-footer > span::after {
  content: "|";
  margin-left: 0.9rem;
  color: var(--line);
}
.site-footer > span:last-child::after {
  content: none;
}

/* ---- data-sources modal ---- */
.sources-modal {
  background: var(--red);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  max-width: min(34rem, 90vw);
  max-height: 85vh;
}
.sources-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.sources-modal a { color: var(--fg); }
.sources-modal .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.sources-modal h2 { margin: 0; font-size: 1.2rem; }
.sources-modal h3 { margin: 1.1rem 0 0.2rem; font-size: 1rem; }
.sources-modal .modal-close {
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.sources-modal .modal-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.2rem 0 0.5rem;
}
.sources-modal .sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.sources-modal .sources-list li { margin: 0.25rem 0; break-inside: avoid; }
@media (max-width: 480px) {
  .sources-modal .sources-list { columns: 1; }
}