/* Autoplay next on the watch page (SPEC 42): the Autoplay switch in the control row and the Up next card over the player.
   The player box is black in both themes, so the card is light text on a dark scrim (like playback.css's Listen panel,
   which it covers too); the switch keeps the site's button style and tokens. */

/* The switch: a small track with a knob, "Autoplay" next to it; pressed = on (the words say it, not the colour alone) */
.autoplay-toggle { gap: 9px; padding: 0 14px 0 12px; }
.autoplay-switch {
  position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px;
  background: var(--line); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
  transition: background-color 0.15s;
}
.autoplay-knob {
  position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-2); transition: transform 0.15s, background-color 0.15s;
}
.autoplay-toggle[aria-pressed="true"] .autoplay-switch { background: var(--accent); box-shadow: none; }
.autoplay-toggle[aria-pressed="true"] .autoplay-knob { transform: translateX(12px); background: #fff; }
/* No slide until autoplay.js has applied this device's choice (.is-synced): signed out the page always comes "on" */
.autoplay-toggle:not(.is-synced) .autoplay-switch, .autoplay-toggle:not(.is-synced) .autoplay-knob { transition: none; }
/* Phones: the switch alone (the button is still named "Autoplay"), like the row's other buttons show only their icon, and
   without the pill around it: it fits in the space the first row of buttons leaves (after Save), so the row doesn't
   wrap onto another line at the common widths (375-414 px); the tap area stays 32 x 38 px */
@media (max-width: 720px) { .autoplay-toggle { padding: 0; background: transparent; } }
@media (forced-colors: active) {
  .autoplay-switch { border: 1px solid ButtonText; background: Canvas; }
  .autoplay-knob { background: ButtonText; }
  .autoplay-toggle[aria-pressed="true"] .autoplay-switch { background: Highlight; }
  .autoplay-toggle[aria-pressed="true"] .autoplay-knob { background: HighlightText; }
}

/* The card covers the player, and the Listen panel (z-index 3) while listening */
.upnext-card {
  position: absolute; inset: 0; z-index: 4; overflow: hidden;
  display: grid; place-items: center; padding: 16px;
  background: #0b0b0d; color: #fff;
}
.upnext-card[hidden] { display: none; }
/* the next video's picture, blurred behind the card (like the Listen panel's artwork); dark enough that the 78 % white
   label and creator and the Cancel button stay above 4.5:1 even over a white picture (255 x 0.3 = a grey of 77) */
.upnext-art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: blur(18px) brightness(0.3); transform: scale(1.12);
}
.upnext-art[hidden] { display: none; }
.upnext-inner { position: relative; display: grid; gap: 12px; width: min(560px, 100%); }
.upnext-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.upnext-count { position: relative; flex: none; width: 40px; height: 40px; }
.upnext-count[hidden] { display: none; }
.upnext-ring { display: block; transform: rotate(-90deg); }
.upnext-ring circle { fill: none; stroke-width: 3; }
.upnext-ring-track { stroke: rgba(255, 255, 255, 0.22); }
.upnext-ring-fill { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.upnext-count-n { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.upnext-heading { display: grid; gap: 1px; min-width: 0; }
.upnext-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.upnext-when { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.upnext-note {
  margin-left: auto; flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.upnext-main { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: center; }
.upnext-main[hidden] { display: none; }
.upnext-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000;
}
.upnext-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.upnext-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, hsl(var(--hue, 0) 45% 28%), hsl(calc(var(--hue, 0) + 40) 50% 16%));
}
.upnext-fallback[hidden] { display: none; }
.upnext-text { display: grid; gap: 4px; min-width: 0; }
.upnext-title {
  font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.upnext-creator { font-size: 13px; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upnext-message { font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.upnext-message[hidden] { display: none; }
.upnext-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.upnext-actions .btn { height: 36px; }
.upnext-actions .btn[hidden] { display: none; }
.upnext-cancel, .upnext-link { background: rgba(255, 255, 255, 0.14); color: #fff; }
.upnext-cancel:hover, .upnext-link:hover { background: rgba(255, 255, 255, 0.24); }
.upnext-card .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Phones: the player is about 180 px tall at 320 px wide, so the card is one tight column */
@media (max-width: 600px) {
  .upnext-card { padding: 10px 12px; }
  .upnext-inner { gap: 8px; }
  .upnext-count, .upnext-ring { width: 32px; height: 32px; }
  .upnext-count-n { font-size: 13px; }
  .upnext-main { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .upnext-title { font-size: 14px; -webkit-line-clamp: 1; }
  .upnext-creator { font-size: 12px; }
  .upnext-when { font-size: 13px; }
  .upnext-message { font-size: 14px; }
  .upnext-actions { gap: 8px; }
  .upnext-actions .btn { height: 32px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  .upnext-main { grid-template-columns: minmax(0, 1fr); }
  .upnext-thumb { display: none; }
  .upnext-label { font-size: 11px; }
  .upnext-note { padding: 2px 8px; font-size: 11px; }
}
@media (forced-colors: active) {
  .upnext-card { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .upnext-art { display: none; }
  .upnext-ring-fill { stroke: Highlight; }
}