/* Party Mode: bars. Scoped to :root[data-party="on"]; see party-skin.css.

   The party vote on Tonight as gameshow bars: chunky outlined tracks with a
   hard drop, the party colour filling them, the share printed on the bar, and
   the 5% threshold as a bold line every party has to cross. Parties under it
   sit "below the line" with a hatched fill. Every rule is scoped to main, so
   the TV wall's compact bars (.wall, outside main) are untouched.

   partyRows() adds, with Party Mode on only: --w, --five, --poll, --c and --on
   on .pr-bar; the in-bar label .pr-in (.in when it fits inside the fill);
   .below and .zero on rows; .pre on the list before any vote is counted. */

:root[data-party="on"] main .party-rows {
  --pb-ink: var(--pm-ink);
  --pb-drop: #14072e;
  --pb-line: #ff3e8a;
  --pb-track: var(--surface-2);
}
:root[data-party="on"][data-scheme="dark"] main .party-rows {
  --pb-ink: #000;
  --pb-drop: #07011a;
  --pb-track: #12053a;
}

/* ---------- Header and columns: the share moves onto the bar ---------- */
:root[data-party="on"] main .party-head {
  font-family: var(--pm-display);
  font-stretch: 80%;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 11.5px;
  color: var(--muted);
  border-bottom: var(--pm-line) solid var(--pb-ink, var(--pm-ink));
}
:root[data-party="on"][data-scheme="dark"] main .party-head {
  border-bottom-color: #000;
}
:root[data-party="on"] main .party-head span:nth-child(3),
:root[data-party="on"] main .party-rows:not(.compact) .pr-share {
  display: none;
}
@media (min-width: 861px) {
  :root[data-party="on"] main .party-head,
  :root[data-party="on"] main .party-rows:not(.compact) .party-row {
    grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 2.8fr) 60px 58px;
  }
}

/* ---------- Rows ---------- */
:root[data-party="on"] main .party-rows:not(.compact) .party-row {
  padding: 13px 0;
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-name {
  font-family: var(--pm-display);
  font-stretch: 85%;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
:root[data-party="on"] main .party-rows:not(.compact) .swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--pb-ink);
  transform: skew(-10deg);
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-seats {
  font-family: var(--pm-display);
  font-stretch: 75%;
  font-style: italic;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.01em;
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-seats small {
  font-family: var(--font);
  font-style: normal;
  font-stretch: 100%;
  font-weight: 600;
}

/* ---------- The bar: outlined track, hard drop, party colour fill ---------- */
:root[data-party="on"] main .party-rows:not(.compact) .pr-bar {
  height: 28px;
  border: var(--pm-line) solid var(--pb-ink);
  border-radius: 8px;
  /* A faint zone under the 5% line: the part of the track nobody wants. */
  background: linear-gradient(
      to right,
      color-mix(in srgb, var(--pb-line) 14%, transparent) 0 var(--five, 0%),
      transparent var(--five, 0%)
    )
    var(--pb-track);
  box-shadow: 3px 3px 0 var(--pb-drop);
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-fill {
  border-radius: 5px 0 0 5px;
  box-shadow: inset 0 -5px 0 #00000024;
}
/* An ink edge where the fill ends, the bar's leading edge. */
:root[data-party="on"] main .party-rows:not(.compact) .party-row:not(.zero) .pr-fill {
  border-right: var(--pm-line) solid var(--pb-ink);
}

/* The share, printed on the bar. */
:root[data-party="on"] main .pr-in {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  left: calc(var(--w) + 7px);
  padding: 0 3px;
  margin: 3px 0;
  border-radius: 3px;
  font-family: var(--pm-display);
  font-stretch: 75%;
  font-style: italic;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink);
  /* Knocks the polls hairline out behind the figure. */
  background: var(--pb-track);
  pointer-events: none;
}
:root[data-party="on"] main .party-row.below .pr-in {
  left: calc(var(--five) + 7px);
}
/* Inside the fill: lined up in a column just past the 5% line. */
:root[data-party="on"] main .pr-in.in {
  left: calc(var(--five) + 6px);
  background: none;
  color: var(--on);
}

/* ---------- The 5% line: bold, and joined down the column ---------- */
:root[data-party="on"] main .party-rows:not(.compact) .pr-five {
  z-index: 1;
  top: -16px;
  bottom: -16px;
  width: 4px;
  margin-left: -2px;
  border: 0;
  opacity: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--pb-line) 0 7px,
    transparent 7px 11px
  );
}
/* A small flag at the head of the column names it. */
:root[data-party="on"] main .party-rows:not(.compact) .party-row:first-child .pr-five {
  top: -12px;
}
:root[data-party="on"] main .party-rows:not(.compact) .party-row:first-child .pr-five::before {
  content: "5%";
  position: absolute;
  bottom: 100%;
  left: -2px;
  margin-bottom: 1px;
  padding: 1px 5px 0;
  font-family: var(--pm-display);
  font-stretch: 78%;
  font-style: italic;
  font-weight: 900;
  font-size: 10.5px;
  line-height: 1.25;
  color: #fff;
  background: var(--pb-line);
  border-radius: 0 3px 3px 0;
  white-space: nowrap;
}

