/* ============================================================================
   Serbia 2026 — overrides and additions on top of the shared styles.css.
   Taken from the Israel dashboard's il.css (itself the Berlin / Mecklenburg-
   Vorpommern de.css, with the Sweden balance bar): list chips, comparability
   flags, the bloc table, paths to a majority, the threshold watch and the
   result banner. New here: the minority-list mark and the polling stations.
   ========================================================================= */

body{ --accent:#3E8FE0; }
/* A blue glow across the top of the page, fading out. It is on the page's own
   background, so it scrolls away with the page instead of staying on screen. */
body{ background: linear-gradient(180deg, rgba(46,128,232,.30) 0%, rgba(46,128,232,.11) 45%, rgba(46,128,232,0) 100%)
  0 0 / 100% 240px no-repeat, var(--plane); }
/* no sticky header to clear when a link jumps to a section */
html{ scroll-padding-top: 16px; }
::selection{ background:#2AAEE8; color:#04070c; }

.pagefoot code, .panel-foot code, .d-note code, .banner code{ overflow-wrap:anywhere; }

/* ── Hebrew inside an English page ────────────────────────────────────── */
/* Ballot letters as a small chip; isolated (bdi) so they read right to left. */
.lt{
  /* one fixed width (in em, so it follows the font size): every name after a
     chip starts at the same point whether the list has one letter or three */
  display:inline-block; width:2.9em; box-sizing:border-box; padding:0 2px; margin-right:3px; border-radius:3px;
  white-space:nowrap; overflow:hidden;
  font-size:11px; font-weight:700; line-height:16px; text-align:center; vertical-align:middle;
  background: var(--surface-3); color: var(--ink-2); border:1px solid var(--hair);
  unicode-bidi:isolate; font-family: "Segoe UI", Arial, var(--font);
}
.rowmain .lt{ font-size:11.5px; }
/* the national table has no colour swatch: the row's own bar carries the colour */
.tbl-parties .rowmain{ grid-template-columns: 1fr auto; }
/* The list table has three columns - list and share (the votes under it),
   change, seats - where the shared styles.css sizes five: the seats move from
   the fifth to the third, and stay on a phone. The change column is only as
   wide as its figure, so it sits right beside the share. */
.tbl-parties th:nth-child(2), .tbl-parties td:nth-child(2){ width:1%; }
.tbl-parties td:nth-child(3){ font-size:16px; font-weight:650; color: var(--ink); }
@media (max-width:760px){
  .tbl-parties th:nth-child(3), .tbl-parties td:nth-child(3){ display:table-cell; }
}
/* the share with the votes on a line under it, both from the same left edge,
   in a box of one width so every row's figures start in line */
.rowfig{ display:flex; flex-direction:column; align-items:flex-start; width:var(--rowfig-w, 72px); }
/* rows with room above and below the two lines */
.tbl-parties td{ height:46px; }
.rowfig .rowpct{ line-height:1; }
.rowvotes{ margin-top:2px; font-size:11px; line-height:11px; font-weight:500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* before the count: the 2022 share, faded */
.rowpct.is-prev{ color: var(--ink-3); font-weight:600; }
.he{ unicode-bidi:isolate; color: var(--ink-3); font-weight:400; }
.t-he{ font-weight:400; color: var(--ink-3); margin-left:4px; }
/* Hover rows carry their share as the row's own background, as the detail panel
   does, so a sweep across the map compares lengths rather than reading numbers.
   The block needs a width of its own — the tooltip is sized to its text — or
   the bars would each be scaled to their own row. */
.wkr-tip{ --tip-w:196px; }
/* The hover card is one element for the life of the map, moved by a transform
   (app.js initTip). left/top are fixed at the container origin so the transform
   is the whole position, and its own layer keeps the map from repainting under
   it as it travels. */
.il-tip{ left:0; top:0; z-index:650; margin:0; will-change:transform; }
.wkr-tip .t-rows{ min-width: var(--tip-w); margin:4px 0 1px; }
/* A long name must not stretch the tooltip past the width the rows set: the
   Hebrew name gives way first (shrink 9 against 1) and is cut with an ellipsis,
   and only a Latin name long enough on its own is cut as well. */
.wkr-tip .t-name{ display:flex; align-items:center; gap:5px; max-width: var(--tip-w); }
.wkr-tip .t-en{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* rtl on the clipped box, so the ellipsis lands at the end of the Hebrew - the
   left - and the cut takes the end of the name rather than its first letters. */
.wkr-tip .t-he{ flex:0 9 auto; min-width:0; direction:rtl; overflow:hidden; text-overflow:ellipsis; margin-left:0; }
.wkr-tip .t-row{
  position:relative; display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:center; gap:8px; padding:3px 6px; margin-bottom:2px; color: var(--ink);
}
.wkr-tip .t-bar{ position:absolute; inset:0; overflow:hidden; border-radius:3px; }
.wkr-tip .t-bar > i{ display:block; height:100%; opacity:.26; border-radius:0 3px 3px 0; }
.wkr-tip .t-lbl{ position:relative; overflow:hidden; text-overflow:ellipsis; }
.wkr-tip .t-pct{ position:relative; font-weight:650; }
.d-hename{ font-size:13px; margin:-2px 0 6px; color: var(--ink-2); }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Israel is tall and narrow: the map wants the larger share of the width, so
   the results and seats column takes 45% and the map 55%. */
@media (min-width:1200px){
  .hero{ grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); max-height:1340px; }
}
@media (min-width:1200px) and (max-height:900px){
  .tbl-parties td{ height:40px; }
  .rowpct{ font-size:18px; }
  .rowfig{ --rowfig-w:62px; }
  .rowmain .pname{ font-size:13.5px; }
  .rowmain .swatch{ height:18px; }
  #natFoot{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; flex:none;
                       padding-bottom:0; border-bottom:7px solid transparent; }
  #natFoot{ -webkit-line-clamp:1; }
}
.panel-map > .panel-head{ flex-wrap:wrap; }
/* The national card's header keeps one height whichever table is under it: the
   long list table squeezed it to its 44 px minimum, the short bloc table did
   not. So it does not shrink, and its padding makes 44 px with the switch. */
.hero-results > .panel-head{ flex-shrink:0; padding-top:9px; padding-bottom:9px; }
/* the national card's body: the table, and a column beside it - how far the
   count has got at the top, turnout at the bottom */
.nat-body{ display:flex; flex:1 1 auto; min-height:0; }
.nat-body > .tablewrap{ flex:1 1 auto; min-width:0; scrollbar-gutter:stable; }   /* the long list table scrolls, the bloc table does not: both keep the gutter, so the columns do not move between them */
.nat-turnout{ flex:0 0 212px; display:flex; flex-direction:column; gap:14px;
  padding:6px 14px 14px; border-left:1px solid var(--hair-soft); overflow:hidden; }
/* the count, at the top of the column itself rather than in a box of its
   own: the label, then over the bar the localities at its start and the
   share counted at its end. A hairline across the column below. */
.nt-count{ position:relative; margin:0 -14px; padding:0 14px 10px; border-bottom:1px solid var(--hair-soft); }
.nt-lbl{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-3); }
/* the "i" centred on the label rather than standing on its baseline, so the
   line is no taller than the button */
.nt-count > .nt-lbl{ display:flex; align-items:center; gap:4px; }
.nt-count-at{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:3px; }
.nt-count-sub{ font-size:11px; line-height:1; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space:nowrap; }
.nt-count-v{ font-weight:680; font-size:18px; line-height:1; letter-spacing:-.02em; color:#fff;
  font-variant-numeric: tabular-nums; white-space:nowrap; }
.nt-count .progress{ height:4px; margin:4px 0 0; }
/* turnout keeps to the bottom of the column, whatever is left over above it */
.nt-turn{ margin-top:auto; }
/* Turnout as the bigelectiondatabase side panel draws it: a thick ring with
   nothing in it; who voted and who did not, each with a tall key, its share in
   bold and its count; the valid and invalid votes under a hairline. Here the
   keys go under the ring - the column is too narrow for them beside it. */
.nt-turn{ display:flex; flex-direction:column; gap:10px; }
.nt-count, .nt-turn{ flex-shrink:0; }
.nt-cap{ display:block; }   /* inline: should a caption wrap, its "i" stays after its last word */
.nt-cap .info{ margin-left:3px; vertical-align:-3px; }
.nt-ring{ align-self:center; }
.nt-donut{ display:block; width:128px; height:128px; }
.nt-donut circle{ fill:none; stroke:#3b4453; stroke-width:10; }   /* r 14 (natTurnoutHtml), as there */
.nt-donut .donut-v{ stroke:#2AAEE8; }
.nt-keys{ display:flex; flex-direction:column; gap:8px; }
.nt-key{ display:flex; align-items:stretch; gap:9px; }
.nt-key > i{ flex:none; width:7px; min-height:32px; border-radius:3px; background:#3b4453; }
.nt-key > i.v{ background:#2AAEE8; }
.nt-key-l{ font-size:12px; font-weight:600; color: var(--ink); }
.nt-key-v{ font-size:12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space:nowrap; }
.nt-key-v b{ font-size:15px; font-weight:700; color: var(--ink); }
.nt-rows{ display:flex; flex-direction:column; gap:5px; margin:0; padding-top:8px; border-top:1px solid var(--hair-soft); }
.nt-rows > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12px; color: var(--ink-2); }
.nt-rows dd{ margin:0; font-weight:650; color: var(--ink); font-variant-numeric: tabular-nums; white-space:nowrap; }
.nt-rows dd small{ font-size:11px; font-weight:400; color: var(--ink-3); }
/* before the count, 2022's figures, faded */
.nt-turn.is-prev .nt-ring{ opacity:.5; }
.nt-turn.is-prev .nt-key-v b, .nt-turn.is-prev .nt-rows dd{ color: var(--ink-3); }
/* Beside the table the column is as tall as the card, which the window
   decides. The ring takes the height the column has to spare, 72 to 128 px
   (the rest of the column needs 249 px); only where even 72 px do not fit
   does it go beside the keys, as in bigelectiondatabase and on a phone. (Not
   on a phone: there the column's height is its own.) */
@media (min-width:701px){
  .nat-turnout{ container: natside / size; }
}
@container natside (min-height:321px){
  .nt-donut{ width:clamp(72px, calc(100cqh - 249px), 128px); height:clamp(72px, calc(100cqh - 249px), 128px); }
}
@container natside (max-height:320.98px){
  .nt-turn{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:10px; align-items:center; }
  .nt-cap, .nt-rows{ grid-column:1 / -1; }
  .nt-donut{ width:72px; height:72px; }
}
/* Beside the turnout the figures take only the width they need and the names
   the rest. (The bloc table is a list table too - index.html.) */
.nat-body .tbl-parties .c-main{ width:auto; }
.nat-body .tbl th.num, .nat-body .tbl td.num{ width:1%; }
/* the change column as wide in both tables - as its widest flag, "≠ 2022" -
   so the figures do not shift when the switch goes from lists to blocs */
.nat-body .tbl-parties th:nth-child(2), .nat-body .tbl-parties td:nth-child(2){ width:69px; }   /* border-box: with its padding */
@media (max-width:1199px){
  .nat-body > .tablewrap{ max-height:430px; }
}
@media (max-width:760px){
  .nat-body .tbl th.num, .nat-body .tbl td.num{ padding-left:6px; padding-right:6px; }
}
/* a phone: turnout under the table, the ring beside the keys */
@media (max-width:700px){
  .nat-body{ flex-direction:column; }
  .nat-turnout{ flex:0 0 auto; border-left:0; border-top:1px solid var(--hair-soft); padding:12px 14px; }
  .nt-turn{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:10px; align-items:center; }
  .nt-cap, .nt-rows{ grid-column:1 / -1; }
  .nt-donut{ width:72px; height:72px; }
}
/* The map card is a column in a box of fixed height. When the detail panel
   opens, its content is far taller than the card, and the shrink was shared
   out over every row - the header too, which styles.css lets go down to 44 px,
   so its second row of controls slid under the search box. Only the map stage
   gives way now; the detail panel scrolls inside it. */
.panel-map > .panel-head, .panel-map > .searchrow, .panel-map > .legend{ flex-shrink:0; }
@media (max-width:1199px){
  /* one column, no fixed height: keep a long detail panel from stretching the map */
  .panel-map.has-selection .map-side{ max-height:640px; }
}
#levelSeg{ flex-wrap:wrap; }
#levelSeg button small{ color: var(--ink-3); font-size:10px; margin-left:3px; }
#levelSeg button.on small{ color:#8fb6dd; }
/* The map toggle is a control of its own, set apart from the level choice. */
.geomseg{ margin-right:auto; }
.geomseg button{ padding:6px 12px; font-weight:600; }
.geomseg button.on{ background:#24304a; color:#d6e4ff; box-shadow: inset 0 -2px 0 var(--accent); }
.map-controls{ flex-wrap:wrap; row-gap:8px; }
#mapParty{ max-width:220px; }
#map{ position:relative; }
.map-hint{
  position:absolute; z-index:700; left:50%; bottom:28px; transform:translateX(-50%);
  padding:7px 14px; border-radius:100px; font-size:12.5px; white-space:nowrap; pointer-events:none;
  background: rgba(13,17,24,.95); border:1px solid var(--hair); color: var(--ink);
  opacity:0; transition: opacity .2s ease;
}
.map-hint.show{ opacity:1; }
.map-loading{
  position:absolute; z-index:700; left:50%; top:14px; transform:translateX(-50%);
  padding:6px 14px; border-radius:100px; font-size:12px;
  background: rgba(13,17,24,.95); border:1px solid var(--hair); color: var(--ink-2);
}

/* no header above the page any more: the toast floats near the top */
.toast-rail{ top:12px; }
.banner[data-kind="file"]{ border-color:#2a3a55; background:#0d1522; color:#bcd0ea; }

.note-flag{
  display:inline-block; padding:1px 7px; margin-right:5px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background: var(--surface-3); color: var(--ink-2); border:1px solid var(--hair);
}
.note-flag.ok{ background:#0e2419; color:#8ff0bb; border-color:#1c5c3a; }
.searchrow{ flex-wrap:wrap; }
.level-note{ margin:0; flex:1 1 320px; align-self:center; min-width:0; font-size:11px; line-height:1.5; color: var(--ink-3); }
.tag, .note-flag, .state-pill{ border-radius:4px; }

.mini-chip{
  display:inline-flex; align-items:center; gap:4px; margin-right:4px;
  font-size:10.5px; font-weight:650; color: var(--ink-2); white-space:nowrap;
}
.mini-chip::before{ content:""; width:7px; height:7px; border-radius:2px; background: var(--pc); }

/* the threshold line on the national table */
.bar-th4{ position:absolute; top:3px; bottom:3px; width:0; border-left:1px solid rgba(255,255,255,.05); }

/* Every list-coloured fill carries a hairline ring, so a dark colour still has
   a shape on the dark panels. */
.swatch, .rowbar, .rk-bar, .cmp-bars i, .mini-chip::before, .rt-chip::before,
.d-seat .swatch, .legend-ramp i, .bal i, .th-bar i, .pb-track i
{ box-shadow: inset 0 0 0 1px rgba(242,245,249,.16); }
.seat-dot{ stroke: rgba(242,245,249,.18); stroke-width:.5; }
/* one list's seats lit, the rest gone dark, while it is under the pointer
   (hlSeats); its row marked and the others faded */
.hemi .seat-dot{ transition: fill .4s ease, opacity .15s ease; }
.seat-body.is-hl .seat-dot:not(.on){ opacity:.16; }
.seat-body.is-hl .hemi-maj{ opacity:.35; }
.tbl-seats tbody tr{ transition: opacity .15s ease; }
.seat-body.is-hl .tbl-seats tbody tr:not(.on){ opacity:.4; }
.tbl-seats tbody tr.on{ background: var(--surface-2); }
/* the label in the middle, inside the inner ring (renderSeats sets its sides) */
.hemi-cap{ text-align:center; line-height:1.25; overflow-wrap:anywhere; }
/* a small chamber: the list's name under it while it is lit */
.hemi-note.is-name{ font-weight:650; color: var(--ink); }
.chart-legend .swatch, .legend-item .swatch{ box-shadow: inset 0 0 0 1px rgba(242,245,249,.20); }

/* ── flags: why there is or is not a change figure ────────────────────── */
.mflag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 5px; border-radius:4px; cursor:help; white-space:nowrap;
  background: var(--surface-3); color: var(--ink-3); border:1px solid var(--hair);
}
.mflag.sm{ font-size:8.5px; padding:0 3px; letter-spacing:0; }
.cflag{
  display:inline-block; margin-left:3px; padding:0 4px; border-radius:3px; cursor:help;
  font-size:10.5px; font-weight:700; color:#9fd0ff; background:#14243a; border:1px solid #27466d;
}

/* ── seats ────────────────────────────────────────────────────────────── */
/* The card is a grid: the hemicycle and the table side by side in the first
   row, the line under the hemicycle in a second row of its own - so the table
   ends where the seats end. The table takes the width its four columns need,
   the hemicycle all the rest. The row is as tall as the hemicycle, the table
   scrolling inside it (a height of 0 adds nothing to the row; the minimum of
   100% then fills it), or --seat-row where that is taller, the hemicycle at
   its foot. The hemicycle is as wide as its column: centred without a width,
   its svg fell back to the browser's 300 px. */
.seat-body{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(var(--seat-row, 0px), auto) auto;
  column-gap:6px; row-gap:6px; }
.hemi-col{ display:contents; }
.hemi{ grid-column:1; grid-row:1; align-self:end; width:100%; max-width:none; margin-bottom:calc(-100% * 1.5 / 420); }   /* the svg pads its foot by 1.5 of 420 units: the seats themselves end where the row does */
.hemi-maj{ fill:none; stroke: rgba(242,245,249,.85); stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; }
.hemi-note{ grid-column:1; grid-row:2; margin:0; font-size:12px; line-height:1.3; color: var(--ink-2); text-align:center; font-variant-numeric: tabular-nums; }
.seat-table{ grid-column:2; grid-row:1; height:0; min-height:100%; max-height:none; }
.tbl-seats th, .tbl-seats td{ padding-left:6px; padding-right:6px; }
/* The line under the headings drawn by the sticky heading itself, as in the
   areas table: at a fractional height (27.7 px) on a scaled screen Chrome lost
   the collapsed border under some headings or all of them, and a collapsed
   border stays behind when the table scrolls. 16 px lines make it 28 px. */
.tbl-seats th{ line-height:16px; border-bottom:0; box-shadow: inset 0 -1px 0 var(--hair); }
.tbl-seats td.num{ font-variant-numeric: tabular-nums; }
.tbl-seats tbody td{ height: var(--seat-tr, auto); }   /* fitSeatRows: whole rows fill the height */
.tbl .empty{ color: var(--ink-3); text-align:center; padding:18px 8px; }
.tbl-seats .lt{ font-size:10px; line-height:14px; }


.chartwrap{ height:330px; flex:0 0 auto; }

/* ── the area table ───────────────────────────────────────────────────── */
.tbl-rt th{ padding:8px 12px; }
.tbl-rt td{ padding:7px 12px; vertical-align:middle; }
.rt-area{ min-width:160px; max-width:250px; }
/* one line, so every row is the same height; width:0 keeps the description
   from widening the column, min-width:100% then gives it the column's width */
.rt-area .rt-sub{ width:0; min-width:100%; overflow:hidden; text-overflow:ellipsis; }
/* an empty second line keeps its height, so every figure sits at the same level */
#areaTable .rt-sub{ min-height:1.3em; }
#areaTable tbody tr{ height:51px; }
#areaTable th.num, #areaTable td.num{ padding-left:8px; padding-right:8px; }
/* the sort arrow goes before a right-aligned heading, so the heading ends
   where its figures do; the slot is kept when unsorted so nothing shifts */
#areaTable th.num[data-sort]::after{ content:none; }
#areaTable th.num[data-sort]::before{ content:""; display:inline-block; width:10px; text-align:left; }
#areaTable th.num[data-sort][data-dir="asc"]::before{ content:"▲"; color:#2AAEE8; }
#areaTable th.num[data-sort][data-dir="desc"]::before{ content:"▼"; color:#2AAEE8; }
/* the three blocs and turnout, one width - just wide enough for "▼ Opposition".
   min-width as well, or a tight table shrinks each back to its own heading. */
#areaTable .rt-val{ width:94px; min-width:94px; }
/* The line under the headings is a shadow drawn by the sticky heading itself:
   a collapsed border stays behind when the table scrolls, and at the top Chrome
   painted the fixed-width headings over it. A whole-pixel line height keeps
   every heading on the same device pixel, so the line does not step. */
#areaTable th{ line-height:16px; border-bottom:0; box-shadow: inset 0 -1px 0 var(--hair); }
#areaTable .rt-cnt{ min-width:64px; }
#areaTable .cnt-bar{ width:52px; }
.rt-name{ display:block; font-size:13px; font-weight:560; color: var(--ink); }
.rt-sub{ display:block; font-size:10.5px; line-height:1.3; color: var(--ink-3); margin-top:2px; font-variant-numeric: tabular-nums; white-space:nowrap; }
.rt-main{ display:block; font-size:14px; font-weight:650; line-height:1.2; font-variant-numeric: tabular-nums; }
.rt-main.is-empty{ color: var(--ink-3); font-weight:500; font-size:12.5px; }
.rt-chip{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650; line-height:1.2; }
.rt-chip::before{ content:""; width:10px; height:15px; border-radius:2px; background: var(--pc); }
.rt-chip.is-prev{ color: var(--ink-3); font-weight:500; }
.rt-chip.is-prev::before{ opacity:.5; }
.rt-cnt{ min-width:90px; }
.cnt-bar{ display:inline-block; vertical-align:middle; width:64px; height:3px; border-radius:2px; background: var(--surface-3); overflow:hidden; }
.cnt-bar i{ display:block; height:100%; background: linear-gradient(90deg,#2AAEE8,#57d0ff); }
tr.sel > td{ background: rgba(42,174,232,.10); }
tr.sel > td:first-child{ box-shadow: inset 3px 0 0 #2AAEE8; }
/* every bloc's share as one stacked bar, 50% dashed */
.rt-bal{ width:15%; min-width:104px; }
.bal{ position:relative; display:flex; height:10px; border-radius:3px; background: var(--surface-3); overflow:hidden; }
.bal i{ display:block; height:100%; }
.bal b{ position:absolute; top:0; bottom:0; left:50%; border-left:1.5px dashed rgba(242,245,249,.85); }
.bal.is-prev{ opacity:.35; }

/* ── ranking list ─────────────────────────────────────────────────────── */
.ranklist li{ position:relative; grid-template-columns: 22px 1fr auto; }
.ranklist li.sel{ background: rgba(42,174,232,.10); }
.rk-n{ color: var(--ink-3); font-size:11px; text-align:right; font-variant-numeric: tabular-nums; z-index:1; }
.rk-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; z-index:1; }
.rk-v{ font-weight:650; font-variant-numeric: tabular-nums; text-align:right; z-index:1; }
/* a faint wash under the text, as in the results table: square at its base,
   rounded at its end, and a little short of the row so the bars stand apart */
.rk-bar{ position:absolute; left:0; top:2px; bottom:2px; opacity:.22; border-radius:0 3px 3px 0; }
.ranklist li:hover .rk-bar, .ranklist li:focus-visible .rk-bar{ opacity:.34; }
.ranklist .rempty{ color: var(--ink-3); padding:14px 8px; cursor:default; display:block; }
.rank-controls select{ max-width:170px; }

/* ── detail panel ─────────────────────────────────────────────────────── */
.d-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.d-kind{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); }
.d-parent{ font-size:11.5px; color: var(--ink-3); margin-bottom:9px; }
.d-link{ color:#8fc7f0; cursor:pointer; text-decoration:none; }
.d-link:hover{ text-decoration:underline; }
.d-stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap:6px; margin-bottom:11px; }
.d-stat strong small{ font-size:11px; color: var(--ink-3); font-weight:500; }
/* turnout: the doughnut, the figure, and who voted and who did not, under each other */
.d-turnout{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-bottom:6px; padding:7px 9px;
  background: var(--surface-2); border:1px solid var(--hair-soft); border-radius: var(--radius-sm); }
.d-donut{ flex:0 0 auto; width:42px; height:42px; }
.d-donut circle{ fill:none; stroke:#3b4453; stroke-width:7; }
.d-donut .donut-v{ stroke:#2AAEE8; }
.d-tstat > span{ display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-3); }
.d-tstat strong{ font-size:15px; font-weight:600; font-variant-numeric: tabular-nums; }
.d-tv{ margin-left:auto; font-size:11px; line-height:1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space:nowrap; }
.d-tv b{ color: var(--ink); font-weight:650; }
.d-tv i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; background:#3b4453; }
.d-tv i.v{ background:#2AAEE8; }
.d-h{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); margin:13px 0 6px; font-weight:600; }
.d-h small{ text-transform:none; letter-spacing:0; color: var(--ink-3); font-weight:400; margin-left:5px; }
.d-empty{ color: var(--ink-3); font-size:12px; margin:8px 0; }
.d-note{ font-size:11px; line-height:1.5; color: var(--ink-2); background: var(--surface-2); border:1px solid var(--hair-soft); border-radius: var(--radius-sm); padding:7px 9px; margin:0 0 10px; }
.d-note.quiet{ background:transparent; border:0; padding:0; color: var(--ink-3); margin:6px 0 0; }
.d-row{ grid-template-columns: 1fr 56px 54px 56px; }
.d-row .rname .lt{ font-size:9.5px; line-height:13px; }
.d-blocs{ display:flex; flex-direction:column; gap:2px; }
.d-bloc{ position:relative; display:grid; grid-template-columns: 1fr 56px 54px 56px; align-items:center; gap:7px; padding:4px 7px; font-size:12px; font-variant-numeric: tabular-nums; }
.d-bloc .rname{ position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-bloc .rpct{ position:relative; text-align:right; font-weight:650; font-size:14px; letter-spacing:-.01em; }
.d-bloc .rdelta{ position:relative; text-align:right; font-size:11.5px; }
.d-bloc .rvotes{ position:relative; text-align:right; color: var(--ink-2); font-size:11px; }

.state-pill{ display:inline-block; padding:1px 7px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.state-pill.none{ background: var(--surface-3); color: var(--ink-3); border:1px solid var(--hair); }
.state-pill.part{ background:#241a08; color:#f4c76a; border:1px solid #5b4413; }
.state-pill.done{ background:#0e2419; color:#8ff0bb; border:1px solid #1c5c3a; }
.state-pill.hist{ background:#161c2b; color:#9fb4e0; border:1px solid #2b3856; }

.legend-note{ font-size:10.5px; color: var(--ink-3); }
.legend-n{ font-weight:650; color: var(--ink); font-variant-numeric: tabular-nums; margin-left:1px; }
/* the vote-share steps: 30 px each, the share at each boundary under it
   (renderLegend places them by the same 30 px) */
.legend-steps{ display:flex; flex-direction:column; gap:3px; padding:0 8px; }
.legend-steps .legend-ramp i{ width:30px; cursor:default; }
.legend-marks{ position:relative; height:12px; }
.legend-marks b{ position:absolute; top:0; transform:translateX(-50%); font-size:10px; font-weight:500; line-height:12px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; white-space:nowrap; }
.h-vote{
  margin-left:8px; padding:1px 6px; border-radius:4px; vertical-align:1px;
  font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:none;
  color: var(--ink-3); background: var(--surface-3); border:1px solid var(--hair);
}

/* ── comparison chart ─────────────────────────────────────────────────── */
.cmp-bars{ gap:3px; }
.cmp-bars i{ width:46%; max-width:30px; }
.cmp-th{ position:absolute; left:0; right:0; height:0; border-top:1px dashed rgba(242,245,249,.42); pointer-events:none; z-index:1; }
.cmp-lbl{ font-size:10.5px; }

/* ── blocs ────────────────────────────────────────────────────────────── */
/* the blocs-and-comparison section is two columns that each stack their
   cards, so a short card never leaves a gap beside or below it */
.grid.cols{ align-items:start; }
.col{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.paths{ padding:10px 14px 4px; display:flex; flex-direction:column; gap:7px; }
.path{ display:grid; grid-template-columns: minmax(0,1.3fr) 34px minmax(0,1fr) 96px; align-items:center; gap:10px;
  padding:6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border:1px solid var(--hair-soft); }
.path.ok{ border-color:#1c5c3a; background:#0e1f17; }
.path.is-prev{ opacity:.6; }
.path-name{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-width:0; }
.path-name .plus{ color: var(--ink-3); margin:0 3px 0 -1px; font-size:11px; }
.path-n b{ font-size:17px; font-variant-numeric: tabular-nums; }
.path-bar{ position:relative; }
.pb-track{ display:flex; height:9px; border-radius:2px; background: var(--surface-3); overflow:hidden; gap:1px; }
.pb-track i{ display:block; height:100%; }
.pb-mid{ position:absolute; top:-3px; height:15px; width:0; border-left:1.5px dashed rgba(242,245,249,.85); }
.path-v{ font-size:11px; color: var(--ink-3); text-align:right; white-space:nowrap; }
.path-v b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.path.ok .path-v{ color:#8ff0bb; }

.agreements{ padding:4px 14px 10px; }
.agreements .d-h{ margin-top:8px; }
.ag-row{ display:flex; align-items:center; gap:4px; padding:3px 0; font-size:12px; flex-wrap:wrap; }
.ag-arrow{ color: var(--ink-3); margin:0 4px 0 0; }
.ag-st{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); }
.ag-st.ok{ color:#8ff0bb; }
.ag-effect{ margin:6px 0 0; font-size:11.5px; color: var(--ink-2); }
.ag-effect.quiet{ color: var(--ink-3); font-size:11px; }

/* ── threshold watch ──────────────────────────────────────────────────── */
.thwatch{ padding:8px 14px; display:flex; flex-direction:column; gap:3px; overflow:auto; flex:1 1 auto; }
.th-row{ display:grid; grid-template-columns: minmax(0,1.25fr) 54px minmax(0,1fr) 128px; align-items:center; gap:9px;
  padding:5px 6px; border-radius: var(--radius-sm); font-size:12.5px; font-variant-numeric: tabular-nums; }
.th-row[data-party]{ cursor:pointer; }
.th-row[data-party]:hover{ background: var(--surface-2); }
.th-name{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.th-pct{ text-align:right; font-weight:650; }
.th-row:not(.above) .th-pct{ color:#f2938f; }
.th-bar{ position:relative; height:10px; border-radius:2px; background: var(--surface-3); }
.th-bar i{ display:block; height:100%; border-radius:2px 0 0 2px; opacity:.9; }
.th-bar b{ position:absolute; top:-3px; bottom:-3px; width:0; border-left:1.5px dashed rgba(242,245,249,.85); }
.th-gap{ text-align:right; font-size:11.5px; color: var(--ink-3); white-space:nowrap; }
.th-gap b{ color: var(--ink); }
.th-row.above .th-gap b{ color:#8ff0bb; }
.th-row:not(.above) .th-gap b{ color:#f2938f; }

/* ── diagnostics ──────────────────────────────────────────────────────── */
.diag-row{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color: var(--ink-2); line-height:1.5; }
.diag-row .diag-dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:0 0 auto; background: var(--ink-4); }
.diag-row.ok .diag-dot{ background:#4cc98a; }
.diag-row.warn .diag-dot{ background: var(--warning); }
.diag-row.info .diag-dot{ background:#5b8db8; }
.diag-h{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-3); margin:16px 0 8px; }
.tbl .yes{ color:#8ff0bb; }
.tbl .no{ color: var(--ink-3); }
.tbl .swatch{ margin-right:6px; display:inline-block; vertical-align:-3px; }
.diag-log .log-e{ color:#f2938f; }
.diag-log .log-err{ color:#f2938f; }
.diag-log .log-warn{ color:#f4c76a; }
.diag-log .log-new{ color:#8ff0bb; }

/* ── fit the top section to the window on wide screens ────────────────── */
@media (min-width:1200px){
  .hero{
    height: var(--hero-h, calc(100vh - 150px));
    min-height: 640px;
    grid-template-rows: minmax(160px, 1fr) min-content;
  }
  .hero-results{ min-height:0; }
  /* a small hemicycle still leaves the table some rows */
  .seat-body{ --seat-row: clamp(150px, calc(21vh - 22px), 228px); }   /* less the line under the hemicycle, 22 px, so the card is no taller than when the line sat beside the table */
  .hero .panel-foot{ padding:7px 14px; }
}
/* one column: the card is the page's width, and a hemicycle as wide as all
   the rest would be 300 px tall - it stops at 460 and the table takes the rest */
@media (max-width:1199px){
  .seat-body{ grid-template-columns:minmax(0,460px) minmax(0,1fr); }
}
/* a phone: the hemicycle, its line, then the whole table under them */
@media (max-width:760px){
  .seat-body{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; }
  .seat-table{ grid-column:1; grid-row:3; height:auto; min-height:0; }
}
@media (max-width:1400px){
  .span7,.span5{ grid-column: span 12; }
}
@media (max-width:1000px){
  .panel-head{ flex-wrap:wrap; row-gap:8px; }
  .right-tools{ flex-wrap:wrap; row-gap:8px; min-width:0; }
  .right-tools .mini-search{ flex:1 1 130px; width:auto; min-width:0; }
  .right-tools .ctl select{ max-width:150px; }
  .geomseg{ margin-right:0; }
}
@media (max-width:760px){
  .level-note{ flex-basis:100%; }
  .d-row, .d-bloc{ grid-template-columns: 1fr 52px 50px 54px; }
  .th-row{ grid-template-columns: minmax(0,1fr) 50px 104px; }
  .th-bar{ display:none; }
  .path{ grid-template-columns: minmax(0,1fr) 30px 86px; }
  .path-bar{ display:none; }
}

/* ── result banner ────────────────────────────────────────────────────── */
/* After the TV graphics, 120 px tall: each leader's photo beside the bar with the
   name, bloc and votes outside it, the seats as one bar with the Arab parties labelled above their
   part and the majority below its middle, the live status above its left end.
   Barlow Semi Condensed (SIL Open Font License, fonts/OFL.txt) for the seat
   counts. Narrower screens lose the photos; on a phone the names go above the
   bar. */
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/barlow-semi-condensed-600.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/barlow-semi-condensed-700.woff2') format('woff2'); }
:root{ --font-num: 'Barlow Semi Condensed', var(--font); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* No box of its own: it sits on the page, under the blue at the top of it.
   It takes the middle 90% of the page, 5% to 95% - more where that would be
   under 1100 px and leave the bar too short. Both sides are the same width
   (--rb-who fits the longer name), so the bar is in the very centre. */
.rb{ --rb-who:212px; display:grid; align-items:center; align-content:center; gap:6px 20px; height:120px; padding:0;
  width: clamp(min(100%, 1100px), 90%, 100%); margin:0 auto 14px;
  grid-template-columns: var(--rb-who) auto minmax(0,1fr) auto var(--rb-who); grid-template-areas: "wl pl mid pr wr"; }
#rbPhotoL{ grid-area:pl; } #rbWhoL{ grid-area:wl; } .rb-mid{ grid-area:mid; } #rbWhoR{ grid-area:wr; } #rbPhotoR{ grid-area:pr; }
/* the ring is a border, inside the circle, so the circle's outer edge lines up
   with the panels below and nothing of it reaches past the page's margin */
.rb-photo{ display:block; width:92px; height:92px; border-radius:50%; overflow:hidden; background:#22252b;
  border:3px solid var(--bc); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.rb-photo img{ display:block; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
/* the names outside the photos, each set towards its own photo */
.rb-who{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; min-width:0; white-space:nowrap; }
.rb-who-r{ align-items:flex-start; text-align:left; }
.rb-who > span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.rb-name{ font-size:21px; line-height:25px; font-weight:700; color:#fff; }
.rb-bloc{ font-size:15px; line-height:19px; font-weight:700; }
.rb-v{ font-size:13.5px; line-height:19px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rb-mid{ position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
/* above the bar: the live status at its left, the Arab parties over their own
   part of it (both placed against .rb-mid, the width of the bar) */
.rb-above{ height:20px; font-size:13.5px; line-height:20px; white-space:nowrap; }
.rb-tags{ position:absolute; left:0; right:0; top:0; height:20px; }
.rb-tag{ position:absolute; top:0; transform:translateX(-50%); }
.rb-tag b{ font-weight:700; }
.rb-tag-v{ color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rb-pill{ position:absolute; left:0; top:0; z-index:1; gap:6px; height:20px; padding:0 9px 0 8px;
  font-size:10.5px; line-height:18px; letter-spacing:.05em; }
.rb-pill .dot{ width:7px; height:7px; }
/* the rehearsal in red, so it cannot pass for the live count */
.live-pill[data-state="sim"]{ color:#ffb4b4; border-color:#8a2c2c; background:#4a1a1a; }
.live-pill[data-state="sim"] .dot{ background:#ff5c5c; animation: pulse 2s ease-in-out infinite; }
.rb-barwrap{ position:relative; }
.rb-bar{ display:flex; height:48px; background:#2a2d3c; overflow:hidden; }
.rb-bar.is-prev{ opacity:.45; }
.rb-seg{ display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; }
.rb-seg + .rb-seg{ box-shadow: inset 1px 0 0 rgba(0,0,0,.4); }
.rb-seg.is-first{ justify-content:flex-start; padding-left:12px; }
.rb-seg.is-last{ justify-content:flex-end; padding-right:12px; }
.rb-seg span{ font-family: var(--font-num); font-weight:700; font-size:38px; line-height:1; color:#fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
/* the middle of the bar, run down to the majority label centred under it */
.rb-line{ position:absolute; left:50%; top:-3px; bottom:-6px; border-left:2px solid rgba(255,255,255,.92); transform:translateX(-50%); }
/* below the bar: what is left to count, the majority under the middle, the
   link - each held to its column, so hiding one on a phone moves no other */
.rb-below{ display:grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px;
  height:18px; font-size:13.5px; line-height:18px; color: var(--ink-2); white-space:nowrap; }
.rb-togo{ grid-column:1; overflow:hidden; text-overflow:ellipsis; }
.rb-maj{ grid-column:2; color:#f4f2fb; font-weight:700; }
.rb-more{ grid-column:3; justify-self:end; color:#fff; font-weight:700; text-decoration:none; }
.rb-more:hover{ text-decoration:underline; }
@media (max-width:1100px){
  .rb{ gap:6px 16px; --rb-who:182px; }
  .rb-photo{ width:72px; height:72px; }
  .rb-name{ font-size:18px; line-height:22px; }
  .rb-bloc{ font-size:14px; }
  .rb-v{ font-size:12.5px; }
  .rb-bar{ height:44px; }
  .rb-seg span{ font-size:34px; }
}
@media (max-width:900px){
  .rb{ grid-template-columns: var(--rb-who) minmax(0,1fr) var(--rb-who); grid-template-areas: "wl mid wr"; }
  .rb-photo-slot{ display:none; }
  .rb-tag-n{ display:none; }   /* the bar is too short for the count beside the status */
}
/* a phone: the names above the bar, the votes left out */
@media (max-width:640px){
  .rb{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "wl wr" "mid mid"; gap:4px 10px; }
  .rb-who{ align-items:flex-start; text-align:left; }       /* above the bar, at its two ends */
  .rb-who-r{ align-items:flex-end; text-align:right; }
  .rb-name{ font-size:15px; line-height:18px; }
  .rb-bloc{ font-size:12px; line-height:15px; }
  .rb-v, .rb-togo, .rb-more, .rb-tag-v{ display:none; }
  .rb-mid{ gap:3px; }
  .rb-above, .rb-tags{ height:16px; line-height:16px; font-size:12px; }
  .rb-pill{ height:16px; font-size:9.5px; line-height:14px; }
  .rb-bar{ height:34px; }
  .rb-seg span{ font-size:26px; }
  .rb-below{ height:15px; line-height:15px; font-size:12px; }
}

/* ── Serbia ───────────────────────────────────────────────────────────── */
/* ballot numbers are one or two digits: a narrower chip than Hebrew letters */
.lt{ width:2.1em; }
/* a national-minority list */
.minflag{ display:inline-block; margin-left:5px; padding:0 4px; border-radius:3px; font-size:9.5px; font-weight:700;
  line-height:14px; vertical-align:1px; color:#bfe8cc; background:#123322; border:1px solid #1f5a39; }
/* a municipality's polling stations, in the detail panel */
.st-load{ margin:2px 0 10px; }
.st-wrap{ max-height:380px; overflow:auto; margin-bottom:6px; border:1px solid var(--hair-soft); border-radius: var(--radius-sm); }
.st-tbl{ width:100%; }
.st-tbl th, .st-tbl td{ padding:4px 6px; font-size:11.5px; white-space:nowrap; }
.st-tbl th{ position:sticky; top:0; background: var(--surface-2); z-index:1; }
.st-tbl .st-name{ max-width:150px; }
.st-tbl .st-name > span{ display:inline-block; max-width:112px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.st-tbl .rt-chip{ font-size:11.5px; gap:4px; }
.st-tbl .rt-chip::before{ width:8px; height:11px; }
.st-tbl .st-none{ color: var(--ink-3); }
.st-doc{ font-size:10px; color:#8fc7f0; text-decoration:none; border:1px solid var(--hair); border-radius:3px; padding:0 3px; }
.st-doc:hover{ background: var(--surface-3); }
/* the rehearsal's strip stays where it is: there is no fixed header to sit under */
.is-simulated .banner[data-kind="sim"]{ position:static; }

/* ── the estimate of the final result ─────────────────────────────────── */
.est-tag{ background:#2b220c; color:#f3c969; border:1px solid #6b5216; }
.est-body{ display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,1.7fr); gap:6px 26px; padding:8px 16px 10px; align-items:start; }
@media (max-width:980px){ .est-body{ grid-template-columns:1fr; } }
.est-tbl td, .est-tbl th{ padding:6px 8px; }
.est-tbl td.num{ font-variant-numeric: tabular-nums; white-space:nowrap; }
.est-tbl .est-pt{ font-size:15px; font-weight:680; color: var(--ink); }
.est-tbl .est-rg{ display:block; font-size:10.5px; color: var(--ink-3); }
.est-tbl .est-cnt{ color: var(--ink-3); }
.est-barcell{ width:34%; min-width:140px; }
.est-bar{ position:relative; height:12px; border-radius:3px; background: var(--surface-3); }
.est-bar i{ position:absolute; top:0; bottom:0; border-radius:3px; opacity:.38; }
.est-bar b{ position:absolute; top:-3px; bottom:-3px; width:3px; margin-left:-1px; border-radius:1px; background:#fff; }
.est-bar u{ position:absolute; top:-3px; bottom:-3px; width:0; border-left:1px dashed rgba(242,245,249,.55); }
.est-side h4{ margin-top:4px; }
.est-maj{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:4px 10px; align-items:center; margin:0 0 12px; }
.est-maj .p{ font-weight:700; font-variant-numeric: tabular-nums; }
.est-maj .bar{ grid-column:1 / -1; height:4px; border-radius:2px; background: var(--surface-3); overflow:hidden; margin-bottom:4px; }
.est-maj .bar i{ display:block; height:100%; }
.est-facts{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:6px; }
.est-warn{ font-size:11px; line-height:1.5; color:#f3c969; margin:6px 0 0; }

/* the needle */
.nd{ margin:0 0 6px; }
.nd-dial{ max-width:400px; margin:0 auto; }
.nd-svg{ display:block; width:100%; height:auto; overflow:visible; }
.nd-tick{ stroke: var(--ink-3); stroke-width:1; }
.nd-lbl{ fill: var(--ink-3); font-size:7.5px; font-weight:650; letter-spacing:.06em; text-anchor:middle; dominant-baseline:middle; }
.nd-hand{ fill:#f2f5f9; stroke:#05070a; stroke-width:.8; }
.nd-needle{ transform-origin:160px 152px; transform-box:view-box; }
/* the needle's ranges: 98% lighter, 90% over it */
.nd-r98{ fill: rgba(242,245,249,.13); }
.nd-r90{ fill: rgba(242,245,249,.26); }
.nd-key{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 6px; margin:6px 0 0; font-size:11px; color: var(--ink-3); }
.nd-key i{ display:inline-block; width:12px; height:9px; border-radius:2px; }
.nd-key i.k90{ background: rgba(242,245,249,.42); }
.nd-key i.k98{ background: rgba(242,245,249,.2); margin-left:6px; }
.nd-keyv{ flex-basis:100%; text-align:center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nd-hub{ fill:#f2f5f9; stroke:#05070a; stroke-width:1.2; }
.nd-sides{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:8px; margin-top:4px; }
.nd-side{ display:flex; flex-direction:column; gap:1px; }
.nd-side.nd-r{ text-align:right; align-items:flex-end; }
.nd-p{ font-size:30px; font-weight:780; line-height:1; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.nd-name{ font-size:12px; font-weight:650; color: var(--ink); }
.nd-seats{ font-size:11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nd-seats small{ color: var(--ink-3); }
.nd-mid{ display:flex; flex-direction:column; align-items:center; padding-top:6px; }
.nd-none{ font-size:16px; font-weight:700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nd-mid .nd-name{ color: var(--ink-3); font-weight:500; }
.nd-cap{ margin:8px 0 0; text-align:center; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); }
.nd-head{ margin:0 0 2px; text-align:center; font-size:12px; color: var(--ink-3); }
.nd-head b{ color: var(--ink); font-weight:700; font-size:14px; }
.nd-edge{ stroke:#05070a; stroke-width:2; }