@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/static/fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/static/fonts/rubik-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* The design rules live in docs/design.md. */
:root {
  --paper: #FBFCFE;
  --ink: #0F2554;
  --muted: #5C6B8C;
  --rule: #E2E7F1;
  --link: #0038B8;
  --caution: #8A5A00;
  --official: color-mix(in srgb, var(--link) 4%, var(--paper));

  --t-meta: 13px;
  --t-body: 15px;
  --t-lead: 19px;
  --t-h2: 24px;
  --t-h1: 44px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --section: 96px;
  --gutter: 40px;
  --row-more: 2.5rem;
  --majority: calc(61 / 120 * 100%);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (max-width: 1000px) {
  :root { --t-h1: 36px; }
}
@media (max-width: 680px) {
  :root { --t-h1: 30px; --section: 64px; --gutter: 16px; --row-more: 2rem; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.5 Rubik, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; background: var(--paper); }
h1, h2, h3, p, dl, dd, ol, ul, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; }
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.25; letter-spacing: -.01em; }
h3 { font-size: var(--t-body); }
b, strong { font-weight: 600; }
a {
  color: var(--link);
  text-decoration: underline 1px color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }
svg a { text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
main { padding-bottom: var(--section); }
.num { text-align: right; }
.meta { color: var(--muted); font-size: var(--t-meta); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -80px; z-index: 9; padding: var(--s2) var(--s3); background: var(--ink); color: var(--paper); }
.skip:focus { top: var(--s2); }
.links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* Sections */
#dashboard > section { margin-top: var(--section); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5); margin-bottom: var(--s4); }
.section-head p { flex: 1 1 20rem; color: var(--muted); font-size: var(--t-meta); }

/* Rows */
.rows { width: 100%; border-collapse: collapse; }
.rows th, .rows td { padding: var(--s3) 0; border-top: 1px solid var(--rule); font-weight: 400; text-align: left; vertical-align: baseline; }
.rows td, .rows th.num { text-align: right; }
.rows thead th, .head { color: var(--muted); font-size: var(--t-meta); }
.rows thead th { padding-top: 0; border-top: 0; }
.rows td + td, .rows th + th { padding-left: var(--s4); }
.party-row, .coalition-row, .vote-row { display: grid; gap: 0 var(--s4); padding-block: var(--s3); border-top: 1px solid var(--rule); }
.party-row.head, .coalition-row.head, .vote-row.head { padding-block: 0 var(--s2); border-top: 0; }

/* Disclosures */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--muted);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}
details[open] > summary::after { transform: rotate(180deg); }
details > summary:hover::after { background: var(--ink); }
.disclosure { border-block: 1px solid var(--rule); }
.disclosure > summary { padding-block: var(--s3); font-weight: 500; }
.disclosure > summary .meta { font-weight: 400; }
.disclosure[open] > :last-child { margin-bottom: var(--s4); }
.row-more { grid-column: 1 / -1; }
.row-more > details > summary { position: absolute; top: var(--s1); right: 0; justify-content: center; width: 40px; height: 40px; }
.row-panel { display: grid; gap: var(--s2); padding: var(--s3) 0 var(--s1); color: var(--muted); font-size: var(--t-meta); }
.row-panel :is(strong, b, th, td, h3) { color: var(--ink); }
.inline-list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }

/* Status lines */
.caution, .notice { padding-left: var(--s3); border-left: 2px solid var(--caution); color: var(--caution); font-size: var(--t-meta); }
.notice { border-color: var(--rule); color: var(--muted); }
.notice strong { color: var(--ink); }

.segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.segmented > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: var(--s1) var(--s3);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--t-meta);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.segmented > * + * { border-left: 1px solid var(--rule); }
.segmented > :hover { color: var(--ink); }
.segmented > [aria-pressed="true"], .segmented > [aria-current] { background: var(--ink); color: var(--paper); }
.segmented > :disabled { display: none; }
.segmented > .empty:not([aria-current]) { color: color-mix(in srgb, var(--muted) 60%, var(--paper)); }

