/* ==========================================================================
   VideoTex — app chrome.
   Loaded after tokens.css, before components.css and forms.css.

   Owns: masthead, search + suggestions, brand, sidebar, mini rail, drawer,
   chips bar, popup menus, toast stack, dialogs and the alert boxes base.html's
   <noscript> messages fallback depends on.

   Colours come only from the tokens in tokens.css. The three literals used
   here are documented where they appear (a translucent inset shadow on the
   search field and two translucent overlay washes); no token exists for them
   and no token may be added.

   Stacking order committed to by this file:
     chips 50 < masthead 60 < mobile search overlay 70 < drawer 80
        < dialog 90 < popup menu 100 < toasts 110
   (tokens.css keeps the skip link at 200, above all of them, on purpose.)
   ========================================================================== */

/* ==========================================================================
   1. Masthead
   ==========================================================================
   NOTE — deviation from the spec's word "sticky": .yt-masthead-slot is grid
   row 1 of .yt-app and is exactly var(--yt-masthead-h) tall, so a sticky child
   would have zero travel inside it and would scroll straight off screen.
   tokens.css is read-only, so the bar is position:fixed instead. The 56px grid
   row already reserves the space, so nothing below it shifts.               */

.yt-masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--yt-masthead-h);
  padding: 0 16px;
  background: var(--yt-bg);
}

.yt-masthead__zone {
  display: flex;
  align-items: center;
  min-width: 0;
}
.yt-masthead__zone--start { flex: 0 0 auto; gap: 16px; }
.yt-masthead__zone--center {
  flex: 1 1 auto;
  justify-content: center;
  gap: 8px;
  max-width: 732px;
  margin: 0 auto;
}
.yt-masthead__zone--end { flex: 0 0 auto; gap: 8px; }

/* Wrapper for a trigger plus its <template data-vt-menu-items> sibling, so the
   template never becomes a flex item of its own. */
.yt-masthead__slot { position: relative; display: flex; align-items: center; }

/* -- Brand ---------------------------------------------------------------- */
.yt-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px 0;
  color: var(--yt-fg);
}
.yt-brand img {
  height: 20px;
  width: auto;
  max-width: none;
}

/* -- Create pill ---------------------------------------------------------- */
.yt-masthead__create { flex: 0 0 auto; height: 36px; }

/* -- Bell + count badge --------------------------------------------------- */
.yt-masthead__bell { position: relative; }
.yt-masthead__badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 16px;
  justify-content: center;
  /* .yt-badge--brand from tokens.css supplies the red and its foreground. */
}
/* No count to show: collapse to a plain dot rather than an empty red pill. */
.yt-masthead__badge:empty {
  top: 6px;
  right: 7px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

/* -- Theme toggle: offer the theme you are NOT in ------------------------- */
.yt-theme-toggle__dark,
.yt-theme-toggle__light { display: none; }
.yt-theme-toggle__light { display: block; }
html[data-theme="light"] .yt-theme-toggle__light { display: none; }
html[data-theme="light"] .yt-theme-toggle__dark { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .yt-theme-toggle__light { display: none; }
  html:not([data-theme]) .yt-theme-toggle__dark { display: block; }
}

/* -- Avatar button -------------------------------------------------------- */
.yt-masthead__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  border-radius: 50%;
}
/* Defensive, scoped to this block only: .yt-avatar itself belongs to
   components.css, but the masthead circle must be centred even if that file
   is not loaded yet. */
.yt-masthead__avatar > .yt-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  line-height: 1;
}

/* ==========================================================================
   2. Search
   ==========================================================================
   Three pieces: the bordered input area, the 64px submit welded to its right
   edge, and a separate 40px circular mic outside the form. On focus the pill
   takes an accent ring and the magnifier moves inside on the left, which is
   what makes it read as YouTube.                                           */

.yt-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* Collapsed-state trigger, only used below 656px. A <label>, so tapping it
   focuses the input and :focus-within expands the row with no JavaScript. */
