/* ==========================================================================
   Seat profile (the constituency page). Design B: hairline rules, tokens only, no cards.
   Built on tick-b.css and profiles.css (section heads, .wire headline list, .pr-trend link,
   .dot). Party hues arrive as --pc on the element; everything else is a token, so the dark
   and blue themes need nothing here. No text below 13px: charts and map names are HTML, not
   SVG text, because SVG text scales with its drawing and shrank below 13px on a phone.
   ========================================================================== */

.sp { padding-bottom: var(--s5); }

/* ---------- the band: the plain answer, the seat on its own map, the facts ---------- */
.sp-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "id map" "facts map";
  grid-template-rows: auto 1fr;
  gap: var(--s4) var(--s6);
  align-items: start;
  margin-top: var(--s3);
  padding: var(--s5) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.sp-id { grid-area: id; min-width: 0; }
.sp h1 {
  margin: 0; font-size: var(--fs-6); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.sp-band .en { margin-top: 2px; font-size: var(--fs-2); color: var(--ink-3); line-height: 1.5; }
.sp-meta { margin: var(--s2) 0 0; font-size: var(--fs-2); color: var(--ink-3); line-height: 1.5; }
.sp-meta a, .sp-facts a, .sp-seats a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.sp-meta a:hover, .sp-facts a:hover, .sp-seats a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* the answer: plain sentences, built only from recorded facts */
.sp-answer {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--fs-4); line-height: 1.6; max-width: 64ch;
}
.sp-answer p { margin: 0 0 var(--s2); }
.sp-answer p.st { margin-bottom: var(--s3); font-size: var(--fs-5); font-weight: 600; line-height: 1.4; }   /* a vacant seat says so first */
.sp-answer b { font-weight: 700; }
.sp-pn { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; white-space: nowrap; }
.sp-pn .dot { align-self: center; }
.sp-who { overflow-wrap: anywhere; }

.sp-facts {
  grid-area: facts; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s4);
  margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-2); line-height: 1.5;
}
.sp-facts dt { color: var(--ink-3); }
.sp-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- the map ---------- */
.sp-map { grid-area: map; margin: 0; position: relative; min-width: 0; }
.sm-box { position: relative; background: var(--bg-2); border: 1px solid var(--line); }
.sp-map svg.sm { display: block; width: 100%; height: auto; }
.sm path { stroke-linejoin: round; fill-rule: evenodd; }
.sm-far  { fill: var(--bg); stroke: var(--line-strong); stroke-width: .6; }
.sm-near { fill: var(--bg-2); stroke: var(--ink-4); stroke-width: .8; }
.sm-dist { fill: var(--track); stroke: var(--ink-4); stroke-width: .9; }
.sm-me   { fill: var(--accent); fill-opacity: .26; stroke: var(--accent-text); stroke-width: 2.2; }
/* names over the drawing are HTML, positioned in percentages: SVG text scales with the drawing and fell below 13px on a phone */
.sm-l, .sm-km {
  position: absolute; transform: translate(-50%, -55%); white-space: nowrap;
  font-size: var(--fs-2); line-height: 1.1; color: var(--ink-2);
  paint-order: stroke fill; -webkit-text-stroke: 3px var(--bg-2);
}
.sm-lme { font-weight: 700; color: var(--ink); }
.sm-l.l { transform: translate(0, -55%); }
.sm-l.r { transform: translate(-100%, -55%); }
.sm-km { transform: translateY(-100%); color: var(--ink-3); }
.sm .sm-scale { fill: var(--ink); }
.sp-inset { position: absolute; width: 78px; padding: 4px; background: var(--bg); border: 1px solid var(--line); }
.sp-inset.in-tr { right: var(--s2); top: var(--s2); }
.sp-inset.in-br { right: var(--s2); bottom: var(--s2); }
.sp-inset.in-tl { left: var(--s2); top: var(--s2); }
.sm-tn { display: block; width: 100%; height: auto; }
.sm-tn path { stroke-linejoin: round; }
.sm-tn .out, .sm-tn .b0, .sm-tn .b1, .sm-tn .b2, .sm-tn .b3, .sm-tn .b4, .sm-tn .b5 { fill: var(--track); stroke: var(--line-strong); stroke-width: .5; }
.sm-tn .here { fill: var(--accent); stroke: var(--accent-text); stroke-width: .6; }
.sm-tn .pin { fill: var(--accent-text); } .sm-tn .pin-r { fill: var(--accent); fill-opacity: .25; }
.sp-map figcaption { margin-top: var(--s2); font-size: var(--fs-2); color: var(--ink-3); line-height: 1.5; }

