/* k26polls — design tokens, from the Claude Design scheme
   "k26polls - Site (clickable)".

   The scheme refines the TECA palette rather than replacing it: teal #3191A2 survives as
   the single data accent, slate #536E7E becomes the hero band, and the ground cools from
   #F3EFEE to #EFEAE9. Two decisions are load-bearing and easy to undo by accident:

   1. NO border-radius anywhere. The scheme is hairline-ruled throughout; rounding a
      corner puts a dashboard back into a publication.
   2. Weights stop at 600 (one 700, for the wordmark). Hierarchy comes from size, colour
      and space, never from weight. */
:root{
  --ground:#EFEAE9;
  --surface:#FFFFFF;
  --surface-alt:#FAF8F7;

  --line:#CFC5C2;        /* structural rules — table heads, section edges */
  --line-soft:#E7E0DE;   /* column separators */
  --line-faint:#EFEAE9;  /* row separators, same value as the ground */

  --ink:#313131;
  --steel-900:#2E3F49;
  --steel-700:#3A4C57;
  --steel-600:#414F57;
  --steel-500:#5A666D;      /* 4.95:1 on ground */

  /* The scheme used two greys — #7C8A92 and #9AA5AB — to separate secondary from tertiary
     text. Measured on the ground they are 2.98:1 and 2.11:1, and every caption on the page
     is set in them: column sub-labels, the count line, the validator's dates, the strip
     captions. Both fail AA at those sizes, and darkening them far enough to pass collapses
     them onto the same value.

     So the two-level grey does not survive, and hierarchy moves to size and weight, which
     is what the brief asked for in the first place. One accessible text grey; the lighter
     value is kept for NON-TEXT only — the hairline ring on the info affordance and
     decorative marks — where 1.4.3 does not apply and 1.4.11 (3:1) governs. */
  --muted:#606C73;          /* 4.53:1 on ground — all secondary and caption TEXT */
  --mark:#9AA5AB;           /* decorative marks and hairlines. NEVER text. */

  --teal:#3191A2;        /* fills, marks, chart primary */
  --teal-text:#23707D;   /* links and inline accents — AA on the ground */
  --teal-dark:#185662;   /* hover */
  --teal-tint:#E4F0F2;

  --rose-text:#8A5A52;   /* findings and threshold states — AA on rose tint */
  --rose-mid:#B98E85;
  --rose:#D8BDB8;
  --rose-tint:#F7EEEC;

  --slate:#536E7E;       /* hero band */
  --slate-text:#5F727E;
  --on-slate:#E5ECEF;      /* 4.51:1 on slate */
  --on-slate-dim:#E6ECEF;  /* 4.52:1 on slate */

  --font:"Heebo","Arial Hebrew",system-ui,sans-serif;
  --shell:1200px;
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:16px;line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 30px}
/* The 30px gutter is a desktop measure. On a 360px phone — the width of every Pixel and
   every recent Galaxy, and the width a 375px viewport falls to once a classic scrollbar
   appears — it spends 60 of 360 pixels on margin. Measured, that is what pushed the tab
   strip from three rows to four and the matrix from 313px of window to 300px. */
@media (max-width:560px){
  .shell{padding-inline:16px}
}

