/*
 * Manual collection layout overrides.
 * This is intentionally a separate stylesheet: it must be parsed after the
 * page's legacy YouTube stylesheet, and it is allowed by the site's CSP.
 */
body.youtube-page #youtubeManualPanel .youtube-inline-detail-bar {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid #35493b !important;
  background: rgba(7, 12, 9, 0.52) !important;
  scrollbar-color: #55725d #101611;
  scrollbar-width: thin;
}

body.youtube-page #youtubeManualPanel .youtube-inline-detail-bar > .youtube-inline-detail-cell {
  box-sizing: border-box !important;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 13px 12px !important;
  border: 0 !important;
  border-left: 1px solid rgba(73, 101, 80, 0.52) !important;
  background: transparent !important;
}

body.youtube-page #youtubeManualPanel .youtube-inline-detail-bar > :first-child {
  border-left: 0 !important;
}

body.youtube-page #youtubeManualPanel .youtube-inline-date-cell:first-child {
  flex-basis: 185px;
  min-width: 185px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-date-cell:nth-child(2) {
  flex-basis: 165px;
  min-width: 165px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-preset-cell {
  flex: 1 0 320px;
  min-width: 320px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-subscriber-cell {
  flex-basis: 175px;
  min-width: 175px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-views-cell {
  flex-basis: 165px;
  min-width: 165px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-submit-cell {
  display: flex !important;
  flex: 0 0 165px;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 165px;
  gap: 8px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-field-label,
body.youtube-page #youtubeManualPanel .youtube-inline-detail-cell > label,
body.youtube-page #youtubeManualPanel .youtube-inline-detail-cell > .youtube-repeat-heading {
  display: block !important;
  min-height: 18px;
  margin: 0 !important;
  color: #dce7df !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body.youtube-page #youtubeManualPanel .youtube-date-weekday {
  display: block;
  min-height: 15px;
  margin-top: 5px;
  color: #a9d7b4;
  font: 10px 'DM Mono', monospace;
  white-space: nowrap;
}

body.youtube-page #youtubeManualPanel .youtube-inline-detail-bar input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 37px !important;
  margin: 8px 0 0 !important;
  padding: 8px 9px !important;
  border: 1px solid #3b453e !important;
  border-radius: 3px !important;
  background: #0a0d0b !important;
  color: var(--ink) !important;
  color-scheme: dark;
}

body.youtube-page #youtubeManualPanel .youtube-inline-date-cell input {
  cursor: pointer;
}

body.youtube-page #youtubeManualPanel .youtube-inline-preset-cell .youtube-date-presets {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(48px, 1fr)) !important;
  gap: 5px !important;
  margin-top: 8px !important;
}

body.youtube-page #youtubeManualPanel .youtube-inline-preset-cell .youtube-date-presets button {
  min-height: 37px !important;
  padding: 0 4px;
}

body.youtube-page #youtubeManualPanel .youtube-inline-submit-cell > p {
  margin: 0 !important;
}

body.youtube-page #youtubeManualPanel .youtube-inline-submit-cell > .secondary {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
}

body.youtube-page #youtubeManualPanel .youtube-manual-date-summary {
  margin: 9px 0 0;
  color: #a9d7b4;
  font: 600 12px 'DM Mono', 'Noto Sans KR', sans-serif;
  letter-spacing: -0.1px;
}

body.youtube-page #youtubeManualPanel .youtube-detail-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Collected-video source filter and badges. */
body.youtube-page .youtube-video-filter-fields {
  grid-template-columns: minmax(160px, 1.45fr) repeat(6, minmax(100px, 1fr));
}

body.youtube-page .youtube-video-date-range-field {
  display: grid;
  grid-column: span 2;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.youtube-page .youtube-video-filter-label {
  display: block;
  color: #9ba99f;
  font-size: 10px;
  font-weight: 600;
}

body.youtube-page .youtube-video-date-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.youtube-page .youtube-video-date-inputs label {
  margin: 0;
}

body.youtube-page .youtube-video-date-inputs input[type="date"] {
  cursor: pointer;
  color-scheme: dark;
}

body.youtube-page .youtube-video-date-range-field .youtube-date-weekday {
  display: block;
  min-height: 13px;
  margin-top: 4px;
  color: #a9d7b4;
  font: 9px 'DM Mono', monospace;
  white-space: nowrap;
}

body.youtube-page .youtube-video-date-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(28px, 1fr));
  gap: 4px;
}

body.youtube-page .youtube-video-date-presets button {
  min-height: 27px;
  padding: 0 3px;
  border: 1px solid #39473d;
  background: #101713;
  color: #a8b7ab;
  cursor: pointer;
  font: 500 9px 'Noto Sans KR', sans-serif;
}

body.youtube-page .youtube-video-date-presets button:hover,
body.youtube-page .youtube-video-date-presets button.is-active {
  border-color: #5d976e;
  background: rgba(80, 139, 98, 0.2);
  color: #d4f1dc;
}

body.youtube-page .youtube-video-date-presets button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

body.youtube-page .youtube-video-date-summary {
  margin: 0;
  color: #92a398;
  font: 9px 'DM Mono', 'Noto Sans KR', sans-serif;
  white-space: nowrap;
}

body.youtube-page .youtube-video-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

body.youtube-page .youtube-video-meta .youtube-video-source-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  overflow: visible;
  border: 1px solid #526357;
  border-radius: 999px;
  color: #d9e6dc;
  font: 700 9px 'Noto Sans KR', sans-serif;
  letter-spacing: -0.1px;
  white-space: nowrap;
  text-overflow: clip;
}

body.youtube-page .youtube-video-meta .youtube-video-source-badge[data-source="manual"] {
  border-color: #5d83a6;
  background: rgba(74, 119, 158, 0.18);
  color: #b8ddff;
}

body.youtube-page .youtube-video-meta .youtube-video-source-badge[data-source="automatic"] {
  border-color: #6c9862;
  background: rgba(96, 151, 83, 0.18);
  color: #c9f58a;
}

body.youtube-page .youtube-video-meta .youtube-video-keywords {
  min-width: 0;
  overflow: hidden;
  color: #94a79a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container (max-width: 1050px) {
  body.youtube-page .youtube-video-filter-fields {
    grid-template-columns: minmax(150px, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 760px) {
  body.youtube-page .youtube-video-filter-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.youtube-page .youtube-video-search-field {
    grid-column: span 2;
  }

  body.youtube-page .youtube-video-date-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 520px) {
  body.youtube-page .youtube-video-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.youtube-page .youtube-video-search-field {
    grid-column: 1 / -1;
  }

  body.youtube-page .youtube-video-date-range-field {
    grid-column: 1 / -1;
  }
}