/**
 * Compass capsules - head-to-head and setlist blocks.
 *
 * Two self-contained readings that can sit in any post, page or template.
 * Server-rendered like the rest of the theme, so there is no JS here and
 * nothing to hydrate.
 *
 * PALETTE. The tier colours are the Rising Compass values exactly as the
 * Compass publishes them, so a reading looks the same here as it does there.
 * They were briefly re-toned for this theme's warm sage ground and that is
 * reverted: matching the instrument matters more than matching the page.
 *
 * The consequence is real and worth knowing. These values are tuned for the
 * Compass's near-black ground, and Decent green and Degraded amber are light
 * colours; as small text on pale sage they carry far less contrast than the
 * rest of the theme's type. That is why the tier NAME sits beside every
 * charge in plain body colour.
 *
 * Colour is never the only channel. Every reading also carries its charge
 * and its tier name, so the block survives greyscale, colour blindness and
 * a printed page.
 *
 * @package rising-compass-transistor
 */

:root {
  /* Compass tiers, verbatim from the instrument. */
  --rct-tier-violet: #aa54ff;
  --rct-tier-blue:   #3388ff;
  --rct-tier-green:  #33cc55;
  --rct-tier-orange: #ffbb33;
  --rct-tier-red:    #ff3333;

  /* Washes. Low alpha so a full capsule still reads as part of the page. */
  --rct-tier-violet-wash: rgba(170, 84, 255, 0.10);
  --rct-tier-blue-wash:   rgba(51, 136, 255, 0.10);
  --rct-tier-green-wash:  rgba(51, 204, 85, 0.12);
  --rct-tier-orange-wash: rgba(255, 187, 51, 0.16);
  --rct-tier-red-wash:    rgba(255, 51, 51, 0.10);

  /* SURFACE AND TYPE. Neutral defaults, so a capsule is complete on any
     theme with nothing else loaded. A theme that wants the capsule to take
     its own scale redefines these; see rc-transistor.css in the Illus Caden
     theme for what that looks like. Everything below is a default and none
     of it is a value the capsule design depends on. */
  --rct-bg:              #ffffff;
  --rct-surface:         #f7f7f5;
  --rct-text:            #1f2328;
  --rct-text-muted:      #616a75;
  --rct-text-strong:     #11151a;
  --rct-rule:            #dfe2e6;
  --rct-rule-soft:       rgba(17, 21, 26, 0.10);

  --rct-font-display:    Georgia, "Times New Roman", serif;
  --rct-font-ui:         system-ui, -apple-system, "Segoe UI", sans-serif;
  --rct-font-mono:       ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --rct-space-xs:        4px;
  --rct-space-sm:        8px;
  --rct-space-md:        16px;
  --rct-space-lg:        24px;
  --rct-col-gap:         24px;

  --rct-h4:              1.25rem;
  --rct-text-small:      0.875rem;
  --rct-text-meta:       0.8125rem;
  --rct-text-label:      0.75rem;
  --rct-tracking-label:  0.09em;
  --rct-leading-snug:    1.35;
  --rct-leading-tight:   1.15;
  --rct-weight-body:     400;
  --rct-weight-semibold: 600;
  --rct-radius-sm:       4px;
}

/* Shared tier utilities. Used by both capsules, hence the flat names. */
.rct-tier-bg--violet { background: var(--rct-tier-violet); }
.rct-tier-bg--blue   { background: var(--rct-tier-blue); }
.rct-tier-bg--green  { background: var(--rct-tier-green); }
.rct-tier-bg--orange { background: var(--rct-tier-orange); }
.rct-tier-bg--red    { background: var(--rct-tier-red); }

.rct-tier-fg--violet { color: var(--rct-tier-violet); }
.rct-tier-fg--blue   { color: var(--rct-tier-blue); }
.rct-tier-fg--green  { color: var(--rct-tier-green); }
.rct-tier-fg--orange { color: var(--rct-tier-orange); }
.rct-tier-fg--red    { color: var(--rct-tier-red); }

/* ------------------------------------------------------------
   HEAD TO HEAD
   ------------------------------------------------------------ */
