/* Saved videos landing pages. Card base comes from the Brailie blog grid
   (.box.box-border), matching the Constellation landing cards. */
.sv-gallery { padding-top: 1rem; }
.sv-gallery__lead { font-size: 1.1rem; line-height: 1.7; max-width: 46rem; opacity: .85; }

/* Filters: a label column and an options column, so wrapped options line up
   under "All". Options are plain text (no pills): the active one is bold and
   underlined; counts are muted. Long tag lists fold behind "More tags". */
.sv-filters { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 0; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.sv-filters__group { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1rem; align-items: baseline; }
.sv-filters__label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; padding-top: .15rem; }
.sv-filters__options { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.sv-chip {
  font: inherit; font-size: .9rem; line-height: 1.6; padding: 0; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: inherit; opacity: .75;
}
.sv-chip:hover { opacity: 1; border-bottom-color: rgba(0, 0, 0, .25); }
.sv-chip.is-active { opacity: 1; font-weight: 600; border-bottom-color: currentColor; }
.sv-chip__n { font-size: .72rem; opacity: .55; margin-left: .2rem; font-variant-numeric: tabular-nums; font-weight: 400; }
.sv-chip[hidden] { display: none; }
.sv-chip--more { opacity: .6; font-style: italic; }
.sv-filters__count { margin: .2rem 0 0; font-size: .85rem; opacity: .65; }
@media (max-width: 575px) { .sv-filters__group { grid-template-columns: 1fr; } }

.sv-grid__item[hidden] { display: none !important; }
.sv-card { height: 100%; display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
/* Every card is a 9:16 frame; posters and inline players match it, so
   starting playback never resizes the card. */
.sv-card__media {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; background: #111; overflow: hidden;
  padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.sv-card__media:focus-visible { outline: 3px solid #151515; outline-offset: -3px; }
.sv-card__media:hover .sv-card__play { background: rgba(0, 0, 0, .75); transform: translate(-50%, -50%) scale(1.06); }
.sv-card__play { transition: transform .15s ease, background .15s ease; }
/* Playing inline: the card takes the video's own shape. */
.sv-card__media--playing { aspect-ratio: 9 / 16; cursor: default; }
/* Landscape cards keep the same 9:16 frame as vertical ones (black bars above
   and below), so every card in the grid is the same height and starting
   playback never resizes it. Wide view switches landscape to 16:9. */
.sv-card__media--landscape { background: #000; }
/* Two classes so this beats the general ".sv-card__media img" (cover) rule. */
.sv-card__media.sv-card__media--landscape img { object-fit: contain; }
.sv-card__media--playing .sv-mc { position: absolute; inset: 0; }
/* Brailie hides native controls on every <video>; restore them in cards. */
.sv-card video::-webkit-media-controls { display: flex !important; }
.sv-card video::-webkit-media-controls-enclosure { display: flex !important; }
.sv-card__body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem; }
.sv-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.sv-card:hover .sv-card__media img { transform: scale(1.03); }
.sv-card__play {
  position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.sv-card__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent #fff;
}
.sv-card__duration {
  position: absolute; right: .5rem; bottom: .5rem; padding: .15rem .45rem; border-radius: 4px;
  background: rgba(0, 0, 0, .75); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums;
}
.sv-card .meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.sv-card .meta span::after, .sv-card .meta span::before { content: none !important; display: none !important; }
.sv-card .meta .category { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.sv-card__status { white-space: nowrap; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: .05rem .4rem; border: 1px solid currentColor; border-radius: 3px; opacity: .8; }
.sv-card__status--tried { opacity: .5; }
.sv-card .post-title { font-size: 1.05rem; line-height: 1.35; margin: .4rem 0 .2rem; }
.sv-card__by { font-size: .85rem; opacity: .7; margin-bottom: .6rem; }
.sv-card .post-content { flex: 1; display: flex; flex-direction: column; padding: 0; }
.sv-card .post-content p { font-size: .9rem; }
.sv-card__tags { margin-bottom: .6rem; }
/* Card tags: quiet #words that filter the grid when clicked. */
.sv-card .sv-tag { font: inherit; font-size: .78rem; padding: 0; margin: 0 .6rem .2rem 0; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; }
.sv-card .sv-tag:hover { opacity: 1; text-decoration: underline; }
.sv-gallery__empty { opacity: .7; }

/* Collection links: the second breadcrumb level as tabs. */
/* Collection links: the second breadcrumb level as an underlined tab row. */
.sv-collections { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.sv-collection {
  display: inline-flex; align-items: baseline; gap: .3rem; padding: .5rem 0; margin-bottom: -1px; font-size: .95rem;
  border-bottom: 2px solid transparent; color: inherit; text-decoration: none; opacity: .75;
}
.sv-collection:hover { opacity: 1; text-decoration: none; border-bottom-color: rgba(0, 0, 0, .25); }
.sv-collection.is-active { opacity: 1; font-weight: 600; border-bottom-color: currentColor; }
.sv-collection.is-empty { opacity: .4; }
.sv-collection__count { font-size: .72rem; opacity: .6; font-weight: 400; font-variant-numeric: tabular-nums; }
.sv-gallery__none { opacity: .7; }

/* Wide view: a playing card widens to the full content width in place
   (like YouTube's theater mode). Landscape fills the width at 16:9; vertical
   is capped at 80% of the screen height with the details beside it. */
.sv-grid__item.is-wide { flex: 0 0 100%; max-width: 100%; }
.sv-grid__item.is-wide .sv-card--landscape .sv-card__media--playing { aspect-ratio: 16 / 9; }
.sv-grid__item.is-wide .sv-card--landscape .sv-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.sv-grid__item.is-wide .sv-card--landscape .post-title { font-size: 1.35rem; }
.sv-grid__item.is-wide .sv-card--vertical { display: grid; grid-template-columns: auto 1fr; align-items: start; }
.sv-grid__item.is-wide .sv-card--vertical .sv-card__media--playing { height: 80vh; width: calc(80vh * 9 / 16); max-width: 60vw; aspect-ratio: auto; }
.sv-grid__item.is-wide .sv-card--vertical .sv-card__body { padding: 1.5rem 2rem; }
.sv-grid__item.is-wide .sv-card--vertical .post-title { font-size: 1.5rem; }
.sv-grid__item.is-wide .sv-card .post-content p { font-size: 1rem; }
@media (max-width: 575px) {
  .sv-mc__wide { display: none; }
}

/* Public embeds (platform player): a 16:9 frame centred in the card's 9:16
   box, filling it in wide view. The wide button floats in the corner because
   the platform's controls can't take extra buttons. */
.sv-card__media--embed { position: relative; }
.sv-card__media--embed iframe { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 16 / 9; height: auto; transform: translateY(-50%); border: 0; }
.sv-card__media--embed.sv-card__media--vertical iframe { top: 0; height: 100%; aspect-ratio: auto; transform: none; }
.sv-grid__item.is-wide .sv-card__media--embed iframe { top: 0; height: 100%; transform: none; }
.sv-embed__wide { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.sv-members-note { padding: .7rem 1rem; border-left: 3px solid currentColor; background: rgba(0, 0, 0, .03); }

/* Series row on the main gallery: two large cards side by side, each led by
   a big poster of the latest episode with three smaller ones beneath. */
.sv-series__title { font-size: 1.35rem; font-weight: 600; margin-bottom: 1rem; }
/* Exactly two across (half the content width each); stacked on phones. */
.sv-series__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 767px) { .sv-series__row { grid-template-columns: 1fr; } }
.sv-series__card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sv-series__card:hover { border-color: currentColor; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); text-decoration: none; }
.sv-series__posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: .8rem; }
.sv-series__posters img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.sv-series__posters img:first-child { grid-column: 1 / -1; border-radius: 6px; }
.sv-series__name { font-weight: 600; font-size: 1.4rem; line-height: 1.25; }
.sv-series__meta { font-size: .9rem; opacity: .65; }
.sv-gallery .pager { margin-top: 1rem; }