/* 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.
 */

/* 2026-09-10 visual-first chapter layout. Earlier card/rail rules remain only
 * for old cached markup; the live template now leads with the shared calendar
 * and county map, then offers four compact continuation points. */
.ew-visual-home .rf-clock {
  display: grid;
  grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.ew-visual-home .rf-clock__title { margin: 0; font-size: var(--text-sm); }
.ew-visual-home .rf-clock__units { flex-wrap: nowrap; gap: var(--space-2); }
.ew-visual-home .rf-clock__unit { min-width: 0; padding: var(--space-2); }
.ew-visual-home .rf-clock__num { font-size: clamp(var(--text-xl), 4vw, var(--text-3xl)); }
.ew-visual-home .rf-cal-sec { padding-top: var(--space-4); }
.ew-visual-home .rf-cal-sec > h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); }

.ew-geography-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  margin-block: var(--space-3);
}
/* National counts: a single column chart, not a row of metric cards. */
.ew-national { margin-block: var(--space-4); padding: var(--space-4); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); }
.ew-national__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ew-national h2 { margin: 0; font-size: var(--text-xl); }
.ew-national__caption { margin: 0; font-size: var(--text-sm); color: var(--colour-text-muted); }
.ew-national-plot { --plot-height: 12rem; position: relative; margin: var(--space-4) 0; padding: 2rem 0 0 3rem; }
.ew-national-axis { position: absolute; top: 2rem; left: 0; height: var(--plot-height); color: var(--colour-text-muted); font-size: var(--text-xs); }
.ew-national-axis span { position: absolute; top: 0; transform: translateY(-50%); }
.ew-national-axis span:nth-child(2) { top: 50%; }
.ew-national-axis span:nth-child(3) { top: 100%; }
.ew-national-measures { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.ew-national-measures::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--plot-height); border-block: 1px solid var(--colour-border); background: linear-gradient(transparent calc(50% - .5px), var(--colour-border) 50%, transparent calc(50% + .5px)); pointer-events: none; }
.ew-national-measure { --column-ink: var(--colour-primary); position: relative; min-width: 0; text-align: center; }
.ew-national-measure--1 { --column-ink: var(--colour-text-muted); }
.ew-national-measure--2 { --column-ink: var(--colour-info); }
.ew-national-measure h3 { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.ew-national-measure h3 span { display: block; margin-top: .2rem; font-weight: 400; color: var(--colour-text-muted); }
.ew-national-column { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.ew-national-column:hover h3 { text-decoration: underline; }
.ew-national-column:focus-visible { outline: 3px solid var(--colour-primary); outline-offset: 3px; }
.ew-national-column__plot { position: relative; height: var(--plot-height); }
.ew-national-column__bar { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(70%, 8rem); height: var(--value); background: var(--column-ink); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.ew-national-column__bar strong { position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%); color: var(--column-ink); font-size: var(--text-xl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ew-national-column__unknown { width: min(70%, 8rem); margin-inline: auto; border: 1px dashed var(--colour-border-strong); border-radius: var(--radius-md) var(--radius-md) 0 0; display: grid; place-items: center; color: var(--colour-text-muted); }
.ew-national-column__unknown > span { font-size: var(--text-3xl); font-weight: 300; }
.ew-national__missing { font-size: var(--text-xs); margin: var(--space-1) 0 0; color: var(--colour-text-muted); }
.ew-national-plot figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--colour-text-muted); }
.ew-national__heading--growth { margin-top: var(--space-5); }
.ew-period { font-size: var(--text-sm); color: var(--colour-text-muted); }
.ew-ranking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.ew-ranking-group { --rank-ink: var(--colour-primary); min-width: 0; padding: var(--space-3); border: 1px solid var(--colour-border); border-top: 3px solid var(--rank-ink); border-radius: var(--radius-md); }
.ew-ranking-group--percentage { --rank-ink: var(--colour-info); }
.ew-ranking-group > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1); margin-bottom: var(--space-3); }
.ew-ranking-group > header h3 { margin: 0; font-size: var(--text-lg); color: var(--rank-ink); }
.ew-ranking-group > header p { margin: 0; font-size: var(--text-xs); color: var(--colour-text-muted); }
.ew-ranking-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ew-register-change { min-width: 0; }
.ew-register-change h4 { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.ew-change-bars { list-style: none; margin: 0; padding: 0; }
.ew-change-bars a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-2); min-height: 52px; color: inherit; text-decoration: none; }
.ew-change-bars a:hover .ew-lollipop__name { text-decoration: underline; }
.ew-change-bars a:focus-visible { outline: 2px solid var(--rank-ink, var(--colour-primary)); outline-offset: 2px; }
.ew-lollipop__name { display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-sm); }
.ew-lollipops a { display: flex; flex-wrap: wrap; align-content: center; }
.ew-lollipop__name { flex: 1 0 auto; max-width: 100%; }
.ew-lollipops strong { margin-inline-start: auto; }
.ew-lollipop__name small { font-size: var(--text-xs); color: var(--colour-text-muted); }
.ew-lollipops strong { font-size: var(--text-sm); color: var(--rank-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ew-lollipop__track { flex: 0 0 calc(100% - .4rem); grid-column: 1 / -1; position: relative; display: block; height: 2px; margin: .35rem .4rem .65rem 0; background: var(--colour-border); }
.ew-lollipop__stem { position: relative; display: block; width: var(--w); height: 100%; background: var(--rank-ink); }
.ew-lollipop__stem::after { content: ""; position: absolute; right: -.3rem; top: -.25rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--rank-ink); }
.ew-lollipop__axis { display: flex; justify-content: space-between; color: var(--colour-text-muted); font-size: var(--text-xs); margin-top: .25rem; }
/* Retained count-decrease chart, when a paired register actually decreases. */
.ew-national__track { grid-column: 1 / -1; display: block; background: var(--colour-bg-subtle); height: .75rem; margin-block: .5rem; border-radius: var(--radius-sm); overflow: hidden; }
.ew-national__track i { display: block; width: var(--w); height: 100%; background: var(--colour-warning); }
.ew-register-change--decrease { margin-top: var(--space-3); }
@media (max-width: 600px) {
  .ew-ranking-grid { grid-template-columns: minmax(0, 1fr); }
  .ew-national { padding: var(--space-3); }
  .ew-national-plot { --plot-height: 9rem; padding-left: 2rem; }
  .ew-national-measures { gap: var(--space-1); }
  .ew-national-measure h3 { font-size: var(--text-xs); overflow-wrap: anywhere; }
  .ew-national-column__bar strong { font-size: var(--text-sm); top: -1.5rem; }
  .ew-lollipop__name small { display: none; }
}
@media (max-width: 360px) { .ew-ranking-pair { grid-template-columns: minmax(0, 1fr); } }
.ew-map,
.ew-baseline {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-bg);
}
.ew-map__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ew-map__heading h2,
.ew-baseline h2 { margin: 0; font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); }
.ew-results-link,
.ew-baseline__drill { flex: none; font-weight: 750; }
.ew-map__key { margin: var(--space-1) 0 var(--space-3); color: var(--colour-text-muted); font-size: var(--text-sm); }
.ew-geography-story > .ew-map { grid-column: 1 / -1; width: 100%; min-width: 0; }
.ew-map #elections-map { width: 100%; max-width: none; height: min(82vh, 54rem); }
.ew-map .ew-map__county--linked { cursor: pointer; }
.ew-map .elections-map-legend { margin-top: var(--space-2); }
.ew-map .rf-method { margin-bottom: 0; }

