/*
 * Component layer for the WA Independents design system.
 *
 * Extracted from the inline styles in design/claude-design/. Those templates carry
 * 3,556 inline style attributes but only 453 distinct ones — a 7.9x duplication that
 * would ship ~40KB of repeated CSS on each of ~26,000 pages and make a restyle a
 * re-import. Every declaration below is lifted verbatim from the design; see
 * design/PORT-NOTES.md for the occurrence counts each class was derived from.
 *
 * Two rules hold this together:
 *
 *   1. No class hardcodes a color or size. Only token references. A literal hex
 *      here means the token layer has been broken.
 *   2. Party identity is only ever the --pc / --pc-text pair, set by [data-party].
 *      There is no per-party styling hook, which is how "a page about a Republican
 *      and a page about a Democrat feel identical in weight" survives contact with
 *      the code — there is nothing to diverge.
 */

/* ------------------------------------------------------------------ layout */

.wi-wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--s4);
}

.wi-prose {
  max-width: var(--measure);
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.wi-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------- section furniture */

.wi-section {
  padding-top: var(--s7);
}

/* The 01 / 02 / 03 counter above each section heading. */
.wi-eyebrow {
  font: var(--fs-xs) / 1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.08em;
}

.wi-kicker {
  font: var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wi-section > h2 {
  font: 600 var(--fs-xl) / 1.2 var(--serif);
  margin-top: var(--s2);
}

.wi-title {
  font: 600 clamp(28px, 5.4vw, var(--fs-2xl)) / 1.14 var(--serif);
  letter-spacing: -0.015em;
  margin-top: var(--s3);
}

/* The answer sentence. Serif at reading size — this is what an AI Overview lifts. */
.wi-lede {
  font: 400 clamp(18px, 2.6vw, var(--fs-lg)) / 1.45 var(--serif);
  color: var(--ink);
  margin-top: var(--s4);
  max-width: 60ch;
}

.wi-standfirst {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--s2);
  max-width: var(--measure);
}

/* Label emphasis inside mono lines — the single most repeated pattern (187x). */
.wi-strong {
  color: var(--ink-2);
  font-weight: 650;
}

/* --------------------------------------------------------------- provenance */

/*
 * Sits under every data block. Provenance is type, not fine print: same optical
 * weight as a caption, never smaller, never hidden behind a disclosure.
 */
.wi-source {
  margin-top: var(--s4);
  border-top: 1px solid var(--rule);
  padding-top: var(--s2);
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
}

/* ------------------------------------------------------------- jump nav */

.wi-jump {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}

.wi-jump ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.wi-jump a {
  font: var(--fs-xs) / 1 var(--mono);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
}

/* -------------------------------------------------------------------- chips */

.wi-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.wi-chip {
  font: var(--fs-xs) / 1 var(--mono);
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-2);
  padding: 7px 9px;
  border-radius: var(--radius);
}

/* A chip carrying a party mark rather than plain text. */
.wi-chip--mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wi-mark {
  width: var(--accent-w);
  height: 13px;
  background: var(--pc, var(--p-n-line));
  display: inline-block;
  flex: none;
}

/* ------------------------------------------------------------------- badges */

/*
 * Party is never conveyed by color alone — the badge always carries the letter
 * and the full party name as text.
 */
.wi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--pc, var(--p-n-line));
  color: var(--pc-text, var(--p-n-text));
  font: 650 var(--fs-xs) / 1 var(--sans);
  padding: 5px 7px;
  border-radius: 2px;
  align-self: flex-start;
}

.wi-badge > .wi-badge__letter {
  font-family: var(--mono);
}

/* -------------------------------------------------------------------- cards */