/* ---------- Below the line: hatched and knocked back ---------- */
:root[data-party="on"] main .party-row.below .pr-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    #ffffffb0 0 3px,
    transparent 3px 7px
  );
}
:root[data-party="on"][data-scheme="dark"] main .party-row.below .pr-fill::after {
  background: repeating-linear-gradient(
    -45deg,
    #12053ac0 0 3px,
    transparent 3px 7px
  );
}
:root[data-party="on"] main .party-row.below .pr-in {
  color: var(--muted);
}
:root[data-party="on"] main .party-row.below .pr-name > span:nth-child(2) {
  opacity: 0.72;
}

/* ---------- Count tick and polls pointer: readable over the fill ---------- */
:root[data-party="on"] main .party-rows:not(.compact) .pr-counted {
  z-index: 3;
  top: -7px;
  bottom: -7px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--surface);
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-poll {
  z-index: 3;
  top: -13px;
  bottom: -2px;
  width: 14px;
  margin-left: -7px;
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-poll::before {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top: 8px solid var(--ink);
  filter: drop-shadow(0 -1.5px 0 var(--surface));
}
:root[data-party="on"] main .party-rows:not(.compact) .pr-poll::after {
  top: 7px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  opacity: 0.8;
}

/* ---------- Before the count: empty tracks waiting their turn ---------- */
/* The polls average is ghosted in as a dashed, see-through bar, so the empty
   card reads as "ready to go" rather than broken. */
:root[data-party="on"] main .party-rows.pre .pr-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--poll);
  border-radius: 5px 0 0 5px;
  border-right: 2px dashed var(--pb-ink);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--c) 30%, transparent) 0 4px,
    color-mix(in srgb, var(--c) 12%, transparent) 4px 9px
  );
}
/* Every share is 0.0% before the count, and the label would collide with the
   polls pointer, so it stays for screen readers only. */
:root[data-party="on"] main .party-rows.pre .pr-in {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Narrower: the bar takes its own line, every bar the same width,
   so the 5% line still runs straight down the column ---------- */
@media (max-width: 860px) {
  :root[data-party="on"] main .party-head,
  :root[data-party="on"] main .party-rows:not(.compact) .party-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 48px;
    gap: 10px 10px;
  }
  :root[data-party="on"] main .party-head span:nth-child(2) {
    display: none;
  }
  :root[data-party="on"] main .party-head span,
  :root[data-party="on"] main .party-rows:not(.compact) .party-row > * {
    width: auto;
  }
  :root[data-party="on"] main .party-rows:not(.compact) .pr-bar {
    grid-column: 1 / -1;
    order: 3;
  }
}
@media (max-width: 600px) {
  :root[data-party="on"] main .party-rows:not(.compact) .party-row {
    padding: 12px 0 14px;
    row-gap: 10px;
  }
  :root[data-party="on"] main .party-rows:not(.compact) .pr-bar {
    height: 26px;
  }
  :root[data-party="on"] main .party-rows:not(.compact) .pr-seats {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-party="on"] main .pr-fill {
    transition: none;
  }
}

/* ===========================================================================
   The TV wall: the national scene's party vote column (.wall.pm-on, compact
   rows). Same set pieces as Tonight, sized in --u for a TV. The share moves
   onto the bar, so the row keeps its height: name over a chunky bar, seats
   to the right. Colours come from the wall's monitor tokens.
   =========================================================================== */