.ew-baseline { display: flex; flex-direction: column; }
.ew-baseline__bars { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding: 0; list-style: none; }
.ew-baseline__bars a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--space-2); color: var(--colour-text); text-decoration: none; font-size: var(--text-sm); }
.ew-baseline__bars i { display: block; width: var(--w); min-width: .3rem; height: .55rem; border-radius: 999px; background: var(--party); }
.ew-baseline__bars strong { text-align: end; font-variant-numeric: tabular-nums; }
.ew-baseline__register { display: flex; flex-direction: column; margin-top: auto; padding: var(--space-3); border-radius: var(--radius-md); background: var(--colour-bg-subtle); color: var(--colour-text); text-decoration: none; }
.ew-baseline__register strong { font-size: var(--text-2xl); line-height: 1; }
.ew-baseline__register span { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--colour-text-muted); }
.ew-baseline__drill { margin-top: var(--space-3); }

.rf-cal-mobile { display: none; }

@media (max-width: 52rem) {
  .ew-visual-home .rf-clock { grid-template-columns: 1fr; }
  .ew-geography-story { grid-template-columns: 1fr; }
  .ew-map { padding: var(--space-3); }
  .rf-cal-mobile { display: block; }
  .rf-cal-mobile > ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; padding: 0; list-style: none; }
  .rf-cal-mobile > ol > li { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-inline-start: 3px solid var(--rf-ink); background: var(--colour-bg-subtle); }
  .rf-cal-mobile > ol span { font-size: var(--text-xs); font-weight: 750; }
  .rf-cal-mobile > ol a { flex: none; font-size: var(--text-sm); font-weight: 750; }
  .rf-cal-mobile__all > ol { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
  .rf-cal-mobile__all li { margin-block: var(--space-1); }
  .ew-visual-home .rf-cal { display: none; }
}

