/* Elections Watch 2027 hub — /elections-2027/ (MZ-20260907-EW2027).
 *
 * Client direction 2026-09-07: "less wordy and more visuals ... more compact
 * saving on space so one can see more in one page than having to scroll so much
 * just to see." So the hub is built from four dense bands, each one screen-row
 * deep, and never from a stack of full-width prose blocks.
 *
 * Tokens only — every colour and every step of spacing comes from core.css.
 * A raw hex here fails `scripts/lint_design_system.py --strict`, and rightly:
 * one hard-coded colour is invisible in light mode and unreadable in dark.
 */

/* ---------------------------------------------------------------- hero lead */

.page-elections-watch .rf-hero-lead {
  max-width: var(--measure-lead);
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
  line-height: 1.45;
}

/* ------------------------------------------------- nomination-day stagger rail
 *
 * The one fact the gazetted calendar exists to carry: nomination day is a
 * different date for every seat. It leads the page because a reader who takes
 * "nomination day" as a single date takes the wrong one.
 */

.ew-rail {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-bg-subtle);
}

.ew-rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}

.ew-rail__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
}

.ew-rail__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

/* Auto-fit rather than a fixed column count: the notice sets seven seats today
 * and the row count is data, not a layout constant. */
.ew-rail__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ew-rail__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--colour-warning);
  border-radius: var(--radius-sm);
  background: var(--colour-bg);
}

.ew-rail__date {
  font-size: var(--text-base);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--colour-primary);
}

.ew-rail__seat {
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--colour-text);
}

.ew-rail__src {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

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

.ew-pillars {
  margin: var(--space-6) 0 0;
}

.ew-pillars__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
}

.ew-pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.ew-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-top: 4px solid var(--colour-border-strong);
  border-radius: var(--radius-lg);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}

/* One hue per pillar, on the top edge only. It is the reader's way back: the
 * same three colours mark the same three pillars wherever they reappear. */
.ew-pillar--calendar { border-top-color: var(--colour-warning); }
.ew-pillar--results { border-top-color: var(--colour-info); }
.ew-pillar--reform { border-top-color: var(--colour-success); }

.ew-pillar__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.ew-pillar__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-wrap: balance;
}

.ew-pillar__link {
  color: var(--colour-primary);
  text-decoration: none;
}

.ew-pillar__link:hover,
.ew-pillar__link:focus-visible {
  color: var(--colour-link-hover);
  text-decoration: underline;
}

.ew-pillar__lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--colour-text-light);
}

.ew-pillar__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
}

.ew-stat {
  display: flex;
  flex-direction: column-reverse; /* value reads first, label sits under it */
  gap: 2px;
}

.ew-stat__label {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.ew-stat__value {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--colour-text);
}

/* A date is not a quantity — it gets the same weight but not the same size, so
 * it never reads as a bigger number than the counts beside it. */
.ew-stat__value--date {
  font-size: var(--text-base);
  line-height: 1.2;
}

/* Seats per office. Deliberately NOT a bar chart: 1 president against 1,450
 * MCAs draws a chart in which five of the six offices are invisible. */
.ew-offices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--colour-border);
  list-style: none;
}

.ew-offices__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--colour-bg-subtle);
  font-size: var(--text-xs);
}

.ew-offices__n {
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--colour-text);
}

.ew-offices__label {
  color: var(--colour-text-muted);
}

/* ------------------------------------------------------- standing side menu
 *
 * Owner report 2026-09-07: "its not clear to the user the various tabs it can
 * show ... perhaps a side menu like [the member profile] titled 'Profile' will
 * make it clearer." This hub was the only page in the section including no
 * section nav, so eleven destinations were invisible from its own front door.
 *
 * The old `.ew-tabs` pill row lived INSIDE the third pillar card and carried
 * five of those eleven. It is deleted, not restyled: a wayfinding control
 * buried in one card is the half-affordance the owner was reporting.
 *
 * Rail first, prose second in the source order — so a screen reader and a
 * narrow viewport both meet the menu before the page it introduces.
 */

.ew-layout {
  margin-top: var(--space-6);
}

.ew-nav__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

/* The pillar's own hue on the group's left edge — the same three colours that
 * mark the same three pillars in the cards, so the menu and the page agree. */
.ew-nav__group {
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--colour-border);
}

.ew-nav__group--start { border-left-color: var(--colour-primary); }
.ew-nav__group--calendar { border-left-color: var(--colour-warning); }
.ew-nav__group--results { border-left-color: var(--colour-info); }
.ew-nav__group--reform { border-left-color: var(--colour-success); }

.ew-nav__grouplabel {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
}

/* Below the breakpoint the menu is a wrapping grid across the full width, so
 * it stays one band deep instead of a long column the reader must scroll past
 * to reach the page. Above it, one item per row (see the media query). */
.ew-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ew-nav__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--colour-text-light);
  text-decoration: none;
}

.ew-nav__link:hover,
.ew-nav__link:focus-visible {
  background: var(--colour-bg-subtle);
  color: var(--colour-primary);
}

.ew-nav__link.is-current {
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
  font-weight: var(--fw-bold);
}

/* The badge is a count of stored rows, printed only where one was measured —
 * an item with no honest figure gets no badge (services/watch_hub.py). */
.ew-nav__count {
  flex: none;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--colour-text-muted);
}

.ew-nav__link.is-current .ew-nav__count {
  color: var(--colour-primary);
}

/* The rail's own heading already spaces the column; the first band inside the
 * main column must not add its top margin again, or the two columns start at
 * different heights. */
.ew-main > :first-child {
  margin-top: 0;
}

@media (min-width: 921px) {
  .ew-layout {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-6);
  }

  /* Sticky, like the profile rail the owner pointed at: the section's map stays
   * on screen while the reader moves down the page. */
  .ew-nav {
    position: sticky;
    top: var(--space-4);
    padding-right: var(--space-4);
    border-right: 1px solid var(--colour-border);
  }

  .ew-nav__list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- what is next */

.ew-next {
  margin: var(--space-6) 0 0;
}

.ew-next__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
}

.ew-next__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ew-next__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
}

.ew-next__date {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-warning);
}

.ew-next__duty {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--colour-text);
  text-decoration: none;
}

.ew-next__duty:hover,
.ew-next__duty:focus-visible {
  color: var(--colour-primary);
  text-decoration: underline;
}

.ew-next__clause {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

/* ------------------------------------------------------------- source line */

.ew-source {
  max-width: var(--measure-lead);
  margin: var(--space-5) 0 var(--space-6);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--colour-text-muted);
}

@media (max-width: 480px) {
  .ew-rail,
  .ew-pillar {
    padding: var(--space-3);
  }
}