/* k26polls — view: אחוזים שהוגשו, מצב כרטיסים. Companion to assets/views/cards.js.
 *
 * Structure, palette and the dispersion strip all come from assets/teca.css; this file adds
 * only what the card layout needs and introduces no colour of its own. Three rules from that
 * file's preamble govern everything below:
 *
 *   1. NO border-radius. The single exception is the dots, which are circles in teca.css and
 *      stay circles here; the legend keys repeat that exception because they ARE the dots.
 *   2. No font-weight above 600. Hierarchy comes from size, colour and space.
 *   3. --mark (#9AA5AB) is 2.11:1 on the ground and NEVER colours text — not the small `%`
 *      unit the design sets in it, not the institute labels the design sets in #7C8A92.
 *      Every text colour here is --ink, --steel-*, --muted, --teal-* or --rose-text.
 *
 * All directional properties are logical (inset-inline-*, margin-inline-*, text-align:end).
 * There is no `left:` or `right:` anywhere in this file, and adding one would break RTL.
 */

/* ---- head ------------------------------------------------------------------------------ */

.matrix-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.matrix-head > div{min-width:0}
.matrix-head .view-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.matrix-head .view-sub{margin-bottom:0}

/* teca.css sizes the affordance at 14px, which is below the 24px pointer target minimum.
   The ring stays 14px; the hit area is grown around it, so nothing moves visually. */
.matrix-head .info{position:relative;cursor:pointer}
.matrix-head .info::after{content:"";position:absolute;inset:-6px}

.info-note{margin:9px 0 0;max-width:80ch;font-size:13px;line-height:1.65;color:var(--muted);
  border-inline-start:2px solid var(--line);padding-inline-start:11px}

.matrix-tools{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.matrix-tools .count-line{margin-bottom:0}

/* ---- column key ------------------------------------------------------------------------ */

.col-key{padding:14px 20px;background:var(--surface-alt);
  border-bottom:1px solid var(--line-faint)}
.col-key dl{margin:0;display:grid;gap:14px 20px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.col-key .col{border-top:1px solid var(--line-soft);padding-top:8px;min-width:0}
.col-key dt{font-size:12.5px;font-weight:600;color:var(--steel-700);overflow-wrap:break-word}
.col-key dt.is-ageing{color:var(--rose-text)}
.col-key dd{margin:3px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted);
  overflow-wrap:break-word}
.col-key .ageing-note{color:var(--rose-text)}
.col-key .base-note{color:var(--muted)}

/* ---- the grid --------------------------------------------------------------------------- */

/* gap:1px over a --surface background, with a 1px outline per card, gives one shared hairline
   between neighbours: an outline does not affect layout and bleeds into the gap, so two
   adjacent cards contribute one rule, not two. Painting the GRID in the line colour — which
   is what the design does — leaves a solid slab under the unfilled tail of the last row. */
.cards-grid{display:grid;gap:1px;padding:1px;background:var(--surface);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lcard{background:var(--surface);outline:1px solid var(--line-faint);padding:13px 16px;
  min-width:0}

.lcard-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lcard-name{font-size:15.5px;font-weight:500;color:var(--ink);overflow-wrap:break-word}
.lcard-range{font-size:13.5px;color:var(--steel-600);white-space:nowrap}
.lcard-range .unit{font-size:11px;color:var(--muted);margin-inline-start:1px}

/* The strip keeps teca.css's 24px geometry — the axis, the threshold rule and the dot offsets
   are all tuned to it, and re-tuning them per view is how two modes stop agreeing. */
.cards-grid .strip{margin-top:8px}
/* Two marks, and only two: filled = the highest filed, hollow = the lowest. Scoped to the
   grid so `.strip.straddles .dot` in the table is untouched. */
.cards-grid .strip .dot.hi{background:var(--teal);border:1.5px solid var(--surface)}
.cards-grid .strip .dot.lo{background:var(--surface);border:1.5px solid var(--slate)}

.lcard-threshold{margin:6px 0 0;font-size:11.5px;line-height:1.55;color:var(--rose-text)}

.lcard-values{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:9px 0 0;
  padding-top:8px;border-top:1px solid var(--line-faint);font-size:12.5px}
.lcard-values dt{color:var(--muted);min-width:0;overflow-wrap:break-word}
.lcard-values dt.is-nofile{color:var(--rose-text)}
.lcard-values dd{margin:0;color:var(--ink);text-align:end;font-size:13.5px;min-width:0}

/* A filed value is selectable; a blank of any kind is not, and is a span. */
.lcard-values button.val{font:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;
  background:none;border:0;border-bottom:2px solid transparent;padding:0 3px;
  margin-inline:-3px;color:var(--ink);cursor:pointer;text-align:end}
.lcard-values button.val:hover{color:var(--teal-dark)}
/* Selection is carried by aria-pressed for assistive technology, and here by a tint AND a
   rule under the figure — a shape, so it does not rest on colour alone. */
.lcard-values button.val.is-selected{background:var(--teal-tint);color:var(--teal-dark);
  border-bottom-color:var(--teal-text)}

/* Three blanks, three treatments, and they must never converge. */
.lcard-values .blank-nofile-inline{display:inline-block;font-size:12.5px;
  color:var(--rose-text);background:var(--rose-tint);padding:1px 7px}
.lcard-values .blank-absent{font-size:12.5px}

/* ---- legend ----------------------------------------------------------------------------- */

.legend{display:flex;gap:24px;flex-wrap:wrap;padding:12px 20px;background:var(--ground);
  border-top:1px solid var(--line);font-size:12.5px;color:var(--steel-500)}
.legend-item{display:inline-flex;align-items:center;gap:7px}
/* The one place border-radius survives: these keys are the dots. */
.legend .mark-hi{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}
.legend .mark-lo{width:9px;height:9px;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--slate);flex:none}
.legend .mark-th{width:1px;height:12px;background:var(--slate);flex:none}

/* ---- footnotes -------------------------------------------------------------------------- */

.panel > .footnotes{margin-top:0;padding:14px 20px;border-top:1px solid var(--line)}
.panel > .footnotes > p{margin:9px 0 0;max-width:80ch}
.panel > .footnotes > p:first-child{margin-top:0}

.fn{background:var(--surface-alt);border-top:3px solid var(--line);padding:13px 15px;
  margin-bottom:12px;max-width:80ch}
.fn-finding{background:var(--rose-tint);border-top-color:var(--rose-mid)}
.fn .fn-head{font-size:13px;font-weight:600;color:var(--steel-700)}
.fn-finding .fn-head{color:var(--rose-text)}
.fn p{margin:7px 0 0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.fn-finding p{color:var(--rose-text)}
.fn .cite{display:block;margin-top:6px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.fn .fn-link{font-size:12.5px}

/* ---- narrow ----------------------------------------------------------------------------- */

/* .shell leaves 343px of content at a 375px viewport (it was 315px before the gutter dropped
   to 16px below 560px), so minmax(250px,1fr) already collapses to one column; this makes it
   unconditional and trims the chrome. Nothing in this file sets a min-width above 250px,
   which is what keeps <body> from scrolling horizontally. */
@media (max-width:420px){
  .cards-grid{grid-template-columns:1fr}
  .col-key dl{grid-template-columns:1fr}
  .matrix-head{padding:14px 16px;gap:14px}
  .col-key{padding:12px 16px}
  .legend{padding:12px 16px;gap:14px}
  .panel > .footnotes{padding:12px 16px}
  .fn{padding:12px 14px}
}