/* The pair stacks on its own when there is not room for two readable columns,
   with no query of any kind. auto-fit drops to one column as soon as two
   tracks cannot both hold the minimum.

   340px IS A MEASURED NUMBER, not a round one. The three-item tier legend
   sits on one line down to a 338px column and wraps to two below it, which
   is the first thing to visibly break in this block. Two 340px tracks plus
   the 24px gap means the pair splits at a 704px capsule, which lands within
   a few px of the 700px viewport break this replaces.

   The min() inside minmax is load bearing. A bare minmax(340px, 1fr) has a
   hard 340px floor, so an h2h dropped into a one_fourth overflows its column
   by the difference. min(340px, 100%) lets the single remaining track fall
   back to the container width instead.

   This replaces a viewport media query that could not see how wide the
   capsule actually was: an h2h in a one_half at 768px got the two-column
   layout at 166px per side. */
.rct-capsule--h2h {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--rct-space-lg);
}

/* FOUR ACROSS IS THREE PLUS AN ORPHAN, and auto-fit cannot know that. At the
   capsule's full width it fits three 340px tracks and wraps the fourth alone
   onto a second row, which reads as a three-way comparison with an
   afterthought under it. A four-set comparison is two pairs, so it is laid out
   as two pairs: 2x2 above the break, one column below it, and never 3+1.

   Named by count rather than by :has(), because the count is a fact the
   renderer already knows and a class is cheaper than asking the browser to
   work it out. */
@media (min-width: 700px) {
  .rct-capsule--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rct-capsule--h2h .rct-capsule__col {
  background: var(--rct-surface);
  border: 1px solid var(--rct-rule);
  border-radius: var(--rct-radius-sm);
  padding-bottom: var(--rct-space-lg);
}

/* The label is centred against the figure, not sat on its baseline. It runs
   to two lines where the figure is one, so baseline alignment hangs both of
   those lines off the bottom of the number and the pair reads as unrelated
   rather than as one reading. */
.rct-capsule__mean {
  display: flex;
  align-items: center;
  gap: var(--rct-space-sm);
  margin: var(--rct-space-md) 0 0;
  padding: 0 var(--rct-space-lg);
}

.rct-capsule__mean-value {
  font-family: var(--rct-font-display);
  font-size: 2.75rem;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.rct-capsule__mean-label {
  font-size: var(--rct-text-label);
  text-transform: uppercase;
  letter-spacing: var(--rct-tracking-label);
  color: var(--rct-text-muted);
}

/* The caption sits a quarter smaller than the label size it is derived from,
   which leaves the tier name as the readable half of the pair. Expressed as a
   calc off the token so it keeps tracking the type scale. */
.rct-capsule__mean-name {
  display: block;
  font-size: calc(var(--rct-text-label) * 0.75);
}

.rct-capsule__mean-tier {
  display: block;
  color: inherit;
}

.rct-capsule__spread {
  margin: var(--rct-space-sm) 0 0;
  padding: 0 var(--rct-space-lg);
  font-family: var(--rct-font-mono);
  font-size: var(--rct-text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--rct-text-muted);
}

.rct-capsule__bar {
  display: flex;
  height: 25px;
  margin: var(--rct-space-md) 0 var(--rct-space-sm);
  border: 1px solid var(--rct-rule);
  border-radius: 99px;
  overflow: hidden;
  background: var(--rct-bg);
}

.rct-capsule__bar-seg {
  display: block;
  height: 100%;
}

.rct-capsule__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rct-space-xs) var(--rct-space-md);
  margin: 0;
  padding: 0 var(--rct-space-lg);
  list-style: none;
  font-size: var(--rct-text-meta);
  color: var(--rct-text-muted);
}

.rct-capsule__legend li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rct-capsule__legend b {
  font-weight: var(--rct-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--rct-text);
}

.rct-capsule__swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   SETLIST
   ------------------------------------------------------------ */
/* The card is a query container so its own rows can respond to the card's
   width rather than the window's. A setlist is placed by a column shortcode
   as often as it is placed on its own, and a one_third at 768px is a NARROWER
   card than a full-bleed capsule on a 375px phone. Only the card knows. */
