/* Editorial foundation: the newsroom tables, the evidence rows and the badges
   that say how much a brief can be trusted. Everything else on these pages is
   layout primitives and utilities. */

.pitch-site--app .editorial-table {
  border-collapse: collapse;
  width: 100%;
}

.pitch-site--app .editorial-table th,
.pitch-site--app .editorial-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xs) var(--space-s);
  text-align: left;
  vertical-align: top;
}

.pitch-site--app .editorial-table th {
  font-size: var(--size-step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pitch-site--app .editorial-table tr:last-child td {
  border-bottom: 0;
}

.pitch-site--app .editorial-quality--complete {
  background: color-mix(in oklab, var(--ps-green, #1c7c4a) 16%, transparent);
}

.pitch-site--app .editorial-quality--partial {
  background: color-mix(in oklab, var(--ps-sun, #e8b93b) 24%, transparent);
}

.pitch-site--app .editorial-quality--unusable,
.pitch-site--app .editorial-issue--blocking {
  background: color-mix(in oklab, var(--ps-red) 18%, transparent);
}

.pitch-site--app .editorial-issue--warning {
  background: color-mix(in oklab, var(--ps-sun, #e8b93b) 24%, transparent);
}

.pitch-site--app .editorial-evidence {
  border-left: 3px solid var(--ps-ink);
}

.pitch-site--app .editorial-generation {
  border-left: 3px solid var(--ps-sun, #e8b93b);
}

.pitch-site--app .editorial-generation--failed {
  border-left-color: var(--ps-red);
}

.pitch-site--app .editorial-coverage {
  justify-content: space-between;
}

/* Story finder: the candidate cards, the score breakdown and the roles a
   cited fact can play. */

.pitch-site--app .editorial-story {
  border-left: 3px solid var(--ps-ink);
}

.pitch-site--app .editorial-story--saved {
  border-left-color: var(--ps-green, #1c7c4a);
}

.pitch-site--app .editorial-story--dismissed {
  border-left-color: var(--color-border);
  opacity: 0.7;
}

.pitch-site--app .editorial-story__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.pitch-site--app .editorial-story__rationale {
  max-width: 70ch;
}

.pitch-site--app .editorial-story__score {
  font-size: var(--size-step-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.pitch-site--app .editorial-story__actions {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xs);
}

.pitch-site--app .editorial-factors {
  display: grid;
  gap: var(--space-xs) var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0;
}

.pitch-site--app .editorial-factor dd {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
}

.pitch-site--app .editorial-factor meter {
  flex: 1;
  height: 0.5rem;
}

.pitch-site--app .editorial-factor--penalty meter {
  accent-color: var(--ps-red);
}

.pitch-site--app .editorial-evidence--primary {
  border-left-color: var(--ps-green, #1c7c4a);
}

.pitch-site--app .editorial-evidence--supporting {
  border-left-color: var(--color-border);
}

.pitch-site--app .editorial-evidence--caveat {
  border-left-color: var(--ps-sun, #e8b93b);
}

.pitch-site--app .editorial-filters__form select,
.pitch-site--app .editorial-filters__form input {
  font-size: var(--size-step--1);
}

/* The covered beats sit on the turf only while no window is in front of
   them: on the overview, and behind a window that has been minimised. */

.pitch-site--app .stage__main:has(.pitch-window:not(.pitch-window--peek)) .editorial-covered {
  display: none;
}

.pitch-site--app .editorial-fixture {
  display: grid;
  gap: var(--space-s) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 0;
}

.pitch-site--app .editorial-fixture dt {
  margin-block-end: 0.15rem;
}

.pitch-site--app .editorial-stale {
  border-left: 3px solid var(--ps-sun, #e8b93b);
}

.pitch-site--app .editorial-perspective .chip--active {
  background: var(--color-ink);
  color: var(--color-ink-inverted);
}

.pitch-site--app .form-result--u {
  background-color: var(--color-ink-light);
}

.pitch-site .fixture-kit {
  padding-inline: 0.6rem;
  text-align: end;
  font-size: var(--text-x-small);
}

.pitch-site--app .editorial-question__body {
  font-size: var(--text-medium, 1.05rem);
}

.pitch-site--app .editorial-question__edit summary {
  list-style: none;
}

.pitch-site--app .editorial-question__edit summary::-webkit-details-marker {
  display: none;
}

.pitch-site--app .editorial-question__form {
  margin-block-start: var(--space-s);
}

.pitch-site--app .editorial-question__form textarea,
.pitch-site--app .editorial-question__form select,
.pitch-site--app .editorial-question__form input {
  max-width: 100%;
}

.pitch-site--app .editorial-question__conflict {
  color: var(--ps-red);
}

.pitch-site--app .editorial-unusable {
  border-left: 3px solid var(--ps-red);
}

.pitch-site--app .editorial-readiness li::before {
  content: "· ";
}

/* The desk draws on the turf, so it joins the chrome family the landing page's
   recent-activity boxes already established: blurred chrome cards, a yellow
   uppercase mono heading and cream rows. Tokens and metrics are copied from
   .stage-recent in stage/app.css deliberately, so the two read as one system. */

/* stage/window.css gives a windowless page's overlay margin-bottom: auto so
   the menus hug the top. Matching that with an auto margin below the boxes
   splits the leftover turf in two, which centres them in what the overlay
   leaves rather than letting them sink to the goal line. */
.pitch-site--app .editorial-desk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-end: auto;
  max-width: 56rem;
  width: 100%;
}

/* Centring a block whose height follows its content moves the whole desk
   whenever a competition has fewer matches. The block therefore stands at the
   height of the tallest desk it can ever be, and the boxes sit at the top of
   it: the slack falls on the turf below them, where nothing is drawn, so the
   chips and both box tops land at the same y for every competition.

   The reserve covers the worst case rather than the usual one. Both lanes are
   capped at LANE_ROWS, and the tallest row is a played match carrying its
   readiness reason on a second line, so five of those is as tall as a lane
   gets: 20rem clears it with room, and sizing for the usual case would just
   move the jump to the day a competition's results have not landed yet.

   The no-coverage card is excluded: nothing can switch underneath it, and a
   small card above a screenful of reserved turf would look stranded. */
.pitch-site--app .editorial-desk:has(.editorial-desk__boxes) {
  min-block-size: 20rem;
}

.pitch-site--app .editorial-desk__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.pitch-site--app .editorial-desk__filter {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.pitch-site--app .editorial-desk__filter--on,
.pitch-site--app .editorial-desk__filter:hover {
  color: var(--ps-yellow);
}

.pitch-site--app .editorial-desk__boxes {
  align-content: start;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pitch-site--app .editorial-desk__box {
  backdrop-filter: blur(6px);
  background: var(--ps-chrome);
  border: 2px solid var(--ps-ink);
  border-radius: 12px;
  box-shadow: var(--ps-chrome-shadow);
  color: var(--ps-cream);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 16px;
}

.pitch-site--app .editorial-desk__heading {
  color: var(--ps-yellow);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.pitch-site--app .editorial-desk__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pitch-site--app .editorial-desk__row {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pitch-site--app .editorial-desk__line {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.pitch-site--app .editorial-desk__lead {
  color: var(--ps-yellow);
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pitch-site--app .editorial-desk__link {
  color: var(--ps-cream);
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.editorial-desk__link:hover {
  color: var(--ps-yellow);
}

.pitch-site--app .editorial-desk__link--waiting {
  color: var(--ps-cream-soft);
  font-weight: 400;
}

.pitch-site--app .editorial-desk__reason {
  color: var(--ps-cream-soft);
  font-size: 11.5px;
}

.pitch-site--app .editorial-desk__empty {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.pitch-site--app .editorial-desk__all {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  margin-top: auto;
  text-decoration: none;
  text-transform: uppercase;
}

.pitch-site--app .editorial-desk__all::after {
  content: " \2192";
}

.pitch-site--app .editorial-desk__all:hover {
  color: var(--ps-yellow);
}

@media (max-width: 49.999rem) {
  .pitch-site--app .editorial-desk__boxes {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, a full desk is taller than the reserve, so the reserve stops
     holding it still and a thin competition recentres. On a phone the page
     scrolls anyway, so the desk stops being centred and hangs from the menus
     instead: the same y whatever it holds. Only the desk's own overlay is
     affected, never another page's. */
  .pitch-site--app .stage__main:has(.editorial-desk) .stage__overlay {
    margin-block-end: 0;
  }
}

/* The editorial match page draws on the turf rather than in a window: a panel
   on the left holding what stays put as the reader moves around, the chips and
   the figure's own controls drawn straight on the turf, and under them a panel
   holding the one figure the chips have chosen.

   Two rows and two columns: the chrome on the turf takes the top row of the
   figure's column, and the two boxes share the row below it, so they meet the
   same line whatever the chrome holds. The grid is a flex item of .stage__main,
   which is flex: 1 with min-height: 0 above 75rem, so it fills whatever the
   scoreboard and the nav leave and gives every figure the same room to be drawn
   in. Nothing scrolls inside a box: a drawing is scaled to that room and a long
   table grows the box downwards (see the fit rules below), so the box's top
   edge and the panel beside it stand still whichever figure is chosen. Below
   75rem the stage stops being locked to the viewport, so the panels stack and
   the page scrolls, as the window already does there. */
.pitch-site--app .editorial-panels {
  display: grid;
  flex: 1 1 auto;
  column-gap: clamp(18px, 2.4vw, 40px);
  row-gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  margin-block-start: clamp(6px, 1.2vh, 16px);
  max-inline-size: 104rem;
  min-block-size: 0;
  inline-size: 100%;
}

/* The chips are drawn on the turf in the figure's own column, so the two boxes
   still meet the same line: the chrome takes the row above them, and the status
   panel starts where the figure's box does. */
.pitch-site--app .editorial-panels:has(.editorial-panel--status) {
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
}

/* Which figure is drawn is a choice about the page, not about the picture, so
   the chips are the one thing that sits on the turf above the box. The set is
   the same for every figure of a view, so the row is the same height whichever
   chip is lit and the box under it never moves. */
.pitch-site--app .editorial-figure-chrome {
  grid-column: -2;
  grid-row: 1;
}

.pitch-site--app .editorial-panel--status {
  grid-column: 1;
  grid-row: 2;
}

.pitch-site--app .editorial-panel--figure {
  grid-column: -2;
  grid-row: 2;
}

/* Above the full stage the nav is a box in the turf's top-left corner, so the
   row of panels begins clear of it. The nav is as wide as the longest view it
   lists, which is a team's name, so the margin is measured against the widest
   that box gets rather than the narrowest. */
@media (min-width: 75rem) {
  .pitch-site--app .editorial-panels {
    padding-inline-start: clamp(272px, 18vw, 310px);
  }
}

/* The summary polls the whole row while a brief generates, because a brief that
   becomes ready changes the chip set as well as the status. A chip swaps the
   turf chrome and the box together, so the figure's frame holds both. Neither
   frame is anything but a handle on what it replaces, so neither takes part in
   the layout. */
.pitch-site--app .editorial-brief-frame,
.pitch-site--app .editorial-figure-slot {
  display: contents;
}

.pitch-site--app .editorial-panel {
  background: var(--ps-paper);
  border: 2px solid var(--ps-ink);
  border-radius: 14px;
  box-shadow: 10px 10px 0 rgb(6 20 11 / 0.7);
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(12px, 1.4vw, 22px);
}

/* The status panel says the same thing whichever figure is drawn, so it is
   sized by what it says and hangs from the top of the row rather than
   stretching to meet the figure beside it. */
.pitch-site--app .editorial-panel--status {
  align-self: start;
  max-block-size: 100%;
}

.pitch-site--app .editorial-panel--figure .editorial-figure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
}

@media (max-width: 74.999rem) {
  /* Stacked, the rows are placed as they come and sized by what they hold:
     without this the grid shares out the slack the page has left and the chips
     drift away from the box they belong to. */
  .pitch-site--app .editorial-panels,
  .pitch-site--app .editorial-panels:has(.editorial-panel--status) {
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .pitch-site--app .editorial-figure-chrome,
  .pitch-site--app .editorial-panel--status,
  .pitch-site--app .editorial-panel--figure {
    grid-column: 1;
    grid-row: auto;
  }

  .pitch-site--app .editorial-panel {
    box-shadow: 6px 6px 0 rgb(6 20 11 / 0.7);
    overflow: visible;
  }
}

.pitch-site--app #stage_view[busy] .editorial-panel {
  opacity: 0.5;
  transition: opacity 0.15s ease 0.15s;
}

/* The title, the match under it and the info button that holds the sentence,
   against the look and the download on the other side. Both clusters are
   centred on the title rather than hung from its top. */
.pitch-site--app .editorial-figure__bar {
  align-items: center;
  flex: none;
  gap: var(--space-xs);
}

.pitch-site--app .editorial-figure__naming {
  flex-wrap: nowrap;
  min-inline-size: 0;
}

/* Still the app's chips, read against turf rather than paper: the same pill,
   filled with the chrome the sidenav and the scoreboard are made of, and the
   chosen one filled yellow the way the sidenav marks the view the reader is
   on. Only the colours change, so a chip is a chip wherever it is. */
.pitch-site--app .editorial-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.pitch-site--app .editorial-figure-chrome .chip {
  backdrop-filter: blur(6px);
  background-color: var(--ps-chrome);
  border-color: var(--ps-cream-soft);
  color: var(--ps-cream);
}

.pitch-site--app .editorial-figure-chrome .chip:hover {
  border-color: var(--ps-yellow);
  color: var(--ps-yellow);
}

.pitch-site--app .editorial-figure-chrome .chip--active,
.pitch-site--app .editorial-figure-chrome .chip--active:hover {
  background-color: var(--ps-yellow);
  border-color: var(--ps-yellow);
  color: var(--ps-ink);
}

/* Nothing inside the box scrolls, so a figure is whole or it is not drawn. A
   drawing keeps its proportions whatever room it is given, so it is scaled to
   the room the box has left under the title: the body is one grid row, and a
   ceiling on the drawing's height shrinks the whole picture rather than
   cropping it. Below the full stage the page scrolls anyway, so nothing there
   is capped. */
@media (min-width: 75rem) {
  .pitch-site--app .editorial-figure--scale .editorial-figure__body {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
    overflow: hidden;
  }

  .pitch-site--app .editorial-figure--scale .editorial-figure__body svg {
    max-block-size: 100%;
  }

  /* A wrapper that puts a heading above its drawing, or a key under it, has to
     give the drawing what it has left, which is flex shrink rather than a
     ceiling. */
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .spider-plot,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .shot-map,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .season-trend,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .bar-chart,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .pitch-chart,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .xg-race,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .momentum {
    min-block-size: 0;
  }

  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .spider-plot > svg,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .shot-map > svg,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .season-trend > svg,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .bar-chart > svg,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .pitch-chart > svg,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .xg-race > svg,
  .pitch-site--app .editorial-figure--scale .editorial-figure__body > .momentum > svg {
    flex: 0 1 auto;
    min-block-size: 0;
  }
}

/* A table or a list has no such give: a thirty-row squad is that tall at any
   readable size. It keeps its natural height, the box grows under it, and the
   page scrolls, which is what the stage stops doing while such a figure is
   drawn. The box still fills the row when the figure is shorter than it, so
   moving between short figures moves nothing, and the box only ever grows
   downwards, so its top edge and the panel beside it never shift. */
.pitch-site--app .editorial-figure--grow .editorial-figure__body {
  flex: 1 1 auto;
  min-block-size: 0;
}

@media (min-width: 75rem) {
  .pitch-site--app:has(.editorial-figure--grow) {
    block-size: auto;
    overflow: visible;
  }

  .pitch-site--app:has(.editorial-figure--grow) .stage {
    block-size: auto;
    min-block-size: 100dvh;
  }

  .pitch-site--app:has(.editorial-figure--grow) .stage__main {
    flex: 1 0 auto;
    justify-content: flex-start;
    min-block-size: 0;
  }

  /* The box holding a growing figure is sized by what it holds and never less
     than the row, rather than stretched to the row and clipped. */
  .pitch-site--app .editorial-panel--figure:has(.editorial-figure--grow) {
    align-self: start;
    min-block-size: 100%;
  }

  /* Nothing overflows the box any more, so it does not have to clip: an open
     look or download menu is the only thing that leaves it, and it should be
     readable rather than cut off at the edge. */
  .pitch-site--app .editorial-panel--figure {
    overflow: visible;
  }
}

/* The editorial match page: one figure per graph or table, each saying what it
   shows and each able to wear its own look.

   A figure's theme is inlined on the figure element as --theme-* custom
   properties, which is what --series-color already does. The tokens
   stage/tokens.css derives from those live on .pitch-site, so a figure-scoped
   theme would not reach a highlighted table row or a link unless the figure
   re-declares them: this rule covers all six of them, plus the one the
   highlighted row needs and nothing else defines. */
.pitch-site--app .editorial-figure {
  --color-accent: var(--theme-primary);
  --color-accent-rotate: var(--theme-accent);
  --color-primary: var(--theme-primary);
  --color-primary-rotate: var(--theme-accent);
  --color-link: var(--theme-accent);
  --color-marker: var(--theme-primary);
  --color-accent-subtle: color-mix(in srgb, var(--theme-primary) 12%, transparent);

  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
}

.pitch-site--app .editorial-figure__body {
  min-block-size: 0;
}

.pitch-site--app .editorial-figure__deck {
  max-width: 62ch;
}

/* A drawn figure is one picture: the title, the sentence under it, the logo,
   the key and the credit line are inside the svg, so the box holds nothing but
   the controls and the drawing. The plate is set in its own units and scaled
   to whatever room it has, which is why it is capped: past the width of a
   newspaper column the type stops reading as a graphic and starts reading as a
   poster. */
.pitch-site--app .editorial-figure__body .figure-plate {
  block-size: auto;
  inline-size: auto;
  margin-inline: auto;
  max-block-size: 100%;
  max-inline-size: min(44rem, 100%);
}

/* Nothing but the controls sits above the drawing, and they only appear on
   hover or focus, so the row must not reserve a band of its own. */
.pitch-site--app .editorial-figure--plated .editorial-figure__head {
  margin-block-end: calc(var(--space-s) * -1);
}

/* What the reader can change about the picture they are already looking at:
   the side of a shot map, the axes of a league map. It reads as the smaller
   choice of the two, so the chips on the turf keep their size and these sit a
   step down from them, above the plot they belong to and ruled off from it. */
.pitch-site--app .editorial-figure__options {
  border-block-end: 1px solid var(--color-border-subtle);
  flex: none;
  padding-block-end: var(--space-s);
}

.pitch-site--app .editorial-figure__options .chip {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
}

/* A select sits beside the label naming it on one line: the figure's own
   controls are a row, not a form, and they are sized to be read after the
   picture rather than before it. */
.pitch-site--app .editorial-figure__options label {
  color: var(--color-ink-medium);
  font-size: var(--size-step--1);
}

.pitch-site--app .editorial-figure__options select {
  font-size: var(--size-step--1);
  inline-size: auto;
  line-height: 1.5;
  max-inline-size: 14rem;
  min-block-size: 0;
  padding: 0.2rem 0.5rem;
}

/* Two small icons in the figure's top-right, because a labelled button and a
   full-width select compete with the picture they belong to. They are recessive
   rather than hidden: a control only hover can find is a control a finger and a
   keyboard cannot. */
.pitch-site--app .editorial-figure__controls {
  flex: none;
  opacity: 0.4;
  transition: opacity 120ms ease-out;
}

.pitch-site--app .editorial-figure:hover .editorial-figure__controls,
.pitch-site--app .editorial-figure__controls:focus-within,
.pitch-site--app .editorial-figure__controls:has([open]) {
  opacity: 1;
}

.pitch-site--app .editorial-figure__menu {
  position: relative;
}

.pitch-site--app .editorial-figure__control {
  align-items: center;
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  height: 1.875rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  user-select: none;
  width: 1.875rem;
}

.pitch-site--app .editorial-figure__control::-webkit-details-marker {
  display: none;
}

.pitch-site--app .editorial-figure__control:hover,
.pitch-site--app .editorial-figure__menu[open] .editorial-figure__control {
  background: var(--color-shade);
  border-color: var(--color-ink);
}

.pitch-site--app .editorial-figure__control svg {
  height: 1rem;
  width: 1rem;
}

/* The card hangs from a control at the box's inside edge, so it opens leftwards
   and a long theme name widens the select, not the card. */
.pitch-site--app .editorial-figure__menu-card {
  background: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(6, 20, 11, 0.25);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  max-inline-size: 16rem;
  min-width: 11rem;
  padding: var(--space-xs);
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
}

.pitch-site--app .editorial-figure__menu-card select {
  font-size: var(--size-step--1);
}

.pitch-site--app .editorial-figure__footer {
  border-top: 1px solid var(--color-border-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  padding-top: var(--space-xxs);
  text-transform: uppercase;
}

.pitch-site--app .editorial-uncovered {
  border-left: 3px solid var(--ps-sun, #e8b93b);
}

.pitch-site--app .editorial-standing {
  padding-inline-start: var(--space-xs);
}

/* The better side of a key-numbers row. The colour follows the figure's own
   theme, which is what --color-primary already resolves to inside a figure,
   and the mark beside it carries the same thing for a reader who cannot see
   the colour. The twin draws both from the same cell. */
.pitch-site--app .editorial-table__leader {
  color: var(--color-primary);
}

.pitch-site--app .editorial-table tr.is-highlighted {
  background: var(--color-accent-subtle, color-mix(in oklab, var(--ps-sun, #e8b93b) 18%, transparent));
}

.pitch-site--app .editorial-table__sortable {
  cursor: pointer;
  user-select: none;
}

.pitch-site--app .editorial-table__sortable[data-dir="asc"]::after {
  content: " \2191";
}

.pitch-site--app .editorial-table__sortable[data-dir="desc"]::after {
  content: " \2193";
}