.yt-search__expand {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--yt-fg);
  cursor: pointer;
}
.yt-search__expand:hover { background: var(--yt-bg-hover); }

.yt-search__field {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 4px 0 16px;
  border: 1px solid var(--yt-border);
  border-right: none;
  border-radius: 40px 0 0 40px;
  background: var(--yt-bg-search);
  /* Literal: YouTube's faint inner top shadow. Neutral in both themes and no
     token exists for a translucent black. */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}

/* The magnifier that slides inside the pill once the field has focus. */
.yt-search__leading {
  display: none;
  flex: 0 0 auto;
  color: var(--yt-fg);
}

.yt-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  /* 16px keeps iOS Safari from zooming the page on focus. */
  font-size: 16px;
  line-height: 1;
  color: var(--yt-fg);
  background: none;
  border: 0;
  appearance: none;
}
.yt-search__input::-webkit-search-cancel-button,
.yt-search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
/* The pill's accent ring below is this control's focus indicator, so the
   global outline would only double it up. */
.yt-search__input:focus-visible { outline: none; }

.yt-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--yt-fg);
}
.yt-search__clear:hover { background: var(--yt-bg-hover); }
/* Nothing typed and nothing carried over from ?search_query= : no clear. */
.yt-search__input:placeholder-shown + .yt-search__clear { display: none; }

.yt-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 40px;
  border: 1px solid var(--yt-border);
  border-radius: 0 40px 40px 0;
  background: var(--yt-bg-chip);
  color: var(--yt-fg);
  transition: background var(--yt-transition);
}
.yt-search__submit:hover { background: var(--yt-bg-hover); }

/* Focused pill: accent ring, magnifier inside, tighter left padding. */
.yt-search:focus-within .yt-search__field,
.yt-search--focused .yt-search__field {
  border-color: var(--yt-accent);
  box-shadow: inset 0 0 0 1px var(--yt-accent);
  padding-left: 8px;
}
.yt-search:focus-within .yt-search__leading,
.yt-search--focused .yt-search__leading { display: block; }

/* -- Mic: a separate circle, outside the form ----------------------------- */
.yt-search__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--yt-bg-chip);
  color: var(--yt-fg);
  transition: background var(--yt-transition);
}
.yt-search__mic:hover { background: var(--yt-bg-hover); }

/* -- Suggestion dropdown -------------------------------------------------- */
.yt-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 61;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius-md);
  background: var(--yt-bg-elevated);
  box-shadow: var(--yt-shadow-menu);
}
.yt-suggest:empty { display: none; }

.yt-suggest__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 4px 16px;
  color: var(--yt-fg);
  font-size: 16px;
  cursor: pointer;
}
.yt-suggest__item:hover,
.yt-suggest__item--active { background: var(--yt-bg-hover); }
.yt-suggest__item[aria-selected="true"] { background: var(--yt-bg-hover); }
.yt-suggest__item .yt-icon { flex: 0 0 24px; color: var(--yt-fg-secondary); }
.yt-suggest__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   3. Sidebar (240px)
   ========================================================================== */

/* NOTE — second deviation from "sticky", same cause as the masthead: the rail's
   containing block for a sticky child is .yt-rail__full, a plain auto-height
   block in read-only tokens.css. Its height therefore equals this element's
   height, giving sticky zero travel — the guide would scroll away. The grid
   column already reserves --yt-rail worth of width, so fixed shifts nothing.
   (.yt-chips IS genuinely sticky: its containing block is .yt-content, the
   stretched grid item itself, so it has real travel.) */
.yt-sidebar {
  position: fixed;
  top: var(--yt-masthead-h);
  left: 0;
  z-index: 40;
  height: calc(100vh - var(--yt-masthead-h));
  width: var(--yt-sidebar-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px 24px;
  background: var(--yt-bg);
}

.yt-sidebar__section {
  padding: 12px 0;
  border-bottom: 1px solid var(--yt-border);
}
.yt-sidebar__section:first-child { padding-top: 0; }
.yt-sidebar__section:last-of-type { border-bottom: 0; }

.yt-sidebar__title {
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--yt-fg);
}
.yt-sidebar__title-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 4px;
}
.yt-sidebar__title-link:hover { color: var(--yt-fg-secondary); }

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

