/* Archive TV: reusable pieces (header, buttons, rows, tiles, progress, grid, search bar, status, episode rows).
   Values come from css/tokens.css; see the notes there. Old-browser-safe: no grid, no custom properties. */

/* ---------- TopNav (js/ui/topnav.js) ----------
   Brand (links home), Home / Search buttons (.is-current on the screen you're on), filter chip (.c-button--chip,
   .is-pressed while showing TV-compatible uploads only). */
.c-topnav {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  padding: 1.6rem 3rem 0.6rem; /* @space-1-6 @gutter @space-0-6 */
}
.c-topnav__brand {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.12s; /* @motion-fast */
  transition: transform 0.12s; /* @motion-fast */
}
.c-topnav__brand:focus { -webkit-transform: scale(1.05); transform: scale(1.05); }
/* The logotype: an SVG image (img/logo.svg) as wide as the tagline under it (11.3rem in League Spartan at @size-xs);
   the height keeps the drawing's 1728×769 proportions. */
.c-topnav__brand-logo { display: block; width: 11.3rem; height: 5.03rem; }
/* The attribution line under the logotype. */
.c-topnav__brand-tagline {
  display: block;
  font-size: 0.85rem; /* @size-xs */
  margin-top: 0.3rem; /* @space-0-3 */
  color: #8a92a2; /* @text-3 */
}
.c-topnav__spacer { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.c-topnav__links {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
}
.c-topnav__links .c-button, .c-topnav__links .c-search-bar { margin-right: 0.8rem; } /* @space-0-8 */

/* ---------- Icon (js/ui/icon.js) ---------- */
.c-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
}

/* ---------- Button (js/ui/button.js) ----------
   Variants: default (secondary), --primary (the main action: solid accent, dark bold label), --overlay (over video: black
   glass with a translucent border), --overlay + --primary (the main action over video: solid accent), --chip, --tab. --pill:
   fully round ends. Sizes: --sm, default (md), --lg, --xl.
   States: :focus (also the hover look: every button fills solid), .is-pressed (toggles such as My shows; the
   selected season tab), .is-current, .is-disabled, .is-loading. No outer margins: the container spaces its buttons. */
/* A small flex box, so the icon and the label are each centred (as inline text, a 1em icon stretched the line and
   pushed the label down). */
.c-button {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  background: #232730; /* @surface-3 */
  border: 0.15rem solid transparent; /* @border-width */
  border-radius: 0.5rem; /* @radius-lg */
  padding: 0.6rem 1.4rem; /* @space-0-6 @space-1-4 */
  font-size: 1.1rem; /* @size-md */
  cursor: pointer;
}
.c-button--primary {
  background: #6bffef; /* @accent */
  border-color: #6bffef; /* @accent */
  color: #000; /* @on-accent */
  font-weight: 700;
}
/* Over video: the border is the same glass as the fill and the fill stops inside it (padding-box), so at rest
   it reads as one plain shape; on focus only the inside turns solid and the edge stays glass, like a ring. */
.c-button--overlay {
  background: rgba(0, 0, 0, 0.6); /* @surface-3-scrim */
  -webkit-background-clip: padding-box; background-clip: padding-box;
  border: 0.2rem solid rgba(0, 0, 0, 0.6); /* @border-width-overlay @surface-3-scrim */
}
/* The main action over video is a solid accent shape too (fill and edge); on focus the edge turns glass like the others. */
.c-button--overlay.c-button--primary {
  background: #6bffef; /* @accent */
  border-color: #6bffef; /* @accent */
}
.c-button--pill { border-radius: 999px; } /* @radius-pill */
.c-button--sm {
  font-size: 1rem; /* @size-sm */
  padding: 0.3rem 1rem; /* @space-0-3 @space-1 */
}
.c-button--lg {
  font-size: 1.2rem; /* @size-lg */
  padding: 0.7rem 1.4rem; /* @space-0-7 @space-1-4 */
}
.c-button--xl {
  font-size: 1.35rem; /* @size-xl */
  padding: 0.8rem 1.8rem; /* @space-0-8 @space-1-8 */
}
.c-button.is-disabled, .c-button.is-loading { cursor: default; }
.c-button.is-disabled { opacity: 0.4; } /* @opacity-disabled */
.c-button__icon + .c-button__label, .c-button__label + .c-button__icon { margin-left: 0.4rem; } /* @space-0-4 */
/* A 1em icon is taller than the label's line, which made buttons with an icon taller than buttons without one
   (and, as inline boxes, sit lower). Let it overhang the padding instead, so every button of a size is one height;
   vertical-align keeps neighbouring buttons centred on each other. */
