/*
 * Election — T13 Election Hub (/election/2026/) and the /measure/ index.
 *
 * Declarations are the 2026-09-28 export's inline styles for
 * design/claude-design/Template 13 - Election Hub, lifted onto classes. Tokens
 * only, as in components.css: a literal colour here breaks the token layer.
 * Enqueued by inc/assets.php whenever this file exists.
 *
 * The one rule this file exists to keep: a count is never styled by its value.
 * Every candidate's number is the same ink, the same weight, with no bar, no
 * fill and no party colour (T13 "How the count works" 03). Party appears only as
 * the outline badge on a name (components.css .wi-badge). There is deliberately
 * no class here that could mark a row as ahead of another.
 */

/* ------------------------------------------------------------- the opening */

.wi-election-hero {
  padding-top: var(--s4);
}

.wi-election-eyebrow {
  margin-top: var(--s5);
  font: 650 var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wi-election-title {
  margin-top: var(--s3);
  font: 600 clamp(30px, 6vw, var(--fs-3xl)) / 1.1 var(--serif);
  letter-spacing: -0.02em;
}

.wi-election-lede {
  margin-top: var(--s3);
  max-width: var(--measure);
  font: 400 clamp(18px, 2.6vw, var(--fs-lg)) / 1.45 var(--serif);
  color: var(--ink-2);
}

/* The phase. A 2px ink frame on the surface: the one box on the page. */
.wi-election-status {
  margin-top: var(--s5);
  max-width: 760px;
  display: grid;
  gap: var(--s2);
  border: 2px solid var(--ink);
  background: var(--surface);
  padding: var(--s4) var(--s5);
}

.wi-election-status p {
  margin: 0;
}

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

.wi-election-status__head {
  font: 650 var(--fs-md) / 1.4 var(--sans);
}

.wi-election-status__body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.wi-election-status__source {
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
}

/* The calendar: a ruled row of dates, the current step under a 3px ink rule. */
.wi-election-calendar {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--rule-2);
}

.wi-election-calendar li {
  margin-top: -1px;
  padding: var(--s3) var(--s3) var(--s3) 0;
  display: grid;
  gap: var(--s1);
  border-top: 1px solid var(--rule-2);
  color: var(--ink-3);
}

.wi-election-calendar li.is-passed,
.wi-election-calendar li.is-current {
  color: var(--ink);
}

.wi-election-calendar li.is-current {
  border-top: 3px solid var(--ink);
}

.wi-election-calendar__date,
.wi-election-calendar__state {
  font: var(--fs-xs) / 1.4 var(--mono);
  color: var(--ink-3);
}

.wi-election-calendar__label {
  font-size: var(--fs-sm);
}

.wi-election-calendar li.is-current .wi-election-calendar__label {
  font-weight: 650;
}

/* ------------------------------------------------------- section headings */

/*
 * T13's section heads sit on a 2px ink rule, with the races' count line on the
 * same baseline at the right. The sections are .wi-section (the shared opener);
 * these rules are scoped to the T13 ids so the F1 sections below keep theirs.
 */
.wi-election .wi-section[aria-labelledby="races"],
.wi-election .wi-section[aria-labelledby="measures"] {
  padding-top: var(--s8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  align-items: baseline;
}

.wi-election .wi-section[aria-labelledby="races"] > *,
.wi-election .wi-section[aria-labelledby="measures"] > * {
  grid-column: 1 / -1;
  /* A grid item is as wide as its content by default; the race tables are
     min-width 520px and must scroll inside .wi-scroll, not widen the page. */
  min-width: 0;
}

.wi-election .wi-section[aria-labelledby="races"] > h2,
.wi-election .wi-section[aria-labelledby="measures"] > h2 {
  grid-column: 1;
  margin-top: 0;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink);
}

.wi-election .wi-section[aria-labelledby="races"] > .wi-election-meta {
  grid-column: 2;
  padding-bottom: var(--s2);
  padding-left: var(--s3);
  border-bottom: 2px solid var(--ink);
  align-self: end;
}

.wi-election-meta {
  margin: 0;
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
  text-align: right;
}

.wi-election .wi-section[aria-labelledby="races"] > .wi-standfirst {
  margin-top: var(--s3);
}

.wi-election .wi-section[aria-labelledby="count"] {
  padding-top: var(--s8);
  scroll-margin-top: var(--s4);
}

