/* room_tv -- the television.
 *
 * Structural rules for the screen a room hangs on the wall. Tokens only; see
 * config/design_tokens.yml and test/design_system/token_contract_test.rb.
 *
 * Every measure here is in TV pixels. The reference is drawn at 1280x720, and
 * --rk-tv-u is one of its pixels at whatever size the set really is, so a
 * 1080p television shows the same picture half again as large and a 720p one
 * shows it exactly. Nothing below reflows between sizes; it only scales.
 */

.rk-tv {
  /* Height alone on sets too old for min(): a television is 16:9. */
  --rk-tv-u: calc(100vh / 720);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rk-tv-u));
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: calc(28 * var(--rk-tv-u)) calc(36 * var(--rk-tv-u)) 0;
  overflow: hidden;
}

@supports (width: min(1px, 2px)) {
  .rk-tv { --rk-tv-u: min(calc(100vw / 1280), calc(100vh / 720)); }
}

/* ------------------------------------------------------------- masthead */

.rk-tv__masthead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv__identity {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv__title {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: calc(34 * var(--rk-tv-u));
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
  line-height: 1.05;
  white-space: nowrap;
}

.rk-tv__connected {
  flex: 0 0 auto;
  font-size: calc(13 * var(--rk-tv-u));
}

.rk-tv__masthead-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Small enough to leave the wall to the room, big enough to hit. */
.rk-tv .rk-tv__exit,
.rk-tv .rk-tv__visualizer-entry {
  margin-right: calc(20 * var(--rk-tv-u));
  height: calc(32 * var(--rk-tv-u));
  min-height: 32px;
  padding: 0 calc(12 * var(--rk-tv-u));
  gap: calc(6 * var(--rk-tv-u));
  font-size: calc(12 * var(--rk-tv-u));
  font-size: max(12px, calc(12 * var(--rk-tv-u)));
}

.rk-tv__wordmark {
  flex: 0 0 auto;
  font-size: calc(13 * var(--rk-tv-u));
  letter-spacing: 0.3em;
  color: var(--chrome-ink);
}

/* ----------------------------------------------------------------- body */

.rk-tv__body {
  display: flex;
  flex: 1 1 auto;
  gap: calc(24 * var(--rk-tv-u));
  min-width: 0;
  min-height: 0;
}

.rk-tv__main {
  flex: 7 1 0;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.rk-tv__sidebar {
  flex: 4 1 0;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--rk-tv-u));
  min-width: 0;
  min-height: 0;
}

/* Title bars, at television size. */
.rk-tv .rk-panel__chrome {
  height: calc(46 * var(--rk-tv-u));
  padding: 0 calc(20 * var(--rk-tv-u));
  font-size: calc(12 * var(--rk-tv-u));
}

.rk-tv .rk-panel__chrome-meta {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: calc(11 * var(--rk-tv-u));
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--chrome-ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------- now playing */

.rk-tv__player-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.rk-tv__player-panel > .rk-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(28 * var(--rk-tv-u)) calc(28 * var(--rk-tv-u)) calc(24 * var(--rk-tv-u));
  gap: calc(22 * var(--rk-tv-u));
  justify-content: space-between;
}

/* The deck read-out is one Turbo fragment; its head and foot bracket the
   player stage, which is not. `display: contents` seats all three in the
   panel body's column and `order` puts the stage between them. */
.rk-tv__now { display: contents; }