.c-button .c-button__icon {
  margin-top: -0.1em; /* @icon-overhang */
  margin-bottom: -0.1em; /* @icon-overhang */
}
.c-button { vertical-align: middle; }
/* League Spartan (@font) sits high in its line box: its capitals are centred about 0.125em above the middle (measured
   in the browser against the baseline), so labels looked high in buttons. Nudge the contents down to centre them; the button's
   size doesn't change. Re-measure if @font changes. Icons are centred geometrically and need no nudge. */
.c-button__label { position: relative; top: 0.125em; }
/* Focus last, so it wins over every variant: a solid fill, dark label and icons (the icons take currentColor). */
.c-button:focus {
  background: #fff; /* @focus-bg */
  color: #000; /* @on-focus */
  border-color: #fff; /* @focus-bg */
  -webkit-transform: scale(1.05); transform: scale(1.05);
}
/* Over video the edge keeps the glass color (the ring); the background shorthand above resets the clip. */
.c-button--overlay:focus {
  border-color: rgba(0, 0, 0, 0.6); /* @surface-3-scrim */
  -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* Season tabs: the selected one is solid; focus only rings and grows a tab, so the selected one stays clear. */
.c-button--tab.is-pressed {
  background: #fff; /* @focus-bg */
  color: #000; /* @on-focus */
  font-weight: 700;
}
.c-button--tab:focus {
  background: #232730; /* @surface-3 */
  color: #eef0f3; /* @text */
  border-color: #fff; /* @focus-ring */
}
.c-button--tab.is-pressed:focus {
  background: #fff; /* @focus-bg */
  color: #000; /* @on-focus */
}

/* ---------- IconButton (js/ui/iconbutton.js) ----------
   A round icon button with a small label under it: the player's transport and view controls, over video.
   --lg: larger (not used now: all player controls are one size). At rest a plain glass circle (its border is the same glass); focus (= hover)
   fills the inside solid and leaves the glass edge as a ring, and grows it.
   Circle sizes are not tokens (like tile sizes). .is-disabled (Prev/Next at the ends) is dimmed. No look yet: .is-pressed (CC on). */
.c-icon-button {
  display: inline-block;
  vertical-align: bottom;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
  color: #eef0f3; /* @text */
  cursor: pointer;
}
.c-icon-button__circle {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto;
  border-radius: 50%; /* @radius-round */
  background: rgba(0, 0, 0, 0.6); /* @surface-3-scrim */
  -webkit-background-clip: padding-box; background-clip: padding-box;
  border: 0.2rem solid rgba(0, 0, 0, 0.6); /* @border-width-overlay @surface-3-scrim */
  font-size: 1.6rem; /* @size-2xl */
  -webkit-transition: -webkit-transform 0.12s; /* @motion-fast */
  transition: transform 0.12s; /* @motion-fast */
}
.c-icon-button__label {
  display: block;
  margin-top: 0.4rem; /* @space-0-4 */
  font-size: 1rem; /* @size-sm */
  text-shadow: 0 0.1rem 0.4rem #000; /* @shadow-text */
}
.c-icon-button--lg .c-icon-button__circle {
  width: 4.6rem;
  height: 4.6rem;
  font-size: 2.2rem; /* @size-5xl */
}
.c-icon-button.is-disabled { cursor: default; opacity: 0.4; } /* @opacity-disabled */
.c-icon-button:focus .c-icon-button__circle {
  background: #fff; /* @focus-bg */
  -webkit-background-clip: padding-box; background-clip: padding-box;
  color: #000; /* @on-focus */
  -webkit-transform: scale(1.05); transform: scale(1.05);
}

/* ---------- Row (js/ui/row.js) ----------
   Title with a "See all ›" link, then a track of tiles that scrolls sideways; ‹ › buttons sit in the side gutters
   over the thumbnails (.is-hidden when the row can't scroll that way). While loading, the track holds skeleton tiles. */
/* The track clips sideways overflow, which also clips downwards, so the space below a row is the track's bottom
   padding: it holds a focused tile's second title line (see .c-tile__title). */
.c-row { padding: 0; }
.c-row__title {
  margin: 0 3rem 0.6rem; /* @gutter @space-0-6 */
  font-size: 1.35rem; /* @size-xl */
  font-weight: 600;
  color: #c9ced8; /* @text-2 */
}
/* "See all ›": a small pill Button (--sm --pill) after the title, label in the accent color; focus fills it like any button. */
.c-row__see-all {
  margin-left: 1.2rem; /* @space-1-2 */
  vertical-align: middle;
  font-weight: 400;
  color: #6bffef; /* @accent */
}
.c-row__viewport { position: relative; }
.c-row__track {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.6rem 3rem 2rem; /* @space-0-6 @gutter @space-2 */
}
.c-row__track .c-tile { margin-right: 1rem; } /* @space-1 */
.c-row__arrow {
  position: absolute;
  top: 0.6rem;
  height: 8.44rem;
  width: 2.6rem;
  border: 0;
  border-radius: 0.4rem; /* @radius-md */
  background: rgba(14, 16, 20, 0.85); /* @bg-scrim */
  color: #fff; /* @text-bright */
  font-size: 2.6rem; /* @size-glyph */
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}
.c-row__arrow--prev { left: 0.2rem; }
.c-row__arrow--next { right: 0.2rem; }
.c-row__arrow:focus {
  background: #fff; /* @focus-bg */
  color: #000; /* @on-focus */
}
.c-row__arrow.is-hidden { display: none; }

/* ---------- Row --large: the first row on home ----------
   Big tiles with the title and the year (or episode) over the bottom of the image, on a gradient to dark; one line
   each (the title doesn't open to two lines on focus). The progress bar sits at the bottom edge of the image.
   The thumbnail clips the gradient to its rounded corners. */
.c-row--large .c-tile { width: 24rem; }
.c-row--large .c-tile__thumb {
  position: relative;
  overflow: hidden;
  width: 24rem;
  height: 13.5rem;
}
.c-row--large .c-tile__thumb:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85)); /* @scrim-tile */
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85)); /* @scrim-tile */
}
.c-row--large .c-tile .c-tile__title {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 10.2rem;
  margin: 0;
  height: auto;
  font-size: 1.35rem; /* @size-xl */
  font-weight: 600;
  color: #fff; /* @text-bright */
}
.c-row--large .c-tile .c-tile__title-text,
.c-row--large .c-tile:focus .c-tile__title-text { display: block; white-space: nowrap; }
.c-row--large .c-tile .c-tile__meta {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 12rem;
  color: #eef0f3; /* @text */
}
.c-row--large .c-tile .c-progress {
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: 13rem;
  margin: 0;
}
.c-row--large .c-row__arrow { height: 13.5rem; }