.rct-capsule--setlist {
  container-type: inline-size;
  container-name: rct-capsule;
  background: var(--rct-surface);
  border: 1px solid var(--rct-rule);
  border-radius: var(--rct-radius-sm);
  overflow: hidden;
}

.rct-capsule--setlist .rct-capsule__head {
  border-bottom: 1px solid var(--rct-rule-soft);
  padding-bottom: var(--rct-space-md);
}

/* THE BILLING BAND. Where an act stood on the bill is the first fact about
   the set and the one that qualifies every number under it: a headliner's
   mean and an opener's mean are not the same claim. So it is the first thing
   on the card, inverted and full width, where it is read before anything
   else rather than found beside the artist's name.

   The card clips it (overflow: hidden above), so the band takes the card's
   top corners without repeating the radius here. */
.rct-capsule--setlist .rct-capsule__billing {
  margin: 0;
  /* Vertical padding is off the scale on purpose. The band is a rule with a
     word in it rather than a row, and at the token it read as a header. */
  padding: 6px var(--rct-space-lg);
  background: var(--rct-text-strong);
  color: var(--rct-bg);
  font-size: var(--rct-text-label);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.24em;
  /* Letter-spacing lands after the LAST letter too, so a centred line sits
     half a space left of true. The indent puts it back. */
  text-indent: 0.24em;
}

/* The band carries the billing in its weight as well as its words: a
   support slot sits one step down the ink scale from a headliner, so a
   bill reads in order at a glance. Same scale the type uses, not a
   colour invented for this. */
.rct-capsule--setlist .rct-capsule__billing--support {
  background: var(--rct-text);
}

.rct-capsule__tally {
  margin: var(--rct-space-sm) 0 0;
  font-family: var(--rct-font-mono);
  font-size: var(--rct-text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--rct-text-muted);
}

.rct-capsule__songs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.rct-capsule__song {
  display: grid;
  /* The title track carries a FLOOR, not a bare 1fr. base.css puts
     min-width: 0 on every element in the theme, which removes the automatic
     minimum a grid item would otherwise get, and a bare 1fr beside a track
     asking for its full content then resolves to zero. The floor is on the
     TRACK, so no item reset can defeat it. See the NARROW note below. */
  grid-template-columns: 10px minmax(7rem, 1fr) auto;
  gap: var(--rct-space-sm) var(--rct-space-md);
  align-items: center;
  padding: 10px var(--rct-space-lg);
  border-bottom: 1px solid var(--rct-rule-soft);
}

.rct-capsule__song:last-child {
  border-bottom: none;
}

.rct-capsule__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.rct-capsule__title {
  font-size: var(--rct-text-small);
  line-height: var(--rct-leading-snug);
  overflow-wrap: anywhere;
}

/* A LINKED TITLE. The title carries the reference to the Compass, and a
   reference is not a colour: the tier palette is already spending every
   colour in this block on meaning, and a themed link ink beside a charge
   would read as a tier rather than as a link. So the link takes the row's
   own colour and says what it is with a rule under it. */
.rct-capsule__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rct-rule);
  text-underline-offset: 2px;
}

.rct-capsule__link:hover,
.rct-capsule__link:focus-visible {
  text-decoration-color: currentColor;
}

/* The credit sits under the title rather than beside the reading. A cover is
   counted now, so its row carries a charge on the right like any other, and
   whose song it is belongs with the title it qualifies. */
.rct-capsule__credit {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--rct-tracking-label);
  color: var(--rct-text-muted);
}

.rct-capsule__reading {
  text-align: right;
  white-space: nowrap;
}

.rct-capsule__charge {
  display: block;
  font-family: var(--rct-font-mono);
  font-size: var(--rct-text-small);
  font-weight: var(--rct-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.rct-capsule__tier {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--rct-tracking-label);
  color: var(--rct-text-muted);
}

/* A cover is present in the set and absent from the numbers. The hatch says
   "shown, not counted" without needing a caption to explain it. */
.rct-capsule__song--aside {
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 7px,
    var(--rct-bg) 7px,
    var(--rct-bg) 14px
  );
}

.rct-capsule__song--aside .rct-capsule__dot {
  border: 1px dashed var(--rct-text-muted);
  background: transparent;
}

