/* k26polls — view: "לפי מכון".
 *
 * Tokens only, from assets/teca.css. Two rules from that file hold here too: no
 * border-radius anywhere (the scheme is hairline-ruled), and weights stop at 600.
 *
 * Colour carries no information on its own. Every tinted line also states its fact in
 * words, so the tint groups and the words discriminate. Text is --muted or darker
 * throughout; --mark appears only on hairlines and one chip border, never on text.
 */

.insts{margin:0 0 8px}

.insts-eyebrow{margin:0;font-size:12.5px;color:var(--muted)}
.insts-h1{margin:4px 0 0;font-size:26px;font-weight:500;color:var(--steel-900);line-height:1.3}
.insts-lede{margin:12px 0 0;max-width:80ch;font-size:15px;line-height:1.75;color:var(--muted)}
.insts .count-line{margin:14px 0 0}

/* ---- the grid --------------------------------------------------------------------- */
/* auto-fit, never a fixed column count: the corpus grows through the campaign, and a
   fixed grid would either strand a card or overflow the shell. At 375px the shell's
   gutter leaves 343px — 315px before that gutter dropped to 16px below 560px — so
   minmax(280px,1fr) resolves to a single column either way. */
.insts-grid{
  list-style:none;margin:16px 0 0;padding:0;
  /* Two columns, not four. Each card is a data sheet — ten or more labelled rows whose
     values are full sentences — and at minmax(280px) the shell fitted four of them, so a
     10.5rem label column left about 150px for every value and each one wrapped to four or
     five words a line. 460px resolves to two cards of roughly 560px at the shell's width,
     which leaves the value column about 370px. Still auto-fit, so a phone gets one. */
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
}
.insts-item{min-width:0;display:flex}
.insts-card{min-width:0;width:100%;padding:18px 20px;display:flex;flex-direction:column}
.insts-card.is-unread{background:var(--surface-alt)}

/* ---- card head -------------------------------------------------------------------- */
.insts-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-width:0}
.insts-name{margin:0;font-size:17px;font-weight:600;color:var(--steel-900);
  overflow-wrap:anywhere;min-width:0}
.insts-asfiled{font-size:11.5px;color:var(--muted);border:1px solid var(--mark);
  padding:1px 7px;line-height:1.5;overflow-wrap:anywhere;min-width:0}
.insts-outlets{margin:2px 0 0;flex:1 1 100%;font-size:12.5px;color:var(--muted);
  overflow-wrap:anywhere;min-width:0}
.insts-outlets-lead{color:var(--muted)}
.insts-outlet{color:var(--steel-600)}
.insts-outlet.is-ascollected{border-bottom:1px dotted var(--mark)}
.insts-outlet-mark{color:var(--muted);font-size:11.5px}
.insts-tally{margin:2px 0 0;flex:1 1 100%;font-size:12px;color:var(--muted)}

/* ---- the disclosure list ----------------------------------------------------------- */
.insts-dl{margin:14px 0 0;padding:0;border-top:1px solid var(--line-faint)}
.kvrow{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:4px 14px;
  padding:9px 0;border-bottom:1px solid var(--line-faint);min-width:0}
.kvrow dt{font-size:12.5px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.kvrow dd{margin:0;font-size:13px;line-height:1.65;color:var(--steel-600);
  min-width:0;overflow-wrap:anywhere}

.kvline{display:block}
.kvline + .kvline{margin-top:6px}
.kvwhen{display:inline;color:var(--muted);font-size:12px}
.kvcite{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);line-height:1.6}

/* Three tints, and three vocabularies. A reader who sees no colour at all loses nothing:
   the sentence in each line states the same thing the tint groups. */
.kvline.is-ok{background:var(--teal-tint);color:var(--teal-dark);
  border-inline-start:3px solid var(--teal);padding:7px 10px}
.kvline.is-flag{background:var(--rose-tint);color:var(--rose-text);
  border-inline-start:3px solid var(--rose);padding:7px 10px}
.kvline.is-flag .kvwhen,.kvline.is-flag .kvcite{color:var(--rose-text)}
.kvline.is-idle{background:var(--surface-alt);color:var(--muted);
  border-inline-start:3px solid var(--line-soft);padding:7px 10px}

