/* k26polls — view: Bader-Ofer validator.
 *
 * Only tokens declared in assets/teca.css are used; no new colour is introduced here.
 * No corner is rounded. The only circular marks on the page are .strip .dot and .info,
 * both of which already carry their radius in teca.css — this file overrides their fill
 * and border, never their shape, so the hairline scheme is not re-opened.
 * Weights stop at 600.
 *
 * Text colour is var(--muted) or darker throughout. var(--mark) appears once, on the
 * strip's axis hairline, where 1.4.3 does not apply.
 */

.val{display:block}

.val-eyebrow{margin:0;font-size:12.5px;color:var(--muted)}
.val-h1{margin:4px 0 0;font-size:26px;font-weight:600;color:var(--steel-900)}
.val .view-sub{margin:12px 0 0;font-size:15px;line-height:1.75;max-width:96ch}
.val .count-line{margin:14px 0 16px}

/* ---- the cards, as a tablist ----------------------------------------------------------
   .vgrid in teca.css is repeat(auto-fit,minmax(330px,1fr)). At 375px the shell's content
   box is 343px and at 320px it is 288px, so that fixed minimum overflows the viewport on
   the smaller phones. Scoped override, teca.css untouched. */
.val-tablist{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}

.val-card{
  font:inherit;font-size:inherit;text-align:start;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--slate);
  color:var(--ink);
}
/* .vcard is a bordered box and .vgrid has a gap, so the global focus ring would be clipped
   at the card edge. Pull it inside. */
.val-card:focus-visible{outline:2px solid var(--teal-text);outline-offset:-2px}
.val-card:hover{background:var(--surface-alt)}

.val-card-inst{font-size:14px;font-weight:600;color:var(--steel-900)}
.val-card-meta{font-size:11.5px;color:var(--muted)}
.val-card-figure{font-size:30px;font-weight:600;line-height:1.15;color:var(--steel-700);
  margin-top:8px}
.val-card-figure--words{font-size:20px;margin-top:12px}
.val-card-figure-label{font-size:12px;color:var(--muted)}
.val-card-note{font-size:12px;line-height:1.55;color:var(--muted);margin-top:6px}
.val-card-state{font-size:11.5px;color:var(--muted);margin-top:8px}

.val-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* Four card states, four treatments. Selection is also carried in words by
   .val-card-state, and the verdict is in every card's aria-label, so no state here is
   conveyed by colour alone. */
.val-card--nopct{background:var(--rose-tint);border-top-color:var(--rose-mid)}
.val-card--nopct .val-card-inst,
.val-card--nopct .val-card-figure,
.val-card--nopct .val-card-figure-label,
.val-card--nopct .val-card-note{color:var(--rose-text)}
.val-card--nopct:hover{background:var(--rose-tint)}

.val-card--sector{background:var(--surface-alt);border-top-color:var(--line)}
.val-card--sector .val-card-figure{color:var(--muted)}

.val-card--notread{border-top-color:var(--line-soft)}
.val-card--notread .val-card-figure{color:var(--muted)}

.val-card--other{border-top-color:var(--line)}
.val-card--other .val-card-figure{color:var(--muted)}

.val-card[aria-selected="true"]{border-color:var(--teal-text);border-top-color:var(--teal)}
.val-card[aria-selected="true"] .val-card-state{color:var(--teal-dark);font-weight:600}

/* ---- coverage note under the grid ------------------------------------------------------ */
.val-coverage{margin-top:12px}
.val-coverage p{margin:0 0 6px;font-size:12px;line-height:1.7;color:var(--muted);
  max-width:90ch}

/* ---- the detail panel ------------------------------------------------------------------ */
.val-panel{margin-top:16px}
.val-panel:focus-visible{outline:2px solid var(--teal-text);outline-offset:-2px}

