/* The YouTube playlist catalogue - 播放列表, and the same page filtered to one
   channel.

   1541 playlists that used to be a four-column table running the full width of
   the window. 频道 repeated one channel name down every row of it, 视频总数 is a
   single digit, and 学习计划 held the same two characters in all 1541 - so the
   title, the only value anybody reads, was pinned to the far left of a very wide
   screen with three near-empty columns beside it. These are cards in one column:
   the title first at full width, the facts under it in one muted line, and the
   plan control at the end of the card where it stops competing with the title. */
.yt-page {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 14px;
  text-align: left;
}

/* The catalogue only. 900px is the right measure for a column of text rows, but
   this page is a grid of pictures: five episodes and a "the rest" tile at their
   natural 170px need about 1100, and squeezed into 900 each one is 130 - small
   enough that the thumbnail stops doing the job it is there for. */
.yt-page--wide {
  max-width: 1140px;
}

.yt-head {
  border-bottom: 1px solid #ddddc8;
  padding-bottom: 10px;
}

.yt-head__row {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.yt-head__title {
  color: #4e0d0d;
  font-size: 1.3em;
}

.yt-head__back {
  flex: none;
  font-size: 0.9em;
}

/* Counts on one muted line under the title, where they describe the column they
   sit above rather than hanging off its right edge. */
.yt-head__meta {
  color: #8a7a6a;
  font-size: 0.85em;
  margin-top: 4px;
}

.yt-head__meta strong {
  color: #4a7c59;
  font-weight: 600;
}

.yt-head__sep {
  opacity: 0.5;
  padding: 0 6px;
}

/* The video search page has no title block of its own - the search box is the
   title - so its fact line needs the breathing room the block would have given
   it. */
.yt-head__meta--loose {
  border-bottom: 1px solid #ddddc8;
  margin: 4px 0 2px;
  padding-bottom: 8px;
}

/* The filter bar and the sort chips keep the shared `.playlist-filters` and
   `.dl-facets` rules from style.css. Only the alignment changes: those rules
   centre their row for a full-width page, and this one is a 900px column with
   everything else ranged left. */
.yt-page .filter-bar,
.yt-page .playlist-filters,
.yt-page .dl-facets {
  justify-content: flex-start;
  margin: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.yt-page .dl-facets__row {
  justify-content: flex-start;
}

.yt-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A card lifts a hair on hover and shows a coloured spine, so the row under the
   pointer is unmistakable in a list where a whole screen of titles can begin
   with the same lecture series. */
.yt-card {
  align-items: flex-start;
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-left: 3px solid #e4e2cf;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  padding: 9px 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.yt-card:hover {
  border-color: #b9b9a0;
  border-left-color: #4a7c59;
  box-shadow: 0 2px 8px rgba(78, 13, 13, 0.07);
  transform: translateY(-1px);
}

/* min-width: 0 or a long unbroken title stretches the flex row and pushes the
   plan button off the card. */
.yt-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.yt-card__title {
  color: #4e0d0d;
  display: block;
  font-size: 1.05em;
  line-height: 1.5;
  text-decoration: none;
}

.yt-card__title:hover {
  text-decoration: underline;
}

.yt-card__title mark {
  background-color: #f6e7a8;
  color: inherit;
  padding: 0 1px;
}

/* One line of facts under the title, wrapping rather than widening. */
.yt-card__meta {
  align-items: center;
  color: #8a8a78;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82em;
  gap: 4px 12px;
  padding-top: 5px;
}

.yt-card__channel {
  color: #4a7c59;
  flex: none;
  text-decoration: none;
}

.yt-card__channel:hover {
  text-decoration: underline;
}

.yt-card__count {
  flex: none;
}

/* Progress and its numbers are one fact, so they travel together when the line
   wraps. */
.yt-card__progress {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: 0;
}

.yt-card__progress .progress-mini {
  width: 70px;
}

.yt-card__progress .progress-mini__label {
  font-size: 1em;
}

/* Straight into the episode the reader stopped at, instead of the list page and
   a hunt for the first unticked row. */
.yt-card__resume {
  color: #4a7c59;
  flex: none;
  text-decoration: none;
  white-space: nowrap;
}

.yt-card__resume:hover {
  text-decoration: underline;
}

.yt-card__done {
  color: #76b476;
  flex: none;
}

/* The playlist id is a coordinate an admin checks, never something anybody
   scans, so it sits at the far end of the line in the quietest tone on the
   card. */
.yt-card__ref {
  color: #b0b09c;
  margin-left: auto;
  white-space: nowrap;
}

/* A playlist that has gone dark stays visible to admins and to nobody else. The
   table gave it no mark at all, so it looked like every other row until you
   opened it and found nothing there. */
.yt-card__gone {
  background-color: #f6e3e0;
  border-radius: 9px;
  color: #9a4a3a;
  flex: none;
  padding: 1px 8px;
}

.yt-card--gone {
  border-left-color: #d9a99f;
}

/* A channel blurb, held to two lines. Left to run, a talkative channel's 500
   characters made its card four times the height of its neighbours' and the list
   stopped being scannable. */
.yt-card__desc {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #6f6f5e;
  display: -webkit-box;
  font-size: 0.88em;
  line-height: 1.55;
  margin: 4px 0 0;
  overflow: hidden;
}

/* Admin controls, one quiet line at the foot of the card. They used to be three
   more table columns, widening the page for every reader who cannot use
   them. */
.yt-card__admin {
  border-top: 1px dashed #e8e6d6;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82em;
  gap: 4px 14px;
  margin-top: 7px;
  padding-top: 6px;
}

.yt-card__flag {
  color: #a0a08c;
}

/* The plan toggle is an outline until the playlist is in the plan, then it
   fills: the state is readable from across the list without reading the label. */
.yt-plan {
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid #cfcfb8;
  border-radius: 12px;
  color: #4a7c59;
  cursor: pointer;
  flex: none;
  font-size: 0.85em;
  line-height: 1.5;
  padding: 2px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.yt-plan:hover {
  border-color: #4a7c59;
}

.yt-plan--on {
  background-color: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}

.yt-plan[aria-busy="true"] {
  opacity: 0.6;
}

/* 我的播放列表: the box you paste a YouTube address into. It was a bare centred
   input with no label, so what belonged in it - an id, a link, either - was
   something a reader found out by getting it wrong. */
.yt-add {
  background-color: #fdfdf8;
  border: 1px solid #dcd8c4;
  border-radius: 8px;
  margin: 14px 0;
  padding: 12px 14px;
}

.yt-add__label {
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  padding-bottom: 6px;
}

.yt-add__row {
  display: flex;
  gap: 10px;
}

.yt-add__input {
  border: 1px solid #d6d1b8;
  border-radius: 6px;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 0.95em;
  min-width: 0;
  padding: 6px 10px;
}

.yt-add__go {
  flex: none;
  white-space: nowrap;
}

.yt-add__hint {
  color: #8a7a6a;
  font-size: 0.82em;
  margin: 8px 0 0;
}

/* A playlist whose videos have not come down yet. This is what a reader sees in
   the seconds after adding one, and the table said nothing about it: a row with
   a zero in it and no explanation. */
.yt-card__pending {
  background-color: #f7f1dd;
  border-radius: 9px;
  color: #8a7433;
  flex: none;
  padding: 1px 8px;
}

/* Removing is a form now, not a link, so the control at the end of the card is a
   button and has to be talked back down to looking like the rest of the line. */
.yt-card__acts {
  flex: none;
}

.yt-card__drop {
  background: none;
  border: none;
  color: #a33;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  padding: 2px 4px;
}

.yt-card__drop:hover {
  text-decoration: underline;
}

.yt-empty {
  background-color: #fff;
  border: 1px dashed #d0d0ba;
  border-radius: 10px;
  list-style: none;
  padding: 26px 18px;
  text-align: center;
}

.yt-empty__lead {
  color: #6f6f5e;
  font-size: 1.02em;
  margin: 0;
}

.yt-empty__hint {
  color: #9a9a88;
  font-size: 0.85em;
  margin: 6px 0 12px;
}

@media screen and (max-width: 600px) {
  /* The card stacks: a plan button beside a wrapped three-line title left the
     title about half the width it needs. */
  .yt-card {
    flex-direction: column;
    gap: 6px;
  }

  .yt-card__body {
    width: 100%;
  }

  .yt-card__ref {
    margin-left: 0;
  }

  .yt-add__row {
    flex-wrap: wrap;
  }

  .yt-add__input {
    flex: 1 1 100%;
  }
}

/* The first episodes, on the card as pictures. They were a fold-out list, which
   still charged a click before the reader could see a single video - the same
   toll the middle page charged and the reason it was worth skipping. A row of
   thumbnails answers "what is in this course" without one, and a wall of
   near-identical titles from one lecture series never did.

   The row scrolls rather than wraps: a card is one course, and a course that
   wrapped onto three lines of tiles would push the next course off the screen. */
.yt-shelf {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 8px 0 0;
  overflow-x: auto;
  padding: 0 0 4px;
  scroll-snap-type: x proximity;
  /* A thin, quiet scrollbar: on a card this is furniture, not a control. */
  scrollbar-width: thin;
}

/* The tiles share the row rather than running off the end of it: five episodes
   and a "the rest" tile at a fixed 150 came to more than the card is wide, so the
   one tile that says how much more there is was the one cut in half. */
.yt-shelf__item {
  flex: 1 1 0;
  max-width: 170px;
  min-width: 0;
  scroll-snap-align: start;
}

.yt-shelf__link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.yt-shelf__thumb {
  background-color: #eceadc;
  border: 1px solid #e4e2cf;
  border-radius: 6px;
  display: block;
  overflow: hidden;
  position: relative;
}

.yt-shelf__thumb img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.yt-shelf__thumb--blank {
  aspect-ratio: 16 / 9;
}

.yt-shelf__thumb--blank::after {
  align-items: center;
  color: #b0b09c;
  content: "▹";
  display: flex;
  font-size: 1.6em;
  inset: 0;
  justify-content: center;
  position: absolute;
}

/* The play badge is the whole point of the tile, so it is on it from the start
   and only brightens under the pointer - a control that appears on hover does
   not exist on a phone. */
.yt-shelf__play {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 0.7em;
  height: 26px;
  justify-content: center;
  left: 50%;
  padding-left: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
  width: 26px;
}

.yt-shelf__link:hover .yt-shelf__play {
  background-color: rgba(78, 13, 13, 0.85);
  transform: translate(-50%, -50%) scale(1.12);
}

.yt-shelf__order {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  color: #fff;
  font-size: 0.72em;
  left: 4px;
  line-height: 1.5;
  padding: 0 5px;
  position: absolute;
  top: 4px;
}

.yt-shelf__duration {
  background-color: rgba(0, 0, 0, 0.72);
  border-radius: 3px;
  bottom: 4px;
  color: #fff;
  font-size: 0.72em;
  line-height: 1.5;
  padding: 0 4px;
  position: absolute;
  right: 4px;
}

.yt-shelf__tick {
  font-size: 0.75em;
  position: absolute;
  right: 4px;
  top: 4px;
}

/* Two lines, because the part that distinguishes one lecture from the next is at
   the end of a title that starts with the series name. */
.yt-shelf__title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #5a5a4a;
  display: -webkit-box;
  font-size: 0.78em;
  line-height: 1.45;
  overflow: hidden;
  padding-top: 4px;
}

.yt-shelf__link:hover .yt-shelf__title {
  color: #4e0d0d;
}

.yt-shelf__title mark {
  background-color: #f6e7a8;
  color: inherit;
  padding: 0 1px;
}

/* Watched tiles step back, the same way finished episodes do on the list page. */
.yt-shelf__item--watched .yt-shelf__thumb img {
  opacity: 0.62;
}

.yt-shelf__item--watched .yt-shelf__title {
  color: #9a9a88;
}

/* The last tile: the rest of the course, in the place the eye reaches when it
   runs out of episodes. */
.yt-shelf__more {
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: #f4f3e8;
  border: 1px dashed #d0d0ba;
  border-radius: 6px;
  color: #4a7c59;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}

.yt-shelf__more:hover {
  background-color: #eceadc;
  border-color: #4a7c59;
}

.yt-shelf__more-count {
  font-size: 1.05em;
}

.yt-shelf__more-label {
  font-size: 0.75em;
}

.yt-head__actions {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: 10px;
}

.yt-resume {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 2px;
}

.yt-resume__btn {
  font-size: 0.9em;
}

.yt-resume__done {
  color: #76b476;
}

.yt-videos {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
}

.yt-video {
  /* Centred, not top-aligned: a one-line title against a 16:9 thumbnail left a
     third of the card empty under the text. */
  align-items: center;
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-left: 3px solid #e4e2cf;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  padding: 8px 12px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.yt-video:hover {
  border-color: #b9b9a0;
  border-left-color: #4a7c59;
  box-shadow: 0 2px 8px rgba(78, 13, 13, 0.07);
  transform: translateY(-1px);
}

/* The thumbnail is a second copy of the title's link, so it is hidden from
   assistive tech and taken out of the tab order rather than read out twice. */
.yt-video__thumb {
  background-color: #eceadc;
  border-radius: 5px;
  display: block;
  flex: none;
  overflow: hidden;
  position: relative;
  /* 132 and not YouTube's own 160: at 160 an episode row is a hundred pixels
     tall and a 66-lecture course runs six screens a page. */
  width: 132px;
}

.yt-video__thumb img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* A video pulled from YouTube leaves no image behind. The card keeps its shape
   instead of collapsing the row and pulling every title left of the one above. */
.yt-video__thumb--blank {
  aspect-ratio: 16 / 9;
}

.yt-video__thumb--blank::after {
  align-items: center;
  color: #b0b09c;
  content: "▹";
  display: flex;
  font-size: 1.6em;
  inset: 0;
  justify-content: center;
  position: absolute;
}

/* On the thumbnail, where YouTube itself puts it - the duration column it
   replaces was three characters wide and repeated its heading down the page. */
.yt-video__duration {
  background-color: rgba(0, 0, 0, 0.72);
  border-radius: 3px;
  bottom: 4px;
  color: #fff;
  font-size: 0.72em;
  line-height: 1.4;
  padding: 0 4px;
  position: absolute;
  right: 4px;
}

.yt-video__body {
  flex: 1 1 auto;
  min-width: 0;
}

.yt-video__title {
  color: #4e0d0d;
  display: block;
  line-height: 1.5;
  text-decoration: none;
}

.yt-video__title:hover {
  text-decoration: underline;
}

.yt-video__title mark {
  background-color: #f6e7a8;
  color: inherit;
  padding: 0 1px;
}

/* Every title in a lecture series begins with the same words, so the number is
   what tells them apart and it goes first. */
.yt-video__order {
  color: #a5a593;
  display: inline-block;
  min-width: 1.8em;
}

.yt-video__meta {
  align-items: center;
  color: #8a8a78;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
  gap: 4px 10px;
  padding-top: 5px;
}

.yt-video__tick {
  color: #76b476;
  flex: none;
}

/* Finished episodes step back so the unwatched ones stand out. */
.yt-video--watched .yt-video__title {
  color: #8f8f80;
}

.yt-video--watched .yt-video__thumb img {
  opacity: 0.72;
}

.yt-video--gone {
  border-left-color: #d9a99f;
}

/* Where a video sits - its channel and its playlist. On the feed and the search
   page these are the two facts that place a lecture; they were two full table
   columns repeating the same course name down the screen. */
.yt-video__where {
  color: #4a7c59;
  text-decoration: none;
}

.yt-video__where:hover {
  text-decoration: underline;
}

.yt-video__date {
  margin-left: auto;
  white-space: nowrap;
}

/* Two right-ranged facts would split the free space between them; the date is
   the one that belongs at the end, so the admin's video id keeps its place in
   the line. */
.yt-video__meta .yt-card__ref {
  margin-left: 0;
}

/* An admin's delete, at the end of the row and quiet until it is pointed at: it
   is one link on a page of a hundred videos nobody else can even see. */
.yt-video__act {
  color: #c0bfae;
  flex: none;
  font-size: 0.9em;
}

.yt-video__act:hover {
  color: #9a4a3a;
}

@media screen and (max-width: 600px) {
  /* A 160px thumbnail beside a wrapped three-line title leaves the title about
     half the width it needs, so it shrinks rather than stacking - stacked, four
     episodes fill a phone screen. */
  .yt-video__thumb {
    width: 108px;
  }

  /* On a phone there is no room to share: six tiles across 390px would be forty
     pixels each, so they go back to a fixed width and the row scrolls. */
  .yt-shelf__item {
    flex: 0 0 124px;
  }
}