/* ==========================================================================
   page-results.css — owned by templates/video_app/results.html

   The search page reuses nearly everything: .yt-card--row (components.css)
   for every video hit, .yt-chip / .yt-chip--active (chrome.css) for the sort
   chips, .yt-pill and .yt-btn (tokens.css), .yt-empty for both empty states,
   .yt-input (forms.css) for the landing form, .yt-divider for the rules.

   What is genuinely page-specific, and therefore lives here:

     1. the filter bar — count line, the Filters <details> and its panel
     2. the sort chip row
     3. the wide channel result row, including its 136px avatar
     4. the vertical rhythm of the video rows and the "first 60 of N" note
     5. the two empty states: no query at all, and a query with no matches
     6. the ≤792px gutters, because tokens.css drops .yt-page's horizontal
        padding there while .yt-card--row goes full-bleed at ≤659px on its own

   Non-token literals used here, and why (no token exists for them):
     136 / 88 / 72px  the channel avatar ladder. The avatar partial writes its
                      pixel size INLINE (it has to: one partial serves 24px
                      through 136px), and an inline style outranks every
                      selector, so the two shrink steps are the only
                      !important declarations in this file.
     420px            width of the Filters panel — wide enough for the
                      explanatory note, narrow enough to read as a panel
     640px / 620px    measure for the search-tips list and the landing form
     40px / 10px      option row height and radius, matching the sidebar
                      items in chrome.css
     20px             pill radius on the landing search field, matching the
                      40px masthead search pill
     8/12/16/24px     spacing, the same scale components.css uses
     12/13/20px       font sizes one step either side of .yt-t-meta and
                      .yt-t-section
     .5px / 6px       label letter-spacing and the tips bullet diameter
   ========================================================================== */

.yt-results {
  min-width: 0;
}


/* ==========================================================================
   1. FILTER BAR

   The count is the only thing inside the aria-live region, so a navigation
   announces "12 results for …" and not the whole toolbar.
   ========================================================================== */

.yt-results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  min-width: 0;
}

.yt-results__count {
  flex: 1 1 240px;
  min-width: 0;
  padding-top: 6px;
  color: var(--yt-fg-secondary);
  font-size: 14px;
  line-height: 1.43;
  /* A query is attacker-supplied and may be one 120-character word. */
  overflow-wrap: anywhere;
}

.yt-results__count strong {
  color: var(--yt-fg);
  font-weight: 500;
}

.yt-results__q {
  color: var(--yt-fg);
}

.yt-results__count-sort {
  color: var(--yt-fg-secondary);
}

.yt-results__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
  min-width: 0;
}

/* -- The Filters disclosure ------------------------------------------------
   A <details>, not a [data-vt-menu] button: this page ships no script, and a
   popup menu whose items live in a <template> would be empty without one.
   The panel is in normal flow rather than absolutely positioned, so opening
   it can never cover a result row and needs no click-outside handler. */

.yt-results__filters {
  min-width: 0;
}

.yt-results__filters-btn {
  cursor: pointer;
  /* tokens.css already clears the list marker for ul/ol, not for summary. */
  list-style: none;
}
.yt-results__filters-btn::-webkit-details-marker { display: none; }
.yt-results__filters-btn::marker { content: ""; }

.yt-results__filters[open] > .yt-results__filters-btn {
  background: var(--yt-bg-hover);
}

.yt-results__panel {
  width: 420px;
  max-width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius-md);
  background: var(--yt-bg-elevated);
  box-shadow: var(--yt-shadow-menu);
}

.yt-results__panel-group {
  min-width: 0;
}

.yt-results__panel-title,
.yt-results__sort-label {
  color: var(--yt-fg-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.yt-results__panel-title {
  margin-bottom: 4px;
  padding-inline: 12px;
}

.yt-results__option {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--yt-fg);
  font-size: 14px;
  line-height: 1.4;
  transition: background var(--yt-transition);
}
.yt-results__option:hover { background: var(--yt-bg-hover); }
.yt-results__option--active { font-weight: 500; }

.yt-results__option-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  color: var(--yt-accent);
}

.yt-results__panel-note {
  margin-top: 8px;
  padding: 12px 12px 0;
  border-top: 1px solid var(--yt-border);
  color: var(--yt-fg-secondary);
  font-size: 12px;
  line-height: 1.5;
  text-wrap: pretty;
}

.yt-results__panel-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 12px;
  color: var(--yt-accent);
  font-size: 13px;
  font-weight: 500;
}
.yt-results__panel-clear:hover { text-decoration: underline; }


/* ==========================================================================
   2. SORT CHIPS

   Item classes only — .yt-chips itself is the sticky category bar and this
   page has no categories, so the row is plain and lives in the content flow.
   ========================================================================== */

.yt-results__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  /* Optical alignment with the 36px .yt-pill next to it. */
  padding-top: 2px;
}

.yt-results__sort-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.yt-results__rule {
  margin: 12px 0 24px;
}


/* ==========================================================================
   3. CHANNEL RESULT ROW

   article.yt-results__chan
     a.yt-results__chan-avatar   -> partials/avatar.html at 136px
     div.yt-results__chan-body   -> h2 name, meta line, description
     div.yt-results__chan-cta    -> Subscribe (client-only) + Visit channel
   ========================================================================== */