.val-panel-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.val-panel-h2{margin:0;font-size:17px;font-weight:600;color:var(--steel-700)}
.val-panel-acts{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.val-panel-acts a{font-size:13px}

.val-linkish{font:inherit;font-size:13px;background:none;border:0;padding:0;
  color:var(--teal-text);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.val-linkish:hover{color:var(--teal-dark)}

.val-panel-sub{margin:0;padding:12px 20px;font-size:13px;line-height:1.7;
  color:var(--muted);max-width:92ch}

.val-facts{display:flex;gap:8px 22px;flex-wrap:wrap;padding:12px 20px;
  background:var(--surface-alt);border-top:1px solid var(--line-faint);
  border-bottom:1px solid var(--line)}
.val-chip{font-size:12.5px;color:var(--steel-600)}

.val-hintrow{margin:0;padding:12px 20px 0;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--muted)}
.val-hint{margin:0;padding:8px 20px 0;font-size:12.5px;line-height:1.7;
  color:var(--muted);max-width:88ch}

.val-legend{display:flex;gap:10px 22px;flex-wrap:wrap;padding:12px 20px;
  font-size:12.5px;color:var(--steel-600)}
.val-leg{display:inline-flex;align-items:center;gap:7px}
.val-leg-mark{flex:none;display:inline-block;width:10px;height:10px}
.val-leg-dot{background:var(--teal)}
.val-leg-ring{background:var(--surface);border:1.5px solid var(--slate)}
.val-leg-band{width:16px;height:10px;background:var(--teal-tint);
  border:1px solid var(--line-soft)}
.val-leg-text{color:var(--steel-600)}

/* ---- the detail table ------------------------------------------------------------------ */
.val .table-wrap{border-inline:0;border-bottom:0}
table.val-table{width:100%;border-collapse:collapse;font-size:13px}
table.val-table thead th{padding:9px 14px;font-size:12px;font-weight:600;
  color:var(--steel-700);text-align:start;background:var(--ground);
  border-bottom:1px solid var(--line);border-top:1px solid var(--line);
  white-space:nowrap;vertical-align:bottom}
table.val-table tbody th,table.val-table tbody td{padding:10px 14px;
  border-bottom:1px solid var(--line-faint);vertical-align:middle}
table.val-table tbody th{text-align:start;font-size:14.5px;font-weight:500;color:var(--ink)}
table.val-table tbody tr:hover th,table.val-table tbody tr:hover td{background:var(--surface-alt)}

.val-col-pct,.val-col-num,.val-col-gap{text-align:end;white-space:nowrap}
th.val-col-pct,th.val-col-num,th.val-col-gap{text-align:end}
.val-col-pct{font-size:14px;color:var(--steel-600)}
.val-pct-suffix{font-size:11.5px;color:var(--muted);margin-inline-start:1px}
.val-col-num{font-size:15px}
.val-unpublished{font-size:12.5px;color:var(--muted)}
.val-col-gap{font-size:14px;font-weight:600}
/* The sign is the information; colour only reinforces it. */
.val-gap-zero{font-weight:400;color:var(--muted)}
.val-gap-up{color:var(--teal-dark)}
.val-gap-down{color:var(--rose-text)}
.val-col-note{font-size:12px;line-height:1.6;color:var(--muted);min-width:22ch}
.val-col-strip{width:190px;min-width:190px}
.val-empty-row{font-size:12.5px;color:var(--muted)}
.val-row-moved th,.val-row-moved td{background:var(--surface-alt)}

/* teca.css already gives .strip its axis, its dot and the dot's radius. Only the fills
   change here, so no new geometry and no new radius enters the scheme. */
.val-strip{height:20px}
.val-strip .axis{inset-block:10px auto;background:var(--mark)}
.val-strip .band.val-band{top:5px;height:11px;background:var(--teal-tint)}
.val-strip .dot.val-ring{background:var(--surface);border-color:var(--slate)}

/* ---- agreement disclosure --------------------------------------------------------------- */
.val-agree{margin:0;padding:12px 20px;font-size:12.5px;line-height:1.7;color:var(--muted);
  border-bottom:1px solid var(--line-faint)}
.val-agree-text{margin-inline-end:10px}
tbody.val-agree-rows[hidden]{display:none}

/* ---- ties --------------------------------------------------------------------------------- */
.val-ties{padding:14px 20px 4px;border-bottom:1px solid var(--line-faint)}
.val-ties-h3{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--steel-700)}
.val-ties-line{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);max-width:88ch}
.val-ties-list{margin:10px 0 12px;padding-inline-start:18px;font-size:12.5px;
  line-height:1.7;color:var(--muted)}
.val-ties-list li{margin-bottom:8px}
.val-tie-sub{color:var(--muted);max-width:88ch}

/* ---- not-verifiable panel ------------------------------------------------------------------ */
.val-na{padding:14px 20px 4px}
.val-na-head{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--steel-700)}
.val-na p{margin:0 0 10px;font-size:13px;line-height:1.75;color:var(--muted);max-width:88ch}
.val-na .finding{margin-bottom:12px}

.val-caution{border-top:1px solid var(--line-faint);max-width:none}

/* ---- narrow ---------------------------------------------------------------------------------
   Below 820px the strip column is dropped: every value it draws is already present as a
   number in the three numeric columns and restated in the row note, so nothing is lost.

   The figure was 700px, which is under the width at which the drop is actually needed. With
   the strip the table cannot draw below 760px, and the shell's gutters put that at an 820px
   viewport — so at 768px, and at every tablet between 700 and 820, the strip stayed and took
   69px of the table into a horizontal scroll to buy a chart that says nothing the row does
   not. Dropping it there leaves 570px of table in 691px of window: no scroll at all. */
@media (max-width:820px){
  .val-col-strip{display:none}
  .val-h1{font-size:22px}
  table.val-table thead th{white-space:normal}
  .val-panel-head,.val-panel-sub,.val-facts,.val-legend,.val-agree,.val-ties,.val-na,
  .val-hintrow,.val-hint{padding-inline:14px}
  table.val-table tbody th,table.val-table tbody td,table.val-table thead th{padding-inline:10px}
}