.wi-grid {
  list-style: none;
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

/*
 * Person card. The party mark is a 3px left border and nothing else — no filled
 * background, no tinted surface. Radius is squared off on the marked edge so the
 * border reads as a rule rather than a pill.
 */
.wi-person {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: var(--accent-w) solid var(--pc, var(--rule-2));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.wi-person__role {
  font: var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wi-person__name {
  font-size: var(--fs-md);
  font-weight: 650;
  margin-top: var(--s2);
}

.wi-person__seat {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: 2px;
}

/* Contact pairs. margin-top:auto pins them to the card floor so ragged cards align. */
.wi-person__contact {
  font: var(--fs-xs) / 1.7 var(--mono);
  color: var(--ink-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--s2);
  margin-top: auto;
}

.wi-person__contact dt {
  color: var(--ink-3);
}

.wi-person__contact dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ------------------------------------------------------------- fact rows */

.wi-facts {
  margin-top: var(--s5);
  border-top: 1px solid var(--rule-2);
}

.wi-facts__row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr;
  gap: var(--s3) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}

.wi-facts__row dt {
  font: var(--fs-xs) / 1.6 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wi-facts__row dd {
  font-size: var(--fs-sm);
  margin: 0;
}

.wi-facts__row dd .wi-qualifier {
  color: var(--ink-3);
}

@media (max-width: 480px) {
  .wi-facts__row {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
}

/* ------------------------------------------------------------------- tables */

.wi-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
}

.wi-table th {
  text-align: left;
  font: 650 var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--rule-2);
}

.wi-table td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}

/* Figures align on the decimal and use tabular numerals so columns scan. */
.wi-table td.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.wi-table td.meta {
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

.wi-table td.muted,
.wi-table th.muted {
  color: var(--ink-3);
}

.wi-table tr:last-child td {
  border-bottom: 0;
}

/* -------------------------------------------------------------- empty state */

/*
 * A stated absence is content; an empty section is a bug. Dashed rather than solid
 * so it reads as a gap in the record and never as a data card.
 */
.wi-empty {
  border: 1px dashed var(--rule-2);
  background: var(--flag-soft);
  padding: var(--s4);
  display: grid;
  gap: var(--s2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.wi-empty--inline {
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
  padding: var(--s2) var(--s3);
  margin-top: auto;
}

.wi-empty__what {
  font-weight: 650;
  color: var(--ink-2);
}

/* ---------------------------------------------------------- terminal state */

/* "Died in committee" and other final outcomes. Ink, not red — it is a fact. */
.wi-terminal {
  background: var(--terminal);
  color: var(--bg);
  font: 650 var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 2px;
  display: inline-block;
}

/* ------------------------------------------------------------- disclosure */

.wi-faq {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-top: var(--s2);
  background: var(--surface);
}

.wi-faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: var(--fs-sm);
}

.wi-faq p {
  margin-top: var(--s3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  max-width: var(--measure);
}

/* ------------------------------------------------------------------ controls */

.wi-control {
  font: var(--fs-xs) / 1 var(--mono);
  padding: 7px 9px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.wi-control[aria-pressed='true'] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ------------------------------------------------------------------- stats */

/*
 * A figure that is the subject of the page rather than a cell in a table. Serif
 * and large, because these are the numbers a report is about.
 */
.wi-stat {
  border-top: 2px solid var(--ink);
  padding-top: var(--s3);
  margin-top: var(--s5);
}

.wi-stat__value {
  font: 600 clamp(33px, 7vw, var(--fs-3xl)) / 1.05 var(--serif);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.wi-stat__caption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--s2);
  max-width: var(--measure);
}

.wi-stat__note {
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
  margin-top: var(--s2);
}

.wi-stats {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* -------------------------------------------------------------------- bars */

/*
 * A proportion, drawn beside its own number rather than instead of it. No
 * animation — the design forbids motion on data, and a bar that grows on scroll
 * makes a reader watch rather than read.
 */
.wi-bar {
  display: block;
  height: 5px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  margin-top: 4px;
  min-width: 60px;
}

.wi-bar__fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* A bar carrying a party mark uses the party pair like everything else. */
[data-party] > .wi-bar > .wi-bar__fill {
  background: var(--pc, var(--accent));
}

/* ------------------------------------------------------------------ ledger */

/*
 * Reconciliation rows — "does it add up". Mono throughout so the figures align,
 * with the residual called out rather than buried.
 */
.wi-ledger {
  font: var(--fs-sm) / 1.7 var(--mono);
  margin-top: var(--s4);
  border-top: 1px solid var(--rule-2);
}

.wi-ledger__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}

.wi-ledger__row b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.wi-ledger__row--total {
  border-bottom: 0;
  border-top: 1px solid var(--rule-2);
  color: var(--ink);
}

/* ------------------------------------------------------- advocacy treatment */

/*
 * The recruitment block, and the ONLY place on the site where we speak in our own
 * voice or fill an interactive surface. It is visually inverted so a reader can see
 * at a glance that they have left the record and entered an argument.
 *
 * Do not reuse .wi-button anywhere else. Filled buttons existing in exactly one
 * treatment is what makes the boundary legible; a filled button on an entity page
 * would make the data look like it was selling something.
 */
.wi-cta {
  background: var(--terminal);
  color: var(--bg);
  padding: var(--s6) var(--s5);
  margin-top: var(--s7);
  display: grid;
  gap: var(--s3);
}

.wi-cta__label {
  font: var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.wi-cta__heading {
  font: 600 var(--fs-xl) / 1.25 var(--serif);
  max-width: 34ch;
}

.wi-cta__body {
  font-size: var(--fs-sm);
  max-width: var(--measure);
  opacity: 0.9;
}

.wi-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s2);
}

.wi-cta__disclosure {
  font: var(--fs-xs) / 1.7 var(--mono);
  max-width: var(--measure);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid currentColor;
  opacity: 0.7;
}

.wi-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s4);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--bg);
  border-radius: var(--radius);
  font: 650 var(--fs-sm) / 1 var(--sans);
  text-decoration: none;
}

.wi-button:hover {
  color: var(--ink);
  text-decoration: underline;
}

.wi-button--ghost {
  background: transparent;
  color: var(--bg);
  border-color: currentColor;
}