/* Frame */
.demo-banner { padding-block: var(--s2); background: var(--ink); color: var(--paper); font-size: var(--t-meta); }
.demo-banner .wrap { display: block; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding-block: var(--s5) var(--s4); }
.brand { color: var(--ink); font-size: var(--t-h2); font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
/* Sits on the wordmark's baseline and stops at its cap height, like a letter. */
.brand svg { display: inline-block; width: 1.4em; height: .7em; margin-right: .25em; fill: currentColor; }
.edition { flex-grow: 1; color: var(--muted); font-size: var(--t-lead); }
.clock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.zone { color: var(--muted); font-size: var(--t-meta); }
.zone time { color: var(--ink); }

.views { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); border-bottom: 1px solid var(--rule); }
.views > a { margin-bottom: -1px; padding-block: var(--s2); border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--t-lead); font-weight: 500; text-decoration: none; }
.views > a:hover { color: var(--ink); }
.views > a[aria-current] { border-color: currentColor; color: var(--ink); }
.refresh { margin-left: auto; color: var(--muted); font-size: var(--t-meta); }
#refresh-status[data-error] { color: var(--caution); }
.stages { margin-top: var(--s4); max-width: 100%; }

/* Hero */
#dashboard > .hero {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  grid-template-areas: "chart head" "chart table";
  grid-template-rows: auto 1fr;
  gap: var(--s6) 72px;
  margin-top: var(--s7);
}
.hero-head { grid-area: head; display: grid; gap: var(--s3); align-content: start; }
.hero h1 { max-width: 15em; }
.latest { grid-area: table; align-self: start; max-width: 34rem; }
.latest caption { padding-bottom: var(--s1); text-align: left; }
.latest tbody th a { font-weight: 500; }
.stamp { display: block; color: var(--muted); font-size: var(--t-meta); }
.latest td { font-size: var(--t-lead); font-weight: 600; }
.latest .num { width: 4.5rem; }
#dashboard > .hero.waiting { grid-template-columns: minmax(0, 44rem); grid-template-areas: "head"; }
.lede { color: var(--muted); font-size: var(--t-lead); }

