/**
 * Spotlight videos.
 *
 * The YouTube shelf on the front page and the player it opens into.
 *
 * Two shapes, one system. The rail is a horizontal shelf of 9:16 cards that
 * shows six or seven at a time on a desktop and peeks the next one, because a
 * card you cannot tell is there is a card nobody scrolls to. The player is the
 * other shape entirely: a fixed, dark, full-screen stage where the video is the
 * page and everything else is a control on top of it.
 *
 * Written against the custom properties in theme-system.css so both colour
 * schemes come for free. The one exception is the player, which is deliberately
 * dark in both — a lightbox with a white surround is not a lightbox, it is a
 * document with a hole in it.
 *
 *   1. The shelf
 *   2. A card
 *   3. The player
 *   4. Small screens
 */

/* 1. The shelf =========================================================== */

.spotlight {
  --spot-gap: 14px;
  /* Columns visible at each width. The rail is a grid whose columns are a
     fraction of its own width, so "7" means exactly seven fit and the eighth
     is the thing that invites a scroll. */
  --spot-cols: 6;

  /* Room above as well as below. The shelf is a block of somebody else's
     video dropped into a page of text, and it needs to read as its own thing
     rather than as a continuation of whatever it was inserted after. */
  padding: 30px 0 34px;
}

.spotlight__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}

.spotlight__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.spotlight__title svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
  flex: none;
}

.spotlight__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.spotlight__all {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

.spotlight__all:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

.spotlight__hide {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.spotlight__hide:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.spotlight__hide svg {
  width: 15px;
  height: 15px;
}

/* The keyword row. Same vocabulary as the topic chips, one per search. */
.spotlight__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 12px;
  scrollbar-width: none;
}

.spotlight__tabs::-webkit-scrollbar {
  display: none;
}

.spotlight__tab {
  flex: none;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}

.spotlight__tab:hover {
  border-color: var(--line-strong);
  color: var(--text-strong);
}

.spotlight__tab[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.spotlight__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--spot-cols) - 1) * var(--spot-gap)) / var(--spot-cols)
  );
  gap: var(--spot-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  /* Room for the shadow and the focus ring, which a scroll container clips. */
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  scrollbar-width: thin;
}

/* `hidden` has to be re-stated: the `.spotlight__rail` rule above sets
   `display: grid`, which outranks the browser's own `[hidden] { display:
   none }`. Every pane but the first ships hidden, so the shelf degrades to
   one working row when this file's script never runs. */
.spotlight__rail[hidden] {
  display: none;
}

.spotlight__empty {
  padding: 26px 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* 2. A card ============================================================== */

.short {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.short__frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.short__frame:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.short__frame:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.short__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}

/* The inline preview. An iframe the script drops in when the card scrolls
   into view; absent (and therefore costing nothing) until then. */
.short__live {
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.short[data-live="1"] .short__live {
  opacity: 1;
}

/* The scrim: the title sits on the picture, so it needs something to sit on. */
.short__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(
    to top,
    oklch(0.12 0.01 265 / 0.88) 0%,
    oklch(0.12 0.01 265 / 0.55) 42%,
    transparent 100%
  );
  pointer-events: none;
}

.short__badge {
  position: absolute;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--radius-xs);
  background: oklch(0.12 0.01 265 / 0.72);
  color: oklch(1 0 0);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}

.short__badge svg {
  width: 12px;
  height: 12px;
}

.short__thumb-mark {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: oklch(0.12 0.01 265 / 0.62);
  color: oklch(1 0 0);
}

.short__thumb-mark svg {
  width: 14px;
  height: 14px;
}

.short__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  pointer-events: none;
}

.short__channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 8px 2px 2px;
  border-radius: var(--radius-pill);
  background: oklch(0.12 0.01 265 / 0.66);
  color: oklch(1 0 0);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.short__channel-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.92);
  color: oklch(0.2 0.02 265);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.short__channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.short__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.32;
  color: oklch(1 0 0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px oklch(0.1 0 0 / 0.5);
}

/* The play affordance, drawn only when nothing is previewing: once the video
   is moving, a play button over it is a lie. */
.short__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  pointer-events: none;
}

.short__play span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: oklch(0.12 0.01 265 / 0.55);
  color: oklch(1 0 0);
  backdrop-filter: blur(4px);
}

.short__play svg {
  width: 20px;
  height: 20px;
}

.short__frame:hover .short__play,
.short__frame:focus-visible .short__play {
  opacity: 1;
}

.short[data-live="1"] .short__play {
  opacity: 0;
}