@media (max-width: 480px) {
  .ew-map__heading { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .ew-map #elections-map { height: 22rem; }
}

/* ---------------------------------------------------------------- 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;
}

/* ---------------------------------------------------------- opening snapshot
 * The clock and the three numbers that frame the story share one row. The old
 * clock consumed a full-width band before the page showed a single result.
 */
.ew-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ew-overview .rf-clock {
  margin: 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + 4px);
}

.ew-overview .rf-clock__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.ew-overview .rf-clock__units { gap: var(--space-2); }

.ew-overview .rf-clock__unit {
  min-width: 4rem;
  padding: var(--space-2);
}

.ew-overview .rf-clock__num {
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
}

.ew-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.ew-snapshot__stat {
  display: flex;
  min-height: 2.75rem;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-top: 3px solid var(--colour-primary);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  color: var(--colour-text);
  text-decoration: none;
}

.ew-snapshot__stat:nth-child(2) { border-top-color: var(--colour-secondary); }
.ew-snapshot__stat:nth-child(3) { border-top-color: var(--colour-info); }

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

.ew-snapshot__stat strong {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ew-snapshot__stat span {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--colour-text-muted);
}

/* ------------------------------------------------- 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: 0;
  padding: var(--space-3);
  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(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ew-rail__list > li { min-width: 0; }

.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);
  color: inherit;
  text-decoration: none;
}

.ew-rail__item:hover,
.ew-rail__item:focus-visible {
  background: var(--colour-primary-alpha-10);
}

.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: 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-3);
  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);
}
/* ------------------------------------------------------------- what is next */

.ew-next {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
}

.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(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ew-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ew-next__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  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);
}

/* ------------------------------------------- pillar 3: the reform record ---
 * The card used to hold three totals. It now holds the SHAPE of the ten
 * commitments and the one that is past a deadline fixed by law.
 *
 * The strip is proportional, not a chart with an axis: `--ew-comp-share` is
 * the column's own count, fed straight into `flex-grow`, so a column with six
 * commitments is six times the width of one with one. Ten items is small
 * enough for that to be read directly and too small for an axis to earn its
 * space. Every colour comes from `.rf-s--<tone>` in reforms.css, and each
 * segment also carries its number and its label, so colour is never the only
 * signal (WCAG 1.4.1).
 */

.ew-comp__caption {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--colour-text-muted);
}

.ew-comp {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ew-comp__item {
  flex: var(--ew-comp-share, 1) 1 auto;
  /* A one-commitment column must still be readable, so growth is proportional
   * ABOVE a floor rather than from zero. Without this, "1 of 10" collapses to
   * a sliver that cannot hold its own number. */
  min-width: 4.5rem;
  border-radius: var(--radius-sm);
  background: var(--rf-wash, var(--colour-bg-subtle));
  border-left: 3px solid var(--rf-ink, var(--colour-border-strong));
}

/* An empty column is still drawn. "Nothing is stalled" is a finding; a column
 * that vanishes reads as one we forgot to count. */
.ew-comp__item.is-empty {
  flex-grow: 0;
  opacity: 0.6;
}

.ew-comp__link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2);
  color: inherit;
  text-decoration: none;
}

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

.ew-comp__n {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--rf-ink, var(--colour-text));
}

.ew-comp__label {
  font-size: var(--text-xs);
  line-height: 1.25;
  color: var(--colour-text-light);
}

/* The one thing on this card that is a breach, said in words. It gets the
 * card's only strong emphasis, because five advisory dates and one Article
 * 89(2) duty must not read as the same news. */
.ew-breach {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--colour-danger);
  background: var(--colour-danger-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ew-breach__head {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-danger);
}

.ew-breach__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ew-breach__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.ew-breach__link {
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}

.ew-breach__late {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--colour-danger);
}

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

.ew-breach__who {
  flex-basis: 100%;
}

/* Past their date, split by what kind of date it was. */
.ew-basis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.ew-basis__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--colour-text-light);
}

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

.ew-basis__item--breach .ew-basis__n {
  color: var(--colour-danger);
}

.ew-basis__note {
  margin: var(--space-1) 0 0;
  line-height: 1.4;
}

.ew-pillar__foot {
  margin: auto 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--colour-border);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--colour-text-muted);
}

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

.ew-pillar__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

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

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

.ew-source > summary {
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--colour-primary);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.ew-source > p { margin: 0; }

@media (max-width: 900px) {
  .ew-overview,
  .ew-action-grid { grid-template-columns: 1fr; }

  .ew-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

  .ew-snapshot,
  .ew-rail__list,
  .ew-next__list { grid-template-columns: 1fr; }
}