/* Cross-document view transitions: both pages must opt in (they do, since
   they share this stylesheet). Smooths the canton/lang URL navigation on
   generated pages. No-op in browsers that don't support the API. */
@view-transition { navigation: auto; }

/* Naming these elements makes the browser treat them as the same element
   across cross-document navigations — they morph in place instead of
   cross-fading out and back in. Safe now that build_pages.js bakes the
   full SVG into static HTML, so #map is populated on both sides of the
   transition (it used to disappear briefly when the new page arrived
   with an empty <svg> that app.js then filled in async). */
header { view-transition-name: site-header; }
#map { view-transition-name: map; }
footer { view-transition-name: site-footer; }

/* Naming each section pins its bounding box across the navigation —
   the cross-fade then plays only INSIDE each section, against its own
   content, instead of the entire <main> being one big fading blob.
   Visually: the page structure stays locked, only the patches of content
   that actually differ between pages flicker. */
.next-holiday                            { view-transition-name: vt-banner; }
main > section.section:nth-of-type(1)    { view-transition-name: vt-s1; }
main > section.section:nth-of-type(2)    { view-transition-name: vt-s2; }
main > section.section:nth-of-type(3)    { view-transition-name: vt-s3; }
main > section.section:nth-of-type(4)    { view-transition-name: vt-s4; }
main > section.section:nth-of-type(5)    { view-transition-name: vt-s5; }

:root {
  /* spacing scale (4-px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  --red: #DA291C;
  --red-dark: #a81d12;
  --red-soft: #f3b7b1;
  --ink: #1c1c1e;
  --muted: #6b7280;
  --line: #e3e5e8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
header {
  border-bottom: 3px solid var(--red);
  position: relative; /* anchor for the absolutely-positioned .next-holiday widget */
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) 0 var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.flag { width: 44px; height: 44px; flex-shrink: 0; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; transition: color 0.15s ease; }
.subtitle { color: var(--muted); font-size: 14px; }

/* Flag + title block, wrapped in an <a> that links back to the language home.
   Behaves like the previous side-by-side layout, plus link affordances. */