/* ---------- Tile (js/ui/tile.js) ----------
   Variants: default (show), --more (text-only "See all ›" / "Load more"), --skeleton (placeholder while loading).
   Focus grows the tile and rings the thumbnail. Spacing between tiles is set by the Row or Grid. */
.c-tile {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 15rem;
  border-radius: 0.5rem; /* @radius-lg */
  white-space: normal;
  -webkit-transition: -webkit-transform 0.12s; /* @motion-fast */
  transition: transform 0.12s; /* @motion-fast */
}
.c-tile__thumb {
  width: 15rem;
  height: 8.44rem;
  border-radius: 0.5rem; /* @radius-lg */
  background-color: #1d2129; /* @surface-2 */
  background-size: cover;
  background-position: center;
  border: 0.2rem solid transparent; /* @border-width-thumb */
}
/* The title box is one line tall, so the meta line sits right under it. The text shows one line with "…" at rest;
   on focus it shows up to two lines, the second drawn over the space below (meta and progress move down one line
   when it wraps, see below), so the tile never changes size. */
.c-tile__title {
  margin-top: 0.45rem; /* @space-0-45 */
  font-size: 1rem; /* @size-sm */
  line-height: 1.25;
  height: 1.25em;
  color: #c9ced8; /* @text-2 */
}
.c-tile__title-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-tile:focus .c-tile__title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.c-tile__meta {
  font-size: 0.85rem; /* @size-xs */
  color: #8a92a2; /* @text-3 */
  height: 1.25em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-tile:focus { -webkit-transform: scale(1.08); transform: scale(1.08); z-index: 2; }
.c-tile:focus .c-tile__thumb {
  border-color: #fff; /* @focus-ring */
  box-shadow: 0 0.4rem 1.6rem rgba(0,0,0,0.6); /* @shadow-focus */
}
.c-tile:focus .c-tile__title { color: #fff; } /* @text-bright */
/* Room for the second title line (.is-wrapped is set by tile.js when the focused title takes two lines): one title line (1rem @size-sm × line-height 1.25). It's only drawn, not laid out,
   so a two-line title may run over the space under the tile (Row and Grid leave room for it). */
.c-tile.is-wrapped:focus .c-tile__meta, .c-tile.is-wrapped:focus .c-progress { position: relative; top: 1.25rem; }
/* League Spartan sits high (see .c-button__label): nudge the text of --more tiles and episode rows down to centre it. */
.c-tile__more-label, .c-episode__num, .c-episode__title, .c-episode--watched .c-episode__state { position: relative; top: 0.125em; }
.c-tile--more .c-tile__thumb {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  font-size: 1.35rem; /* @size-xl */
  color: #6bffef; /* @accent */
  font-weight: 600;
}
.c-tile .c-progress { margin-top: 0.3rem; } /* @space-0-3 */
/* --skeleton needs no rules of its own yet: an empty thumbnail box (surface-2) and empty title and meta lines,
   so rows and grids keep their size while loading. */

/* ---------- ProgressBar (js/ui/progress.js) ---------- */
.c-progress {
  height: 0.3rem;
  background: #3a3f4a; /* @line */
  border-radius: 0.2rem; /* @radius-sm */
  overflow: hidden;
}
.c-progress__fill {
  height: 100%;
  background: #6bffef; /* @accent */
}
.c-progress--seek { height: 0.9rem; cursor: pointer; }

/* ---------- Grid (js/ui/grid.js) and PageTitle ---------- */
.c-page-title {
  margin: 0.4rem 3rem 0.8rem; /* @space-0-4 @gutter @space-0-8 */
  font-size: 1.8rem; /* @size-3xl */
}
.c-grid { padding: 0.6rem 3rem 2rem; } /* @space-0-6 @gutter @space-2 */
.c-grid .c-tile { margin-right: 1rem; margin-bottom: 1.6rem; } /* @space-1 @space-1-6 */

/* ---------- SearchBar (js/ui/searchbar.js) ----------
   In the TopNav: a field box (magnifier icon and text input; the border is on the box), the same height as the top
   bar buttons. */
.c-search-bar {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  vertical-align: middle;
}
.c-search-bar__field {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  width: 22rem;
  padding: 0 1rem; /* @space-1 */
  background: #1d2129; /* @surface-2 */
  border: 0.15rem solid #3a3f4a; /* @border-width @line */
  border-radius: 0.5rem; /* @radius-lg */
  cursor: text;
}
/* Hovering doesn't focus the input (that would open the TV keyboard), so hover gets the focus look directly.
   .is-focused stands in for :focus-within, which the TV doesn't have. */
.c-search-bar__field:hover, .c-search-bar__field.is-focused { border-color: #fff; } /* @focus-ring */
.c-search-bar__icon {
  -webkit-box-flex: 0; -webkit-flex: none; flex: none;
  font-size: 1.2rem; /* @size-lg */
  color: #8a92a2; /* @text-3 */
  margin-right: 0.6rem; /* @space-0-6 */
}
.c-search-bar__field:hover .c-search-bar__icon, .c-search-bar__field.is-focused .c-search-bar__icon { color: #fff; } /* @text-bright */
.c-search-bar__input {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  min-width: 0;
  font-size: 1.1rem; /* @size-md */
  padding: 0.6rem 0; /* @space-0-6 */
  background: transparent;
  border: 0;
  /* League Spartan sits high (see .c-button__label): nudge the text down; the border is on the field box, so
     moving the input changes nothing else. */
  position: relative;
  top: 0.125em;
}

/* ---------- StatusMessage (js/ui/status.js) ----------
   Kinds: --loading, --empty, --error, --info. --page: stands alone on a page (bigger, page gutter). */
.c-status {
  color: #8a92a2; /* @text-3 */
  font-size: 1.1rem; /* @size-md */
  padding: 0.6rem 0; /* @space-0-6 */
  white-space: normal;
}
.c-status--page {
  padding: 1rem 3rem; /* @space-1 @gutter */
  font-size: 1.2rem; /* @size-lg */
}
.c-status__action { margin-left: 0.8rem; margin-right: 0.8rem; } /* @space-0-8 @space-0-8 */

/* ---------- ShowHero (js/ui/showhero.js) ----------
   Poster on the left; title, details line (with the My shows toggle), description, actions on the right.
   The episode list and season tabs sit in __body under the actions. */
.c-show-hero {
  display: -webkit-box; display: -webkit-flex; display: flex;
  padding: 1rem 3rem 3rem; /* @space-1 @gutter @space-3 */
}
.c-show-hero__poster {
  width: 20rem; min-width: 20rem; height: 20rem;
  background-color: #1d2129; /* @surface-2 */
  background-size: cover; background-position: center;
  border-radius: 0.6rem; /* @radius-xl */
  margin-right: 2.5rem; /* @space-2-5 */
}
.c-show-hero__body { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; }
.c-show-hero__title {
  margin: 0 0 0.4rem; /* @space-0-4 */
  font-size: 2.2rem; /* @size-5xl */
}
.c-show-hero__details {
  color: #8a92a2; /* @text-3 */
  font-size: 1rem; /* @size-sm */
  margin-bottom: 0.8rem; /* @space-0-8 */
}
.c-show-hero__details .c-button { margin-left: 1.2rem; margin-right: 0.8rem; vertical-align: middle; } /* @space-1-2 @space-0-8 */
.c-show-hero__desc {
  color: #c9ced8; /* @text-2 */
  font-size: 1rem; /* @size-sm */
  line-height: 1.45;
  max-width: 60rem;
  margin-bottom: 1.2rem; /* @space-1-2 */
}
.c-show-hero__actions { margin-bottom: 1.4rem; } /* @space-1-4 */
.c-show-hero__actions .c-button { margin-right: 0.8rem; } /* @space-0-8 */

/* ---------- SeasonTabs (js/ui/episodes.js) ----------
   One Button --tab per season; the selected season is .is-pressed (solid, see the Button section); focus only rings
   a tab, so the selected one stays recognisable. Tabs wrap onto more lines for long-running shows. */
.c-season-tabs { max-width: 60rem; margin-bottom: 0.4rem; } /* @space-0-4 */
.c-season-tabs .c-button { margin: 0 0.6rem 0.6rem 0; } /* @space-0-6 @space-0-6 */

/* ---------- EpisodeItem (js/ui/episodes.js) ----------
   Number, title, and state on the right: nothing (new), a ProgressBar (partly watched) or "✓ Watched" (--watched, dimmed). */
.c-episode {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  width: 100%;
  max-width: 60rem;
  text-align: left;
  background: #181b22; /* @surface-1 */
  border: 0.15rem solid transparent; /* @border-width */
  border-radius: 0.5rem; /* @radius-lg */
  padding: 0.7rem 1rem; /* @space-0-7 @space-1 */
  margin-bottom: 0.45rem; /* @space-0-45 */
  font-size: 1.1rem; /* @size-md */
  cursor: pointer;
}
.c-episode__num { width: 3rem; color: #8a92a2; } /* @text-3 */
.c-episode__title { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.c-episode__state {
  width: 8rem;
  text-align: right;
  color: #8a92a2; /* @text-3 */
  font-size: 1rem; /* @size-sm */
}
.c-episode__state .c-progress { display: inline-block; width: 6rem; vertical-align: middle; }
.c-episode--watched .c-episode__title { color: #8a92a2; } /* @text-3 */
.c-episode:focus {
  border-color: #fff; /* @focus-ring */
  background: #2a303b; /* @surface-1-focus */
}

/* ---------- PlayerControls (js/ui/player.js) ----------
   Covers the player. Top left: the leave group (Exit, Show page) over a fade from the top. Bottom: title, episode
   line, seek bar (ProgressBar --seek), times, then the transport group (Prev, −10s, Play/Pause, +30s, Next) and
   the view group (CC, Fullscreen) spread across the width. .is-hidden fades it all out during playback. */
.c-player-controls {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  -webkit-transition: opacity 0.3s; /* @motion-slow */
  transition: opacity 0.3s; /* @motion-slow */
}
.c-player-controls.is-hidden { opacity: 0; }
.c-player-controls.is-hidden .c-player-controls__group { visibility: hidden; }
.c-player-controls__top {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 2rem 3rem 3rem; /* @space-2 @gutter @space-3 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.85), rgba(0,0,0,0)); /* @scrim @scrim-clear */
  background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); /* @scrim @scrim-clear */
}
.c-player-controls__bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem 3rem 2rem; /* @space-3 @gutter @space-2 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.85)); /* @scrim-clear @scrim */
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.85)); /* @scrim-clear @scrim */
}
.c-player-controls__title {
  font-size: 1.6rem; /* @size-2xl */
  font-weight: 600;
}
.c-player-controls__episode {
  font-size: 1.1rem; /* @size-md */
  color: #c9ced8; /* @text-2 */
  margin: 0.2rem 0 0.9rem; /* @space-0-2 @space-0-9 */
}
.c-player-controls .c-progress { margin-top: 0.3rem; } /* @space-0-3 */
.c-player-controls__times {
  margin-top: 0.5rem; /* @space-0-5 */
  font-size: 1rem; /* @size-sm */
  color: #c9ced8; /* @text-2 */
}
.c-player-controls__time--duration { float: right; }
.c-player-controls__groups {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-top: 1rem; /* @space-1 */
}
/* Each group is a line of buttons; round IconButtons of different sizes line up along their labels. */
.c-player-controls__group {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end;
}
.c-player-controls__group .c-button, .c-player-controls__group .c-icon-button { margin-right: 0.8rem; } /* @space-0-8 */
.c-player-controls__group .c-button:last-child, .c-player-controls__group .c-icon-button:last-child { margin-right: 0; }

/* ---------- PlayerMessage and UpNext (js/ui/player.js) ----------
   Centered over the video: Loading / Buffering / errors / "Are you still watching?" / end of show, and the
   "Up next in 10s" countdown, each with large buttons. */
.c-player-message, .c-up-next {
  position: absolute; left: 0; right: 0; top: 45%;
  text-align: center;
  font-size: 1.6rem; /* @size-2xl */
  color: #fff; /* @text-bright */
  text-shadow: 0 0.1rem 0.4rem #000; /* @shadow-text */
  padding: 0 3rem; /* @gutter */
}
.c-player-message .c-button, .c-up-next .c-button { margin-top: 1.2rem; margin-right: 0.8rem; text-shadow: none; } /* @space-1-2 @space-0-8 */
.c-up-next__heading {
  font-size: 1.2rem; /* @size-lg */
  color: #c9ced8; /* @text-2 */
}