/* ==========================================================================
   Election results (/results/{year}, /results/{year}/{party}). Design B, Read mode.
   Built on seat.css (the band, answer, jump links, ribbons, sections) and profiles.css.
   Party hues arrive as --pc on the element; everything else is a token. No text below 13px:
   the map carries no SVG text (its names are in the table below it).
   ========================================================================== */

.rs-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

/* the house in one bar: seats by party, majority mark across it */
.rs-bar { position: relative; margin-top: var(--s4); padding-bottom: 26px; }
.rs-segs { display: flex; height: 30px; gap: 2px; background: var(--bg); }
.rs-segs i { display: block; min-width: 3px; background: var(--pc, var(--rest)); }
.rs-maj {
  position: absolute; left: var(--at); top: -6px; bottom: 0; border-left: 2px solid var(--ink);
}
.rs-maj span {
  position: absolute; bottom: 0; left: 6px; white-space: nowrap;
  font-size: var(--fs-2); color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* the tally beside the map */
.rs-tally {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px var(--s4);
  margin: 0; padding: 0; list-style: none; font-size: var(--fs-2);
}
.rs-tally li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 4px 0; border-bottom: 1px solid var(--line); }
.rs-tally a { color: inherit; text-decoration: none; }
.rs-tally a:hover .sp-pn span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.rs-tally b { font-size: var(--fs-3); }
.rs-facts { display: block; }

/* the state, every seat in its winner's colour */
.rs-map .rs-svg { display: block; width: 100%; height: auto; max-height: 720px; background: var(--bg-2); border: 1px solid var(--line); }
.rs-svg path { fill: var(--pc, var(--rest)); stroke: var(--bg); stroke-width: .7; stroke-linejoin: round; fill-rule: evenodd; }
.rs-svg path.o { fill: var(--track); }
.rs-svg a:hover path { stroke: var(--ink); stroke-width: 1.4; }

/* parties: seats, change, share, second places */
.rs-pt { width: 100%; border-collapse: collapse; font-size: var(--fs-2); line-height: 1.5; }
.rs-pt th, .rs-pt td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rs-pt thead th { color: var(--ink-3); font-weight: 500; border-bottom-color: var(--line-strong); }
.rs-pt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-pt tbody th a { color: inherit; text-decoration: none; }
.rs-pt tbody th a:hover .sp-pn span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.rs-pt td b { font-size: var(--fs-3); }
.rs-pt .sh { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.rs-pt .sh .trk { width: 120px; flex: none; }

/* seats that changed hands */
.rs-flips { margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); }
.rs-flips li {
  display: grid; grid-template-columns: minmax(170px, 240px) 130px minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.rs-fx { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rs-fx .arr { color: var(--ink-3); }
.rs-flips .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* closest and widest */
.rs-cl { margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); counter-reset: n; }
.rs-cl li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s m" "w w"; gap: 2px var(--s3);
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.rs-cl-s { grid-area: s; font-weight: 600; }
.rs-cl-s a, .rs-all a, .rs-vac a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rs-cl-s a:hover, .rs-all a:hover, .rs-vac a:hover { text-decoration-color: var(--ink); }
.rs-cl-w { grid-area: w; color: var(--ink-2); }
.rs-cl-m { grid-area: m; text-align: right; font-variant-numeric: tabular-nums; }

/* vacated seats */
.rs-vac { margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); line-height: 1.6; }
.rs-vac li { padding: 8px 0; border-bottom: 1px solid var(--line); max-width: 80ch; }

/* every seat, by district */
.rs-all { width: 100%; border-collapse: collapse; font-size: var(--fs-2); line-height: 1.5; }
.rs-all th, .rs-all td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.rs-all thead th { color: var(--ink-3); font-weight: 500; border-bottom-color: var(--line-strong); }
.rs-all .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-all .m { text-align: right; }
.rs-all .ac { color: var(--ink-3); width: 3.2em; }
.rs-all .se { font-weight: 600; }
.rs-all .sp-who { overflow-wrap: anywhere; }
.rs-all tr.dh th { padding-top: var(--s4); font-size: var(--fs-3); font-weight: 700; border-bottom-color: var(--line-strong); }
.rs-all tr.dh a { text-decoration: none; }
.rs-all tr.dh a:hover { text-decoration: underline; }

.rs-others { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); }
.rs-others a { color: inherit; text-decoration: none; }
.rs-others a:hover .sp-pn span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.rs-others .num { color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .rs-band { grid-template-columns: minmax(0, 1fr); }
  .rs-map .rs-svg { max-height: 560px; }
}
@media (max-width: 640px) {
  .rs-pt thead, .rs-all thead { display: none; }
  .rs-pt, .rs-pt tbody, .rs-all, .rs-all tbody { display: block; }
  .rs-pt th, .rs-pt td, .rs-all th, .rs-all td { padding: 0; border: 0; }
  /* one party: name and seats, then share, change and second places */
  .rs-pt tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p s" "h h" "c d";
    gap: 4px var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .rs-pt tbody th { grid-area: p; }
  .rs-pt td:nth-of-type(1) { grid-area: s; }
  .rs-pt td:nth-of-type(2) { grid-area: c; text-align: left; color: var(--ink-2); }
  .rs-pt td:nth-of-type(3) { grid-area: h; text-align: left; }
  .rs-pt td:nth-of-type(4) { grid-area: d; color: var(--ink-2); }
  .rs-pt td:nth-of-type(2)::before, .rs-pt td:nth-of-type(4)::before { content: attr(data-l) " "; color: var(--ink-3); }
  .rs-pt .sh .trk { width: 96px; }
  .rs-flips li { grid-template-columns: minmax(0, 1fr) auto; }
  .rs-flips .trk { grid-column: 1 / -1; }
  /* one seat: number and name, winner, then margin and 2021 */
  .rs-all tr {
    display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; grid-template-areas: "a s m" ". w w" ". y y";
    gap: 2px var(--s2); padding: 9px 0; border-bottom: 1px solid var(--line);
  }
  .rs-all tr.dh { display: block; padding: var(--s4) 0 6px; border-bottom: 1px solid var(--line-strong); }
  .rs-all .ac { grid-area: a; width: auto; }
  .rs-all .se { grid-area: s; }
  .rs-all .m { grid-area: m; }
  .rs-all .wn { grid-area: w; }
  .rs-all .y { grid-area: y; color: var(--ink-3); }
  .rs-all .y::before { content: attr(data-l) "\00a0\00a0"; }
}