.header-home {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.header-home:hover h1 { color: var(--red); }

.lang-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-switch button {
  border: 0;
  border-left: 1px solid var(--line);
  background: #ffffff;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.lang-switch button:first-child { border-left: 0; }
.lang-switch button:hover:not(.on) { background: #f4f5f7; }
.lang-switch button.on { background: var(--red); color: #ffffff; }

/* ---------- layout ---------- */
main { max-width: 1180px; margin: 0 auto; padding: var(--s-8) var(--s-6); }

.callout {
  font-size: 15px;
  max-width: 780px;
  border-left: 3px solid var(--red);
  padding-left: var(--s-4);
  margin-bottom: var(--s-8);
}
.callout strong { color: var(--red-dark); }

/* ---------- next holiday: SBB station-board tribute ----------
   Right-aligned blue panel mimicking an intercity departure display:
   pale header strip (label + live clock), a single 'departure' row
   (canton badge, date, holiday name, days-away as the platform pill),
   two small grey post-stubs hinting it's pole-mounted. Under 900px the
   widget falls back to the soft-pink banner style of the original site
   (see media query below). */
/* Second row of the header: same max-width / padding pattern as .header-inner.
   Holds the language switcher (left) and the next-holiday widget (right);
   both align to the bottom so the lang switcher's bottom edge sits on the
   divider, in the same horizontal column as where the widget's feet plant. */
.header-row-2 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
}

.next-holiday {
  /* Desktop: lives inside .header-inner as a sibling of the heading. The
     heading stays vertically centred (default for the row), the widget aligns
     to the bottom and is pushed to the right by margin-left:auto. The widget's
     margin-bottom (13px) leaves room for the ::before/::after feet to bridge
     to the red divider. Mobile: pink-banner skin (see <720px media query). */
  position: relative;
  align-self: flex-end;
  margin: 0 0 13px auto;
  max-width: 380px;
  width: 100%;
  background: #1F4FAB;
  color: #ffffff;
  border: 5px solid #11377A;
  border-radius: 4px;
  padding: 0;
  /* Inter from Bunny Fonts (GDPR-clean Google-Fonts mirror), with
     Helvetica Neue → Helvetica → Arial as system fallbacks. */
  font-family: "Inter", "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* The two grey "post" stubs hanging below the widget, suggesting it's
   pole-mounted on the red divider. */
.next-holiday::before,
.next-holiday::after {
  content: "";
  position: absolute;
  bottom: -18px;
  width: 6px;
  height: 13px;
  background: #9aa1a8;
  border-radius: 0 0 1px 1px;
}
.next-holiday::before { left: 28%; }
.next-holiday::after  { right: 28%; }

.nh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px 3px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
}
.nh-tag {
  white-space: nowrap;
}
.nh-canton {
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.nh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.2;
}
.nh-badge {
  background: var(--red);
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 3px;
  min-width: 26px;
  text-align: center;
  flex: 0 0 auto;
}
.nh-date {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nh-name {
  flex: 1 1 auto;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nh-name strong { font-weight: 700; }
.nh-lost {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFD200;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nh-away {
  background: #ffffff;
  color: #1c1c1e;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  text-align: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-10);
  align-items: start;
  margin-bottom: var(--s-8);
}

/* Second row below the map: histogram on the left, substitute-day text +
   method on the right. Same column proportions as .top so the visual rhythm
   lines up. */
.mid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-10);
  align-items: start;
  margin-bottom: var(--s-8);
}
/* ---------- map ---------- */
#map { display: block; width: 100%; height: auto; }
.map-hint {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: var(--s-2);
}

.canton-group { cursor: pointer; }
.canton {
  fill: #ffffff;
  stroke: #8b9096;
  stroke-width: 1.1;
  transition: fill 0.12s ease;
}
.canton-group:hover .canton { fill: var(--red-soft); }
.canton-group.selected .canton {
  fill: var(--red);
  stroke: var(--red-dark);
  stroke-width: 1.4;
}
.canton-label {
  font-size: 16px;
  font-weight: 700;
  fill: #5f6368;
  text-anchor: middle;
  dominant-baseline: middle;
}
.canton-group:hover .canton-label { fill: var(--red-dark); }
.canton-group.selected .canton-label { fill: #ffffff; }

/* ---------- canton stats ---------- */
.placeholder { color: var(--muted); }

.canton-area h2 { font-size: 24px; font-weight: 800; }
.canton-area h2 .code {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 5px;
  padding: 1px 7px;
  vertical-align: middle;
  margin-left: var(--s-2);
}

.hero { display: flex; align-items: center; gap: 18px; margin: 18px 0 var(--s-2); }
.hero-num {
  font-size: 86px;
  font-weight: 800;
  color: var(--red);
  line-height: 0.9;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
.hero-cap { font-size: 17px; font-weight: 600; }
.hero-years { font-size: 13.5px; color: var(--muted); font-weight: 700; }

.hero-sub { font-size: 14px; color: var(--muted); margin-bottom: var(--s-6); max-width: 460px; }
.hero-sub strong { color: var(--ink); }

/* Small explanatory note appended to the canton card when the canton has any
   feiertagsähnliche Tage. Only renders for cantons with customary days
   (ZG, SO, OW, NW, FR, VS, GL, SG, SH). */
.canton-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: var(--s-4);
  max-width: 520px;
  line-height: 1.5;
}
.canton-note strong { color: var(--ink); font-weight: 700; }
.canton-note em { font-style: italic; }

.stat-row { display: flex; gap: var(--s-8); }
.stat-num { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 12px; color: var(--muted); }

/* ---------- section heading ---------- */
.section-h {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.section-h .accent { color: var(--red-dark); }

/* ---------- chart ---------- */
.chart-area { margin-bottom: var(--s-8); }
.chart {
  display: flex;
  align-items: flex-end;
  gap: var(--s-1);
  height: 200px;
  border-bottom: 2px solid var(--line);
}
.bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}
.bar-value { font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.bar {
  width: 80%;
  background: var(--red);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 0.1s ease;
}
.bar.zero { background: #cdd1d4; }
.bar-col:hover .bar { opacity: 0.65; }
.bar-label { font-size: 9.5px; color: var(--muted); margin-top: 6px; }

.bar-col.sel .bar { box-shadow: 0 0 0 2px var(--red-dark); }
.bar-col.sel .bar-value,
.bar-col.sel .bar-label { color: var(--red-dark); font-weight: 700; }

/* ---------- year detail ---------- */
.year-grid {
  column-count: 3;
  column-gap: var(--s-8);
}
.hol {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.hol-date { color: var(--muted); white-space: nowrap; }
.hol.lost { color: var(--red); font-weight: 600; }
.hol.lost .hol-date { color: var(--red); }
.lost-tag {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* Asterisk next to customarily-observed holidays in the year list / calendar.
   Paired with .year-legend (the footnote below the grid). */
.customary-mark {
  color: var(--muted);
  font-weight: 700;
  margin-left: 2px;
  cursor: help;
}
.year-legend {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: var(--s-4);
  line-height: 1.5;
}
.year-legend strong { color: var(--ink); font-weight: 700; }
.year-legend em { font-style: italic; }

/* ---------- year detail: toggle + calendar ---------- */
.year-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}
.year-head .section-h { margin-bottom: 0; }

.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.view-toggle button {
  border: 0;
  background: #fff;
  padding: 6px var(--s-4);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.view-toggle button.on { background: var(--red); color: #ffffff; }

.year-calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6) var(--s-6);
}
.cal-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-wd {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding-bottom: 2px;
}
.cal-day {
  font-size: 11px;
  text-align: center;
  padding: var(--s-1) 0;
  border-radius: 3px;
}
.cal-day.empty { visibility: hidden; }
.cal-day.we { background: #f1f2f4; color: var(--muted); }
.cal-day.kept { background: var(--ink); color: #ffffff; font-weight: 700; }
.cal-day.lost { background: var(--red); color: #ffffff; font-weight: 700; }

.cal-legend {
  display: flex;
  gap: var(--s-5);
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
}
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.cal-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.cal-legend .sw-kept { background: var(--ink); }
.cal-legend .sw-lost { background: var(--red); }
.cal-legend .sw-we { background: #f1f2f4; }

/* ---------- long weekends & bridge days ---------- */
.section-intro {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 800px;
  margin-bottom: var(--s-6);
}
.section-intro strong { color: var(--ink); }

/* Below: classes named bridge-* / b-* are leftovers from the removed
   "Long weekends & bridge days" section but still used by the leave planner. */
.bstat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 340px;
}
.bstat-num {
  font-size: 46px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}
.bstat-lbl { font-size: 13px; color: var(--muted); }

.bridge-h {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.b-empty { color: var(--muted); font-style: italic; }

/* ---------- optimal leave planner ---------- */
.lp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.lp-budget {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  width: 64px;
  padding: 6px var(--s-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.lp-actions {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}

.lp-stats {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.bstat-num.lp-bad { color: var(--red-dark); }

.lp-over {
  background: #fbeae8;
  border-left: 3px solid var(--red);
  color: var(--red-dark);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: var(--s-6);
  max-width: 600px;
}

.lp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  max-width: 920px;
}

.lp-list { list-style: none; }
.lp-opp {
  padding: 9px var(--s-2);
  border-bottom: 1px solid var(--line);
}
.lp-opp.on { background: #fbeae8; }
.lp-opp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lp-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}
.lp-check input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.lp-opp-name { font-weight: 600; font-size: 14px; }
.lp-opp-when,
.lp-opp-detail {
  margin-top: 3px;
  margin-left: 23px;
  color: var(--muted);
  font-size: 12.5px;
}
.lp-roi {
  flex-shrink: 0;
  background: var(--red);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

/* "Your breaks": leave-bought breaks and free long weekends */
.lp-breaks { list-style: none; }
.lp-break {
  padding: var(--s-2) 6px;
  border-bottom: 1px solid var(--line);
}
.lp-break-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lp-break-name { font-weight: 600; font-size: 13.5px; }
.lp-break-detail {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}
.lp-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px var(--s-2);
  border-radius: 999px;
  white-space: nowrap;
}
.lp-tag-free { background: #eef0f2; color: var(--muted); }
.lp-tag-paid { background: var(--red); color: #ffffff; }

/* ---------- canton ranking ---------- */
.rank-table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}
.rank-table th {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 0 10px var(--s-2);
  border-bottom: 2px solid var(--line);
}
.rank-table th:first-child,
.rank-table th:nth-child(2) { text-align: left; }
.rank-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.rank-table tbody tr { cursor: pointer; }
.rank-table tbody tr:hover { background: #f4f5f7; }
.rank-table tr.rank-sel { background: #fbeae8; }
.rank-n { text-align: left; color: var(--muted); font-weight: 700; }
.rank-canton { text-align: left; font-weight: 600; }
.rank-code { font-size: 10px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.rank-eff { font-weight: 800; color: var(--red-dark); }

/* ---------- compare cantons ---------- */
.compare-pick { margin-bottom: var(--s-6); }
.cmp-chips {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: var(--s-3);
}
.cmp-chip {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 2px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.cmp-chip:hover { border-color: var(--red); color: var(--red-dark); }
.cmp-chip.on {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}
.cmp-pick-actions {
  display: flex;
  gap: 18px;
}
.cmp-act {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red-dark);
  cursor: pointer;
}
.cmp-act:hover { text-decoration: underline; }
.cmp-scroll { overflow-x: auto; }
.cmp-table {
  border-collapse: collapse;
  font-size: 14px;
}
.cmp-table th {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  padding: 6px var(--s-2) var(--s-2);
  border-bottom: 2px solid var(--line);
}
.cmp-table td {
  padding: 7px var(--s-2);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.cmp-table th:not(.cmp-hol),
.cmp-table td:not(.cmp-hol) {
  width: 54px;
  min-width: 54px;
}
.cmp-table .cmp-hol {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 230px;
  min-width: 230px;
  text-align: left;
  font-weight: 600;
  background: #ffffff;
}
/* Divider as a pseudo-element: a collapsed-table border vanishes under the
   scrolled cells, and box-shadow is not painted on collapsed-border cells.
   An absolutely-positioned ::after on the sticky cell stays put. */
.cmp-table .cmp-hol::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.cmp-table tr.cmp-diff td { background: #fbeae8; }
.cmp-yes { color: var(--red); font-weight: 800; }
.cmp-table tfoot td {
  border-top: 2px solid var(--line);
  border-bottom: none;
  padding-top: 9px;
}
.cmp-total { font-weight: 800; }

/* ---------- sections + calendar export ---------- */
.section { margin-bottom: var(--s-12); }
.section-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 18px;
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--red);
}

.export-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  max-width: 900px;
  margin-bottom: var(--s-6);
}
.export-intro,
.export-tip {
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 14px var(--s-4);
  border-radius: 8px;
}
.export-intro { background: #f4f5f7; color: var(--ink); }
.export-intro em { color: var(--red-dark); font-style: normal; font-weight: 700; }
.export-intro code {
  background: #ffffff;
  border: 1px solid var(--line);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 12.5px;
}

.canton-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-6);
}
.canton-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13.5px;
  padding: 6px var(--s-2);
  border-radius: 6px;
  cursor: pointer;
}
.canton-check:hover { background: #f4f5f7; }
.canton-check input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.cc-name { flex: 1; }
.cc-code { font-size: 10px; font-weight: 700; color: var(--muted); }

.export-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.export-actions {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}
.btn-secondary {
  border: 1px solid var(--line);
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 6px;
}
.btn-secondary:hover { background: #f4f5f7; border-color: #c9ccd1; }
.btn-primary {
  border: 0;
  cursor: pointer;
  background: var(--red);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px var(--s-6);
  border-radius: 6px;
}
.btn-primary:hover:not(:disabled) { background: var(--red-dark); }
.btn-primary:disabled { background: #c9ccd1; cursor: not-allowed; }

.export-options {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-6);
}
.opt-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.cantons-label { display: block; margin-bottom: 10px; }
.opt-sep { color: var(--muted); font-size: 13px; }
.export-options select,
.compare-pick select {
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

.export-tip {
  background: #fbeae8;
  color: var(--ink);
  border-left: 3px solid var(--red);
}
.export-tip strong { color: var(--red-dark); }
.export-tip em { font-style: italic; }

.export-preview { margin-bottom: var(--s-6); }
.pv-empty { font-size: 13.5px; color: var(--muted); }
.pv-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pv-label { font-size: 13.5px; color: var(--muted); }
.pv-pill {
  background: var(--red);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: var(--s-1) 11px;
  border-radius: 6px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.pv-note strong { color: var(--ink); }

/* ---------- footer ---------- */
footer {
  max-width: 1180px;
  margin: var(--s-2) auto var(--s-8);
  padding: 0 var(--s-6);
  color: #9aa0a6;
  font-size: 12px;
}

/* ---------- Switzerland vs the world ---------- */
html { scroll-behavior: smooth; }

.world-teaser {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: #fbeae8;
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-top: var(--s-8);
}
.wt-body { flex: 1; min-width: 260px; }
.wt-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--red-dark);
  margin-bottom: var(--s-1);
}
.wt-text { font-size: 14px; max-width: 620px; }
.wt-link {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--red-dark);
  text-decoration: none;
}
.wt-link:hover { text-decoration: underline; }

.wc-hero {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
.wc-hero-num {
  font-size: 72px;
  font-weight: 800;
  color: var(--red);
  line-height: 0.9;
  letter-spacing: -2px;
  flex-shrink: 0;
}
.wc-hero-cap { font-size: 16px; font-weight: 600; }
.wc-hero-sub {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 520px;
  margin-top: var(--s-1);
}
.wc-hero-sub strong { color: var(--ink); }

.wc-gap { margin-top: var(--s-8); }

/* neighbour comparison: horizontal bars */
.wc-bars { max-width: 560px; }
.wc-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 5px 0;
}
.wc-name {
  width: 128px;
  flex-shrink: 0;
  font-size: 13px;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-row.you .wc-name { color: var(--red-dark); font-weight: 700; }
.wc-track {
  flex: 1;
  height: 18px;
  background: #f1f2f4;
  border-radius: 3px;
}
.wc-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  background: #cdd1d4;
  border-radius: 3px;
}
.wc-row.you .wc-fill { background: var(--red); }
.wc-val {
  width: 32px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
}
.wc-row.you .wc-val { color: var(--red-dark); }

/* distribution: vertical histogram */
.wc-hist {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  max-width: 640px;
  border-bottom: 2px solid var(--line);
}
.wc-hcol {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.wc-hbar {
  width: 100%;
  min-height: 2px;
  background: #cdd1d4;
  border-radius: 2px 2px 0 0;
}
.wc-hbar.here { background: var(--red); }
.wc-hx { font-size: 9px; color: var(--muted); margin-top: var(--s-1); }
.wc-hcol.here .wc-hx { color: var(--red-dark); font-weight: 700; }
.wc-hist-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

.wc-lieu { font-size: 14.5px; max-width: 680px; }
.wc-lieu strong { color: var(--red-dark); }

.wc-method {
  font-size: 11.5px;
  color: #9aa0a6;
  line-height: 1.5;
  max-width: 720px;
  margin-top: var(--s-8);
}

/* ---------- baked SEO content on canton landing pages ----------
   Replaced wholesale by renderCanton() once the SPA hydrates; only visible
   in the brief pre-JS window (and to crawlers that don't run JS). */
.baked-year { margin-bottom: 18px; }
.baked-year + .baked-year { padding-top: 14px; border-top: 1px solid var(--line); }
.baked-year h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--s-1);
}
.baked-summary {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.baked-summary strong { color: var(--ink); font-weight: 700; }
.baked-list { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.baked-list li {
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  align-items: baseline;
}
.baked-list li:last-child { border-bottom: 0; }
.baked-list li.lost { color: var(--red-dark); }
.baked-date { color: var(--muted); }
.baked-list li.lost .baked-date { color: var(--red-dark); }
.baked-name { font-weight: 600; }
.baked-flag {
  font-size: 12px;
  color: var(--red);
  font-weight: 700;
}

/* --- OECD ranking table (world page, bottom section) --- */
.oecd-section { margin-top: var(--s-12); }
.oecd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}
.oecd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}
.oecd-table thead {
  background: #f7f8f9;
  border-bottom: 2px solid var(--line);
}
.oecd-table th {
  text-align: left;
  font-weight: 700;
  padding: 10px 14px;
  color: var(--ink);
  white-space: nowrap;
}
.oecd-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.oecd-table tr:last-child td { border-bottom: 0; }
.oecd-table tr:hover td { background: #fafbfc; }
.oecd-table th.oecd-rank, .oecd-table td.oecd-rank {
  width: 44px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.oecd-table th.oecd-num, .oecd-table td.oecd-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 90px;
}
.oecd-table th.oecd-range, .oecd-table td.oecd-range {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  width: 80px;
}
.oecd-table th.oecd-lieu, .oecd-table td.oecd-lieu {
  text-align: center;
  width: 110px;
}
.oecd-table td.oecd-country { font-weight: 600; }
.oecd-yes { color: #1f7a3f; font-weight: 600; }
.oecd-no { color: var(--muted); }
.oecd-flag {
  display: inline-block;
  color: var(--red);
  font-weight: 700;
  cursor: help;
}
.oecd-row-ch td {
  background: #fef4f2 !important;
  font-weight: 700;
}
.oecd-row-ch td.oecd-country::before {
  content: "🇨🇭 ";
}
.oecd-footnote {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   Responsive overrides (kept at the end so they win on source
   order ties: media queries do NOT raise specificity).
   ============================================================ */

@media (max-width: 720px) {
  /* layout */
  main { padding: var(--s-6) var(--s-4); }
  .header-inner {
    padding: 14px 14px;
    gap: 10px var(--s-3);
    align-items: flex-start;
    flex-wrap: wrap; /* allow the widget to drop to its own row on narrow viewports */
  }
  h1 { font-size: 20px; line-height: 1.2; }
  .subtitle { font-size: 12.5px; }
  /* compact lang-switch: align to the right inside the stacked row-2 column,
     reset the divider-alignment margin from desktop */
  .lang-switch { align-self: flex-end; flex-shrink: 0; margin-bottom: 0; }
  .lang-switch button { padding: var(--s-1) 7px; font-size: 11px; }
  /* shrink flag slightly so the title has more room */
  .flag { width: 38px; height: 38px; }

  /* Next-holiday widget: drop the SBB station-board styling on narrow
     viewports and revert to the soft-pink banner. Stack the row-2
     contents (lang switcher on top, pink banner below) inside <header>. */
  .header-row-2 {
    padding: 0 var(--s-4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .next-holiday {
    position: static;
    align-self: stretch;
    flex-basis: 100%;
    max-width: none;
    width: auto;
    margin: var(--s-3) 0 0 0;
    background: #fbeae8;
    color: var(--ink);
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: inherit;
    box-shadow: none;
    z-index: auto;
  }
  .next-holiday::before,
  .next-holiday::after { display: none; }
  .nh-header {
    background: transparent;
    border-bottom: none;
    border-radius: 0;
    padding: 0 0 4px 0;
    color: var(--red-dark);
    font-size: 10.5px;
    letter-spacing: 0.07em;
  }
  .nh-canton { display: none; }
  .nh-row {
    padding: 0;
    gap: 8px;
    font-size: 12.5px;
    flex-wrap: wrap;
  }
  .nh-badge {
    background: var(--red);
    color: #ffffff;
    font-size: 11px;
    padding: 2px 7px;
  }
  .nh-date {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
  }
  .nh-name { color: var(--ink); }
  .nh-lost {
    color: var(--red-dark);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
  }
  .nh-away {
    background: var(--red);
    color: #ffffff;
    font-size: 11.5px;
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: auto;
  }

  /* section 1 */
  .top, .mid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin-bottom: var(--s-6);
  }
  .canton-area h2 { font-size: 22px; }
  .hero { gap: 14px; }
  .hero-num { font-size: 72px; letter-spacing: -2px; }
  .hero-cap { font-size: 15px; }
  .stat-row { gap: var(--s-6); flex-wrap: wrap; }

  /* chart: let bars actually shrink to fit, hide most labels so they don't overlap */
  .chart { gap: 2px; }
  .bar-col { flex: 1; min-width: 0; }
  .bar { width: 70%; }
  .bar-value { font-size: 10px; }
  .bar-label { font-size: 10px; margin-top: var(--s-1); }
  /* keep every 5th label visible (2026, 2031, 2036, 2041, 2046, 2051) */
  .bar-col:not(:nth-child(5n+1)) .bar-label { visibility: hidden; }

  /* year detail: holiday list (default view) + calendar view */
  .year-grid { column-count: 2; column-gap: 18px; }
  .year-calendar { grid-template-columns: repeat(2, 1fr); gap: 18px 18px; }
  /* stack holiday name above date so the nowrap date can't overflow narrow columns */
  .hol { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hol-date { font-size: 12.5px; }

  /* world teaser */
  .world-teaser { gap: var(--s-3); padding: var(--s-3) 14px; }
  .world-teaser .wt-body { min-width: 0; flex-basis: 100%; }

  /* leave planner */
  .lp-cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .lp-controls { gap: var(--s-2) var(--s-3); }
  /* let the buttons sit next to the input instead of being pushed right
     (margin-left:auto kept them right-aligned even after wrap) */
  .lp-actions { margin-left: 0; flex-wrap: wrap; }
  /* stack the three stats vertically: at 375px only 2 fit per row,
     and a half-filled row reads worse than a clean column */
  .lp-stats { flex-direction: column; gap: var(--s-3); }
  .bstat { max-width: none; gap: 14px; }
  .bstat-num { font-size: 38px; }

  /* canton ranking: hide the derived "effective per year" column */
  .rank-table { font-size: 13px; }
  .rank-table th,
  .rank-table td { padding-left: 6px; padding-right: 6px; }
  .rank-table th:nth-child(5),
  .rank-table td.rank-eff { display: none; }

  /* compare cantons */
  .cmp-chips {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: var(--s-1);
  }
  .cmp-table .cmp-hol { width: 150px; min-width: 150px; font-size: 13px; }
  .cmp-table th:not(.cmp-hol),
  .cmp-table td:not(.cmp-hol) { width: 48px; min-width: 48px; }

  /* export */
  .export-notes { grid-template-columns: 1fr; gap: 14px; }
  /* fit Years + selects + Select all + Clear on a single row at 375px:
     drop the gaps, shrink select + button padding, smaller font */
  .export-options { flex-wrap: nowrap; gap: 6px; align-items: center; }
  .export-options .opt-label { font-size: 11px; letter-spacing: 0.4px; }
  .export-options select { font-size: 13px; padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); }
  .export-options .opt-sep { font-size: 12px; }
  .export-actions { margin-left: 0; gap: 6px; flex-shrink: 0; }
  .export-actions .btn-secondary { font-size: 12px; padding: 5px 10px; }
  .canton-picker { grid-template-columns: repeat(2, 1fr); }

  /* world-comparison page (OECD ranking table) */
  .oecd-table { font-size: 13px; }
  .oecd-table th,
  .oecd-table td { padding-left: 10px; padding-right: 10px; }
  .oecd-table th.oecd-range,
  .oecd-table td.oecd-range { display: none; }
}

@media (max-width: 480px) {
  main { padding: var(--s-5) 14px; }
  .header-inner { padding: var(--s-3) var(--s-3); gap: var(--s-2) 10px; }
  h1 { font-size: 18px; }
  /* balance lines so the en-dash in "2026–2053" doesn't break mid-range */
  .subtitle { font-size: 12px; text-wrap: balance; }
  /* keep lang-switch in the top-right corner, even smaller */
  .lang-switch button { padding: 3px 6px; font-size: 10.5px; }
  .flag { width: 34px; height: 34px; }

  /* Very small screens: tighten paddings and font sizes on the
     already-pink-banner-restored widget (full revert lives in the 720px block). */
  .next-holiday { padding: 8px 12px; }
  .nh-header { padding: 0 0 3px 0; font-size: 10px; }
  .nh-row { padding: 0; gap: 6px; font-size: 12px; }
  .nh-badge { font-size: 11px; padding: 2px 6px; }
  .nh-away { font-size: 11px; padding: 2px var(--s-2); }
  .nh-name { white-space: normal; }

  /* tighten the gap between the last section and the footer */
  main > section.section:last-of-type { margin-bottom: 0px; }
  footer { margin: var(--s-2) auto var(--s-4); padding: 0 14px; }

  /* section 1 hero */
  .canton-area h2 { font-size: 20px; }
  .hero-num { font-size: 60px; }
  .stat-row { gap: 18px; }
  .stat-num { font-size: 26px; }

  /* chart: tighter */
  .chart { height: 170px; }
  .bar-label { font-size: 8px; margin-top: 3px; }

  /* year detail: single column on phones */
  .year-grid { column-count: 1; }
  .year-calendar { grid-template-columns: 1fr; }

  /* compare chips: slightly tighter on tiny screens */
  .cmp-chips { gap: 3px; }
  .cmp-chips button { font-size: 11px; padding: 3px 0; }

  /* compare table: shrink sticky col further */
  .cmp-table .cmp-hol { width: 128px; min-width: 128px; font-size: 12.5px; }
  .cmp-table { font-size: 13px; }

  /* canton picker: tighten further */
  .canton-picker { gap: 2px 10px; }
  .canton-check { font-size: 13px; padding: 5px var(--s-1); gap: 6px; }
}