.main-donut { grid-area: chart; width: 100%; height: auto; overflow: visible; }
.main-donut path { stroke: var(--paper); stroke-width: 2; stroke-linejoin: round; }
.main-donut a:hover path { stroke: var(--ink); }
/* WebKit paints no outline on SVG links, and later slices cover a stroke, so focus also dims the other slices. */
.main-donut a:focus-visible { outline: none; }
.main-donut a:focus-visible path { stroke: var(--ink); stroke-width: 3; }
.main-donut:has(a:focus-visible) a:not(:focus-visible) path { opacity: .3; }
.slice-badge { fill: var(--paper); pointer-events: none; }
.slice-key { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.donut-value { fill: var(--ink); font-size: 58px; font-weight: 600; letter-spacing: -.03em; text-anchor: middle; }
.donut-party { fill: var(--muted); font-size: 17px; text-anchor: middle; }

/* Party lists: the donut's legend */
.party-row { position: relative; grid-template-columns: minmax(0, 1fr) 10rem 4.5rem 4.5rem var(--row-more); align-items: start; line-height: 24px; }
.with-range > .party-row { grid-template-columns: minmax(0, 1fr) 10rem 4.5rem 4.5rem 4.5rem var(--row-more); }
.party { display: grid; grid-template-columns: 24px minmax(0, 14rem) minmax(0, 1fr); gap: 0 var(--s4); }
.party strong { font-weight: 500; }
.about { color: var(--muted); font-size: var(--t-meta); }
.row-percent { display: block; }
.key {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 4px solid var(--party);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.seats { font-size: var(--t-lead); font-weight: 600; }
.range, .change.flat, .below .seats { color: var(--muted); }
/* One shared scale for every row; the track only shows behind a fill. */
.seat-bar { height: 4px; margin-top: 10px; }
.seat-bar:not(:empty), .vote-bar { background: var(--rule); }
.seat-bar span, .vote-bar span { display: block; height: 100%; }
.seat-bar span { background: var(--party); }
.party-row .row-panel { padding-left: 40px; }

/* Paths to government */
.coalition-row { position: relative; grid-template-columns: minmax(0, 1.5fr) minmax(6rem, 1fr) repeat(var(--sources), 4.5rem) var(--row-more); align-items: start; line-height: 24px; }
.coalition-row.head { align-items: end; }
.coalition-name { display: grid; }
.coalition-name strong { font-weight: 500; }
.members { display: flex; flex-wrap: wrap; gap: 0 var(--s3); color: var(--muted); font-size: var(--t-meta); }
.members span::before { content: ""; }
.members span::before, .swatch { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--party); }
.coalition-scale { position: relative; align-self: stretch; }
.coalition-track { position: relative; height: 24px; }
.coalition-scale span { position: absolute; bottom: 0; left: var(--majority); transform: translateX(-50%); }
.coalition-track::before { content: ""; position: absolute; inset: calc(50% - 2px) 0 auto; height: 4px; background: var(--rule); }
.coalition-track .majority { position: absolute; top: calc(50% - 10px); left: var(--majority); height: 20px; border-left: 1px solid var(--ink); }
.coalition-track .band { position: absolute; top: calc(50% - 2px); height: 4px; background: color-mix(in srgb, var(--ink) 35%, var(--paper)); }
.coalition-track .tick { position: absolute; top: 50%; width: 12px; height: 12px; border: 2px solid var(--paper); border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.total { color: var(--muted); font-size: var(--t-lead); }
.total.majority { color: var(--ink); font-weight: 600; }
.breakdown { max-width: 34rem; }

/* Charts */
.chart { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--rule); }
.chart .axis text { fill: var(--muted); }
.chart-tooltip { position: fixed; z-index: 10; max-width: 280px; padding: 6px 10px; background: var(--ink); color: var(--paper); font-size: var(--t-meta); pointer-events: none; }
.chart-tooltip[hidden] { display: none; }

/* Polymarket prices */
.markets .caution { margin-bottom: var(--s5); }
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) 56px; }
.market .chart { margin-block: var(--s3) var(--s4); }
.market-chart .axis text, .market-label { font-size: 14px; }
.market-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: var(--dash, none); stroke-linecap: round; stroke-linejoin: round; }
.market-hours rect { fill: transparent; }
.market-end { fill: var(--line); }
.market-end:focus-visible { outline: none; stroke: var(--link); stroke-width: 3; }
.market-label { fill: var(--ink); }
.market-label tspan { font-weight: 600; }
.market-chart .n1 { --line: var(--ink); }
.market-chart .n2 { --line: color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.market-chart .n3 { --line: var(--ink); --dash: 6 5; }
.market-chart .n4 { --line: color-mix(in srgb, var(--ink) 55%, var(--paper)); --dash: 6 5; }
.market-chart .n5 { --line: var(--muted); --dash: 0 5; }
.table-scroll { overflow-x: auto; }
.table-scroll .rows { font-size: var(--t-meta); white-space: nowrap; }

/* Official count: votes, not seats, so it sits on its own surface. */
#dashboard > .count { padding-block: 56px 64px; background: var(--official); box-shadow: 0 0 0 100vmax var(--official); clip-path: inset(0 -100vmax); }
.count .caution { margin-bottom: var(--s6); }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); align-items: end; }
.figures dt { color: var(--muted); font-size: var(--t-meta); }
.figures dd { font-size: var(--t-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.votes { margin-top: var(--s7); }
.vote-row { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 6rem 4rem; align-items: center; }
.vote-row strong { font-weight: 500; }
.vote-row:not(.head) .num:nth-child(3) { font-weight: 600; }
.vote-row .share { color: var(--muted); }
.vote-bar { height: 8px; }
.vote-bar span { background: var(--ink); }
.count-history { display: grid; gap: var(--s1); margin-top: 56px; }
.count-chart { max-width: 760px; margin-block: var(--s5); }
.count-chart .axis text { font-size: 11px; }
.count-path { fill: none; stroke: var(--ink); stroke-width: 2; }
.count-chart circle { fill: var(--ink); }

/* Sources */
.health, .sources .disclosure { max-width: 760px; }
.health > li { border-top: 1px solid var(--rule); }
.health summary { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 12px; gap: var(--s3); padding-block: var(--s3); }
.health summary strong { font-weight: 500; }
.health .row-panel { padding: 0 0 var(--s5) 20px; }
.dot { width: 8px; height: 8px; border: 1.5px solid var(--muted); border-radius: 50%; }
.dot.on { border-color: var(--ink); background: var(--ink); }
.dot.warn { border-color: var(--caution); background: var(--caution); }
.state { color: var(--muted); font-size: var(--t-meta); }
.sources .disclosure { margin-top: var(--s6); }
.pairs > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s4); padding-block: 2px; }
.pairs dt { color: var(--muted); }
.pairs dd { color: var(--ink); }
.method { padding-bottom: var(--s4); }
.method > div { grid-template-columns: 5rem minmax(0, 1fr); padding-block: var(--s1); }
.publication { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.publication h3 { font-size: var(--t-meta); }
.publication time { margin-left: var(--s2); color: var(--muted); font-weight: 400; }

@media (max-width: 1000px) {
  #dashboard > .hero { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--s6) 40px; }
  .market-grid { grid-template-columns: minmax(0, 600px); }
  .party { grid-template-columns: 24px minmax(0, 1fr); }
  .about { grid-column: 2; }
  .party-row { grid-template-columns: minmax(0, 1fr) 6rem 4.5rem 4.5rem var(--row-more); }
  .with-range > .party-row { grid-template-columns: minmax(0, 1fr) 6rem 4.5rem 4.5rem 4.5rem var(--row-more); }
  /* Each total carries its source name, so the header row is for screen readers only. */
  .coalition-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s2) var(--s4); }
  .coalition-row.head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .coalition-name { flex-basis: calc(100% - var(--row-more) - var(--s4)); }
  .coalition-track { flex-basis: 100%; height: 24px; }
  .total { display: flex; flex: 1 0 5rem; flex-direction: column; justify-content: flex-end; text-align: left; }
  .total::before { content: attr(data-source); display: block; color: var(--muted); font-size: var(--t-meta); font-weight: 400; line-height: 1.3; }
  .coalition-row > .row-more { flex-basis: 100%; }
  .breakdown :is(td, th) + :is(td, th) { padding-left: var(--s2); }
}
@media (max-width: 680px) {
  #dashboard > .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chart" "table"; margin-top: var(--s6); }
  .main-donut { width: min(100%, 320px); justify-self: center; }
  .slice-key { font-size: 15px; }
  .latest { max-width: none; }

  .party-row, .with-range > .party-row { grid-template-columns: minmax(0, 1fr) 3.25rem 3.25rem var(--row-more); gap: 0 var(--s2); }
  .party { grid-row: span 2; grid-template-columns: 20px minmax(0, 1fr); gap: 0 var(--s2); }
  .party strong { line-height: 1.35; padding-top: 2px; }
  .about { line-height: 1.4; }
  .key { width: 20px; height: 20px; margin-top: 2px; border-width: 3px; font-size: 11px; }
  .party-row > .range { grid-column: 2; grid-row: 2; font-size: var(--t-meta); }
  /* Hidden from sight only: the range cells below still need their column header. */
  .party-row.head > .range { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .party-row > .seat-bar { grid-column: 1 / 3; grid-row: 3; margin: 6px 0 0 28px; }
  .seat-bar:empty { display: none; }
  .party-row > .row-more { grid-row: 4; }
  .party-row .row-panel { padding-left: 28px; }


  .stages { display: flex; flex-direction: column; }
  .stages > a { justify-content: space-between; }
  .stages > * + * { border-left: 0; border-top: 1px solid var(--rule); }

  .chart .axis text { font-size: 20px; }
  .market-chart .axis text, .market-label { font-size: 20px; }
  .count-chart .axis text { font-size: 20px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vote-row { grid-template-columns: minmax(0, 1fr) 5.5rem 3.5rem; }
  .vote-row.head > :nth-child(2) { display: none; }
  .vote-bar { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s2); }
  .pairs > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* The chart scales with its column, so phone text grows in viewBox units to stay readable. */
@media (max-width: 420px) {
  .market-chart .axis text, .market-label { font-size: 24px; }
  .count-chart .axis text { font-size: 22px; }
}