/* 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, and a story written out from the facts
   it cites, each with the way it went. */

.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__source a {
  color: inherit;
  text-decoration: none;
}

.pitch-site--app .editorial-story__source a:hover {
  text-decoration: underline;
}

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

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

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

.pitch-site--app .editorial-writing__cautions {
  padding-inline-start: 1.25em;
}

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

.pitch-site--app .editorial-fact__tone {
  flex: none;
  white-space: nowrap;
}

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

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

.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-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));
}

/* The member's own Latest viewed is the third box, beside the two lanes the
   newsroom shares, so the desk widens to hold three. */
.pitch-site--app .editorial-desk:has(.editorial-desk__box:nth-child(3)) {
  max-width: 78rem;
}

.pitch-site--app .editorial-desk__boxes:has(> :nth-child(3)) {
  grid-template-columns: repeat(3, 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__list--stories {
  gap: 10px;
}

.pitch-site--app .editorial-desk__story {
  gap: 2px;
}

.pitch-site--app .editorial-desk__link--story {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  white-space: normal;
}

.pitch-site--app .editorial-desk__reason a {
  color: inherit;
  text-decoration: none;
}

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

.pitch-site--app .editorial-desk__actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.pitch-site--app .editorial-desk__action {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ps-cream) 30%, transparent);
  border-radius: 999px;
  color: var(--ps-cream-soft);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  text-transform: uppercase;
}

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

.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,
  .pitch-site--app .editorial-desk__boxes:has(> :nth-child(3)) {
    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;
}

.pitch-site--app .editorial-kpi-select {
  flex-wrap: nowrap;
}

.pitch-site--app .editorial-kpi-select .searchable-select {
  inline-size: 15rem;
}

.pitch-site--app .editorial-figure__options .searchable-select__input {
  font-size: var(--size-step--1);
  line-height: 1.5;
  min-block-size: 0;
  padding-block: 0.2rem;
  padding-inline-start: 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 grows with the longest theme name rather than cutting it short. */
.pitch-site--app .editorial-figure__menu-card {
  min-width: 12rem;
  top: calc(100% + 6px);
  z-index: 8;
}

.pitch-site--app .editorial-figure__theme-row {
  flex-wrap: nowrap;
}

.pitch-site--app .editorial-figure__swatches {
  display: inline-flex;
  flex: none;
}

.pitch-site--app .editorial-figure__swatch {
  block-size: 0.875rem;
  background: var(--swatch);
  border: 1.5px solid var(--ps-ink);
  border-radius: 50%;
  inline-size: 0.875rem;
}

.pitch-site--app .editorial-figure__swatch + .editorial-figure__swatch {
  margin-inline-start: -0.25rem;
}

.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";
}

/* The coverage index: every competition and team the newsroom covers as a
   card with its logo, so the desk finds its beat by sight. */
.pitch-site--app .editorial-coverage-grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin: 0;
  padding: 0;
}