.yt-sidebar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attention dot beside "Queue status" while uploads are refused. */
.yt-sidebar__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--yt-warning);
}

.yt-sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px 0;
}
.yt-sidebar__foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--yt-fg-secondary);
}
.yt-sidebar__foot-links a { border-radius: 4px; }
.yt-sidebar__foot-links a:hover { color: var(--yt-fg); }
.yt-sidebar__foot-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--yt-fg-secondary);
}

/* ==========================================================================
   4. Mini rail (72px)
   ========================================================================== */

/* Fixed for the same reason as .yt-sidebar above. */
.yt-minirail {
  position: fixed;
  top: var(--yt-masthead-h);
  left: 0;
  z-index: 40;
  height: calc(100vh - var(--yt-masthead-h));
  width: var(--yt-sidebar-mini-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0 24px;
  background: var(--yt-bg);
}

.yt-minirail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 64px;
  height: 74px;
  padding: 0 2px;
  border-radius: var(--yt-radius-sm);
  color: var(--yt-fg);
  text-align: center;
  transition: background var(--yt-transition);
}
.yt-minirail__item:hover { background: var(--yt-bg-hover); }
.yt-minirail__item--active { background: var(--yt-bg-hover); }
.yt-minirail__item--active .yt-minirail__label { font-weight: 500; }

.yt-minirail__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.2;
}

/* ==========================================================================
   5. Drawer
   ==========================================================================
   app.js only promises data-vt-drawer-open / -close, which toggle the [hidden]
   attribute on #vt-drawer. So the *resting* state here is the visible one and
   the entrance is an animation, not a transition — a transition cannot fire
   across display:none, and tokens.css clamps animations to .001ms under
   prefers-reduced-motion, which is safe only because the on-screen position
   lives in the rule and not in the keyframe's `to`.                        */

.yt-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.yt-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--yt-overlay);
  animation: yt-chrome-fade-in 150ms ease-out;
}

.yt-drawer__panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--yt-sidebar-w);
  max-width: 85vw;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--yt-bg);
  box-shadow: var(--yt-shadow-menu);
  animation: yt-chrome-slide-from-left 200ms cubic-bezier(.2, 0, .2, 1);
}

.yt-drawer__head {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--yt-masthead-h);
  padding: 0 16px;
  background: var(--yt-bg);
}

/* Inside the drawer the panel is the scroll container, so the guide must give
   up its own sticky positioning and full-viewport height. */
.yt-drawer__panel .yt-sidebar {
  position: static;
  z-index: auto;
  height: auto;
  /* Must override the fixed rail's fixed width: the panel may be narrower
     than --yt-sidebar-w once max-width:85vw bites on a small phone. */
  width: 100%;
  overflow: visible;
  padding-top: 0;
}

@keyframes yt-chrome-fade-in { from { opacity: 0; } }
@keyframes yt-chrome-slide-from-left { from { transform: translateX(-100%); } }

/* ==========================================================================
   6. Chips bar
   ========================================================================== */

.yt-chips {
  position: sticky;
  top: var(--yt-masthead-h);
  z-index: 50;
  height: var(--yt-chips-h);
  min-width: 0;
  padding: 0 24px;
  background: var(--yt-bg);
}

.yt-chips__scroller {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}
.yt-chips__scroller > li { flex: 0 0 auto; display: flex; }

.yt-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--yt-radius-sm);
  background: var(--yt-bg-chip);
  color: var(--yt-fg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--yt-transition);
}
.yt-chip:hover { background: var(--yt-bg-hover); border-color: var(--yt-border); }
.yt-chip--active {
  background: var(--yt-bg-chip-active);
  color: var(--yt-fg-inverse);
  border-color: transparent;
}
.yt-chip--active:hover {
  background: var(--yt-bg-chip-active);
  border-color: transparent;
  opacity: .88;
}