/* ---------- in-page jump links ---------- */
.sp-jump {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); padding: var(--s3) 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-2);
}
.sp-jump a {
  color: var(--ink-2); padding: 6px 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
}
.sp-jump a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- sections ---------- */
.sp-body > .section:first-child { margin-top: var(--s6); }
.sp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: start; }
.sp-duo-res { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.sp-cap { margin: 0 0 var(--s2); font-size: var(--fs-3); font-weight: 600; line-height: 1.4; }
.sp-lead { margin: var(--s3) 0 0; font-size: var(--fs-3); line-height: 1.6; max-width: 70ch; }
.sp-note { margin: var(--s2) 0 0; font-size: var(--fs-2); color: var(--ink-3); line-height: 1.5; }
.sp-more { margin: var(--s3) 0 0; font-size: var(--fs-2); }
.sp-more a { color: var(--accent-text); font-weight: 600; }
.sp-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-ribbon {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2);
  margin: var(--s3) 0 0; font-size: var(--fs-2); color: var(--ink-3); line-height: 1.5;
}
.sp-ribbon > span:last-child, .sp-note, .sp-src li { max-width: 68ch; }
.sp-t {
  display: inline-block; border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 6px;
  font-size: var(--fs-2); line-height: 20px; color: var(--ink-2); white-space: nowrap;
}

/* ---------- results and seats tables ---------- */
.sp-res, .sp-seats { width: 100%; border-collapse: collapse; font-size: var(--fs-2); line-height: 1.5; }
.sp-res th, .sp-res td, .sp-seats th, .sp-seats td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-res thead th, .sp-seats thead th { color: var(--ink-3); font-weight: 500; border-bottom-color: var(--line-strong); }
.sp-res tbody th, .sp-seats tbody th { font-weight: 600; }
.sp-res .num, .sp-seats .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-res .sp-who { display: block; overflow-wrap: normal; }
.sp-res .wn .sp-who { font-weight: 600; }
.sp-res .rn { color: var(--ink-2); }
.sp-na { color: var(--ink-3); }
.sp-dag { color: var(--ink-3); margin-left: 2px; font-size: var(--fs-2); line-height: 0; }
.sp-seats tr.me > * { background: var(--accent-soft); }
.sp-seats td .trk { display: inline-block; width: 90px; vertical-align: middle; margin-right: var(--s2); }

/* ---------- charts: HTML and CSS, so their text keeps the page's size at every width ---------- */
.sp-fig { margin: 0; }
.sp-fig figcaption { margin-bottom: var(--s2); font-size: var(--fs-3); font-weight: 600; line-height: 1.4; }

