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

   Loaded after tokens.css / chrome.css / components.css / forms.css. Almost
   everything the page renders already exists: .yt-grid and .yt-grid--shorts
   for the two tabs, .yt-avatar for the 128px circle, .yt-btn--mono for the
   Subscribe pill, .yt-segmented for the sort control, .yt-table-wrap /
   .yt-table for the About stats, .yt-field + .yt-input for the share block,
   .yt-empty for the per-tab empty states. This file adds four things only:

     1. the gradient banner strip (there is no banner image in the model)
     2. the header — 128px avatar beside the identity column
     3. the sticky tab strip
     4. the sort row and the About tab's two-column body

   NON-TOKEN LITERALS USED HERE, AND WHY

   The banner is the one surface on the page whose ground colour comes from
   DATA, not from the theme: channel.html sets --yt-channel-tint inline from
   Channel.avatar_color, a fixed ten-entry palette. Everything painted on top
   of it therefore has to be theme-independent, exactly as the player chrome
   in page-watch.css is:

     rgba(255,255,255,…)  the sheen and the initials watermark — white reads on
                          every entry of that palette, in both themes
     rgba(15,15,15,…)     the vignette that keeps the strip from glowing at
                          full saturation, matching --yt-bg's dark value

   The remaining literals are geometry, not colour:

     112px→192px   the banner's clamped height, ~6.5:1 at desktop width
     128px / 80px  avatar sizes, set inline by partials/avatar.html
     48px          tab height, 3px its active underline
     24px / 16px   the .yt-page gutters this file has to mirror by hand below
                   792px, where tokens.css drops .yt-page's own padding
     62ch / 72ch   measure caps on the two description blocks
     30            the sticky tab strip's z-index: above the page, below the
                   chips bar (40), the masthead (60) and the menu host (100)
   ========================================================================== */

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


/* ==========================================================================
   1. Banner

   No banner image exists in the data model, so the strip is built: the
   channel's palette colour as the ground, a corner sheen and a diagonal
   vignette over it, and the channel's initials as a watermark. Purely
   decorative — channel.html marks it aria-hidden and puts nothing
   interactive inside it.
   ========================================================================== */

.yt-channel__banner {
  position: relative;
  overflow: hidden;
  height: clamp(112px, 15.5vw, 192px);
  border-radius: var(--yt-radius-md);
  /* Flat single fill. The banner is an identity strip, not a showpiece. */
  background-color: var(--yt-channel-tint, var(--yt-bg-chip));
}



/* ==========================================================================
   2. Header

   Avatar, then the identity column: name, the meta line, the clamped
   description and the action cluster. The Subscribe pill lives inside the
   identity column rather than opposite it, which is both what YouTube does
   now and what stacks correctly on a phone with no extra rules.
   ========================================================================== */

.yt-channel__header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
  padding: 16px 0 4px;
}

.yt-channel__avatar { flex: 0 0 auto; }

.yt-channel__ident {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 24px/700, per the spec. A pasted 80-character name breaks rather than
   pushing the page into horizontal scroll. */
.yt-channel__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.yt-channel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--yt-fg-secondary);
  font-size: 14px;
}