.pitch-site--app .editorial-coverage-grid--teams {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.pitch-site--app .editorial-coverage-card {
  align-items: center;
  background: var(--color-bg, #fff);
  block-size: 100%;
  border: 2px solid var(--ps-ink, currentColor);
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgb(6 20 11 / 0.35);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-s);
  text-align: center;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pitch-site--app .editorial-coverage-card:hover,
.pitch-site--app .editorial-coverage-card:focus-visible {
  box-shadow: 6px 6px 0 rgb(6 20 11 / 0.45);
  transform: translate(-2px, -2px);
}

.pitch-site--app .editorial-coverage-card__name {
  font-weight: 700;
  line-height: 1.2;
  margin-block-start: var(--space-xxs);
}

/* The team pages of a competition, in the overview's status panel. A covered
   team is marked, since that is the page the desk opens most. */
.pitch-site--app .editorial-coverage-teams {
  display: grid;
  gap: var(--space-xxs);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  margin: 0;
  padding: 0;
}

.pitch-site--app .editorial-coverage-teams__team {
  align-items: center;
  border-radius: 8px;
  color: inherit;
  display: flex;
  gap: var(--space-xs);
  min-inline-size: 0;
  padding: var(--space-xxs);
  text-decoration: none;
}

.pitch-site--app .editorial-coverage-teams__team:hover {
  background: color-mix(in oklab, var(--ps-ink, #000) 8%, transparent);
}

.pitch-site--app .editorial-coverage-teams__team.is-covered {
  background: color-mix(in oklab, var(--ps-sun, #e8b93b) 22%, transparent);
  font-weight: 600;
}

/* The radar's own measures: six selects in a card that floats over the
   figure from the last chip, so choosing them never shrinks the radar. */
.pitch-site--app .editorial-radar-picker summary {
  cursor: pointer;
  list-style: none;
}

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

.pitch-site--app .editorial-radar-picker__card {
  left: 0;
  max-inline-size: none;
  min-width: 18rem;
  right: auto;
}

.pitch-site--app .editorial-radar-picker__form {
  display: grid;
  gap: var(--space-xxs) var(--space-xs);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.pitch-site--app .editorial-radar-picker__form select {
  flex: 1 1 auto;
  max-inline-size: none;
  min-inline-size: 0;
}

.pitch-site--app .editorial-radar-picker__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  grid-column: 1 / -1;
}

.pitch-site--app .editorial-radar-picker__row {
  align-items: center;
  display: flex;
  gap: var(--space-xxs);
}

.pitch-site--app .editorial-radar-picker__remove {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: color-mix(in oklab, var(--ps-ink) 55%, transparent);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 8px;
}

.pitch-site--app .editorial-radar-picker__remove:hover {
  border-color: color-mix(in oklab, var(--ps-ink) 30%, transparent);
  color: var(--ps-ink);
}

.pitch-site--app .editorial-radar-picker__add {
  align-self: flex-start;
}

.pitch-site--app .editorial-radar-picker__add[hidden] {
  display: none;
}

/* The way back to the desk heads the competition's nav, set off from the
   views below it by a hairline. */
.pitch-site--app .editorial-sidenav__back {
  border-bottom-color: color-mix(in oklab, var(--ps-cream) 25%, transparent);
  padding-block-end: 7px;
  width: auto;
}

/* A team's coverage page names the team in the header rather than in a card
   beside the figure: the crest at the left of the name, where it stands and
   its form under it, and the view's own line (its fixture, its opponent)
   last. */
.pitch-site--app .editorial-team-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pitch-site--app .editorial-team-header__identity {
  align-items: center;
  display: flex;
  gap: 14px;
  text-align: start;
}

.pitch-site--app .editorial-team-header__naming .stage-scoreboard__meta {
  margin-block-end: 2px;
}

.pitch-site--app .editorial-team-header__line,
.pitch-site--app .editorial-team-header__fixture {
  align-items: center;
  color: var(--ps-cream-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 4px 10px;
  justify-content: center;
  margin: 0;
}

.pitch-site--app .editorial-team-header__context {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pitch-site--app .editorial-team-header__fixture {
  gap: 4px 6px;
}

.pitch-site--app .editorial-team-header__label {
  color: var(--ps-yellow);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.pitch-site--app .editorial-team-header__link:hover {
  color: var(--ps-cream);
}

.pitch-site--app .editorial-team-header__context select {
  font-size: 13px;
  inline-size: auto;
  line-height: 1.4;
  max-inline-size: 16rem;
  min-block-size: 0;
  padding: 0.15rem 0.5rem;
}

/* The download dialog: the file as it will be saved on the left, the settings
   that shape it on the right. The preview sits on the turf's dark green so a
   tall picture and a wide one both read as a sheet of paper. */
.pitch-site--app .figure-export {
  background: var(--ps-paper);
  border: 2px solid var(--ps-ink);
  border-radius: 14px;
  box-shadow: 10px 10px 0 rgb(6 20 11 / 0.7);
  block-size: min(54rem, calc(100dvh - 2rem));
  color: var(--ps-ink);
  inline-size: min(72rem, calc(100vw - 2rem));
  margin: auto;
  max-block-size: none;
  max-inline-size: none;
  overflow: hidden;
  padding: 0;
}

.pitch-site--app .figure-export::backdrop {
  background: rgb(6 20 11 / 0.72);
}

.pitch-site--app .figure-export__layout {
  block-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  grid-template-rows: minmax(0, 1fr);
}

.pitch-site--app .figure-export__stage {
  align-items: center;
  background: var(--ps-turf, #0f3d22);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 0;
  padding: var(--space-l);
}

.pitch-site--app .figure-export__preview {
  align-items: center;
  block-size: 100%;
  display: flex;
  inline-size: 100%;
  justify-content: center;
  min-block-size: 0;
  transition: opacity 0.15s ease;
}

.pitch-site--app .figure-export__preview[aria-busy="true"] {
  opacity: 0.45;
}

/* The picture keeps its own proportions and shrinks to the room the stage
   has, so the shadow falls on the sheet and not on the letterbox around it. */
.pitch-site--app .figure-export__preview svg {
  block-size: auto;
  box-shadow: 6px 6px 0 rgb(0 0 0 / 0.35);
  inline-size: auto;
  max-block-size: 100%;
  max-inline-size: 100%;
}

.pitch-site--app .figure-export__reset {
  background: none;
  border: 0;
  color: var(--color-link, currentColor);
  cursor: pointer;
  font-size: var(--size-step--1, 0.875rem);
  padding: 0;
  text-decoration: underline;
}

.pitch-site--app .figure-export__status {
  color: var(--ps-cream);
}

.pitch-site--app .figure-export__settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  overflow-y: auto;
  padding: var(--space-l);
}

.pitch-site--app .figure-export__field {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  min-inline-size: 0;
  padding: 0;
}

.pitch-site--app .figure-export__field input[type="text"],
.pitch-site--app .figure-export__field textarea,
.pitch-site--app .figure-export__field select {
  font: inherit;
  font-size: var(--size-step--1, 0.875rem);
  inline-size: 100%;
}

.pitch-site--app .figure-export__ratios {
  display: grid;
  gap: var(--space-xxs);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pitch-site--app .figure-export__ratio {
  align-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px;
  text-align: center;
}

.pitch-site--app .figure-export__ratio:has(input:checked) {
  border-color: var(--ps-ink);
  background: color-mix(in oklab, var(--ps-sun, #e8b93b) 25%, transparent);
}

.pitch-site--app .figure-export__ratio:has(input:focus-visible) {
  outline: 2px solid var(--ps-ink);
  outline-offset: 2px;
}

/* What the chosen shape is for, one line under the shapes. Every line is in
   the markup and the checked shape shows its own, so the hint follows the
   choice without a round trip. */
.pitch-site--app .figure-export__use {
  display: none;
  margin-block-start: var(--space-xxs);
}

.pitch-site--app .figure-export__field:has(input[value="16:9"]:checked) .figure-export__use[data-ratio="16:9"],
.pitch-site--app .figure-export__field:has(input[value="4:3"]:checked) .figure-export__use[data-ratio="4:3"],
.pitch-site--app .figure-export__field:has(input[value="1:1"]:checked) .figure-export__use[data-ratio="1:1"],
.pitch-site--app .figure-export__field:has(input[value="4:5"]:checked) .figure-export__use[data-ratio="4:5"],
.pitch-site--app .figure-export__field:has(input[value="9:16"]:checked) .figure-export__use[data-ratio="9:16"] {
  display: block;
}

.pitch-site--app .figure-export__ratio input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* Each shape is drawn at the proportions it names, inside the same square, so
   the five read against each other at a glance. */
.pitch-site--app .figure-export__shape {
  align-items: center;
  block-size: 2rem;
  display: flex;
  inline-size: 2rem;
  justify-content: center;
}

.pitch-site--app .figure-export__shape::before {
  block-size: calc(100% * var(--shape-height));
  border: 2px solid var(--ps-ink);
  border-radius: 3px;
  content: "";
  inline-size: calc(100% * var(--shape-width));
}

.pitch-site--app .figure-export__actions {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

/* The settings that shape the file are a form of their own, so the Save
   action under them can be another; the column lays out both as one. */
.pitch-site--app .figure-export__form {
  display: contents;
}

/* Keeping the picture rather than downloading it: ruled off under the
   download buttons, because it files the figure instead of saving a file. */
.pitch-site--app .figure-export__archive {
  border-block-start: 1px solid color-mix(in oklab, var(--ps-ink) 15%, transparent);
  padding-block-start: var(--space-s);
}

.pitch-site--app .figure-export__folders {
  max-block-size: 9rem;
  overflow-y: auto;
}

/* A saved graphic in a folder: the drawing small, in its own look, as a
   picture of what the tile opens rather than something to read. */
.pitch-site--app .graphic-tile__drawing {
  block-size: 9rem;
  overflow: hidden;
  pointer-events: none;
}

.pitch-site--app .graphic-tile__drawing > div,
.pitch-site--app .graphic-tile__drawing svg {
  block-size: 100%;
  inline-size: 100%;
}

.pitch-site--app .graphic-tile__drawing .chart-legend {
  display: none;
}

/* A graphic opened in the Archive is drawn as large as a live figure. */
.pitch-site--app .graphic-figure .editorial-figure__body .figure-plate {
  max-block-size: none;
}

@media (max-width: 49.999rem) {
  .pitch-site--app .figure-export__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(12rem, 45%) minmax(0, 1fr);
  }

  .pitch-site--app .figure-export__stage {
    padding: var(--space-s);
  }
}

/* A team's angles, three in a row like the pages of a desk's notebook: which
   angle and what kind, the headline, the paragraph, the chart that shows the
   take and the key numbers behind it. The colour of the line above the
   headline says whether the take is good news for the team, bad news, or
   neither. */
.pitch-site--app .editorial-angles {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.pitch-site--app .editorial-angle {
  background: var(--color-bg, #fff);
  border: 1px solid color-mix(in oklab, var(--ps-ink) 18%, transparent);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-inline-size: 0;
  padding: var(--space-m, 1rem);
  --angle-tone: oklch(var(--lch-ink-medium, 50% 0 0));
}

.pitch-site--app .editorial-angle--positive { --angle-tone: #1f8a4c; }
.pitch-site--app .editorial-angle--negative { --angle-tone: #c0392b; }
.pitch-site--app .editorial-angle--neutral  { --angle-tone: #c98a12; }

.pitch-site--app .editorial-angle__eyebrow {
  color: var(--angle-tone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.pitch-site--app .editorial-angle__title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.pitch-site--app .editorial-angle__title a {
  color: inherit;
  text-decoration: none;
}

.pitch-site--app .editorial-angle__title a:hover {
  text-decoration: underline;
}

.pitch-site--app .editorial-angle__text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.pitch-site--app .editorial-angle__chart svg {
  block-size: auto;
  inline-size: 100%;
}

.pitch-site--app .editorial-angle__chart .chart-legend {
  gap: 2px 12px;
}

.pitch-site--app .editorial-angle__chart .chart-legend__entry {
  font-size: 11px;
}

/* The card's own controls are small and quiet: the take is the thing to
   read, and three rows of full-size buttons would be most of what a card
   says. */
.pitch-site--app .editorial-angle__button {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ps-ink) 30%, transparent);
  border-radius: 999px;
  color: var(--ps-ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.pitch-site--app .editorial-angle__button:hover {
  border-color: var(--ps-ink);
}

.pitch-site--app .editorial-angle__button--primary {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
  color: var(--ps-paper);
}

.pitch-site--app .editorial-angle__numbers {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
}

.pitch-site--app .editorial-angle__table {
  border: 1px solid color-mix(in oklab, var(--ps-ink) 14%, transparent);
  border-collapse: separate;
  border-radius: 8px;
  border-spacing: 0;
  font-size: 0.85rem;
  inline-size: 100%;
  overflow: hidden;
}

.pitch-site--app .editorial-angle__table th {
  background: color-mix(in oklab, var(--ps-ink) 5%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  text-align: start;
  text-transform: uppercase;
}

.pitch-site--app .editorial-angle__table th.txt-right {
  text-align: end;
}

.pitch-site--app .editorial-angle__table td:first-child {
  inline-size: 100%;
}

.pitch-site--app .editorial-angle__table td {
  border-block-start: 1px solid color-mix(in oklab, var(--ps-ink) 10%, transparent);
  font-weight: 600;
  padding: 8px 10px;
  vertical-align: middle;
}

.pitch-site--app .editorial-angle__table tr.is-reference td {
  background: color-mix(in oklab, var(--ps-ink) 3%, transparent);
  border-block-start-style: dashed;
  color: color-mix(in oklab, var(--ps-ink) 60%, transparent);
  font-weight: 400;
}

.pitch-site--app .editorial-angle__value {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.pitch-site--app .editorial-angle__rank {
  border-radius: 4px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 6px;
  white-space: nowrap;
}

.pitch-site--app .editorial-angle__rank--top    { background: #d8efdf; color: #1d6b3d; }
.pitch-site--app .editorial-angle__rank--middle { background: #fbe6c2; color: #8a5a06; }
.pitch-site--app .editorial-angle__rank--bottom { background: #f6d5d0; color: #9b2c1f; }
.pitch-site--app .editorial-angle__rank--none   { background: color-mix(in oklab, var(--ps-ink) 7%, transparent); color: color-mix(in oklab, var(--ps-ink) 55%, transparent); }

.pitch-site--app .editorial-angle__actions {
  border-block-start: 1px solid color-mix(in oklab, var(--ps-ink) 10%, transparent);
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

.pitch-site--app .editorial-angle__more {
  margin-inline-start: auto;
}

/* A key to the match: the two teams in the colours the radar draws them in,
   the page's own team on a tinted row, and which way the measure points at
   the foot. */
.pitch-site--app .editorial-angle__side--own td {
  background: color-mix(in oklab, var(--theme-series-1, #d6336c) 10%, transparent);
  color: var(--theme-series-1, #d6336c);
}

.pitch-site--app .editorial-angle__side--other td {
  color: var(--theme-series-2, #1c7c7d);
}

.pitch-site--app .editorial-angle__direction {
  background: color-mix(in oklab, var(--ps-ink) 5%, transparent);
  border-block-start: 1px solid color-mix(in oklab, var(--ps-ink) 10%, transparent);
  color: color-mix(in oklab, var(--ps-ink) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  text-transform: uppercase;
}

/* The table under a match's keys: the rows that matter to the preview, with
   the teams left out between them named as a count rather than hidden. */
.pitch-site--app .editorial-excerpt {
  margin-block-start: var(--space-m, 1rem);
}

.pitch-site--app .editorial-excerpt__table td a {
  color: inherit;
  text-decoration: none;
}

.pitch-site--app .editorial-excerpt__table td a:hover {
  text-decoration: underline;
}

.pitch-site--app .editorial-excerpt__table td:first-child {
  inline-size: auto;
}

.pitch-site--app .editorial-excerpt__table td:nth-child(2) {
  inline-size: 100%;
}

.pitch-site--app .editorial-excerpt__table th:nth-child(n + 3),
.pitch-site--app .editorial-excerpt__table td:nth-child(n + 3) {
  min-inline-size: 4.5rem;
  padding-inline-start: var(--space-s);
}

.pitch-site--app .editorial-excerpt__position {
  color: color-mix(in oklab, var(--ps-ink) 55%, transparent);
  font-family: var(--font-mono);
  font-weight: 400;
}

.pitch-site--app .editorial-excerpt__gap td {
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ps-ink) 4%, transparent) 0 6px, transparent 6px 12px);
  color: color-mix(in oklab, var(--ps-ink) 55%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding-block: 6px;
  text-align: center;
  text-transform: uppercase;
}

.pitch-site--app .editorial-excerpt__signed--1 { color: #1f8a4c; }
.pitch-site--app .editorial-excerpt__signed---1 { color: #c0392b; }

/* A figure's teams or players as chips with a cross, and one searchable list
   to add another beside them. */
.pitch-site--app .editorial-pick-list__chip {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.pitch-site--app .editorial-pick-list__remove {
  align-items: center;
  border-radius: 50%;
  color: inherit;
  display: inline-flex;
  justify-content: center;
  margin-inline-end: -0.2rem;
  opacity: 0.7;
}

.pitch-site--app .editorial-pick-list__remove svg {
  block-size: 0.6rem;
  inline-size: 0.6rem;
}

.pitch-site--app .editorial-pick-list__remove:hover,
.pitch-site--app .editorial-pick-list__remove:focus-visible {
  opacity: 1;
}

.pitch-site--app .editorial-pick-list__add .searchable-select {
  inline-size: 13rem;
}