/* Fading edges, so a chip scrolled half out looks cut by light, not clipped.
   Width deliberately matches .yt-chips' side padding: any wider and the first
   or last chip would sit washed out even when the strip is not scrolled. */
.yt-chips__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}
/* No fade masks: the arrow buttons are the scroll affordance. */
.yt-chips__edge--start,
.yt-chips__edge--end { display: none; }

.yt-chips__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: var(--yt-bg);
  color: var(--yt-fg);
  box-shadow: var(--yt-shadow-card);
  transition: background var(--yt-transition);
}
.yt-chips__arrow:hover { background: var(--yt-bg-hover); }
.yt-chips__arrow--start { left: 4px; }
.yt-chips__arrow--end { right: 4px; }

/* ==========================================================================
   7. Popup menus
   ==========================================================================
   base.html emits #vt-menu-host on every page. It is a fixed full-viewport
   layer, so it MUST stay click-through or it would swallow every click on the
   page; only the menu itself takes pointer events back.                    */

.yt-menu-host {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.yt-menu-host:empty { display: none; }

.yt-menu {
  position: fixed;
  min-width: 200px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius-md);
  background: var(--yt-bg-elevated);
  box-shadow: var(--yt-shadow-menu);
  pointer-events: auto;
  animation: yt-chrome-fade-in 120ms ease-out;
}

.yt-menu__item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  color: var(--yt-fg);
  font-size: 14px;
  text-align: left;
  background: none;
  transition: background var(--yt-transition);
}
.yt-menu__item:hover { background: var(--yt-bg-hover); }
.yt-menu__item .yt-icon { flex: 0 0 24px; }
.yt-menu__item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-menu__item[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.yt-menu__sep {
  height: 1px;
  margin: 8px 0;
  background: var(--yt-border);
}

.yt-menu__note {
  padding: 4px 16px 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--yt-fg-secondary);
}

/* ==========================================================================
   8. Toasts — bottom-left, elevated, slide in from the left
   ========================================================================== */

.yt-toasts {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 110;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(400px, calc(100vw - 48px));
  /* Always in the DOM: the stack must never intercept clicks. pointer-events
     is the whole fix — an :empty { display:none } rule here would toggle an
     aria-live region in the same frame as the insertion, which is a known way
     to lose the announcement in VoiceOver and JAWS. */
  pointer-events: none;
}

.yt-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--yt-border);
  border-left: 4px solid var(--yt-fg-secondary);
  border-radius: var(--yt-radius-sm);
  background: var(--yt-bg-elevated);
  color: var(--yt-fg);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--yt-shadow-menu);
  pointer-events: auto;
  animation: yt-chrome-slide-from-left 200ms cubic-bezier(.2, 0, .2, 1);
}
.yt-toast .yt-icon { flex: 0 0 24px; }
.yt-toast__text { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.yt-toast--success { border-left-color: var(--yt-success); }
.yt-toast--error   { border-left-color: var(--yt-danger); }
.yt-toast--warning { border-left-color: var(--yt-warning); }
.yt-toast--info    { border-left-color: var(--yt-accent); }

/* ==========================================================================
   9. Dialog
   ========================================================================== */

.yt-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--yt-scrim);
  animation: yt-chrome-fade-in 150ms ease-out;
}

.yt-dialog__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius-md);
  background: var(--yt-bg-elevated);
  box-shadow: var(--yt-shadow-menu);
}

.yt-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 24px;
  border-bottom: 1px solid var(--yt-border);
  font-size: 18px;
  font-weight: 500;
}
.yt-dialog__head > :first-child { flex: 1 1 auto; min-width: 0; }

.yt-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.5;
}

.yt-dialog__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 24px 16px;
}

