:root {
  color-scheme: dark;

  /* Colors */
  --page-background: #111317;
  --item-background: #191c22;
  --item-hover-background: #20242c;
  --input-background: #20242c;
  --primary-text: #f3f4f6;
  --secondary-text: #aeb5c0;
  --video-type-text: red;
  --link-text: #8dc7ff;
  --border-color: #343a46;
  --focus-color: #67b5ff;
  --focus-shadow-color: color-mix(in srgb, var(--focus-color) 25%, transparent);
  --filter-button-text: var(--secondary-text);
  --filter-button-active-background: var(--link-text);
  --filter-button-active-text: var(--page-background);

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --base-font-size: clamp(16px, 1vw, 18px);
  --title-font-size: calc(var(--base-font-size) * 1.125);
  --secondary-font-size: calc(var(--base-font-size) * 0.9);
  --video-type-font-size: calc(var(--base-font-size) * 0.8);
  --url-font-size: var(--secondary-font-size);
  --status-font-size: var(--secondary-font-size);
  --input-font-size: var(--base-font-size);
  --body-line-height: 1.45;
  --title-line-height: 1.3;

  /* Main sizing */
  --content-width-limit: 1000px;
  --page-margin-inline: clamp(16px, 1.5vw, 32px);
  --page-margin-block: clamp(16px, 2.5vh, 32px);
  --content-max-width: min(calc(100vw - (var(--page-margin-inline) * 2)), var(--content-width-limit));

  /* Poster sizing: adjust these first when tuning thumbnails */
  --poster-width: clamp(304px, 19vw, 336px);
  --poster-aspect-ratio: 16 / 9;

  /* Spacing system */
  --space-inline: clamp(16px, 1.3vw, 24px);
  --space-block: clamp(15px, 1.8vh, 20px);
  --space-small: calc(var(--space-inline) * 0.3);
  --space-large: calc(var(--space-inline) * 1.2);
  --filter-padding-inline: var(--space-inline);
  --filter-padding-block: var(--space-block);
  --item-padding-inline: var(--space-inline);
  --item-padding-block: var(--space-block);
  --grid-column-gap: var(--space-large);
  --metadata-gap: var(--space-small);
  --filter-control-gap: var(--space-large);
  --filter-margin-bottom: 0;

  /* Input sizing */
  --input-padding-inline: calc(var(--space-inline) * 0.8);
  --input-padding-block: calc(var(--space-block) * 0.7);
  --filter-button-padding-inline: calc(var(--space-inline) * 0.65);
  --filter-button-padding-block: var(--input-padding-block);

  /* Borders, focus, and motion */
  --border-thickness: 1px;
  --border-radius: clamp(6px, 0.45vw, 9px);
  --focus-width: 3px;
  --hover-transition-duration: 120ms;

  --episode-number-lighten: 6%;
  --image-height:
          calc(var(--poster-width) / (16 / 9));

  --episode-number-size:
          calc(var(--image-height) - (var(--space-block) * 2));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--primary-text);
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  line-height: var(--body-line-height);
}

.viewer {
  width: var(--content-max-width);
  margin: var(--page-margin-block) auto;
}

#logo {
  overflow: hidden;
  max-width: var(--content-max-width);
}
#logo img {
  display: block;
  width: auto;
  min-height: 60px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.filter {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--filter-control-gap);
  margin-bottom: var(--filter-margin-bottom);
  padding: var(--filter-padding-block) var(--filter-padding-inline);
  border-bottom: var(--border-thickness) solid var(--border-color);
  background: var(--page-background);
}

.filter input {
  width: 100%;
  padding: var(--input-padding-block) var(--input-padding-inline);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background: var(--input-background);
  color: var(--primary-text);
  font: inherit;
  font-size: var(--input-font-size);
}

.filter input:focus-visible {
  border-color: var(--focus-color);
  box-shadow: 0 0 0 var(--focus-width) var(--focus-shadow-color);
}

.filter-modes {
  display: flex;
  gap: var(--filter-control-gap);
}

.filter-modes button {
  padding: var(--filter-button-padding-block) var(--filter-button-padding-inline);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--filter-button-text);
  font: inherit;
  font-size: var(--input-font-size);
  cursor: pointer;
}

.filter-modes button:hover {
  border-color: var(--filter-button-text);
}

.filter-modes button[aria-pressed="true"] {
  border-color: var(--filter-button-active-background);
  background: var(--filter-button-active-background);
  color: var(--filter-button-active-text);
}

.filter-modes button:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(-1 * var(--focus-width));
}

.video-item {
  display: grid;
  grid-template-columns: var(--poster-width) minmax(0, 1fr);
  gap: var(--grid-column-gap);
  padding: var(--item-padding-block) var(--item-padding-inline);
  background: var(--item-background);
  cursor: pointer;
  transition: background-color var(--hover-transition-duration) ease;

  position: relative;
  overflow: hidden;
}