/* results: winner's and runner-up's share at each election */
.sp-bars {
  --plot: 168px; --pad: 22px;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--s2);
  padding-top: var(--pad);
}
.sp-bars::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--pad) + var(--plot) * (1 - var(--p))); border-top: 1px dashed var(--ink-4);
}
.sp-bars .half {
  position: absolute; right: 0; top: calc(var(--pad) + var(--plot) * (1 - var(--p)) - 19px);
  font-size: var(--fs-2); color: var(--ink-3);
}
.sp-bars .g { display: grid; grid-template-rows: var(--plot) auto; justify-items: center; min-width: 0; }
.sp-bars .pair {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: var(--plot);
  border-bottom: 1px solid var(--line-strong);
}
.sp-bars .bar { position: relative; display: block; width: min(34px, 38%); height: calc(var(--plot) * var(--r)); }
.sp-bars .bar::before { content: ""; position: absolute; inset: 0; background: var(--pc, var(--rest)); }
.sp-bars .bar.u::before { opacity: .55; }
.sp-bars .bar b {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding: 0 2px 2px; background: var(--bg);   /* knocks the 50% line out behind the number */
  font-size: var(--fs-2); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sp-bars .x { padding-top: 6px; font-size: var(--fs-2); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* attention: weekly mentions, articles below and videos above (.wst, not .stack: tick-b.css's .stack adds a gap between children) */
.sp-peak { margin: 0 0 var(--s2); font-size: var(--fs-2); color: var(--ink-2); }
.sp-weekly { --plot: 168px; position: relative; }
.sp-weekly.lite { --plot: 120px; }                 /* the district's picture, not the seat's own: half the weight */
.sp-weekly .ymax { position: absolute; right: 0; top: -20px; font-size: var(--fs-2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-weekly .wk {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end;
  height: var(--plot); border-top: 1px dashed var(--line); border-bottom: 1px solid var(--line-strong);
}
.sp-weekly .w { display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.sp-weekly .wst { display: flex; flex-direction: column; width: 100%; }
.sp-weekly .wst i { display: block; height: calc(var(--plot) * var(--r)); min-height: 1px; }
.sp-weekly .wst .a { background: var(--chart-ink); }
.sp-weekly .wst .v { background: var(--chart-ink-soft); }
.sp-weekly .w.part .wst { opacity: .55; }
.sp-weekly .mkrow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; height: 14px; padding-top: 4px; }
.sp-weekly .mk { justify-self: center; width: 9px; height: 8px; background: var(--accent); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.sp-weekly .xrow { position: relative; height: 26px; }
.sp-weekly .x {
  position: absolute; top: 5px; left: calc(var(--i) * 100% / var(--n));
  font-size: var(--fs-2); color: var(--ink-3); white-space: nowrap;
}
.sp-weekly .x.end { left: auto; right: 0; }

.sp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); margin: var(--s2) 0 0; font-size: var(--fs-2); color: var(--ink-3); }
.sp-legend .lg { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; }   /* the marker stays with the first line of its own label */
.sp-legend i { display: inline-block; width: 10px; height: 10px; flex: none; margin-top: 5px; }
.sp-legend i.a { background: var(--chart-ink); }
.sp-legend i.v { background: var(--chart-ink-soft); }
.sp-legend i.p { background: var(--chart-ink); opacity: .55; }
.sp-legend i.m { width: 10px; height: 9px; background: var(--accent); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.trk { display: block; height: 10px; background: var(--track); }
.trk i { display: block; height: 100%; background: var(--pc, var(--chart-ink)); }

/* topic bars and the attention-vs-ballot pairs */
.sp-row {
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 44px; gap: var(--s2); align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2);
}
.sp-row .num, .sp-pair .num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-hd, .sp-pair { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); font-size: var(--fs-2); }
.sp-hd { color: var(--ink-3); padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); }
.sp-pair { align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-pair .cell { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: var(--s2); align-items: center; }
.sp-na-t { color: var(--ink-3); grid-column: 1 / -1; }
.sp-src { margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); color: var(--ink-3); line-height: 1.6; }
.sp-src li + li { margin-top: var(--s1); }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .sp-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "map" "facts"; grid-template-rows: auto; gap: var(--s4); }
  .sp-duo { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .sp-body > .section { margin-top: var(--s6); }
}
@media (max-width: 640px) {
  .sp-answer { font-size: var(--fs-3); }
  .sp-answer p.st { font-size: var(--fs-4); }
  .sp-weekly .x.alt { display: none; }
  .sp-res thead, .sp-seats thead { display: none; }                  /* each cell carries its label (data-l) in this layout */
  .sp-res, .sp-res tbody, .sp-seats, .sp-seats tbody { display: block; }
  .sp-res th, .sp-res td, .sp-seats th, .sp-seats td { padding: 0; border: 0; }
  /* one election: the year beside the winner, the runner-up under, then the margin; each with its votes */
  .sp-res tr {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: 2px; align-items: baseline;
    grid-template-areas: "y wn wv" ". rn rv" ". m m"; padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .sp-res tbody th { grid-area: y; font-size: var(--fs-3); }
  .sp-res .wn { grid-area: wn; } .sp-res .wv { grid-area: wv; text-align: right; }
  .sp-res .rn { grid-area: rn; } .sp-res .rv { grid-area: rv; text-align: right; color: var(--ink-2); }
  .sp-res .m { grid-area: m; color: var(--ink-2); }
  .sp-res .m::before { content: attr(data-l) " "; color: var(--ink-3); }
  .sp-res .sp-who { display: inline; overflow-wrap: anywhere; }
  .sp-inset { width: 56px; }
  .sp-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-facts dt { margin-top: var(--s2); }
  /* one seat: its name and last winner, then the lead and the mentions */
  .sp-seats tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 2px; align-items: baseline;
    grid-template-areas: "n w" "l i"; padding: 9px 0; border-bottom: 1px solid var(--line);
  }
  .sp-seats tbody th { grid-area: n; font-size: var(--fs-3); }
  .sp-seats .sw { grid-area: w; text-align: right; }
  .sp-seats .sl { grid-area: l; color: var(--ink-2); }
  .sp-seats .sl::before { content: attr(data-l) " "; color: var(--ink-3); }
  .sp-seats .si { grid-area: i; display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
  .sp-seats .si::before { content: attr(data-l); color: var(--ink-3); }
  .sp-seats td .trk { width: 64px; margin: 0; }
  .sp-seats tr.me > * { background: transparent; }
  .sp-seats tr.me { background: var(--accent-soft); }
  .sp-row { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 36px; }
  .sp-hd, .sp-pair { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
}