.rk-tv__now-head {
  order: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv .rk-tv__now-art {
  width: calc(168 * var(--rk-tv-u));
  height: calc(168 * var(--rk-tv-u));
  box-shadow: var(--edge-shadow);
}

/* Once this set is the one playing the video, the video is the artwork. */
.rk-tv__player-panel:has(.rk-speaker__player:not([hidden])) .rk-tv__now-art,
[data-tv-legacy-speaker-value="true"] .rk-tv__now-art { display: none; }

.rk-tv__now-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv__now-text > .rk-label { font-size: calc(11 * var(--rk-tv-u)); }

.rk-tv__now-title {
  color: var(--ink-primary);
  font-family: var(--font-display);
  font-size: calc(52 * var(--rk-tv-u));
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
  line-height: 1.02;
}

.rk-tv__now-title--idle { font-size: calc(34 * var(--rk-tv-u)); }

.rk-tv__now-artist {
  color: var(--ink-secondary);
  font-family: var(--font-body);
  font-size: calc(22 * var(--rk-tv-u));
  line-height: var(--body-line);
}

.rk-tv__media-stage {
  order: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.rk-tv .rk-playback__notice { order: 3; }

.rk-tv__now-foot {
  order: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv__now-time {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv__now-clock,
.rk-tv__now-total {
  flex: 0 0 auto;
  font-family: var(--font-readout);
  font-size: calc(28 * var(--rk-tv-u));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The accent rather than the readout ink: this clock sits on the panel, and
   readout ink is only promised to be legible on --readout-bg. */
.rk-tv__now-clock {
  color: var(--accent);
  text-shadow: var(--readout-glow);
}

.rk-tv__now-total { color: var(--ink-muted); }

.rk-tv .rk-tv__now-meter,
.rk-tv .rk-tv__now-meter .rk-meter__track { height: calc(10 * var(--rk-tv-u)); }

.rk-tv .rk-tv__now-meter { flex: 1 1 auto; }

.rk-tv .rk-tv__now-viz {
  flex: 0 0 auto;
  height: calc(64 * var(--rk-tv-u));
  min-height: 0;
  padding: 0;
}

.rk-tv__audio {
  order: 5;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 * var(--rk-tv-u));
}

.rk-tv__audio .rk-button,
.rk-tv__audio p { font-size: calc(11 * var(--rk-tv-u)); }

/* Why the room is silent, when it is. */
.rk-tv .rk-tv__now-notice,
.rk-tv .rk-playback__notice {
  font-size: calc(15 * var(--rk-tv-u));
  text-align: center;
}

.rk-tv .rk-tv__now-notice,
.rk-tv .rk-playback__notice:not(:empty) {
  padding: calc(6 * var(--rk-tv-u)) calc(12 * var(--rk-tv-u));
}

/* ---------------------------------------------------------------- stage */

.rk-tv__media-stage > .rk-speaker-player-slot {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.rk-tv__media-stage > .rk-listener-player-slot { display: none; }

.rk-tv .rk-tv__standby {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rk-tv__standby > .rk-viz { display: none; }

.rk-tv .rk-speaker {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--rk-tv-u));
  min-width: 0;
  min-height: 0;
}

/* The video takes the stage's height and keeps its shape from it. Sets that
   predate `aspect-ratio` get the base rule instead: a 16:9 box the size the
   stage gives the video when the record has stepped aside, drawn in TV pixels
   because a percentage padding would answer to the stage's width, not its own. */
.rk-tv .rk-speaker__player {
  position: relative;
  flex: 0 0 auto;
  width: calc(366 * var(--rk-tv-u));
  max-width: 100%;
  height: 0;
  min-width: 0;
  min-height: 0;
  padding-top: calc(366 * var(--rk-tv-u) * 9 / 16);
  border: 0;
  background: var(--surface-sunken);
  border-radius: var(--edge-radius-sm);
  overflow: hidden;
}

@supports (aspect-ratio: 1) {
  .rk-tv .rk-speaker__player {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    padding-top: 0;
    aspect-ratio: 16 / 9;
  }
}

/* The YouTube API replaces the mount with an iframe of its own making, which
   keeps the id but not the class -- so what fills the box cannot be named. */
.rk-tv .rk-speaker__player > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.rk-tv .rk-speaker__mount,
.rk-tv .rk-speaker__mount iframe {
  min-width: 0;
  min-height: 0;
}

/* Waiting to be switched on: reserve the video's place. */
.rk-tv .rk-speaker__standby {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

/* The panel already has its bars, and the phone's reason to enable its
   speaker ("so you can hear the music here too") is not one a television
   needs to be given. */
.rk-tv .rk-speaker__standby .rk-viz,
.rk-tv .rk-speaker__standby p,
.rk-tv .rk-speaker__help { display: none; }

/* The phone's speaker card explains itself; the wall only needs the button. */
.rk-tv .rk-speaker__controls {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--rk-tv-u));
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.rk-tv .rk-speaker-card__head { display: none; }

.rk-tv .rk-speaker__controls .rk-button {
  min-height: calc(44 * var(--rk-tv-u));
  padding: 0 calc(18 * var(--rk-tv-u));
  font-size: calc(15 * var(--rk-tv-u));
}

.rk-tv .rk-speaker__status-row {
  flex: 0 0 auto;
  justify-content: center;
  text-align: center;
  gap: calc(12 * var(--rk-tv-u));
}

/* The speaker's own running commentary ("The queue is empty.", "Starting
   speaker...") is the phone's; here the deck read-out and the queue already
   say as much. The wake-lock warning stays: only this screen can act on it. */
.rk-tv .rk-speaker__status-row p:not(.rk-speaker__wake-status) { display: none; }

.rk-tv .rk-speaker__wake-status {
  color: var(--ink-muted);
  font-size: calc(15 * var(--rk-tv-u));
}

/* -------------------------------------------------------------- up next */

/* Four whole rows and the overflow line at most; the join card takes the
   rest of the column. The panel's height is settled by the column rather
   than by its rows, which is what lets the fitted queue measure the list
   and reveal every whole row it can. */
.rk-tv__queue-panel {
  position: relative;
  /* A zero basis: the panel's height must not follow its rows, or hiding them
     to measure would shrink the very space being measured. */
  flex: 1 1 0;
  max-height: calc((46 + 4 * 64 + 40) * var(--rk-tv-u));
  min-height: 0;
}

.rk-tv__queue-panel > .rk-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.rk-tv .rk-queue--fitted {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.rk-tv .rk-queue {
  gap: 0;
  background: transparent;
}

.rk-tv .rk-queue__row,
.rk-tv .rk-queue__trigger {
  display: grid;
  grid-template-columns: calc(28 * var(--rk-tv-u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(2 * var(--rk-tv-u)) calc(14 * var(--rk-tv-u));
  min-height: calc(64 * var(--rk-tv-u));
  padding: calc(10 * var(--rk-tv-u)) calc(16 * var(--rk-tv-u));
  border-radius: 0;
}

/* A row never gives up height to the list: the fitted queue hides whole rows
   that do not fit, and a squeezed row would write over the one below it. */
.rk-tv .rk-queue__row {
  flex-shrink: 0;
  border-top: var(--edge-width) solid var(--edge-hairline);
}

/* A row the viewer can move or remove is one button that opens its card; the
   row keeps only its rule, and the button inside takes the row's grid. */
.rk-tv .rk-queue__row--interactive {
  display: block;
  padding: 0;
}

.rk-tv .rk-queue__index {
  width: auto;
  font-size: calc(20 * var(--rk-tv-u));
}

.rk-tv .rk-queue__text { gap: calc(2 * var(--rk-tv-u)); }

.rk-tv .rk-queue__title {
  font-size: calc(18 * var(--rk-tv-u));
  font-weight: 600;
}

.rk-tv .rk-queue__artist { font-size: calc(14 * var(--rk-tv-u)); }

.rk-tv .rk-queue__duration {
  font-size: calc(17 * var(--rk-tv-u));
  min-width: 0;
}

.rk-tv .rk-queue__badges {
  grid-column: 2 / -1;
  justify-content: flex-start;
}

/* The count takes whatever the whole rows leave and sits in the middle of it. */
.rk-tv .rk-queue__more {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-height: calc(40 * var(--rk-tv-u));
  padding: 0 calc(16 * var(--rk-tv-u));
  border-top: var(--edge-width) solid var(--edge-hairline);
  color: var(--ink-on-row-dim);
  font-family: var(--font-label);
  font-size: calc(12 * var(--rk-tv-u));
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
}

.rk-tv .rk-queue__overflow {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
}

.rk-tv button.rk-queue__more {
  width: 100%;
  background: transparent;
  cursor: pointer;
}

.rk-tv button.rk-queue__more:hover,
.rk-tv button.rk-queue__more:focus-visible { color: var(--accent); }

.rk-tv .rk-queue__empty {
  padding: calc(24 * var(--rk-tv-u)) calc(16 * var(--rk-tv-u));
  font-size: calc(15 * var(--rk-tv-u));
  text-align: center;
}

/* ----------------------------------------------------------------- join */

.rk-tv__join-panel {
  flex: 0 0 auto;
  min-height: 0;
}

.rk-tv__join-panel > .rk-panel__body {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  padding: calc(16 * var(--rk-tv-u)) calc(24 * var(--rk-tv-u));
}

.rk-tv .rk-joincode {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: calc(24 * var(--rk-tv-u));
}

.rk-tv .rk-joincode--tv .rk-joincode__qr {
  width: calc(140 * var(--rk-tv-u));
  padding: calc(6 * var(--rk-tv-u));
  border-radius: calc(10 * var(--rk-tv-u));
}

.rk-tv .rk-joincode__details {
  flex: 1 1 auto;
  gap: calc(4 * var(--rk-tv-u));
  min-width: 0;
  text-align: left;
}

.rk-tv .rk-joincode .rk-label { font-size: calc(11 * var(--rk-tv-u)); }

/* Eight characters of whichever face the skin brought, on one line beside
   the QR. A proportional face runs past the column where a mono fits, so the
   fitted-text controller scales the size down to the line; a set without it
   breaks the code instead of cropping it. */
.rk-tv .rk-joincode__code {
  font-size: calc(34 * var(--rk-tv-u) * var(--rk-fit-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-shadow: var(--readout-glow);
  overflow-wrap: anywhere;
}

.rk-fitted-text--measuring {
  white-space: nowrap;
  overflow: hidden;
}

.rk-tv .rk-joincode__address {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: calc(15 * var(--rk-tv-u));
  letter-spacing: 0;
  text-transform: none;
}

/* -------------------------------------------------------------- marquee */

/* Full width, under everything, and never cropped: the strip scrolls. */
.rk-tv__marquee {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: calc(40 * var(--rk-tv-u));
  margin: 0 calc(-36 * var(--rk-tv-u));
  background: var(--surface-row);
  border-top: var(--edge-width) solid var(--edge-hairline);
  min-width: 0;
  overflow: hidden;
}

.rk-tv__marquee .rk-marquee {
  width: 100%;
  height: 100%;
  padding: 0 calc(36 * var(--rk-tv-u));
}

.rk-tv__marquee .rk-marquee__item {
  padding-inline-end: calc(48 * var(--rk-tv-u));
  color: var(--ink-secondary);
  font-family: var(--font-readout);
  font-size: calc(15 * var(--rk-tv-u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .rk-tv .rk-marquee__track {
    animation: none;
    min-width: 0;
    max-width: 100%;
  }

  .rk-tv .rk-marquee__item:first-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rk-tv .rk-marquee__item[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------ a screen in hand */

/* The screen opened on a phone stacks; the TV pixel follows the width so the
   type stays readable. */
@media (max-width: 767px) {
  .rk-tv {
    --rk-tv-u: calc(100vw / 480);
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  /* The way back takes a line of its own before it takes the room's name. */
  .rk-tv__masthead { flex-wrap: wrap; }
  .rk-tv__identity { flex-wrap: wrap; }
  .rk-tv__title { white-space: normal; }
  .rk-tv__body { flex-direction: column; }
  .rk-tv__main { flex: 0 0 auto; }
  .rk-tv__now-head { flex-direction: column; align-items: flex-start; }
  .rk-tv__now-text { align-self: stretch; }
  .rk-tv__now-title { white-space: normal; overflow-wrap: anywhere; }
  .rk-tv__media-stage { min-height: calc(200 * var(--rk-tv-u)); }
  .rk-tv__queue-panel { max-height: none; }
  .rk-tv .rk-queue--fitted { height: auto; overflow: visible; }
  .rk-tv__join-panel { flex: 0 0 auto; }
}

/* ------------------------------------------------------------ song card */

/* A song's actions, as a card in the middle of the set rather than the phone's
   sheet from its foot. The modern screen opens it as a popover; the classic
   runtime carries a copy of it out of the queue panel and lays its own scrim
   under it. Everything here has to hold on the oldest set that runtime serves:
   offsets are longhands, and spacing is margins and grid gaps, because flex
   gap arrived in Chrome 84. */
.rk-tv .rk-queue__popup--tv {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 31;
  width: calc(520 * var(--rk-tv-u));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  margin: 0;
  padding: calc(24 * var(--rk-tv-u));
  transform: translate(-50%, -50%);
  gap: 0;
}

/* Glass needs its blur. Without one the card takes the page's own colour under
   its tint, so the queue behind it never reads through the words on it. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rk-tv .rk-queue__popup--tv {
    background-color: var(--bg-page);
    background-image: linear-gradient(var(--surface-panel), var(--surface-panel));
  }
}

/* While a card is open the room behind it is only a picture. A tap on the dim
   closes the card and reaches nothing under it; the classic runtime's scrim
   does the same with an element of its own. */
.rk-tv:has(.rk-queue__popup--tv:popover-open) { pointer-events: none; }
.rk-tv .rk-queue__popup--tv { pointer-events: auto; }

.rk-tv .rk-queue__scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background: var(--bg-page);
  opacity: 0.62;
}

.rk-tv .rk-queue__popup--tv .rk-sheet__head { gap: 0; }

.rk-tv .rk-queue__popup--tv .rk-sheet__position {
  width: calc(40 * var(--rk-tv-u));
  height: calc(40 * var(--rk-tv-u));
  margin-right: calc(16 * var(--rk-tv-u));
  font-size: calc(20 * var(--rk-tv-u));
}

.rk-tv .rk-queue__popup--tv .rk-sheet__copy { gap: 0; }
.rk-tv .rk-queue__popup--tv .rk-sheet__copy > * + * { margin-top: calc(4 * var(--rk-tv-u)); }
.rk-tv .rk-queue__popup--tv .rk-sheet__title { font-size: calc(26 * var(--rk-tv-u)); }

.rk-tv .rk-queue__popup--tv .rk-sheet__meta,
.rk-tv .rk-queue__popup--tv .rk-sheet__eta { font-size: calc(15 * var(--rk-tv-u)); }

.rk-tv .rk-queue__popup--tv .rk-queue__close {
  width: calc(44 * var(--rk-tv-u));
  min-width: 37px;
  height: calc(44 * var(--rk-tv-u));
  min-height: 37px;
  margin-left: calc(16 * var(--rk-tv-u));
}

.rk-tv .rk-queue__upcoming {
  width: calc(760 * var(--rk-tv-u));
  text-transform: none;
  letter-spacing: normal;
}

.rk-tv .rk-queue__upcoming .rk-sheet__head {
  justify-content: space-between;
  margin-bottom: calc(16 * var(--rk-tv-u));
}

.rk-tv .rk-queue__upcoming-list {
  max-height: calc(100vh - 190 * var(--rk-tv-u));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rk-tv .rk-queue__upcoming-row {
  display: grid;
  grid-template-columns: calc(32 * var(--rk-tv-u)) minmax(0, 1fr);
  grid-gap: calc(10 * var(--rk-tv-u));
  padding: calc(16 * var(--rk-tv-u)) 0;
  border-top: var(--edge-width) solid var(--edge-hairline);
  overflow-wrap: anywhere;
}

.rk-tv .rk-queue__upcoming-row .rk-queue__tv-actions {
  grid-column: 2;
  margin-top: 0;
}

/* Side by side while both labels fit, stacked once they do not; a label that
   still runs long wraps inside its button rather than out of the card. */
.rk-tv .rk-queue__tv-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(180 * var(--rk-tv-u)), 1fr));
  grid-gap: calc(12 * var(--rk-tv-u));
  gap: calc(12 * var(--rk-tv-u));
  margin-top: calc(22 * var(--rk-tv-u));
}

.rk-tv .rk-queue__tv-actions form {
  display: flex;
  min-width: 0;
}

.rk-tv .rk-queue__tv-actions .rk-button {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  min-height: max(44px, calc(56 * var(--rk-tv-u)));
  padding: calc(8 * var(--rk-tv-u)) calc(16 * var(--rk-tv-u));
  font-size: calc(16 * var(--rk-tv-u));
  font-size: max(14px, calc(16 * var(--rk-tv-u)));
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}