/* Giant background episode number */
.video-item[data-episode]::before {
  content: attr(data-episode);

  position: absolute;
  inset-block: var(--item-padding-block);
  inset-inline-end: var(--item-padding-inline);

  display: flex;
  align-items: center;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: var(--episode-number-size);
  line-height: 1;
  white-space: nowrap;

  color: color-mix(
          in srgb,
          var(--item-background),
          white var(--episode-number-lighten)
  );

  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Actual content always goes over the episode number */
.video-item > * {
  position: relative;
  z-index: 1;
}

.video-item:not([hidden]) ~ .video-item:not([hidden]) {
  border-top: var(--border-thickness) solid var(--border-color);
}

.video-item:hover {
  background: var(--item-hover-background);
}

.video-item:focus-visible {
  position: relative;
  z-index: 1;
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(-1 * var(--focus-width));
}

.video-item[hidden] {
  display: none;
}

lazy-image {
  display: block;
  width: 100%;
  aspect-ratio: var(--poster-aspect-ratio);
  overflow: hidden;
  /*border-radius: var(--border-radius);*/
  border-radius: 0;
  background: var(--input-background);
}

lazy-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-info {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  gap: var(--metadata-gap);
}

.video-title,
.video-duration,
.video-type,
.video-url,
.status-message {
  margin: 0;
}

.video-item-link {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.video-title {
  font-size: var(--title-font-size);
  line-height: var(--title-line-height);
}

.video-title::before {
  font-size: 70%;
  font-weight: normal;
  color: var(--video-type-text);
  outline: var(--border-thickness) solid var(--video-type-text);
  border-radius: var(--border-radius);
  height: fit-content;
  width: fit-content;
  padding: var(--space-small);
  display: inline-block;
  content: attr(data-type-label);
  margin-right: var(--space-small);
  margin-top: var(--border-thickness);
  float: right;
}

/*
.video-type {
  font-size: var(--video-type-font-size);
  color: var(--video-type-text);
  border: var(--border-thickness) solid var(--video-type-text);
  border-radius: var(--border-radius);
  height: fit-content;
  width: fit-content;
  padding: var(--space-small);
}
*/

.video-duration {
  color: var(--secondary-text);
  font-size: var(--secondary-font-size);
}

.video-url {
  grid-row: 4;
  overflow: hidden;
  color: var(--link-text);
  font-size: var(--url-font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-message {
  padding: var(--item-padding-block) var(--item-padding-inline);
  background: var(--item-background);
  color: var(--secondary-text);
  font-size: var(--status-font-size);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Phone: up to 600px */
@media (max-width: 599.9999px) {
  :root {
    --base-font-size: clamp(16px, 4vw, 17px);
    --title-font-size: var(--base-font-size);
    --secondary-font-size: calc(var(--base-font-size) * 0.85);
    --page-margin-inline: 0;
    --page-margin-block: 0;
    --space-inline: clamp(14px, 3.5vw, 18px);
    --space-block: clamp(14px, 1.8vh, 18px);
    --grid-column-gap: calc(var(--space-inline) * 0.8);
  }

  .video-item {
    grid-template-columns: 1fr;
  }

  #logo img {
    max-height: 100px;
  }

  .filter {
    grid-template-columns: 1fr;
  }

  .filter-modes button {
    flex: 1;
  }

  .video-url {
    grid-row: auto;
  }
}

/* Small */
@media (min-width: 600px) {
  :root {
    --filter-padding-inline: 0;
    --base-font-size: clamp(16px, 1.35vw, 17px);
    --title-font-size: calc(var(--base-font-size) * 1.05);
    --secondary-font-size: calc(var(--base-font-size) * 0.875);
    --poster-width: clamp(224px, 25vw, 256px);
    --page-margin-inline: clamp(12px, 1.3vw, 16px);
    --page-margin-block: clamp(12px, 1.8vh, 16px);
    --space-inline: clamp(14px, 1.4vw, 16px);
    --space-block: clamp(14px, 1.6vh, 16px);
    --grid-column-gap: var(--space-inline);
  }

  .viewer {
    margin-top: 0;
  }
}

/* Med */
/*
@media (min-width: 600px) and (max-width: 1200px) {
  :root {
  }
}
*/

/* Wide */
@media (min-width: 720px) {
  :root {
    --base-font-size: clamp(16px, 0.95vw, 18px);
    --title-font-size: calc(var(--base-font-size) * 1.2);
    --secondary-font-size: calc(var(--base-font-size) * 0.95);
    --poster-width: clamp(320px, 21vw, 352px);
    --page-margin-inline: clamp(24px, 2vw, 36px);
    --page-margin-block: clamp(24px, 3vh, 36px);
    --space-inline: clamp(20px, 1.5vw, 26px);
    --space-block: clamp(18px, 2vh, 22px);
    --grid-column-gap: calc(var(--space-inline) * 1.25);
  }

  .viewer {
    margin-top: 0;
  }
}