/* On a phone the count line drops under the heading rather than squeezing it. */
@media (max-width: 560px) {
  .wi-election .wi-section[aria-labelledby="races"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .wi-election .wi-section[aria-labelledby="races"] > h2 {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .wi-election .wi-section[aria-labelledby="races"] > .wi-election-meta {
    grid-column: 1;
    text-align: left;
    padding-top: var(--s1);
  }
}

/* ------------------------------------------------------------------ races */

.wi-election-races {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s4);
}

.wi-election-race {
  min-width: 0;
  border: 1px solid var(--rule-2);
  background: var(--surface);
}

.wi-election-race__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}

.wi-election-race__head h3 {
  margin: 0;
  font: 650 var(--fs-md) / 1.3 var(--sans);
}

.wi-election-race__head h3 a {
  color: var(--ink);
}

.wi-election-race__state {
  margin: 0;
  font: 650 var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wi-election-race__state.is-strong {
  color: var(--ink);
}

.wi-election-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.wi-election-table th,
.wi-election-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}

.wi-election-table thead th {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
  font: 650 var(--fs-xs) / 1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wi-election-table tbody th {
  font-weight: 400;
}

/* Every count: right-aligned mono, one ink for every row. */
.wi-election-table .num {
  text-align: right;
  font-family: var(--mono);
  color: var(--ink);
}

.wi-election-table td.num.muted {
  color: var(--ink-2);
}

.wi-election-cand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.wi-election-cand > a,
.wi-election-cand__name {
  font-weight: 650;
}

.wi-election-cand__inc {
  font: var(--fs-xs) / 1 var(--mono);
  color: var(--ink-3);
}

/* Only ever rendered with a certification date and a canvass link. */
.wi-election-cand__elected {
  font: 650 var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  padding: 4px 6px;
  border-radius: 2px;
  text-decoration: none;
}

.wi-election-cand__elected:hover {
  color: var(--bg);
}

.wi-election-race__foot {
  margin: 0;
  padding: var(--s3) var(--s4);
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
}

/* --------------------------------------------------------------- measures */

.wi-election-measures {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wi-election-measures li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}

.wi-election-measures__what {
  display: grid;
  gap: var(--s1);
}

.wi-election-measures__what > a {
  font: 650 var(--fs-md) / 1.3 var(--sans);
}

.wi-election-measures__sub {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.wi-election-measures__result {
  font: 650 var(--fs-xs) / 1.5 var(--mono);
  text-align: right;
  color: var(--ink-3);
}

.wi-election-measures__result.is-final {
  color: var(--ink);
}

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

/* ------------------------------------------------------- how the count works */

.wi-election-rules {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  max-width: var(--measure);
}

.wi-election-rules li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  font-size: var(--fs-sm);
}

.wi-election-rules__n {
  font: var(--fs-xs) / 1.7 var(--mono);
  color: var(--ink-3);
}

.wi-election-rules__head {
  font-weight: 650;
}

/* -------------------------------------------------------- registering, VoteWA */

.wi-election .wi-section[aria-labelledby="vote"] {
  margin-top: var(--s8);
  padding: var(--s4) var(--s5);
  max-width: var(--measure);
  border-left: var(--accent-w) solid var(--accent);
  background: var(--accent-soft);
}

.wi-election .wi-section[aria-labelledby="vote"] > h2 {
  margin-top: 0;
  font: 650 var(--fs-md) / 1.3 var(--sans);
}

.wi-election .wi-section[aria-labelledby="vote"] > p:not(.wi-source) {
  margin: var(--s2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* --------------------------------------------------------- this election */

.wi-election-links {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-2);
}

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

.wi-election-links ul {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s1);
  font-size: var(--fs-sm);
}

.wi-election-links__note {
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
}

.wi-election-links__foot {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-3);
}

/* ------------------------------------------------------- the /measure/ index */

.wi-measure-index__county {
  min-width: 11rem;
  font-weight: 650;
}

.wi-measure-index__list {
  flex-basis: 100%;
}

.wi-measure-index__list summary {
  cursor: pointer;
  font: var(--fs-xs) / 1.6 var(--mono);
  color: var(--ink-2);
}

.wi-measure-index__list ul {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0 0 0 var(--s4);
  display: grid;
  gap: var(--s1);
  font-size: var(--fs-sm);
}

.wi-measure-index__list li a {
  font-weight: 400;
}