.wall.pm-on .party-rows.compact {
  /* Ink that still reads against the monitor: the surface pushed to black. */
  --pb-ink: color-mix(in srgb, var(--surface) 25%, #000);
  --pb-line: var(--pm-pink);
  --pb-track: var(--surface-2);
  --pb-lw: calc(var(--u) * 0.2);
}
.wall.pm-on .w-colhead {
  font-family: var(--pm-display, "Archivo", sans-serif);
  font-stretch: 80%;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.wall.pm-on .w-colhead span:nth-child(2),
.wall.pm-on .party-rows.compact .pr-share {
  display: none;
}
.wall.pm-on .party-rows.compact .party-row {
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 6);
  grid-template-areas: "name seats" "bar seats";
  gap: calc(var(--u) * 0.3) calc(var(--u) * 2);
  padding: calc(var(--u) * 0.4) 0;
}
.wall.pm-on .party-rows.compact .pr-name {
  font-family: var(--pm-display, "Archivo", sans-serif);
  font-stretch: 85%;
  font-weight: 800;
  font-size: calc(var(--u) * 1.6);
  line-height: 1.15;
}
.wall.pm-on .party-rows.compact .swatch {
  box-shadow: 0 0 0 calc(var(--u) * 0.15) var(--pb-ink);
  transform: skew(-10deg);
}
.wall.pm-on .party-rows.compact .pr-seats {
  font-family: var(--pm-display, "Archivo", sans-serif);
  font-stretch: 75%;
  font-style: italic;
  font-weight: 900;
}

/* The bar: outlined track, hard drop, party colour fill with an ink edge. */
.wall.pm-on .party-rows.compact .pr-bar {
  height: calc(var(--u) * 2.2);
  box-sizing: border-box;
  border: var(--pb-lw) solid var(--pb-ink);
  border-radius: calc(var(--u) * 0.5);
  background: linear-gradient(
      to right,
      color-mix(in srgb, var(--pb-line) 16%, transparent) 0 var(--five, 0%),
      transparent var(--five, 0%)
    )
    var(--pb-track);
  box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--pb-ink);
}
.wall.pm-on .party-rows.compact .pr-fill {
  border-radius: calc(var(--u) * 0.3) 0 0 calc(var(--u) * 0.3);
  box-shadow: inset 0 calc(var(--u) * -0.35) 0 #00000030;
}
.wall.pm-on .party-rows.compact .party-row:not(.zero) .pr-fill {
  border-right: var(--pb-lw) solid var(--pb-ink);
}

/* The share on the bar. */
.wall.pm-on .pr-in {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  margin: calc(var(--u) * 0.2) 0;
  padding: 0 calc(var(--u) * 0.25);
  display: flex;
  align-items: center;
  left: calc(var(--w) + var(--u) * 0.5);
  font-family: var(--pm-display, "Archivo", sans-serif);
  font-stretch: 75%;
  font-style: italic;
  font-weight: 900;
  font-size: calc(var(--u) * 1.5);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  background: var(--pb-track);
  border-radius: calc(var(--u) * 0.2);
}
.wall.pm-on .party-row.below .pr-in {
  left: calc(var(--five) + var(--u) * 0.5);
  color: var(--muted);
}
.wall.pm-on .pr-in.in {
  left: calc(var(--five) + var(--u) * 0.45);
  background: none;
  color: var(--on);
}

/* The 5% line: bold pink dashes through every bar. */
.wall.pm-on .party-rows.compact .pr-five {
  z-index: 1;
  top: calc(var(--u) * -0.45);
  bottom: calc(var(--u) * -0.45);
  width: calc(var(--u) * 0.25);
  margin-left: calc(var(--u) * -0.125);
  border: 0;
  opacity: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--pb-line) 0 calc(var(--u) * 0.4),
    transparent calc(var(--u) * 0.4) calc(var(--u) * 0.62)
  );
}
/* The flag hangs under the last bar, clear of the party names. */
.wall.pm-on .party-rows.compact .party-row:last-child .pr-five::after {
  content: "5% line";
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: calc(var(--u) * 0.1);
  padding: calc(var(--u) * 0.1) calc(var(--u) * 0.4);
  font-family: var(--pm-display, "Archivo", sans-serif);
  font-stretch: 78%;
  font-style: italic;
  font-weight: 900;
  font-size: calc(var(--u) * 0.8);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  background: var(--pb-line);
  border-radius: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0;
  white-space: nowrap;
}

/* Below the line: hatched and knocked back. */
.wall.pm-on .party-row.below .pr-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--surface) 70%, transparent) 0 calc(var(--u) * 0.2),
    transparent calc(var(--u) * 0.2) calc(var(--u) * 0.45)
  );
}
.wall.pm-on .party-row.below .pr-name > span:nth-child(2) {
  opacity: 0.72;
}

/* The count so far: a bold tick with a halo, over the fill. */
.wall.pm-on .party-rows.compact .pr-counted {
  z-index: 3;
  top: calc(var(--u) * -0.4);
  bottom: calc(var(--u) * -0.4);
  width: calc(var(--u) * 0.25);
  margin-left: calc(var(--u) * -0.125);
  border-radius: calc(var(--u) * 0.1);
  background: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * 0.1) var(--surface);
}

/* Before the count: the polls average ghosted in, 0.0% waiting at the end. */
.wall.pm-on .party-rows.compact.pre .pr-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--poll);
  border-radius: calc(var(--u) * 0.3) 0 0 calc(var(--u) * 0.3);
  border-right: calc(var(--u) * 0.15) dashed var(--ink);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--c) 40%, transparent) 0 calc(var(--u) * 0.3),
    color-mix(in srgb, var(--c) 16%, transparent) calc(var(--u) * 0.3)
      calc(var(--u) * 0.65)
  );
}
.wall.pm-on .party-rows.compact.pre .pr-in {
  left: auto;
  right: calc(var(--u) * 0.3);
  background: none;
  color: var(--muted);
}