/* ---- The live hub (ADR-150 Decision 10, inc/live-hub.php) ----
 * The Christa Pike hub on `seniornewspaper`: the pulsing LIVE pill and "Updated 6:40 PM" over the headline,
 * "By Wes Platt and Niki Rusbridger" and its role line, then BBC's two columns (TMS-1286): the Summary box over
 * Share and Topics on the left, kept in view; "Live reporting", "Edited by Wes Platt" and the entries, newest
 * first, in the story's column: "6:40 PM · UPDATE · Share", the author's face and name, the text;
 * a story card "12:14 PM · BREAKING · STORY" over its headline. Also the line under the byline of a story the hub
 * links to (M9): "[• LIVE] Follow live: …" on post 2987, "Latest: … Follow live updates" on post 2940. Enqueued on
 * hub pages and those stories' pages only, after article.css.
 * Colours are the site's palette tokens (with the light fallbacks article.css uses), so the dark scheme follows.
 */

/* ---- the status line ---- */
.tms-live-status {
  align-items: center;
  color: var(--tms-color-muted, #6b7280);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.35rem 0.65rem;
  margin: 0 0 var(--tms-space-sm);
}

.tms-live-pill {
  align-items: center;
  background: var(--tms-color-breaking, #b91c1c);
  border-radius: 3px;
  color: var(--tms-color-background, #fff);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 0.4rem;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 5px 8px 4px;
  text-transform: uppercase;
}

.tms-live-pill__dot {
  animation: tms-live-pulse 1.6s ease-in-out infinite;
  background: currentColor;
  border-radius: 50%;
  flex: none;
  height: 7px;
  width: 7px;
}

@keyframes tms-live-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tms-live-pill__dot {
    animation: none;
  }
}

/* "Live coverage ended Oct. 3, 12:20 PM": quiet, like the dates under a story. */
.tms-live-status--ended {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- the closing note (TMS-1288): a thank-you box at the top of the feed once the hub has ended ---- */
.tms-live-closing {
  background: var(--tms-color-surface-alt, var(--tms-color-surface, #f3f4f6));
  border-top: 3px solid var(--tms-color-text, #111);
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.2rem 1.2rem;
}

.tms-live-closing__kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.tms-live-closing__title {
  font-family: var(--tms-font-headline);
  font-size: 1.45rem;
  font-weight: var(--tms-weight-title, 600);
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

.tms-live-closing__text {
  line-height: 1.55;
  margin: 0 0 0.7rem;
}

.tms-live-closing__facts {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0.2rem 0 0.9rem;
  padding: 0;
}

.tms-live-closing__facts b {
  font-variant-numeric: tabular-nums;
}

.tms-live-closing__next {
  background: var(--tms-color-background, #fff);
  border: 1px solid var(--tms-color-border, #e5e7eb);
  color: var(--tms-color-text, #111);
  display: block;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
}

.tms-live-closing__next small {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.tms-live-closing__next span {
  font-family: var(--tms-font-headline);
  font-size: 1.08rem;
  font-weight: var(--tms-weight-title, 600);
  line-height: 1.3;
}

.tms-live-closing__next:hover span,
.tms-live-closing__next:focus-visible span {
  text-decoration: underline;
}

.tms-live-closing__links {
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
}

.tms-live-closing__links a {
  color: var(--tms-color-text, #111);
  font-weight: 700;
  text-underline-offset: 3px;
}

.tms-live-closing__sign {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0.9rem 0 0;
}

/* ---- two columns (TMS-1286): the summary, Share and Topics at 300px beside the entries, no rail ----
 * article.css's tablet and phone rules still apply below 1100px: one column, the summary first. */
@media (min-width: 1101px) {
  .tms-article-grid--live-split {
    gap: var(--tms-space-xl);
    grid-template-columns: 300px minmax(0, 640px);
  }

  /* In view while the entries scroll; a summary taller than the window scrolls inside the column. */
  .tms-article-grid--live-split .tms-article-aside {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    position: sticky;
    top: 1rem;
  }
}

.tms-live-hub__summary:empty {
  display: none;
}

/* ---- the summary and the editor ---- */
.tms-live-hub__summary .tms-live-summary {
  background: var(--tms-color-breaking-soft, var(--tms-color-surface-alt, var(--tms-color-surface, #f7f7f7)));
  border-left: 4px solid var(--tms-color-breaking, #b91c1c);
  margin: 0;
  padding: var(--tms-space-md) var(--tms-space-md) var(--tms-space-md) 1.1rem;
}

.tms-live-hub__summary .tms-live-summary__title {
  font-family: var(--tms-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 var(--tms-space-sm);
  text-transform: uppercase;
}

.tms-live-summary__list {
  display: grid;
  font-size: 0.95rem;
  gap: 0.6rem;
  line-height: 1.45;
  margin: 0;
  padding-left: 1.1rem;
}

/* TMS-1304: the phone's Summary toggle. Hidden until live-summary.js marks the slot collapsible (640px and narrower);
 * the plain "Summary" label shows otherwise, and the list stays open. */
.tms-live-summary__toggle {
  display: none;
}

.tms-live-hub__summary[data-collapsible] .tms-live-summary__label {
  display: none;
}

.tms-live-hub__summary[data-collapsible] .tms-live-summary__title {
  margin: 0;
}

.tms-live-hub__summary[data-collapsible] .tms-live-summary__toggle {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  letter-spacing: inherit;
  min-height: 44px;
  padding: 0;
  text-transform: inherit;
  width: 100%;
}

/* A chevron: down while folded, up while open. */
.tms-live-hub__summary[data-collapsible] .tms-live-summary__toggle::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 0.5rem;
  margin-right: 0.25rem;
  transform: translateY(-25%) rotate(45deg);
  width: 0.5rem;
}

.tms-live-hub__summary[data-collapsible] .tms-live-summary__toggle[aria-expanded="true"]::after {
  transform: translateY(25%) rotate(-135deg);
}

.tms-live-hub__summary[data-collapsible]:not([data-collapsed]) .tms-live-summary__list {
  margin-top: var(--tms-space-sm);
}

.tms-live-hub__summary[data-collapsed] .tms-live-summary__list {
  display: none;
}

/* TMS-1301: a bullet's phrase links to the update it summarizes, BBC style: bold and underlined. */
.tms-live-summary__link {
  color: var(--tms-color-text, #111827);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tms-live-summary__link:hover,
.tms-live-summary__link:focus-visible {
  text-decoration-thickness: 2px;
}

.tms-live-hub .tms-live-feed__title {
  font-family: var(--tms-font-headline);
  font-size: 1.6rem;
  font-weight: var(--tms-weight-title, 600);
  line-height: 1.2;
  margin: 0 0 0.25rem;
}

.tms-live-editor {
  color: var(--tms-color-muted, #6b7280);
  font-size: 0.9375rem;
  margin: 0 0 var(--tms-space-md);
}

.tms-live-editor :is(a, strong) {
  color: var(--tms-color-text, #111827);
  font-weight: 700;
}

/* ---- "2 new updates": the button live-refresh.js shows over the list, kept in view while scrolling ---- */
.tms-live-updates {
  position: sticky;
  text-align: center;
  top: var(--tms-space-md);
  z-index: 2;
}

.tms-live-updates__button {
  background: var(--tms-color-text, #111827);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  color: var(--tms-color-background, #fff);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--tms-space-md);
  min-height: 44px;
  padding: 0.6rem 1.2rem;
}

.tms-live-updates__button:hover,
.tms-live-updates__button:focus-visible {
  background: var(--tms-color-breaking, #b91c1c);
}

.tms-live-updates__button[hidden] {
  display: none;
}

/* ---- the entries ---- */
.tms-live-entries {
  border-bottom: 1px solid var(--tms-color-border, #e5e7eb);
}

.tms-live-entry {
  border-top: 1px solid var(--tms-color-border, #e5e7eb);
  padding-block: var(--tms-space-md) var(--tms-space-lg);
  scroll-margin-top: 5rem;
}

.tms-live-entry:focus {
  outline: none;
}

.tms-live-entry:focus-visible,
.tms-live-entry:target {
  box-shadow: inset 4px 0 0 var(--tms-color-accent, #b91c1c);
  padding-left: var(--tms-space-md);
}

/* The update a summary link or a shared link opened: the red rule and a tint, until the next link (TMS-1301). */
.tms-live-entry:target {
  background: var(--tms-color-breaking-soft, var(--tms-color-surface-alt, #f1f5f9));
  padding-right: var(--tms-space-md);
}

/* ---- pages of updates (TMS-1301): "Updates 1–20 of 24", Newer, 1 2, Older ---- */
.tms-live-pager {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  gap: 0.75rem;
  justify-content: space-between;
  margin: var(--tms-space-lg) 0 0;
}

.tms-live-pager__count {
  color: var(--tms-color-text, #111827);
  font-weight: 600;
  margin: 0;
}

.tms-live-pager__pages {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tms-live-pager__num,
.tms-live-pager__btn {
  align-items: center;
  border: 1px solid var(--tms-color-border, #e5e7eb);
  border-radius: 2px;
  color: var(--tms-color-text, #111827);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.8rem;
  text-decoration: none;
}

.tms-live-pager__num:hover,
.tms-live-pager__btn:hover,
.tms-live-pager a:focus-visible {
  border-color: var(--tms-color-text, #111827);
}

.tms-live-pager__num.is-current {
  background: var(--tms-color-text, #111827);
  border-color: var(--tms-color-text, #111827);
  color: var(--tms-color-background, #fff);
}

.tms-live-pager__btn.is-off {
  color: var(--tms-color-muted, #6b7280);
  opacity: 0.6;
}

.tms-live-pager__gap {
  color: var(--tms-color-muted, #6b7280);
  padding: 0 0.2rem;
}

.tms-live-entry__meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.35rem 0.75rem;
}

.tms-live-entry__time {
  font-variant-numeric: tabular-nums;
}

.tms-live-entry__tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tms-live-entry--breaking .tms-live-entry__tag,
.tms-live-entry__tag--breaking-news {
  color: var(--tms-color-breaking, #b91c1c);
}

.tms-live-entry--analysis .tms-live-entry__tag {
  color: var(--tms-color-analysis, var(--tms-color-accent, #b91c1c));
}

/*
 * TMS-1287 (ADR-161 decision 14): a Correction is an amber pill in a tinted box with an amber rule, so it can't be
 * taken for news. Amber keeps it apart from Breaking (red) and Fact Check (grey). The audit measured the pill at
 * 7.09:1 (light) and 11.28:1 (dark), and text on the box at 17.5:1 and 16.0:1. Fixed colours, not palette tokens: a
 * site's design manifest has no `correction` colour, and a missing token would flag every palette.
 */
:root {
  --tms-live-correction: #92400e;
  --tms-live-correction-soft: #fdf6e3;
  --tms-live-correction-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tms-live-correction: #fbbf24;
    --tms-live-correction-soft: #241d10;
    --tms-live-correction-ink: #0b1120;
  }
}

.tms-live-entry--correction {
  background: var(--tms-live-correction-soft);
  border-left: 4px solid var(--tms-live-correction);
  border-top: 0;
  margin-top: var(--tms-space-sm, 0.5rem);
  padding: var(--tms-space-md) var(--tms-space-lg);
}

.tms-live-entry--correction .tms-live-entry__tag {
  background: var(--tms-live-correction);
  border-radius: 3px;
  color: var(--tms-live-correction-ink);
  padding: 0.15rem 0.45rem;
}

.tms-live-correction {
  display: grid;
  font-size: 1rem;
  gap: 0.45rem 0.9rem;
  grid-template-columns: 5.5rem 1fr;
  line-height: 1.5;
  margin: 0.7rem 0 0.8rem;
}

.tms-live-correction dt {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-top: 0.2rem;
  text-transform: uppercase;
}

.tms-live-correction dd {
  margin: 0;
}

.tms-live-correction__said {
  text-decoration-thickness: 1px;
}

.tms-live-correction__go {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}

.tms-live-correction__go a,
.tms-live-entry__correction-note {
  color: var(--tms-color-text, #111827);
}

.tms-live-correction__go a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The update a Correction corrects: a CORRECTED badge by its time, and a note at its foot. */
.tms-live-entry__corrected {
  border: 1px solid var(--tms-live-correction);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  text-transform: uppercase;
}

.tms-live-entry__correction-note {
  background: var(--tms-live-correction-soft);
  border-top: 2px solid var(--tms-live-correction);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem;
}

@media (max-width: 480px) {
  .tms-live-correction {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .tms-live-correction dd + dt {
    margin-top: 0.5rem;
  }
}

/*
 * TMS-1310: a recap, BBC's "What we know so far" box: a grey panel, no pill (its heading is the label, decision D4),
 * a bold heading and a roomy bullet list. #f6f6f6 is BBC's own panel grey; dark is a raised slate. Fixed colours, not
 * palette tokens, as the Correction's amber: a site's design manifest has no `recap` colour. Body text stays the
 * palette's text colour, which reads on both (#111827 on #f6f6f6, the dark palette's light text on #1c2230). A pinned
 * recap takes the pinned box's look, which comes later in this file.
 */
:root {
  --tms-live-recap-soft: #f6f6f6;
  --tms-live-recap-rule: #d4d4d4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tms-live-recap-soft: #1c2230;
    --tms-live-recap-rule: #3a4252;
  }
}

.tms-live-entry--recap {
  background: var(--tms-live-recap-soft);
  border-top: 0;
  margin-top: var(--tms-space-sm, 0.5rem);
  padding: var(--tms-space-md) var(--tms-space-lg);
}

.tms-live-hub .tms-live-entry--recap .tms-live-entry__title {
  font-size: 1.35rem;
  font-weight: 800;
}

.tms-live-hub .tms-live-entry--recap .tms-live-entry__body ul {
  display: grid;
  gap: 0.6rem;
  line-height: 1.5;
  margin-left: 0;
  padding-left: 1.25rem;
}

.tms-live-entry--recap .tms-live-entry__body li {
  padding-left: 0.2rem;
}

.tms-live-entry--recap .tms-live-entry__body li::marker {
  font-weight: 800;
}

.tms-live-recap__newer {
  border-top: 1px solid var(--tms-live-recap-rule);
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0.9rem 0 0;
  padding-top: 0.6rem;
}

.tms-live-recap__newer a {
  color: var(--tms-color-text, #111827);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tms-live-entry__share {
  color: var(--tms-color-muted, #6b7280);
  font-weight: 600;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tms-live-entry__share:hover,
.tms-live-entry__share:focus-visible {
  color: var(--tms-color-text, #111827);
}

.tms-live-entry__author {
  align-items: center;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 700;
  gap: 0.5rem;
  margin: 0.65rem 0;
}

/* TMS-1303: an update's own headline, a short bold line over its author, as on BBC live pages. */
.tms-live-hub .tms-live-entry__title {
  font-family: var(--tms-font-headline);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.5rem 0 0;
}

.tms-live-entry__author a {
  color: inherit;
  text-decoration: none;
}

.tms-live-entry__author a:hover,
.tms-live-entry__author a:focus-visible {
  text-decoration: underline;
}

/* TMS-1302: "Reporting from Hesperia, California" under the name, as an article byline's role line. */
.tms-live-entry__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tms-live-entry__role {
  color: var(--tms-color-muted, #6b7280);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
}

.tms-live-entry__face {
  border-radius: 50%;
  flex: none;
  height: 32px;
  object-fit: cover;
  width: 32px;
}

.tms-live-entry__face--initials {
  background: var(--tms-color-surface-alt, var(--tms-color-surface, #f3f4f6));
  color: var(--tms-color-text, #111827);
  display: inline-grid;
  font-size: 0.75rem;
  font-weight: 800;
  place-items: center;
}

.tms-live-hub .tms-live-entry__body > * {
  margin: 0 0 0.9rem;
}

.tms-live-hub .tms-live-entry__body > :last-child {
  margin-bottom: 0;
}

/* ADR-153: "Sources: AP News, PBS" under an entry. The muted palette token
   (#6b7280 light, #cbd5e1 dark) keeps it readable in both themes (TMS-1285). */
.tms-live-entry__sources {
  color: var(--tms-color-muted, #6b7280);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}

.tms-live-entry__sources a {
  color: inherit;
  text-decoration: underline;
}

/* TMS-1305: the label over the check's one Earlier update, an older fact: "Earlier: reported Oct. 8". */
.tms-live-entry__earlier {
  color: var(--tms-color-muted, #6b7280);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

/* TMS-1283: a recognized fact-checker's ruling, in its own labelled box at the bottom of an update. */
.tms-live-entry__fact-check {
  border: 1px solid var(--tms-color-border, #d1d5db);
  border-left-width: 4px;
  font-size: 0.95rem;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem;
}

.tms-live-entry__fact-check p {
  margin: 0;
}

.tms-live-entry__fact-check .tms-live-entry__fact-check-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.tms-live-entry__fact-check a {
  color: inherit;
  text-decoration: underline;
}

/* A story card: the story's headline, linked, where an entry has its text. */
.tms-live-entry__headline {
  font-family: var(--tms-font-headline);
  font-size: 1.3rem;
  font-weight: var(--tms-weight-title, 600);
  line-height: 1.25;
  margin: 0.5rem 0 0;
}

.tms-live-entry__headline a {
  color: inherit;
  text-decoration: none;
}

.tms-live-entry__headline a:hover,
.tms-live-entry__headline a:focus-visible {
  text-decoration: underline;
}

/* ---- The pinned entry (ADR-159): one entry an editor keeps above the newest updates, in a box with the summary's
 * left rule and a red "Pinned" label before its time. The slot is always on the page; empty, it takes no room. */
.tms-live-pinned:empty {
  display: none;
}

.tms-live-pinned {
  margin-bottom: var(--tms-space-md);
}

.tms-live-entry--pinned {
  background: var(--tms-color-breaking-soft, var(--tms-color-surface-alt, var(--tms-color-surface, #f7f7f7)));
  border-left: 4px solid var(--tms-color-breaking, #b91c1c);
  border-top: 0;
  padding: var(--tms-space-md) var(--tms-space-lg);
}

.tms-live-entry__pin {
  color: var(--tms-color-breaking, #b91c1c);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- A story card (M11): the story's photo, headline and excerpt, stacked on every screen (owner, Oct. 13).
 * The Omar hub's card for post 5347 on coded42: the 16:9 photo, "Trump verbally attacks Omar …", then its
 * excerpt in the muted body face. */
.tms-live-story {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tms-live-story .tms-live-entry__headline {
  margin: 0;
}

.tms-live-story__media {
  border-radius: var(--tms-radius-sm, 4px);
  display: block;
  overflow: hidden;
}

.tms-live-story__image {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

.tms-live-story__dek {
  color: var(--tms-color-muted, #6b7280);
  font-family: var(--tms-font-body);
  font-size: 0.975rem;
  line-height: 1.5;
  margin: 0;
}

/* ---- "Follow live" and "Latest:" under a story's byline (M9, tms_news_live_hub_link_html()) ----
 * Post 2987, which the hub carries as a card: the hub's LIVE pill, then "Follow live: Christa Pike execution
 * halted, attorneys say: live updates". Post 2940, which the hub overtook: "Latest: Tennessee halted the
 * execution after two injections, attorneys say. Follow live updates" in a quiet box with the summary's left rule.
 * Once the hub has ended, no pill and a grey rule. As wide as the byline above it. */
.tms-live-link {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: var(--tms-space-lg);
  max-width: 46rem;
}

.tms-live-link__line {
  margin: 0;
}

.tms-live-link .tms-live-pill {
  margin-right: 0.35rem;
  vertical-align: 0.12em;
}

.tms-live-link a {
  color: var(--tms-color-text, #111827);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tms-live-link a:hover,
.tms-live-link a:focus-visible {
  color: var(--tms-color-breaking, #b91c1c);
}

.tms-live-link--follow.tms-live-link--ended {
  color: var(--tms-color-muted, #6b7280);
}

.tms-live-link--latest {
  background: var(--tms-color-surface, #f7f7f7);
  border-left: 4px solid var(--tms-color-breaking, #b91c1c);
  padding: var(--tms-space-sm) var(--tms-space-md);
}

.tms-live-link--latest strong {
  color: var(--tms-color-breaking, #b91c1c);
  font-weight: 800;
}

.tms-live-link--latest.tms-live-link--ended {
  border-left-color: var(--tms-color-border, #e5e7eb);
}

.tms-live-link--latest.tms-live-link--ended strong {
  color: inherit;
}

@media (max-width: 640px) {
  .tms-live-hub__summary .tms-live-summary {
    padding: var(--tms-space-sm) var(--tms-space-md);
  }

  .tms-live-entry__headline {
    font-size: 1.15rem;
  }
}

/* ---- the race card inside a desk entry (ADR-181, tms_news_live_hub_race_html()) ----
 * "Hesperia City Council, District 3 · Unofficial results as of 10:30 PM PT", then one row per candidate: name, a
 * bar of their share of the vote, votes, percent; a called winner is bold with a check. The count is the one the
 * entry was written from. Neutral ink only, never party colours: the leader's (or winner's) bar is the text colour,
 * the rest muted, so the dark scheme follows the palette tokens. */
.tms-live-race {
  border: 1px solid var(--tms-color-border, #e5e7eb);
  margin: var(--tms-space-md, 1rem) 0 0;
  padding: 0.75rem 0.875rem;
}

.tms-live-race__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 0.6rem;
}

.tms-live-race__name {
  color: var(--tms-color-text, #111827);
  font-family: var(--tms-font-headline);
  font-size: 1rem;
  font-weight: var(--tms-weight-title, 600);
  line-height: 1.3;
}

.tms-live-race__name a {
  color: inherit;
}

.tms-live-race__status {
  color: var(--tms-color-muted, #6b7280);
  font-size: 0.8125rem;
}

.tms-live-race__call {
  color: var(--tms-color-text, #111827);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tms-live-race__table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0;
  width: 100%;
}

.tms-live-race__row > * {
  border: 0;
  padding: 0.3rem 0;
  vertical-align: middle;
}

.tms-live-race__cand {
  font-weight: 400;
  overflow-wrap: break-word;
  padding-right: 0.75rem;
  text-align: left;
  width: 34%;
}

.tms-live-race__row--win .tms-live-race__cand {
  font-weight: 700;
}

.tms-live-race__check {
  margin-right: 0.3em;
}

.tms-live-race__bar {
  padding-right: 0.75rem;
}

.tms-live-race__track {
  background: var(--tms-color-surface-alt, var(--tms-color-surface, #f3f4f6));
  display: block;
  height: 0.6rem;
  position: relative;
}

.tms-live-race__fill {
  background: var(--tms-color-muted, #6b7280);
  display: block;
  height: 100%;
  width: calc(var(--tms-live-race-share, 0) * 100%);
}

.tms-live-race__row:first-child .tms-live-race__fill,
.tms-live-race__row--win .tms-live-race__fill {
  background: var(--tms-color-text, #111827);
}

/* A measure's passing line across the Yes bar. */
.tms-live-race__line {
  border-left: 2px solid var(--tms-color-breaking, #b91c1c);
  bottom: -3px;
  left: calc(var(--tms-live-race-share, 0.5) * 100%);
  position: absolute;
  top: -3px;
}

.tms-live-race__num {
  font-variant-numeric: tabular-nums;
  padding-left: 0.75rem;
  text-align: right;
  white-space: nowrap;
  width: 14%;
}

.tms-live-race__num + .tms-live-race__num {
  width: 12%;
}

.tms-live-race__row--others .tms-live-race__cand {
  color: var(--tms-color-muted, #6b7280);
}

.tms-live-race__margin,
.tms-live-race__more {
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
}

.tms-live-race__margin {
  color: var(--tms-color-muted, #6b7280);
}

.tms-live-race__more a {
  font-weight: 700;
}

/* Phones keep the bars (a measure's line is on one), narrower, beside names on one line where they fit. */
@media (max-width: 480px) {
  .tms-live-race__table {
    font-size: 0.875rem;
  }

  .tms-live-race__cand {
    width: 46%;
  }

  .tms-live-race__bar {
    padding-right: 0.5rem;
  }

  .tms-live-race__num,
  .tms-live-race__num + .tms-live-race__num {
    width: 15%;
  }
}