.yt-channel__handle {
  color: var(--yt-fg);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.yt-channel__desc {
  max-width: 62ch;
  color: var(--yt-fg-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.yt-channel__desc-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: flex-start;
  color: var(--yt-fg);
  font-size: 14px;
  font-weight: 500;
}
.yt-channel__desc-more:hover { text-decoration: underline; }
.yt-channel__desc-more .yt-icon { flex: 0 0 auto; }

.yt-channel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.yt-channel__subscribe { min-width: 116px; }

/* app.js toggles .yt-btn--mono off and .yt-btn--subscribed on once someone is
   subscribed. Nothing here defines .yt-btn--subscribed, exactly as
   page-watch.css does not: dropping --mono already leaves the neutral chip
   fill that YouTube's subscribed pill uses. */

.yt-channel__more { position: relative; }

.yt-channel__sub-note {
  flex: 1 1 26ch;
  max-width: 46ch;
  color: var(--yt-fg-secondary);
  font-size: 12px;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Below 660px the header centres, the way mobile YouTube's does. The avatar
   keeps its 128px inline size — avatar.html writes width/height inline, and
   fighting that from here would need !important. */
@media (max-width: 659px) {
  .yt-channel__header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    text-align: center;
  }
  .yt-channel__ident { align-items: center; }
  .yt-channel__meta,
  .yt-channel__actions { justify-content: center; }
  .yt-channel__desc-more { align-self: center; }
  .yt-channel__sub-note { flex-basis: 100%; }
}


/* ==========================================================================
   3. Tab strip

   Sticky under the 56px masthead. The negative inline margin lets the bar's
   background span the whole content well, so cards scroll UNDER it instead of
   appearing beside it in the 24px gutters. That margin has to be reset below
   792px, where tokens.css sets .yt-page's padding to `16px 0 24px`: keeping
   -24px there would push the bar 24px past both edges of the viewport, and
   body{overflow-x:hidden} would hide the mistake rather than show it.

   The tabs are links to real URLs, so channel.html marks the active one with
   aria-current="page" — no role="tab", which would promise JS-swapped panels
   this page does not have.
   ========================================================================== */

.yt-channel__tabs {
  position: sticky;
  top: var(--yt-masthead-h);
  z-index: 30;
  display: flex;
  gap: 24px;
  margin: 12px -24px 24px;
  padding: 0 24px;
  background: var(--yt-bg);
  border-bottom: 1px solid var(--yt-border);
}

.yt-channel__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 2px;
  color: var(--yt-fg-secondary);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--yt-transition);
}
.yt-channel__tab:hover { color: var(--yt-fg); }

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

/* Drawn at bottom:-1px so it covers the strip's own hairline. */
.yt-channel__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--yt-fg);
}


/* ==========================================================================
   4. Panels — sort row, About body

   .yt-page loses its horizontal padding below 792px and the shared blocks
   (.yt-grid, .yt-section__head, .yt-empty) each supply their own 16px gutter
   there. Every block this file owns has to do the same, or it sits flush
   against the viewport edge while the grid beside it is inset.
   ========================================================================== */

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

.yt-channel__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 24px;
}

/* Says out loud that Popular is the top 12 while Latest is the newest 60, so
   the shorter grid does not read as missing videos. */
.yt-channel__sort-note {
  color: var(--yt-fg-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.yt-channel__about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}

.yt-channel__about-main,
.yt-channel__share { min-width: 0; }

.yt-channel__about-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}
.yt-channel__about-text + .yt-channel__about-title,
.yt-channel__stats-note + .yt-channel__about-title,
.yt-table-wrap + .yt-channel__about-title,
.yt-empty + .yt-channel__about-title { margin-top: 32px; }

/* linkify_description writes plain <a> elements with no class, so they need
   colouring here — the same rule page-watch.css applies to the video
   description. .yt-ts (timestamp links) carries its own colour already. */
.yt-channel__about-text {
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.yt-channel__about-text a { color: var(--yt-accent); }
.yt-channel__about-text a:hover { text-decoration: underline; }

.yt-channel__stats-note {
  margin-top: 8px;
  color: var(--yt-fg-secondary);
  font-size: 12px;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Titles in the stats table are the one place a very long video title lands
   in a fixed cell, so those cells wrap instead of stretching the column. */
.yt-channel__cell-wrap {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* The link + Copy pair. .yt-input is width:100%, so it needs a flex basis to
   share the row, and the row wraps rather than crushing the button. */
.yt-channel__share-row { flex-wrap: wrap; }
.yt-channel__share-row .yt-input { flex: 1 1 180px; min-width: 0; }

.yt-channel__share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}

.yt-channel__share-note {
  color: var(--yt-fg-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media (max-width: 1000px) {
  .yt-channel__about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 792px) {
  .yt-channel__banner { border-radius: 0; }
  .yt-channel__header,
  .yt-channel__sort,
  .yt-channel__about { padding-inline: 16px; }
  .yt-channel__tabs {
    margin-inline: 0;
    padding-inline: 16px;
  }
}