.rct-capsule__song--aside .rct-capsule__title {
  color: var(--rct-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.rct-capsule__aside-by {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--rct-tracking-label);
  color: var(--rct-text-muted);
  text-align: right;
}

/* A medley is one performance of several songs, so it is one row with the
   songs it held listed under it. The rule down the left is what says these
   belong to the row above rather than to the set: they are inside the reading
   printed on that row, not beside it. */
.rct-capsule__medley {
  grid-column: 2 / -1;
  margin: var(--rct-space-xs) 0 0;
  padding: 0 0 0 var(--rct-space-md);
  list-style: none;
  border-left: 2px solid var(--rct-rule-soft);
}

.rct-capsule__part {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rct-space-md);
  padding: 3px 0;
}

.rct-capsule__part-title {
  font-size: var(--rct-text-meta);
  line-height: var(--rct-leading-snug);
  overflow-wrap: anywhere;
}

.rct-capsule__part-reading {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--rct-space-sm);
  white-space: nowrap;
}

.rct-capsule__part-charge {
  font-family: var(--rct-font-mono);
  font-size: var(--rct-text-meta);
  font-weight: var(--rct-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.rct-capsule__part-tier {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--rct-tracking-label);
  color: var(--rct-text-muted);
}

/* The same "shown, not counted" hatch the top level uses, at the weight a
   component is printed at. A struck line inside a struck row would be twice
   as loud as the thing it qualifies. */
.rct-capsule__part--aside .rct-capsule__part-title {
  color: var(--rct-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.rct-capsule__part--aside .rct-capsule__aside-by {
  flex: 0 0 auto;
}

/* The row says what it is before the reader reaches the list, because the
   figure beside it is pooled and a pooled figure read as one song's is the
   one misreading this feature can cause. */
.rct-capsule__medley-tag {
  margin-left: var(--rct-space-sm);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--rct-tracking-label);
  color: var(--rct-text-muted);
  white-space: nowrap;
}

/* A medley row's own title and figure sit on the first line of a taller row,
   rather than centred against the list hanging below them. */
.rct-capsule__song--medley {
  align-items: start;
}

.rct-capsule__note {
  margin: 0;
  padding: var(--rct-space-md) var(--rct-space-lg);
  border-top: 1px solid var(--rct-rule-soft);
  font-size: var(--rct-text-meta);
  color: var(--rct-text-muted);
}

/* ------------------------------------------------------------
   NARROW - keyed to the CARD, not the window

   A song row is a title and its reading, and the two belong at
   opposite edges of the row. That facing pair is what makes a column
   of readings scannable without reading a word of it, so the row holds
   its shape a long way down and the TITLE is what gives way, because
   the title is the part that can afford to.

   THE BUG THIS BLOCK USED TO WORK AROUND. The row was `10px 1fr auto`,
   and base.css puts `min-width: 0` on every element in the theme. That
   reset removes the automatic minimum size a grid item would otherwise
   get, so the 1fr title track had NO floor at all. On a cover row the
   third track held a nowrap writer credit of 138px to 176px, it took
   every pixel it asked for, and the title track resolved to exactly 0.
   The title then broke one character per line: "Building a Mystery"
   measured 302px tall in a one_third at 768px, with the credit clipped
   to "SARAH MCLACHLAN COVE" by the card's own overflow.

   Do not try to fix that with overflow-wrap. It was tested: break-word
   changes nothing, because min-width:0 defeats the intrinsic floor no
   matter how the text is allowed to break.

   What fixes it is a floor on the TRACK, `minmax(7rem, 1fr)`, which no
   item-level reset can reach, plus letting the credit wrap so the
   third track can shrink instead of taking everything. The two
   together are why the row now holds its edges in a half column, where
   before it had to stack at 420px and 360px to survive.

   Measured by CARD width against the real data, before the fix:

     up to 260px   title 0px, credit clipped by up to 67px
     270 to 320px  title under 53px, titles run 3 to 15 lines
     330 to 380px  titles run 2 lines
     390px and up  titles run 1 line

   The stack survives at one width only: below a third column, where
   the title has nothing left to give. A media query cannot do this.
   The capsule is as wide as whatever column the writer dropped it in,
   and the viewport does not know that.
   ------------------------------------------------------------ */
@container rct-capsule (max-width: 280px) {
  .rct-capsule__song {
    grid-template-columns: 10px 1fr;
  }

  .rct-capsule__reading {
    grid-column: 2;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: var(--rct-space-sm);
  }

  .rct-capsule__aside-by {
    grid-column: 2;
    text-align: left;
  }

  .rct-capsule__part {
    display: block;
  }
}

/* ------------------------------------------------------------
   FESTIVAL - one night, and the bill that played it

   The bill is a list of acts, not a list of songs, so it borrows the
   capsule's head and its bar and nothing else. Each act carries its own
   mean and mix; the pooled reading for the night sits above them in the
   header, using the same mean treatment the head-to-head columns use.
   ------------------------------------------------------------ */
.rct-capsule__bill {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rct-capsule__act {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--rct-space-md);
  align-items: baseline;
  padding: var(--rct-space-sm) var(--rct-space-lg);
  border-top: 1px solid var(--rct-rule-soft);
}

.rct-capsule__act-artist {
  font-family: var(--rct-font-display);
  font-size: 1.05rem;
  display: block;
}

.rct-capsule__act-slot {
  display: block;
  font-size: var(--rct-text-label);
  letter-spacing: var(--rct-tracking-label);
  text-transform: uppercase;
  color: var(--rct-text-muted);
}

.rct-capsule__act-reading {
  text-align: right;
  white-space: nowrap;
}

.rct-capsule__act-count {
  display: block;
  font-size: var(--rct-text-label);
  letter-spacing: var(--rct-tracking-label);
  text-transform: uppercase;
  color: var(--rct-text-muted);
}

/* The bar spans both columns so it reads as belonging to the act above it
   rather than to the reading beside it. */
.rct-capsule__act .rct-capsule__bar {
  grid-column: 1 / -1;
  margin-top: var(--rct-space-sm);
}

@media (max-width: 520px) {
  .rct-capsule__act {
    grid-template-columns: minmax(0, 1fr);
  }
  .rct-capsule__act-reading {
    text-align: left;
  }
}

/* ------------------------------------------------------------
   VERSUS - two sides and the line between them

   Three columns, and the middle one is the point. A fixed axis rather
   than a gap means the division is the SAME WIDTH whatever the sides
   contain: a gap set by the grid grows and shrinks with the content,
   and a division that moves does not read as a division at all.

   It is a real column rather than a border on one side, because a
   border belongs to the element it is drawn on and this belongs to
   neither party.
   ------------------------------------------------------------ */
.rct-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

/* ENCAPSULATION. Each side is one bounded surface, so membership is
   visible before a word is read. The two are identical on purpose:
   any difference in weight would put a thumb on the scale of a
   comparison that is supposed to be even-handed. */
.rct-versus__side {
  background: var(--rct-surface);
  border: 1px solid var(--rct-rule);
  border-radius: var(--rct-radius-sm);
  /* The side owns the inset, and the head and every act row ride on it.
     One declaration to change rather than one per child, and nothing
     inside can fall out of alignment with anything else. */
  padding: var(--rct-space-lg) var(--rct-space-lg) var(--rct-space-md);
}

/* The head takes no side padding, because the act rows below it take
   none either and the label, the figure and every artist under them
   read as one column or as none. */
.rct-versus__head {
  padding: 0 0 var(--rct-space-md);
  border-bottom: 1px solid var(--rct-rule-soft);
}

.rct-versus__label {
  font-family: var(--rct-font-display);
  font-size: var(--rct-h4);
  line-height: var(--rct-leading-tight);
  margin: 0;
}

/* THE FACING FIGURES. Label on the outer edge where it identifies the
   side; figure on the INNER edge, against the axis, because the two
   figures are the comparison and have to be readable as a pair. Pushed
   to the outer edges they sit nine hundred pixels apart and the reader
   holds one in their head while crossing to the other, which is exactly
   the adjacency this capsule exists to replace. */
.rct-versus__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rct-space-md);
}