/* 3. The player ========================================================== */

.spotlight-player {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  padding: 24px;
  background: oklch(0.11 0.012 265 / 0.95);
  backdrop-filter: blur(6px);
}

.spotlight-player[hidden] {
  display: none;
}

.spotlight-player__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 100%;
}

.spotlight-player__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /*
   * `calc(86vh * 9 / 16)` is the widest a 9:16 box can be and still fit the
   * height budget. Capping the height instead would leave the frame wider than
   * it is tall relative to 9:16, and YouTube would letterbox the vertical
   * video inside its own frame — black bars on a video that has none. Driving
   * the width from the height is what keeps the picture edge to edge.
   */
  width: min(92vw, 420px, calc(86vh * 9 / 16));
}

.spotlight-player__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: oklch(0.08 0.01 265);
  box-shadow: var(--shadow-lg);
}

.spotlight-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * No caption block. There used to be one here — channel, title, "watch on
 * YouTube" — and it is gone on purpose, so the video gets the full height of
 * the stage. The rules for it were deleted with it rather than left orphaned;
 * the title lives on as the iframe's `title` and as the dialog's label.
 */

/* Up and down, the two directions every short-video app has trained readers
   to expect. Up is the previous video, down is the next. */
.spotlight-player__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spotlight-player__skip {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.14);
  color: oklch(1 0 0);
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}

.spotlight-player__skip:hover {
  background: oklch(1 0 0 / 0.26);
}

.spotlight-player__skip:active {
  transform: scale(0.94);
}

.spotlight-player__skip:disabled {
  opacity: 0.3;
  cursor: default;
}

.spotlight-player__skip svg {
  width: 26px;
  height: 26px;
}

.spotlight-player__close {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.16);
  color: oklch(1 0 0);
  cursor: pointer;
  transition: background 0.16s var(--ease);
}

.spotlight-player__close:hover {
  background: oklch(1 0 0 / 0.3);
}

.spotlight-player__close svg {
  width: 18px;
  height: 18px;
}

.spotlight-player__count {
  margin: 0;
  align-self: center;
  font-size: 12px;
  color: oklch(0.7 0.01 265);
  font-variant-numeric: tabular-nums;
}

/* The page behind the player must not scroll while it is open. */
body.spotlight-open {
  overflow: hidden;
}

/* /videos: the same cards, one row per keyword, wrapping instead of
   scrolling because the whole point of the page is to be browsed. The base
   rule already carries the space above the first row; between rows the bottom
   padding does most of the work, so the top only adds a little. */
.videos-page .spotlight + .spotlight {
  padding-top: 20px;
}

.videos-page .spotlight__rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-columns: auto;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* 4. Small screens ====================================================== */

@media (min-width: 700px) {
  .spotlight {
    --spot-cols: 3;
  }
}

@media (min-width: 900px) {
  .spotlight {
    --spot-cols: 4;
  }
}

@media (min-width: 1100px) {
  .spotlight {
    --spot-cols: 5;
  }
}

@media (min-width: 1400px) {
  .spotlight {
    --spot-cols: 6;
  }
}

@media (min-width: 1680px) {
  .spotlight {
    --spot-cols: 7;
  }
}

@media (max-width: 699px) {
  .spotlight {
    /* Two and a bit: the half card is the scroll invitation. */
    --spot-cols: 2.15;
    --spot-gap: 10px;
  }

  .short__title {
    font-size: 12.5px;
  }

  /* The player takes the screen, which is the only thing that makes a
     vertical video read as a short rather than as a widget. */
  .spotlight-player {
    padding: 0;
    place-items: stretch;
  }

  .spotlight-player__panel {
    gap: 0;
    align-items: stretch;
    height: 100%;
  }

  .spotlight-player__stage {
    width: 100%;
    max-width: none;
    height: 100%;
    gap: 0;
    justify-content: center;
  }

  .spotlight-player__frame {
    max-height: none;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    flex: 1 1 auto;
  }

  /* Centred on the right edge, because the foot of the picture is no longer
     taken by a caption. Up and down read as "previous" and "next" wherever
     they sit, and the middle of the screen is where a thumb already is. */
  .spotlight-player__nav {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .spotlight-player__count {
    position: absolute;
    top: 14px;
    left: 16px;
  }

  .spotlight-player__skip {
    width: 46px;
    height: 46px;
    background: oklch(1 0 0 / 0.18);
  }

  .spotlight-player__close {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .short__frame,
  .short__frame:hover {
    transform: none;
  }

  .spotlight__rail {
    scroll-behavior: auto;
  }
}