.wi-button--ghost:hover {
  color: var(--bg);
}

/* --------------------------------------------------------------- party map */

/*
 * The only place party influences presentation. Each attribute sets a token pair
 * and nothing else — no weight, no size, no surface. Unknown or absent party falls
 * through to the neutral pair via the var() fallbacks above.
 */
[data-party='d'] { --pc: var(--p-d-line); --pc-text: var(--p-d-text); }
[data-party='r'] { --pc: var(--p-r-line); --pc-text: var(--p-r-text); }
[data-party='i'] { --pc: var(--p-i-line); --pc-text: var(--p-i-text); }
[data-party='l'] { --pc: var(--p-l-line); --pc-text: var(--p-l-text); }
[data-party='n'] { --pc: var(--p-n-line); --pc-text: var(--p-n-text); }

/* Faceted filters — candidate archive.
   A plain GET form: no JavaScript, and every filtered view has a shareable URL.
   Controls are sized for touch at 44px per the design's control rules. */
.wi-filters {
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	padding: var(--s4);
	margin-bottom: var(--s6);
}

.wi-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.wi-filters legend {
	margin-bottom: var(--s3);
}

.wi-filters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--s3);
	align-items: end;
}

.wi-field label {
	display: block;
	font: var(--fs-xs)/1 var(--mono);
	color: var(--ink-3);
	letter-spacing: .04em;
	margin-bottom: var(--s1);
}

.wi-field select {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--s2);
	font: var(--fs-sm)/1 var(--sans);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
}

.wi-field select:focus-visible,
.wi-filters .wi-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.wi-field--action .wi-button {
	width: 100%;
	min-height: 44px;
}

/* The case for and against.
   Two arguments given identical weight — same rule as party never colouring a
   page. Neither side gets a green tint, a red tint, or the wider column. */
.wi-argument {
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	padding: var(--s4);
	background: var(--surface);
}

.wi-argument__head {
	font: 650 var(--fs-xs)/1 var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s2);
}

.wi-argument__by {
	font-size: var(--fs-xs);
	color: var(--ink-2);
	margin-bottom: var(--s3);
}

.wi-argument__none {
	font-size: var(--fs-sm);
	color: var(--ink-3);
	font-style: italic;
	max-width: var(--measure);
}

/* Subsection heading, inside a .wi-section.
   Was inline in 25 places across the blocks — the last repeated pattern left
   from the port. Sits below the serif h2 and above a table or a stat row. */
.wi-subhead {
	font: 650 var(--fs-sm)/1.3 var(--sans);
	margin-top: var(--s6);
}

/* A source line continuing directly under another, with no second rule.
   The design draws one hairline above a provenance block, not one per line. */
.wi-source--cont {
	border-top: 0;
	padding-top: 0;
}

/* The query behind a report, shown so a reader can run it themselves.
   Scrolls inside itself rather than widening the page — SQL does not wrap
   sensibly, and a report that publishes its own method should not be the thing
   that makes the page scroll sideways. */
.wi-code {
	margin-top: var(--s4);
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--s4);
	overflow-x: auto;
	font: var(--fs-xs)/1.7 var(--mono);
	color: var(--ink-2);
}

/* The homepage opens on a single figure, so it gets the one size larger than a
   page title. Tabular numerals stop the digits shifting between cycles. */
.wi-title--figure {
	font-size: clamp(44px, 11vw, var(--fs-3xl));
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

/* Connection tiers. The top rule is the tier's mark — solid, dashed, dotted —
   and it is the same mark the link carries everywhere else on the site, so the
   card teaches the vocabulary the rest of the pages use. */
.wi-tier {
	border: 1px solid var(--rule);
	border-top: 3px var(--tier-style, solid) var(--rule-2);
	border-radius: 0 0 var(--radius) var(--radius);
	padding: var(--s4);
	background: var(--surface);
}

.wi-tier[data-mark="solid"]  { --tier-style: solid;  border-top-color: var(--ink-2); }
.wi-tier[data-mark="dashed"] { --tier-style: dashed; border-top-color: var(--ink-3); }
.wi-tier[data-mark="dotted"] { --tier-style: dotted; border-top-color: var(--rule-2); }

.wi-tier__count {
	font: 600 var(--fs-2xl)/1 var(--serif);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.wi-tier__head {
	font-size: var(--fs-md);
	font-weight: 650;
	margin-top: var(--s2);
}

.wi-tier__blurb {
	font-size: var(--fs-sm);
	color: var(--ink-2);
	margin-top: var(--s2);
}

.wi-tier__share {
	font: var(--fs-xs)/1 var(--mono);
	color: var(--ink-3);
	margin-top: var(--s3);
}

/* What the tier is actually made of. Without this the reader has a big number
   and no way to see that most of it is roll calls. */
.wi-tier__rows {
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s1) var(--s3);
	font: var(--fs-xs)/1.5 var(--mono);
	color: var(--ink-3);
}

.wi-tier__rows dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
}