/* The tier name STACKS under the charge rather than sitting beside it, and
   holds the same edge the charge hugs: the inner edge on each side, so the
   pair still reads as facing. Beside it, the name is what a narrow side runs
   out of room for first, and a nowrap figure that is allowed to shrink does
   not wrap, it overlaps its own number.

   flex: 0 0 auto is the other half of that. The label beside it is the part
   with somewhere to go, so the label wraps and the figure keeps its size. */
.rct-versus__figure {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--rct-space-xs);
  margin: 0;
  white-space: nowrap;
}

.rct-versus__value {
  font-family: var(--rct-font-display);
  font-size: 2.6rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.rct-versus__tier {
  font-size: var(--rct-text-label);
  letter-spacing: var(--rct-tracking-label);
  text-transform: uppercase;
}

/* THE SPREAD IS A TABLE, not a sentence. Each cell holds one measurement
   and they divide the side's width between them, so the same fact sits at
   the same place on both sides and the two can be read across rather than
   one after the other. The border is what makes that a table rather than a
   line with commas in it. */
.rct-versus__spread {
  display: flex;
  width: 100%;
  margin: var(--rct-space-lg) 0 0;
  border: 1px solid var(--rct-rule);
  border-radius: var(--rct-radius-sm);
  font-size: var(--rct-text-meta);
  color: var(--rct-text-muted);
  font-variant-numeric: tabular-nums;
}

.rct-versus__spread-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--rct-space-xs) var(--rct-space-sm);
  text-align: center;
  border-left: 1px solid var(--rct-rule-soft);
}