/* ==========================================================================
   10. Alerts — base.html's <noscript> messages fallback lives on these
   ==========================================================================
   Django's message tags are not a closed set: "debug" has no modifier here and
   a tag can be multi-token ("safe error"), which yields a class no rule
   matches. So the whole box is styled on .yt-alert and the modifiers only
   tint it.                                                                 */

.yt-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--yt-border);
  border-left: 4px solid var(--yt-fg-secondary);
  border-radius: var(--yt-radius-sm);
  background: var(--yt-bg-elevated);
  color: var(--yt-fg);
  font-size: 14px;
  line-height: 1.5;
}
.yt-alert .yt-icon { flex: 0 0 24px; }
.yt-alert--info    { border-left-color: var(--yt-accent); }
.yt-alert--success { border-left-color: var(--yt-success); }
.yt-alert--warning { border-left-color: var(--yt-warning); }
.yt-alert--error   { border-left-color: var(--yt-danger); }

.yt-noscript-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 0;
}

/* ==========================================================================
   11. Responsive chrome
   ========================================================================== */

/* Trim the Create pill to its icon before the masthead can crowd. */
@media (max-width: 900px) {
  .yt-masthead__create-label { display: none; }
  .yt-masthead__create { width: 40px; padding: 0; justify-content: center; }
}

/* Below 656px the centre search collapses to the magnifier label and expands
   to a full-width overlay row on focus. Focus-driven, so it works with JS off;
   app.js may also add .yt-search--focused, which triggers the same rules. */
@media (max-width: 656px) {
  .yt-masthead { gap: 8px; padding: 0 8px; }
  .yt-masthead__zone--start { gap: 4px; }
  .yt-masthead__zone--center {
    flex: 0 0 auto;
    max-width: none;
    margin: 0 0 0 auto;
  }
  .yt-masthead__create,
  .yt-masthead__bell { display: none; }
  .yt-masthead__slot:has(.yt-masthead__bell) { display: none; }

  .yt-search { flex: 0 0 auto; }
  .yt-search__expand { display: inline-flex; }
  /* Collapsed but still rendered, so the label's `for` can focus it. */
  .yt-search__field {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    box-shadow: none;
  }
  .yt-search__submit { display: none; }

  .yt-search:focus-within,
  .yt-search--focused {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 70;
    height: var(--yt-masthead-h);
    gap: 8px;
    padding: 0 8px;
    background: var(--yt-bg);
  }
  .yt-search:focus-within .yt-search__field,
  .yt-search--focused .yt-search__field {
    flex: 1 1 auto;
    width: auto;
    opacity: 1;
    padding: 0 4px 0 8px;
    border-width: 1px;
  }
  .yt-search:focus-within .yt-search__submit,
  .yt-search--focused .yt-search__submit { display: inline-flex; }
  /* One magnifier only: the expand label already sits on the left. */
  .yt-search:focus-within .yt-search__leading,
  .yt-search--focused .yt-search__leading { display: none; }
  .yt-search:focus-within .yt-suggest,
  .yt-search--focused .yt-suggest { left: 8px; right: 8px; }
  /* Progressive enhancement; without :has the overlay simply paints over it. */
  .yt-masthead__zone--center:has(.yt-search:focus-within) .yt-search__mic { display: none; }

  .yt-chips { padding: 0 16px; }
  .yt-chips__edge { width: 16px; }
  .yt-toasts { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .yt-noscript-messages { padding: 16px 16px 0; }
}

/* Narrowest phones: the mic is the first thing to go. */
@media (max-width: 420px) {
  .yt-search__mic { display: none; }
  .yt-brand img { height: 18px; }
  .yt-masthead__avatar { margin-left: 0; }
}

/* Very wide screens: keep the search from stretching past YouTube's cap. */
@media (min-width: 1920px) {
  .yt-masthead { padding: 0 24px; }
}

/* Pointer-coarse devices get no hover-only affordances. */
@media (hover: none) {
  .yt-chips__arrow { display: none; }
}