a{color:var(--teal-text);text-underline-offset:3px}
a:hover{color:var(--teal-dark)}
:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:600;line-height:1.3;color:var(--steel-700)}
p{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

.skip-link{position:absolute;inset-inline-start:-9999px;top:8px;z-index:200;
  background:var(--slate);color:#fff;padding:10px 18px;text-decoration:none}
.skip-link:focus{inset-inline-start:8px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- masthead ------------------------------------------------------------------- */
.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.masthead .shell{display:flex;justify-content:space-between;align-items:center;
  gap:26px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:38px;width:auto;display:block}
.brand .who{line-height:1.2}
.brand .name{font-size:15px;font-weight:700;color:var(--steel-900);letter-spacing:-.01em}
.brand .role{font-size:11.5px;color:var(--muted)}
.rule-v{width:1px;height:32px;background:#DDD5D3;margin-inline:5px}
.brand .archive{font-size:14px;font-weight:500;color:var(--steel-700)}

nav.tabs{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
nav.tabs button{font:inherit;font-size:13px;font-weight:500;padding:7px 12px;
  background:none;border:1px solid transparent;color:var(--steel-500);cursor:pointer}
nav.tabs button:hover{color:var(--steel-900);background:var(--surface-alt)}
nav.tabs button[aria-current="page"]{background:var(--steel-700);color:#fff}
nav.tabs .rule-v{height:20px}

/* The tab labels are long enough now that the nav cannot share a line with the brand at
   any realistic width — «סימולטור הסכמי עודפים וקואליציה» alone is most of it. Rather
   than let it wrap raggedly under the logo, the masthead is two deliberate rows with a
   hairline between them, and the nav fills its own. */
/* One line at desktop. The masthead used to carry «ארכיון סקרי הבחירות לכנסת ה־26»
   beside the byline, which repeated the document title and the hero heading directly
   below it and cost about 200px — the exact width the five tab labels needed. Removing
   the repetition is what buys the single row; the nav is not shrunk to fit.
   Below 900px there is no width for both, and the nav takes its own row. */
.masthead .shell{flex-wrap:wrap}
@media (max-width:900px){
  .masthead nav.tabs{flex-basis:100%;margin-top:10px;padding-top:10px;
    border-top:1px solid var(--line-faint);justify-content:flex-start}
}
/* The EN link used to carry these two declarations as an inline `style` attribute, which
   no media query can reach — the strip below could shrink every tab except that one. */
.masthead nav.tabs a{font-size:13px;padding:7px 12px}
@media (min-width:1280px){
  .masthead nav.tabs{justify-content:flex-start}
}

/* Two deliberate rows is the design; four is not. Measured at 13px/7px-12px the five tabs
   plus the EN link need 706px of track, and greedy wrapping put that on FOUR rows in a
   300px nav (a 360px phone) and three in a 315px one. At 12.5px/6px-9px the track is 648px
   and the strip settles at three rows from 320px up — the widest single label,
   «סימולטור הסכמי עודפים וקואליציה», is 192px and still fits one line of a 288px nav.
   No toggle, no drawer, no hamburger: the same six controls, packed. */
@media (max-width:560px){
  .masthead .shell{gap:14px;padding-top:9px;padding-bottom:9px}
  .masthead nav.tabs{gap:4px;margin-top:8px;padding-top:8px}
  .masthead nav.tabs button,
  .masthead nav.tabs a{font-size:12.5px;padding:6px 9px}
  .brand{gap:10px}
  .brand img{height:32px}
  .rule-v{margin-inline:2px}
}

/* ---- hero band ------------------------------------------------------------------ */
.hero{background:var(--slate);color:#F3EFEE}
.hero .shell{padding-top:34px;padding-bottom:38px;display:grid;gap:46px;align-items:start;
  grid-template-columns:minmax(0,1fr) auto}
.hero .thesis{margin:0;font-size:29px;line-height:1.45;font-weight:500;color:#fff}
/* Measure. `max-width:70ch` on the paragraph alone wrapped it to six short lines against a
   wide band and read as a narrow ragged column with empty slate beside it, so the cap was
   removed — and the line ran away: measured at 1280px the Hebrew stand is 940px and 126
   characters a line, and on en.html, whose hero has no countdown column to take the other
   half, 1140px and 161. Both are roughly twice what the eye returns from without losing
   its place.
   The cap is back, but on the hero's TEXT COLUMN rather than on the paragraph, so the
   thesis and the stand share one edge and the band beside them reads as the space between
   two blocks instead of as a stranded paragraph. 68ch of the column's own 16px is 611px,
   which is WIDER than the 70ch-of-15px (590px) that was judged too narrow, and measured it
   gives 82 Hebrew characters a line and 86 English. 86 is still over the 80 that 1.4.8
   asks for; taking it there would mean a column narrower than the one already rejected,
   and the remaining six characters are not worth re-opening that. */
/* Wider, twice asked for. 68ch put the hero back at 611px — narrower than the 70ch that
   had already been rejected — because the cap was set for reading comfort rather than for
   the band it sits in. 96ch is about 860px of the roughly 900px the text column gets
   beside the countdown, so the paragraph fills its column instead of stranding a third of
   it, and still stops well short of the 126 characters a line an uncapped hero produced. */
.hero .shell > :first-child{max-width:96ch}
.hero .stand{margin:14px 0 0;max-width:none;font-size:15px;line-height:1.75;
  color:var(--on-slate)}
.hero .countdown{text-align:start;border-inline-start:1px solid rgba(243,239,238,.3);
  padding-inline-start:26px}
.hero .countdown .label{font-size:12px;color:var(--on-slate-dim)}
.hero .countdown .value{font-size:52px;font-weight:600;line-height:1.05;margin-top:2px}
@media (max-width:820px){
  .hero .shell{grid-template-columns:1fr;gap:24px}
  .hero .thesis{font-size:23px}
  .hero .countdown{border-inline-start:0;padding-inline-start:0;
    border-top:1px solid rgba(243,239,238,.3);padding-top:16px}
  .hero .countdown .value{font-size:40px}
}
/* On a phone the masthead and the hero together were 795 of 812 pixels: the reader arrived
   at a screen with no data on it at all. The lede still has to be readable, so the copy is
   untouched and the type barely moves — the space around it does. */
@media (max-width:560px){
  .hero .shell{padding-top:22px;padding-bottom:26px;gap:18px}
  .hero .thesis{font-size:21px}
  .hero .stand{margin-top:11px;line-height:1.7}
  .hero .countdown{padding-top:13px}
  .hero .countdown .value{font-size:34px}
}

main{padding:26px 0 0}
.view-head{margin:0 0 4px;font-size:19px}
/* A view's lede runs the width of the content it introduces. 80ch at 13.5px is about
   640px inside a 1140px shell, so every view opened with a narrow ragged column and a
   third of the row empty beside it. The cap stays generous rather than absent — a lede
   is prose, and prose at the full 1140px is 150 characters a line. */
.view-sub{margin:0 0 18px;font-size:13.5px;color:var(--muted);max-width:104ch}
.count-line{font-size:12px;color:var(--muted);margin-bottom:14px}

.panel{background:var(--surface);border:1px solid var(--line)}
.panel-pad{padding:18px 20px}
.seg{display:inline-flex;border:1px solid var(--line);background:var(--surface)}
.seg button{font:inherit;font-size:12.5px;padding:6px 13px;background:none;border:0;
  color:var(--steel-500);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--steel-700);color:#fff}

/* ---- the matrix ------------------------------------------------------------------ */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line)}
table.matrix{width:100%;border-collapse:collapse}
table.matrix th,table.matrix td{border-bottom:1px solid var(--line-faint)}
table.matrix thead th{padding:10px 12px;font-size:12px;font-weight:600;
  color:var(--steel-700);border-bottom:1px solid var(--line);
  border-inline-start:1px solid var(--line-soft);text-align:start;vertical-align:bottom}
table.matrix thead th:first-child{border-inline-start:0;padding-inline:20px}
table.matrix thead th .sub{display:block;font-weight:400;color:var(--muted);
  font-size:11px;margin-top:2px}
table.matrix tbody th{text-align:start;padding:10px 20px;font-size:15.5px;font-weight:500;
  color:var(--ink)}
table.matrix td{padding:10px 12px;font-size:16px;text-align:end;
  border-inline-start:1px solid var(--line-faint)}
table.matrix tbody tr:hover td,table.matrix tbody tr:hover th{background:var(--surface-alt)}

/* The matrix is 905px wide with the institutes currently filing, and .table-wrap gives it
   313px of window on a phone. Scrolled to the far column the list name has left the screen
   and the figures are anonymous. The name column pins to the inline-start edge instead, so
   a percentage is never read without the row it belongs to.
   The separator is a pseudo-element, not a border: with border-collapse the cell's own
   border belongs to the collapsed grid and scrolls away underneath the pinned cell. It
   takes the colour of the rule it stands in for in each section — --line-soft between the
   column heads, --line-faint between the cells — so at a width where nothing scrolls the
   boundary looks exactly as it did, give or take the half pixel the collapsed border
   contributes on the far side of it. No new colour and no radius enters here. */
table.matrix thead th:first-child,
table.matrix tbody th{position:sticky;inset-inline-start:0;background:var(--surface);z-index:2}
table.matrix thead th:first-child{z-index:3}
table.matrix thead th:first-child::after,
table.matrix tbody th::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;
  width:1px;background:var(--line-faint)}
table.matrix thead th:first-child::after{background:var(--line-soft)}

.info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border:1px solid var(--mark);border-radius:50%;font-size:9.5px;font-weight:400;
  color:var(--slate-text);cursor:help;flex:none;background:none;position:relative}
/* The ring is 14px, which is below the 24px pointer minimum — on a phone it is a target
   the thumb misses. cards.css grew the hit area for the one affordance in the card head;
   the seven in the matrix's own column heads were left at 14px. The ring does not move:
   only the hit area grows, to 26px. */
.info::after{content:"";position:absolute;inset:-6px}
.th-flex{display:flex;align-items:center;gap:5px}

/* three kinds of blank, three treatments — never let these converge */
.blank-nofile{background:var(--rose-tint);vertical-align:top;padding:12px;text-align:start}
.blank-nofile .head{font-size:12px;font-weight:600;color:var(--rose-text)}
.blank-nofile p{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--rose-text)}
.blank-stale{color:var(--muted);font-size:12px}
.blank-absent{color:var(--muted);font-size:14px}

/* dispersion strip */
td.spread{width:250px;min-width:250px;padding:10px 20px 10px 14px}
.strip{position:relative;height:24px}
.strip .axis{position:absolute;inset-block:12px auto;inset-inline:0;height:1px;
  background:var(--line-soft)}
.strip .thresh{position:absolute;top:0;bottom:6px;width:1px;background:var(--slate);
  opacity:.55}
.strip .band{position:absolute;top:11px;height:3px;background:var(--rose)}
.strip .dot{position:absolute;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--teal);margin-inline-start:-4.5px;border:1.5px solid var(--surface)}
.strip.straddles .dot{background:var(--slate)}
.strip .cap{position:absolute;bottom:-3px;font-size:9.5px;color:var(--muted)}

/* ---- validator ------------------------------------------------------------------- */
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.vcard{background:var(--surface);border:1px solid var(--line)}
.vhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line-faint)}
.vhead .who{font-size:15px;font-weight:600;color:var(--steel-900)}
.vhead .when{font-size:11.5px;color:var(--muted);font-weight:400}
.verdict{font-size:11.5px;font-weight:600;padding:3px 9px;white-space:nowrap}
.verdict.ok{background:var(--teal-tint);color:var(--teal-dark)}
.verdict.moved{background:var(--rose-tint);color:var(--rose-text)}
.verdict.na{background:var(--surface-alt);color:var(--muted);border:1px solid var(--line-soft)}
table.vtable{width:100%;border-collapse:collapse;font-size:12.5px}
table.vtable th{text-align:start;font-weight:500;color:var(--muted);font-size:11px;
  padding:8px 16px 4px}
