/* k26polls — view: the seat simulator.
 *
 * Tokens only, from assets/teca.css. No new colours, no border-radius, no weight above 600.
 *
 * Two corrections to the design of record are deliberate and are NOT deviations:
 *   - the scheme sets the "no agreements" line in #9AA5AB and the measure and derived notes
 *     in #7C8A92. Both fail AA on the ground. All body and caption text here is --muted or
 *     darker; --mark is used for hairlines and decorative marks only, never for text.
 *   - the scheme's simulator has no media queries at all (it used a 375px preview toggle),
 *     so its 340px sidebar and fixed row grid are desktop-only. The breakpoints below are
 *     this file's addition: the page body must never scroll horizontally at 375px.
 *
 * Everything is logical-property addressed — inset-inline, margin-inline, text-align:end —
 * because the document is RTL and left/right would silently invert.
 */

.sim{display:block}

/* ---- head -------------------------------------------------------------------------- */
.sim-head{margin-bottom:18px}
.sim-eyebrow{margin:0 0 4px;font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.sim .view-sub{margin-bottom:10px}
.sim-law{margin-top:0;max-width:96ch}
.sim-law .ltr{margin-inline-start:2px}

/* ---- grid -------------------------------------------------------------------------- */
.sim-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
#sim-main{min-width:0}
.sim-side{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---- basis ------------------------------------------------------------------------- */
.sim-basis{margin:0;border:0;border-bottom:1px solid var(--line);padding:14px 16px}
.sim-basis legend{padding:0;font-size:12px;font-weight:600;color:var(--steel-700)}
.sim-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sim-chip{font:inherit;display:flex;flex-direction:column;gap:2px;text-align:start;
  padding:7px 11px;background:var(--surface);border:1px solid var(--line);
  color:var(--steel-600);cursor:pointer}
.sim-chip:hover{background:var(--surface-alt);color:var(--steel-900)}
.sim-chip[aria-pressed="true"]{background:var(--steel-700);border-color:var(--steel-700);
  color:#fff}
.sim-chip-name{font-size:13px;font-weight:500}
.sim-chip-sub{font-size:11px;color:var(--muted)}
.sim-chip[aria-pressed="true"] .sim-chip-sub{color:var(--on-slate)}
/* An ageing basis is marked, but the age is also words inside the chip — never tint alone */
.sim-chip.is-ageing{border-style:dashed}
.sim-chip.is-ageing .sim-chip-sub{color:var(--rose-text)}
.sim-chip.is-ageing[aria-pressed="true"] .sim-chip-sub{color:var(--on-slate)}

.sim-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.sim-pick label{font-size:12px;color:var(--muted)}
.sim-pick select{font:inherit;font-size:13px;padding:6px 8px;max-width:100%;
  border:1px solid var(--line);background:var(--surface);color:var(--steel-700)}

.sim-basis-note{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
  max-width:90ch}
.sim-derived-line{margin:6px 0 0;font-size:12.5px;line-height:1.7;color:var(--steel-600);
  max-width:90ch;border-inline-start:3px solid var(--line);padding-inline-start:10px}
.sim-shortfall{margin:8px 0 0;font-size:12px;line-height:1.65;color:var(--rose-text);
  background:var(--rose-tint);border-inline-start:3px solid var(--rose);padding:8px 11px;
  max-width:80ch}
.sim-reset{margin:8px 0 0;font-size:12.5px;line-height:1.65;color:var(--steel-700);
  background:var(--surface-alt);border:1px solid var(--line-soft);padding:8px 11px;
  max-width:80ch}

.sim-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:12px 0 0;
  font-size:12.5px}
.sim-linkbtn{font:inherit;font-size:12.5px;padding:0;background:none;border:0;
  color:var(--teal-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sim-linkbtn:hover{color:var(--teal-dark)}

.sim-absent{margin-top:12px;font-size:12.5px}
.sim-absent summary{cursor:pointer;color:var(--steel-600);padding:4px 0}
.sim-absent-list{margin:8px 0 0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:10px}
.sim-absent-list li{border-inline-start:3px solid var(--line);padding-inline-start:11px;
  max-width:86ch}
.sim-absent-who{display:block;font-size:12.5px;font-weight:500;color:var(--steel-700)}
.sim-absent-list p{margin:4px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}
.sim-cite{display:block;margin-top:5px;font-size:11px;line-height:1.6;color:var(--muted)}

/* ---- status ------------------------------------------------------------------------ */
.sim-status{margin:0;padding:9px 16px;font-size:12px;line-height:1.6;color:var(--steel-600);
  background:var(--surface-alt);border-bottom:1px solid var(--line-faint)}

/* ---- allocation table --------------------------------------------------------------- */
.sim-allocbox{padding:0}
.sim .table-wrap{border:0;background:transparent}
table.sim-alloc{width:100%;border-collapse:collapse}
table.sim-alloc caption{caption-side:top;text-align:start;padding:11px 16px;font-size:12px;
  line-height:1.6;color:var(--muted);background:var(--surface)}
table.sim-alloc thead th{padding:8px 12px;font-size:12px;font-weight:600;
  color:var(--steel-700);background:var(--ground);text-align:start;white-space:nowrap;
  border-bottom:1px solid var(--line)}
table.sim-alloc thead th.num{text-align:end}
table.sim-alloc tbody th{text-align:start;padding:9px 16px;font-weight:500;font-size:15px;
  color:var(--ink);vertical-align:middle}
table.sim-alloc tbody td{padding:9px 12px;font-size:14px;color:var(--steel-600);
  border-bottom:1px solid var(--line-faint);vertical-align:middle}
table.sim-alloc tbody th{border-bottom:1px solid var(--line-faint)}
table.sim-alloc td.num{text-align:end}
table.sim-alloc td.sim-seats{font-size:16px;font-weight:600;color:var(--steel-700)}
.sim-row-name{display:block}
.sim-flag{display:block;font-size:11px;font-weight:400;line-height:1.5;margin-top:1px}
.sim-flag.is-below{color:var(--rose-text)}
.sim-flag.is-bloc{color:var(--teal-dark)}
tr.sim-below{background:var(--rose-tint)}
tr.is-co{background:var(--teal-tint)}
tr.sim-below.is-co{background:var(--teal-tint)}
.sim-delta{display:inline-block;margin-inline-start:5px;font-size:11.5px;color:var(--muted)}
.sim-delta.is-nil{color:var(--muted)}

td.sim-bar{width:40%;min-width:120px}
.sim-bar-track{position:relative;height:12px;background:var(--line-faint)}
.sim-bar-fill{height:12px;background:var(--teal)}
td.sim-act{width:1%;white-space:nowrap}
.sim-co{font:inherit;font-size:12px;padding:5px 10px;background:var(--surface);
  border:1px solid var(--line);color:var(--steel-600);cursor:pointer}
.sim-co:hover{background:var(--surface-alt);color:var(--steel-900)}
.sim-co[aria-pressed="true"]{background:var(--teal-tint);border-color:var(--teal-text);
  color:var(--teal-dark);font-weight:500}

.sim-findings{padding:11px 16px;background:var(--surface-alt);
  border-top:1px solid var(--line-faint)}
.sim-findings p{margin:0 0 5px;font-size:12px;line-height:1.65;color:var(--muted);
  max-width:88ch}
.sim-findings p:last-child{margin-bottom:0}
.sim-derived{margin:0;padding:11px 16px;line-height:1.7;max-width:none;
  border-top:1px solid var(--line-faint)}
.sim-derived.is-divergent{color:var(--rose-text);background:var(--rose-tint)}
.sim-limit{margin:0;padding:0 16px 12px;line-height:1.7}
.sim-limit.is-hit{color:var(--rose-text);background:var(--rose-tint);padding-top:10px}

.sim-error{padding:20px 16px;background:var(--rose-tint);
  border-top:1px solid var(--line-faint)}
.sim-error p{margin:0 0 6px;font-size:13px;line-height:1.65;color:var(--rose-text);
  max-width:80ch}
.sim-error .footnotes{margin-top:0;color:var(--rose-text)}
.sim-error .sim-cite{color:var(--muted)}

/* ---- side cards --------------------------------------------------------------------- */
.sim-card{background:var(--surface);border:1px solid var(--line)}
.sim-card h3{font-size:12px;font-weight:600;color:var(--slate-text);padding:13px 16px 0;
  margin:0}
.sim-card-body{padding:10px 16px 16px;display:flex;flex-direction:column;gap:10px}
.sim-sublabel{margin:4px 0 0;font-size:11.5px;font-weight:500;color:var(--steel-700)}
.sim-none{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.sim-notice{margin:0;font-size:12.5px;line-height:1.65;color:var(--steel-700);
  background:var(--surface-alt);border:1px solid var(--line-soft);padding:7px 10px}

.sim-field{display:flex;flex-direction:column;gap:4px}
.sim-field label{font-size:11.5px;color:var(--muted)}
.sim-field select{font:inherit;font-size:13px;padding:7px 8px;width:100%;max-width:100%;
  border:1px solid var(--line);background:var(--surface);color:var(--steel-700)}

.sim-add{font:inherit;font-size:13px;font-weight:500;padding:8px;width:100%;
  background:var(--surface);border:1px solid var(--teal-text);color:var(--teal-dark);
  cursor:pointer}
.sim-add:hover:not(:disabled){background:var(--teal-tint)}
.sim-add:disabled{border-color:var(--line);color:var(--muted);cursor:default}
.sim-clear,.sim-save{font:inherit;font-size:12.5px;padding:7px 10px;width:100%;
  background:var(--surface);border:1px solid var(--line);color:var(--steel-600);
  cursor:pointer}
.sim-clear:hover:not(:disabled),.sim-save:hover{background:var(--surface-alt);
  color:var(--steel-900)}
.sim-clear:disabled{color:var(--muted);cursor:default}

.sim-pairlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sim-pair{background:var(--surface-alt);border:1px solid var(--line-soft);padding:7px 10px}
.sim-pair-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sim-pair-label{font-size:13px;color:var(--steel-700)}
.sim-rm{font:inherit;font-size:12px;padding:3px 9px;background:var(--surface);
  border:1px solid var(--line);color:var(--rose-text);cursor:pointer;flex:none}
.sim-rm:hover{background:var(--rose-tint)}
.sim-pair-why{margin:6px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.sim-pairlist.sim-void .sim-pair{background:var(--rose-tint);border-color:var(--rose);
  border-inline-start:3px solid var(--rose)}
.sim-pairlist.sim-void .sim-pair-why{color:var(--rose-text)}
.sim-pairlist.sim-inapplicable .sim-pair{border-inline-start:3px solid var(--line)}

.sim-tally{margin:0;display:flex;align-items:baseline;gap:2px}
.sim-tally-n{font-size:32px;font-weight:600;line-height:1.1;color:var(--steel-900)}
.sim-tally-of{font-size:16px;color:var(--muted)}
.sim-co-track{position:relative;height:10px;background:var(--line-faint)}
.sim-co-fill{height:10px;background:var(--teal)}
.sim-co-line{position:absolute;inset-block:-3px;width:1px;background:var(--rose-text)}
.sim-verdict{margin:0;display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  color:var(--steel-600)}
.sim-co-mark{color:var(--rose-text)}
.sim-colist{list-style:none;margin:0;padding:0}
.sim-colist li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding:4px 0;border-bottom:1px solid var(--line-faint);color:var(--steel-600)}
.sim-colist li:last-child{border-bottom:0}
.sim-inapplicable{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted);
  border-inline-start:3px solid var(--line);padding-inline-start:9px}

.sim-snapline{margin:0;font-size:12.5px;line-height:1.65;color:var(--steel-600)}
.sim-crossbasis{margin:0;font-size:12px;line-height:1.65;color:var(--rose-text);
  background:var(--rose-tint);border-inline-start:3px solid var(--rose);padding:8px 11px}
table.sim-diff{width:100%;border-collapse:collapse;font-size:12.5px}
table.sim-diff caption{caption-side:top;text-align:start;font-size:11.5px;line-height:1.6;
  color:var(--muted);padding-bottom:7px}
table.sim-diff th{text-align:start;font-size:11.5px;font-weight:600;color:var(--steel-700);
  padding:4px 6px;border-bottom:1px solid var(--line)}
table.sim-diff th.num{text-align:end}
table.sim-diff tbody th{font-weight:400;color:var(--ink);border-bottom:1px solid var(--line-faint)}
table.sim-diff td{padding:4px 6px;border-bottom:1px solid var(--line-faint);
  color:var(--steel-600)}
table.sim-diff td.num{text-align:end}
.sim-unreported{color:var(--muted);font-size:11.5px}
.sim-gap.is-up{color:var(--teal-dark)}
.sim-gap.is-down{color:var(--rose-text)}

/* ---- absent states ------------------------------------------------------------------ */
.sim-wait{padding:44px 20px;text-align:center;background:var(--surface);
  border:1px solid var(--line)}
.sim-wait p{margin:0 0 6px;font-size:14px;color:var(--muted)}
.sim-wait .footnotes{margin-top:0;max-width:70ch;margin-inline:auto}
.sim .empty p{margin:0 0 8px}
.sim .empty p:last-child{margin-bottom:0}
.sim-nobasis{text-align:start;padding:24px 20px}

/* ---- responsive ---------------------------------------------------------------------
   Collapse to one column, then drop the decorative bar entirely — its number is already
   in the adjacent cell — and let the row action fall to its own line. The allocation table
   scrolls inside .table-wrap so the page body never scrolls horizontally. */
@media (max-width:900px){
  .sim-grid{grid-template-columns:minmax(0,1fr)}
  .sim-side{flex-direction:row;flex-wrap:wrap}
  .sim-card{flex:1 1 300px;min-width:0}
}
@media (max-width:560px){
  .sim-side{flex-direction:column}
  .sim-card{flex:1 1 auto}
  /* The bar goes; its number stays in the adjacent cell. The four remaining columns fit
     at 375px, and .table-wrap absorbs anything that does not — so the BODY never scrolls.
     The design's "action on its own line" is NOT done by changing `display` on a <td>:
     that strips the row and cell roles out of the accessibility tree, which costs more
     than the line it buys. */
  th.sim-bar-head,td.sim-bar{display:none}
  table.sim-alloc caption{padding:9px 12px;font-size:11.5px}
  table.sim-alloc thead th{padding:7px 8px;font-size:11.5px;white-space:normal}
  table.sim-alloc tbody th{padding:9px 12px;font-size:14px}
  table.sim-alloc tbody td{padding:8px 8px;font-size:13px}
  .sim-co{padding:5px 8px;font-size:11.5px}
  .sim-tally-n{font-size:26px}
  .sim-chip{flex:1 1 100%}
  .sim-pick{flex-direction:column;align-items:stretch}
  .sim-pick select{width:100%}
  .sim-basis,.sim-status,.sim-findings,.sim-derived,.sim-limit{padding-inline:12px}
}

/* ---- notes, after the numbers they qualify ------------------------------------------
   These blocks — the derived-denominator line, the shortfall caveat, the source links
   and the ineligible-filings list — used to sit inside the basis fieldset, between the
   chooser and the seat table. A caveat read before the thing it qualifies is not a
   caveat but an obstacle, so they now follow the allocation. The rule above them is what
   marks the change of register from data to commentary. */
.sim-notesbox{
  margin-block-start:22px;
  padding-block-start:16px;
  border-block-start:1px solid var(--line);
}
.sim-notesbox > :first-child{margin-block-start:0}