.yt-results__channels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.yt-results__chan {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.yt-results__chan-avatar {
  display: flex;
  flex: 0 0 136px;
  justify-content: center;
}

.yt-results__chan-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yt-results__chan-name {
  min-width: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  /* A channel name is free text and may be one unbroken 80-character word. */
  overflow-wrap: anywhere;
}
.yt-results__chan-name a { color: var(--yt-fg); }

.yt-results__chan-meta {
  min-width: 0;
  color: var(--yt-fg-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The handle is the channel's identity — the counts beside it are not, so it
   is the one part of the meta line that keeps the primary text colour. */
.yt-results__chan-handle {
  color: var(--yt-fg);
}

.yt-results__chan-desc {
  margin-top: 8px;
  min-width: 0;
  color: var(--yt-fg-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* The "no description" / "nothing published yet" copy: same size, dimmer, so
   it reads as an explanation rather than as the channel's own words. */
.yt-results__chan-note {
  opacity: .85;
}

.yt-results__chan-cta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}


/* ==========================================================================
   4. VIDEO ROWS AND THE TRUNCATION NOTE
   ========================================================================== */

.yt-results__videos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.yt-results__more {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: var(--yt-radius-md);
  background: var(--yt-bg-chip);
  color: var(--yt-fg-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}
.yt-results__more .yt-icon { flex: 0 0 auto; }


/* ==========================================================================
   5. EMPTY STATES

   Both reuse .yt-empty for the icon, title and subtitle, then add what the
   partial has no slot for: a form, a tips list, a row of destinations.
   ========================================================================== */

.yt-results__none,
.yt-results__intro {
  min-width: 0;
}

/* .yt-empty is 460px wide, which is right for a message and too narrow for a
   search field plus a submit button. */
.yt-results__intro-empty {
  max-width: 620px;
  padding-bottom: 24px;
}

.yt-results__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

/* .yt-input is display:block;width:100% — both have to go for it to sit in a
   flex row, and the pill radius matches the masthead's 40px search field. */
.yt-results__field {
  flex: 1 1 220px;
  width: auto;
  border-radius: 20px;
  padding-inline: 16px;
  background: var(--yt-bg-search);
}

/* components.css gives .yt-empty .yt-btn a 12px top margin, which would push
   the submit out of line with the field it sits beside. Same specificity as
   that rule, and this file loads later, so the reset wins. */
.yt-results__form .yt-results__submit {
  flex: 0 0 auto;
  margin-top: 0;
}

.yt-results__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  min-width: 0;
}

.yt-results__links--intro {
  justify-content: center;
}

.yt-results__tips {
  max-width: 640px;
  margin: 0 auto;
  min-width: 0;
}

.yt-results__tips-title {
  margin-bottom: 8px;
  color: var(--yt-fg);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.yt-results__tips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* tokens.css resets every list to list-style:none, so the marker is drawn
   here rather than inherited from the UA. */
.yt-results__tips-list > li {
  position: relative;
  padding-left: 18px;
  color: var(--yt-fg-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.yt-results__tips-list > li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yt-fg-secondary);
}


/* ==========================================================================
   6. RESPONSIVE

   Two independent things happen on the way down:
     * ≤1100px  the channel avatar and the row gap shrink, matching the point
                at which components.css narrows .yt-card--row's thumbnail
     * ≤792px   tokens.css sets .yt-page padding to `16px 0 24px`, so every
                block here supplies its own 16px gutter — except the video
                rows, which components.css takes full-bleed at ≤659px exactly
                like the home grid
   ========================================================================== */

@media (max-width: 1100px) {
  .yt-results__chan { gap: 16px; }
  .yt-results__chan-avatar { flex-basis: 88px; }
  /* Overriding the partial's inline width/height/font-size — see the header. */
  .yt-results__chan-avatar .yt-avatar {
    width: 88px !important;
    height: 88px !important;
    font-size: 34px !important;
  }
  .yt-results__chan-name { font-size: 18px; }
}

@media (max-width: 792px) {
  .yt-results__bar,
  .yt-results__rule,
  .yt-results__channels,
  .yt-results__videos,
  .yt-results__more,
  .yt-results__tips,
  .yt-results__links {
    padding-inline: 16px;
  }
  /* The note and the links are already inside .yt-results__tips. */
  .yt-results__tips .yt-results__links { padding-inline: 0; }
  .yt-results__panel { width: 100%; }
}

@media (max-width: 659px) {
  /* .yt-card--row goes edge-to-edge with its own 12px text inset here. */
  .yt-results__videos { padding-inline: 0; }

  .yt-results__chan {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  .yt-results__chan-avatar { flex-basis: 72px; }
  .yt-results__chan-avatar .yt-avatar {
    width: 72px !important;
    height: 72px !important;
    font-size: 28px !important;
  }
  .yt-results__chan-body { flex-basis: 60%; }
  /* Full-width CTA row under the name, so a 320px viewport never has to
     choose between the avatar, the name and the Subscribe pill. */
  .yt-results__chan-cta { flex: 1 1 100%; }
  .yt-results__chan-cta .yt-btn { flex: 1 1 auto; }

  .yt-results__chan-name { font-size: 16px; }
  .yt-results__count { flex-basis: 100%; padding-top: 0; }
  .yt-results__tools { width: 100%; }
  .yt-results__sort { padding-top: 0; }
}

/* The only transitions on this page are the shared .yt-btn / .yt-chip /
   .yt-pill ones, which tokens.css already neutralises under reduced motion.
   The disclosure has no animation of its own, so there is nothing to disable
   here — this block exists so that stays true if one is ever added. */
@media (prefers-reduced-motion: reduce) {
  .yt-results__option,
  .yt-results__filters-btn {
    transition: none;
  }
}