.rct-versus__spread-cell:first-child {
  border-left: 0;
}

.rct-versus__head .rct-capsule__bar {
  margin-top: var(--rct-space-sm);
}

/* The B side mirrors: its figures hug the axis from the other direction,
   which is what makes the pair read as facing rather than as two
   left-aligned columns that happen to be adjacent. */
.rct-versus__side--b .rct-versus__head,
.rct-versus__side--b .rct-versus__act {
  text-align: right;
}
.rct-versus__side--b .rct-versus__top {
  flex-direction: row-reverse;
}
.rct-versus__side--b .rct-versus__figure {
  align-items: flex-start;
}
.rct-versus__side--b .rct-versus__act {
  flex-direction: row-reverse;
}
.rct-versus__side--b .rct-versus__act-reading {
  text-align: left;
}

/* THE AXIS. Full-height rule with the marker centred on it. */
.rct-versus__axis {
  position: relative;
  width: calc(var(--rct-space-lg) * 2);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rct-versus__axis::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rct-rule);
}

.rct-versus__vs {
  position: relative;
  background: var(--rct-bg);
  border: 1px solid var(--rct-rule);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: var(--rct-text-label);
  letter-spacing: var(--rct-tracking-label);
  text-transform: uppercase;
  color: var(--rct-text-muted);
  font-family: var(--rct-font-ui);
}

.rct-versus__acts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rct-versus__act {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rct-space-md);
  padding: var(--rct-space-sm) 0;
  border-bottom: 1px solid var(--rct-rule-soft);
}
.rct-versus__act:last-child { border-bottom: 0; }

.rct-versus__act-artist {
  font-family: var(--rct-font-display);
  display: block;
}

.rct-versus__act-slot,
.rct-versus__act-count {
  display: block;
  font-size: var(--rct-text-label);
  letter-spacing: var(--rct-tracking-label);
  text-transform: uppercase;
  color: var(--rct-text-muted);
}

.rct-versus__act-reading { white-space: nowrap; }

/* NARROW. The axis turns on its side and sits between the two, so the
   division survives the stack. A centre line that simply disappeared
   below the break would take the whole argument with it. */
@media (max-width: 700px) {
  .rct-versus { grid-template-columns: minmax(0, 1fr); }

  .rct-versus__axis {
    width: auto;
    height: calc(var(--rct-space-lg) * 2);
  }
  .rct-versus__axis::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .rct-versus__side--b .rct-versus__head,
  .rct-versus__side--b .rct-versus__act { text-align: left; }
  .rct-versus__side--b .rct-versus__top,
  .rct-versus__side--b .rct-versus__figure,
  .rct-versus__side--b .rct-versus__act { flex-direction: row; }
  .rct-versus__side--b .rct-versus__act-reading { text-align: right; }
}