/* ---- filings ------------------------------------------------------------------------ */
.insts-sub{margin:16px 0 0;font-size:13.5px;font-weight:600;color:var(--steel-700)}
.insts-details{margin-top:14px}
.insts-summary{font-size:13px;color:var(--steel-600);cursor:pointer;padding:6px 0;
  border-bottom:1px solid var(--line-faint)}
.insts-details .insts-sub{margin-top:12px}

/* No horizontal scroller in this view: at narrow widths the table reflows to blocks
   instead, and the explicit ARIA roles carry the semantics through that change. */
.insts-tablewrap{margin-top:8px;overflow:visible;min-width:0}
table.insts-filings{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
table.insts-filings th,table.insts-filings td{
  text-align:start;vertical-align:top;padding:9px 10px 9px 0;
  border-bottom:1px solid var(--line-faint);overflow-wrap:anywhere;min-width:0}
table.insts-filings thead th{font-size:11.5px;font-weight:500;color:var(--muted);
  border-bottom:1px solid var(--line);padding-top:0}
table.insts-filings tbody th{font-weight:500;color:var(--steel-700)}
table.insts-filings td.num{font-variant-numeric:tabular-nums}
table.insts-filings tr.is-samesurvey th{border-inline-start:3px solid var(--line-soft);
  padding-inline-start:8px}

.insts-samesurvey{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.state-head{display:block;font-weight:500;color:var(--steel-700)}
.state-note{margin:4px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
td.state.is-flag{background:var(--rose-tint)}
td.state.is-flag .state-head,td.state.is-flag .state-note{color:var(--rose-text)}
td.state.is-idle{background:var(--surface-alt)}
.muted-text{color:var(--muted)}

.insts-note{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--muted);max-width:72ch}

.insts-actions{margin:14px 0 0}
.insts-more{font:inherit;font-size:13px;font-weight:500;width:100%;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line);color:var(--steel-600);
  cursor:pointer;text-align:center}
.insts-more:hover{background:var(--surface-alt);color:var(--steel-900)}

/* Fills the shell, in two columns.
   A single 80ch block left the other half of the row empty — and in RTL all of that gap
   piled up on one side, so the notes read as a column that had lost its neighbour rather
   than as a passage. Simply removing the cap is the wrong fix: at the shell's width these
   paragraphs would run to about 160 characters a line, which is harder to read than the
   lopsided version. Two columns fill the width AND keep the measure near 80ch, and they
   echo the two-column card grid directly above them.
   Paragraphs are allowed to break across the column boundary: the first note is longer
   than a column on its own, so `break-inside:avoid` would push it whole into column one
   and leave column two nearly empty. */
.insts-footnotes{
  max-width:none;
  columns:2;
  column-gap:40px;
}
.insts-footnotes p{margin-block-end:10px}

/* One column once two would be narrower than the measure is worth. */
@media (max-width:900px){
  .insts-footnotes{columns:1;max-width:80ch}
}

/* ---- narrow widths ------------------------------------------------------------------- */
/* Below 560px the table reflows to stacked blocks. That strips the implicit table
   semantics, which is why every element in the markup carries an explicit role. The
   head is kept in the accessibility tree rather than removed. */
@media (max-width:560px){
  .insts-thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.insts-filings{table-layout:auto}
  table.insts-filings tbody tr{display:block;padding:8px 0;
    border-bottom:1px solid var(--line)}
  table.insts-filings tbody tr:last-child{border-bottom:0}
  table.insts-filings tbody th,table.insts-filings tbody td{
    display:block;width:auto;border-bottom:0;padding:3px 0}
  table.insts-filings tbody th::before,table.insts-filings tbody td::before{
    content:attr(data-label);display:block;font-size:11px;color:var(--muted)}
  table.insts-filings tr.is-samesurvey th{border-inline-start:0;padding-inline-start:0}
  td.state.is-flag,td.state.is-idle{padding:7px 10px}
}

@media (max-width:420px){
  .kvrow{grid-template-columns:minmax(0,1fr);gap:2px}
  .insts-h1{font-size:22px}
  .insts-card{padding:16px}
}