table.vtable td{padding:4px 16px;border-bottom:1px solid var(--line-faint)}
table.vtable td.n{text-align:end;width:64px}
table.vtable td.d{text-align:end;width:64px;font-weight:600;color:var(--steel-700)}
table.vtable tr.moved td.d{color:var(--rose-text)}
.vnote{margin:0;padding:11px 16px;font-size:12px;line-height:1.65;color:var(--muted)}
.vnote strong{color:var(--steel-700);font-weight:600}

/* ---- archive & institutes -------------------------------------------------------- */
table.ledger{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface)}
table.ledger th{font-size:11.5px;color:var(--muted);font-weight:500;text-align:start;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-alt);
  vertical-align:bottom}
table.ledger td{padding:12px 14px;border-bottom:1px solid var(--line-faint);
  vertical-align:top}
.pill{display:inline-block;font-size:11.5px;padding:2px 9px;white-space:nowrap;
  background:var(--surface-alt);color:var(--steel-500);border:1px solid var(--line-soft)}
.pill.ok{background:var(--teal-tint);color:var(--teal-dark);border-color:transparent}
.pill.warn{background:var(--rose-tint);color:var(--rose-text);border-color:transparent}
.finding{font-size:12px;color:var(--rose-text);background:var(--rose-tint);
  border-inline-start:3px solid var(--rose);padding:9px 12px;margin-top:7px;max-width:66ch;
  line-height:1.6}
.finding .cite{display:block;margin-top:5px;font-size:11px;color:var(--muted)}

.inst-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.inst .kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding:5px 0;border-bottom:1px solid var(--line-faint)}
.inst .kv:last-child{border-bottom:0}
.inst .kv dt{color:var(--muted)}
.inst .kv dd{margin:0;color:var(--steel-700);text-align:end}

.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px;
  background:var(--surface);border:1px solid var(--line)}
.footnotes{margin-top:16px;font-size:12px;color:var(--muted);line-height:1.7}

footer{background:var(--slate);color:#fff;margin-top:44px;padding:26px 0 32px;font-size:13.5px}
footer a{color:#fff}
footer nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:10px}

/* an institute whose latest survey is ageing — still shown, visibly qualified */
table.matrix thead th.col-ageing{opacity:.72}
table.matrix thead th.col-ageing .sub{color:var(--rose-text)}

/* A column that files no percentage marks itself and stops. It used to carry the whole
   compliance observation, which made the widest thing in a table of numbers the one cell
   holding none — and pushed the spread chart away from the figures it describes. The
   observation now sits in the footnotes under the table. */
.blank-nofile{max-width:16ch;vertical-align:top;text-align:center}
.blank-nofile .head{text-align:center}
.blank-nofile .blank-why{margin:6px auto 0;font-size:11.5px;line-height:1.55;
  color:var(--muted);text-align:center;max-width:22ch;text-wrap:balance}

/* Two absences, two marks. A dash means the filing named the list and reported no
   percentage for it; a middle dot means the list was never on that questionnaire. Drawing
   both as "—" told the reader a value was missing when the question was never asked. */
/* --mark is 2.11:1 and teca.css reserves it for hairlines. A '·' is TEXT, so it takes
   a text token. The two absences are told apart by the glyph and the tooltip, not by
   colour, so nothing is lost by making this one legible. */
.blank-unasked{color:var(--muted);font-size:15px;cursor:help}
.blank-absent{cursor:help}

/* A cell whose filing offered a different list on this row — a joint list where others
   offered a component, or a merger where others offered one partner. The figure is real;
   it is not measuring the same object, and that is said where the number is read rather
   than left to a reader to infer from a gap. */
.cell-differs{background:var(--surface-alt);cursor:help}
.cell-differs-mark{margin-inline-start:4px;font-size:11px;color:var(--rose-text);
  vertical-align:super}

/* Footnotes, grouped. Six paragraphs in a row is a place the eye slides off; these answer
   three different questions and each group says which. */
.footnotes .fn-group{margin-block-start:18px}
.footnotes .fn-group:first-child{margin-block-start:0}
.footnotes .fn-title{margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--steel-700)}
.footnotes .fn-group p{margin:0 0 7px}

/* ---- the dispersion axis ------------------------------------------------------------
   Drawn once above the strips. Its box must match `td.spread` exactly — same width, same
   inline padding — because the labels are positioned with the same `pos()` the dots are,
   and a different box would put "0%" over a value that is not zero. */
th.spread-head{width:250px;min-width:250px;padding:10px 20px 10px 14px}

.scale{position:relative;height:20px;margin-top:7px}
.scale .axis{position:absolute;inset-block:6px auto;inset-inline:0;height:1px;
  background:var(--line-soft)}
.scale .tick{position:absolute;top:3px;height:4px;width:1px;background:var(--mark)}
.scale .tick-thresh{background:var(--slate);opacity:.55;top:1px;height:6px}
.scale .lab{position:absolute;top:9px;font-size:9.5px;font-weight:400;
  color:var(--muted);white-space:nowrap;line-height:1}
/* Anchored by their own edges rather than centred: a centred "0%" would overhang the
   column and a centred "20%" would be clipped by the table edge. */
.scale .lab-start{inset-inline-start:0}
.scale .lab-end{inset-inline-end:0}
/* Anchored AT the tick and reading away from it, not centred on it. Centred, its box
   spanned 238-290px while "0%" sat at 289-301px — a one-pixel collision that any change
   of font size or zoom turns into overlapping text. Anchoring means the two labels grow
   in opposite directions and cannot meet. */
.scale .lab-thresh{margin-inline-start:4px;color:var(--slate-text)}

/* Currency of the archive, under the countdown. Deliberately quiet: the countdown is the
   figure the eye should land on, and this answers a question the reader only asks second.
   --on-slate-dim is the AA-on-slate token; the hero band is not the page ground. */
.countdown .freshness{margin-top:10px;padding-top:9px;font-size:11.5px;line-height:1.55;
  color:var(--on-slate-dim);border-top:1px solid rgba(243,239,238,.22);max-width:30ch}