/* ==========================================================================
   VideoTex — forms, comments, footer.

   Load order: tokens.css -> chrome.css -> components.css -> forms.css.
   Everything here builds on tokens.css: no colour is written literally, and
   the shared utilities (.yt-btn, .yt-pill, .yt-icon-btn, .yt-badge, .yt-row,
   .yt-clamp-*) are reused rather than re-implemented.

   Four of these class names — .yt-input .yt-textarea .yt-select .yt-file —
   are hardcoded in video_app/forms.py widget attrs, so the upload page gets
   them whether or not its template mentions them.

   Several blocks style markup that OTHER templates emit (.yt-switch on the
   watch page, .yt-tags and .yt-progress on the upload page, .yt-table and
   .yt-details on the queue dashboard). Those selectors are deliberately
   element-agnostic — a checkbox-label switch and a button[aria-checked]
   switch both work — so the markup author is not locked into one DOM.

   No literal colour appears in this file at all. Where a tint is needed it is
   derived from a token with color-mix() — the switch track and the replies
   disclosure hover — so it still tracks the theme.
   ========================================================================== */


/* ==========================================================================
   1. Text controls
   ========================================================================== */

/* The shared skeleton. YouTube Studio's fields are transparent with a
   hairline border, and turn accent-blue with a 1px ring on focus.

   NOTE: no `outline` property is set anywhere in this section. tokens.css
   owns the global :focus-visible ring, and an `outline:none` here would
   silently delete it for keyboard users. The focus affordance below is
   border-colour + box-shadow only, which composes with that ring instead of
   fighting it. */
.yt-input,
.yt-textarea,
.yt-select,
.yt-file {
  display: block;
  width: 100%;
  max-width: 100%;
  background: transparent;
  color: var(--yt-fg);
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius-sm);
  font-family: var(--yt-font);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color var(--yt-transition), box-shadow var(--yt-transition), background var(--yt-transition);
}

.yt-input,
.yt-select {
  height: 40px;
  padding: 0 12px;
}

.yt-input:hover,
.yt-textarea:hover,
.yt-select:hover,
.yt-file:hover {
  border-color: var(--yt-fg-secondary);
}

.yt-input:focus,
.yt-textarea:focus,
.yt-select:focus,
.yt-file:focus {
  border-color: var(--yt-accent);
  box-shadow: 0 0 0 1px var(--yt-accent);
}

.yt-input:disabled,
.yt-textarea:disabled,
.yt-select:disabled,
.yt-file:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.yt-input[readonly],
.yt-textarea[readonly] {
  background: var(--yt-bg-chip);
  border-color: var(--yt-border);
  color: var(--yt-fg-secondary);
}

/* Chrome's autofill paints its own yellow background and ignores `background`.
   A very large inset shadow is the only way to repaint it, and it must be a
   token so it tracks the theme. */
.yt-input:-webkit-autofill,
.yt-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--yt-fg);
  box-shadow: 0 0 0 1000px var(--yt-bg) inset;
}

/* Textarea. `field-sizing: content` is the real auto-grow; where it is not
   supported the min-height/max-height pair plus resize:vertical keeps the
   field usable, so growth is a progressive enhancement rather than a
   requirement. */
.yt-textarea {
  min-height: 80px;
  max-height: 60vh;
  padding: 10px 12px;
  resize: vertical;
  field-sizing: content;
}

/* Select. The native arrow is kept on purpose: tokens.css sets `color-scheme`
   per theme, so the UA draws a caret (and the open option list) in the right
   colours with zero hardcoded values. A custom data-URI caret cannot read a
   custom property and would have to hardcode one. */
.yt-select {
  padding-right: 8px;
  cursor: pointer;
}

/* Some platforms paint the popup with the control's background, which is
   transparent here — that would render as unreadable text on some engines. */
.yt-select option,
.yt-select optgroup {
  background: var(--yt-bg-elevated);
  color: var(--yt-fg);
}

/* File input. A bare bordered file input looks broken, so the browser's own
   button is restyled into a .yt-pill lookalike. ::file-selector-button and
   the -webkit- alias MUST stay in separate rules: one unknown pseudo-element
   invalidates an entire selector list. */
.yt-file {
  padding: 8px 12px;
  border-style: dashed;
  color: var(--yt-fg-secondary);
  cursor: pointer;
}
.yt-file:hover {
  background: var(--yt-bg-hover);
}
.yt-file::file-selector-button {
  height: 32px;
  margin-right: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: var(--yt-bg-chip);
  color: var(--yt-fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--yt-transition);
}
.yt-file::file-selector-button:hover {
  background: var(--yt-bg-hover);
}
.yt-file::-webkit-file-upload-button {
  height: 32px;
  margin-right: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: var(--yt-bg-chip);
  color: var(--yt-fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}


/* ==========================================================================
   2. Field scaffolding
   ========================================================================== */

.yt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  min-width: 0;
}
.yt-field:last-child { margin-bottom: 0; }

.yt-field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--yt-fg-secondary);
  letter-spacing: .01em;
}
/* Django renders required fields without any marker; add one from CSS so the
   template does not have to. */
.yt-field__label .yt-field__req {
  color: var(--yt-danger);
  margin-left: 2px;
}

.yt-field__help {
  font-size: 12px;
  line-height: 1.4;
  color: var(--yt-fg-secondary);
}

.yt-field__error {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--yt-danger);
}
.yt-field__error .yt-icon { flex: 0 0 auto; }

/* Error state. Driven by the presence of a *visible* .yt-field__error, so JS
   can arm and disarm it with the [hidden] attribute alone, and by an explicit
   .yt-field--error for markup that prefers a class. `.errorlist` is included
   because {{ form.field.errors }} emits Django's own <ul class="errorlist">,
   which no template controls. */
.yt-field:has(.yt-field__error:not([hidden])) .yt-input,
.yt-field:has(.yt-field__error:not([hidden])) .yt-textarea,
.yt-field:has(.yt-field__error:not([hidden])) .yt-select,
.yt-field:has(.yt-field__error:not([hidden])) .yt-file,
.yt-field:has(.errorlist) .yt-input,
.yt-field:has(.errorlist) .yt-textarea,
.yt-field:has(.errorlist) .yt-select,
.yt-field:has(.errorlist) .yt-file,
.yt-field--error .yt-input,
.yt-field--error .yt-textarea,
.yt-field--error .yt-select,
.yt-field--error .yt-file,
.yt-input[aria-invalid="true"],
.yt-textarea[aria-invalid="true"],
.yt-select[aria-invalid="true"] {
  border-color: var(--yt-danger);
}

.yt-field:has(.yt-field__error:not([hidden])) .yt-input:focus,
.yt-field:has(.errorlist) .yt-input:focus,
.yt-field--error .yt-input:focus,
.yt-field:has(.yt-field__error:not([hidden])) .yt-textarea:focus,
.yt-field:has(.errorlist) .yt-textarea:focus,
.yt-field--error .yt-textarea:focus,
.yt-field:has(.yt-field__error:not([hidden])) .yt-select:focus,
.yt-field:has(.errorlist) .yt-select:focus,
.yt-field--error .yt-select:focus {
  box-shadow: 0 0 0 1px var(--yt-danger);
}

/* Django's own error list, styled to match .yt-field__error. */
.yt-field .errorlist,
.errorlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--yt-danger);
  list-style: none;
}


/* ==========================================================================
   3. Switch  (watch page: "Autoplay")

   Two DOMs are supported so the watch-page author can pick either:

   A) <label class="yt-switch">
        <input type="checkbox" checked>
        <span class="yt-switch__label">Autoplay</span>
      </label>

   B) <button type="button" class="yt-switch" role="switch"
              aria-checked="true" aria-label="Autoplay"></button>

   In A the checkbox itself is the track and its ::before is the knob; in B
   the button is the track and its ::after is the knob.
   ========================================================================== */

.yt-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--yt-fg);
  -webkit-tap-highlight-color: transparent;
}
.yt-switch__label { user-select: none; }

/* -- Variant A: the checkbox is the track --------------------------------- */
.yt-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 14px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: var(--yt-border);
  cursor: pointer;
  transition: background var(--yt-transition);
}
.yt-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yt-fg-secondary);
  transform: translateY(-50%);
  transition: transform var(--yt-transition), background var(--yt-transition);
}
.yt-switch input[type="checkbox"]:checked::before {
  background: var(--yt-accent);
  transform: translate(22px, -50%);
}
/* Progressive: derives the track tint from the accent token, never a literal. */
.yt-switch input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--yt-accent) 40%, transparent);
}
.yt-switch input[type="checkbox"]:disabled,
.yt-switch input[type="checkbox"]:disabled::before { cursor: not-allowed; }
.yt-switch:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* -- Variant B: a button carries the state on aria-checked ---------------- */
.yt-switch[role="switch"] {
  position: relative;
  width: 36px;
  height: 14px;
  padding: 0;
  gap: 0;
  border-radius: 7px;
  background: var(--yt-border);
  transition: background var(--yt-transition);
}
.yt-switch[role="switch"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yt-fg-secondary);
  transform: translateY(-50%);
  transition: transform var(--yt-transition), background var(--yt-transition);
}
.yt-switch[role="switch"][aria-checked="true"] {
  background: color-mix(in srgb, var(--yt-accent) 40%, transparent);
}
.yt-switch[role="switch"][aria-checked="true"]::after {
  background: var(--yt-accent);
  transform: translate(22px, -50%);
}


/* ==========================================================================
   4. Tags input  (upload page: entered tags become removable chips)

   <div class="yt-tags" data-vt-tags>
     <span class="yt-tag">gaming
       <button type="button" class="yt-tag__remove"
               aria-label="Remove tag gaming"> ...icon... </button>
     </span>
   </div>

   .yt-tags also works as a <ul> and .yt-tag as an <li> or a <button>.
   ========================================================================== */

.yt-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  list-style: none;
}
.yt-tags:empty { display: none; }

.yt-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 14px;
  background: var(--yt-bg-chip);
  color: var(--yt-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
/* A tag with no remove button keeps symmetric padding. */
.yt-tag:not(:has(.yt-tag__remove)) { padding: 0 10px; }
.yt-tag > span,
.yt-tag__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yt-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--yt-fg-secondary);
  transition: background var(--yt-transition), color var(--yt-transition);
}
.yt-tag__remove:hover {
  background: var(--yt-bg-hover);
  color: var(--yt-fg);
}
.yt-tag__remove .yt-icon { width: 14px; height: 14px; }


/* ==========================================================================
   5. Progress bar  (upload page, queue dashboard)

   <div class="yt-progress" role="progressbar" aria-valuenow="42"
        aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress">
     <div class="yt-progress__fill" style="width:42%"></div>
   </div>

   The fill's width is an inline style — that is the only way a server-rendered
   percentage can reach CSS. Add .yt-progress--indeterminate when the
   percentage is unknown; the fill then animates instead.
   ========================================================================== */

.yt-progress {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--yt-border);
  overflow: hidden;
}
.yt-progress--lg { height: 8px; }
.yt-progress--sm { height: 2px; }

.yt-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--yt-accent);
  transition: width 300ms cubic-bezier(.2, 0, .2, 1);
}
.yt-progress--brand   .yt-progress__fill { background: var(--yt-brand); }
.yt-progress--success .yt-progress__fill { background: var(--yt-success); }
.yt-progress--warning .yt-progress__fill { background: var(--yt-warning); }
.yt-progress--danger  .yt-progress__fill { background: var(--yt-danger); }

.yt-progress--indeterminate .yt-progress__fill {
  width: 35%;
  animation: yt-progress-slide 1.4s ease-in-out infinite;
}
@keyframes yt-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
/* tokens.css already neutralises animation duration under reduced motion; a
   sliding bar with no motion must still read as "busy", so it fills instead. */
@media (prefers-reduced-motion: reduce) {
  .yt-progress--indeterminate .yt-progress__fill {
    width: 100%;
    opacity: .5;
    animation: none;
  }
}


/* ==========================================================================
   6. Segmented control  (like|dislike pair, sort switches)

   <div class="yt-segmented">
     <button type="button" class="yt-segmented__btn" data-vt-action="like"
             data-pid="…" aria-pressed="false">…</button>
     <button type="button" class="yt-segmented__btn" data-vt-action="dislike"
             data-pid="…" aria-pressed="false">…</button>
   </div>

   __btn works as <button> or <a>; the 1px divider is drawn between adjacent
   children so any count of items works.
   ========================================================================== */

.yt-segmented {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  border-radius: 18px;
  background: var(--yt-bg-chip);
  overflow: hidden;
  max-width: 100%;
}
.yt-segmented--sm { height: 32px; border-radius: 16px; }
.yt-segmented--block { display: flex; }

.yt-segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  color: var(--yt-fg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--yt-transition), color var(--yt-transition);
}
.yt-segmented__btn + .yt-segmented__btn {
  border-left: 1px solid var(--yt-border);
}
.yt-segmented__btn:hover { background: var(--yt-bg-hover); }

.yt-segmented__btn[aria-pressed="true"],
.yt-segmented__btn[aria-selected="true"],
.yt-segmented__btn.is-active {
  background: var(--yt-bg-hover);
  color: var(--yt-fg);
}
.yt-segmented__btn[aria-pressed="true"] .yt-icon,
.yt-segmented__btn[aria-selected="true"] .yt-icon { color: var(--yt-accent); }

.yt-segmented__btn:disabled,
.yt-segmented__btn[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
}
.yt-segmented__btn:disabled:hover { background: none; }

/* The like/dislike pair keeps its focus ring inside the rounded clip. */
.yt-segmented__btn:focus-visible { outline-offset: -3px; }

@media (max-width: 480px) {
  .yt-segmented__btn { padding: 0 12px; }
}


/* ==========================================================================
   7. Timestamp + rich-text links

   linkify_description() is the only mark_safe path in the app. It classes the
   m:ss anchors .yt-ts, but leaves the URL / #hashtag / @handle anchors
   unclassed — and tokens.css resets `a { color: inherit }`, so those anchors
   would render as plain text. Any container of linkified text therefore needs
   a descendant-anchor rule; .yt-comment__body has one below, and the watch
   page must do the same for the description block it owns.
   ========================================================================== */

.yt-ts {
  color: var(--yt-accent);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 2px;
}
.yt-ts:hover { text-decoration: underline; }


/* ==========================================================================
   8. Comments
   ========================================================================== */

.yt-comments {
  margin-top: 24px;
  min-width: 0;
}

.yt-comments__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 4px;
}
.yt-comments__count {
  font-size: 20px;
  font-weight: 700;
  color: var(--yt-fg);
}
/* Not a menu: the view supplies exactly one ordering, so this states it. */
.yt-comments__order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--yt-fg-secondary);
}
.yt-comments__order .yt-icon { color: var(--yt-fg-secondary); }

.yt-comments__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 10px 12px;
  border-radius: var(--yt-radius-sm);
  background: var(--yt-bg-chip);
  font-size: 13px;
  line-height: 1.4;
  color: var(--yt-fg-secondary);
}
.yt-comments__note .yt-icon { flex: 0 0 auto; margin-top: 1px; }

.yt-comments__noscript {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--yt-fg-secondary);
}

.yt-comments__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.yt-comments__empty {
  padding: 24px 0;
  font-size: 14px;
  color: var(--yt-fg-secondary);
}


/* -- Composer ------------------------------------------------------------- */

.yt-composer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.yt-composer__avatar { flex: 0 0 auto; }

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

/* The name field and the buttons stay out of the way until the composer is
   engaged — YouTube's behaviour — but a textarea that already holds text keeps
   them open, so a half-written comment never loses its Comment button on blur.
   :placeholder-shown is the only pure-CSS "has content" test, which is why
   both textareas below carry a placeholder. */
.yt-composer__name { display: none; }
.yt-composer__actions { display: none; }

.yt-composer:focus-within .yt-composer__name,
.yt-composer:has(.yt-composer__body:not(:placeholder-shown)) .yt-composer__name {
  display: block;
}
.yt-composer:focus-within .yt-composer__actions,
.yt-composer:has(.yt-composer__body:not(:placeholder-shown)) .yt-composer__actions {
  display: flex;
}

/* The composer's textarea is an underline, not a box. */
.yt-composer__body {
  min-height: 28px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--yt-border);
  border-radius: 0;
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
.yt-composer__body:hover { border-color: var(--yt-fg-secondary); }
.yt-composer__body:focus {
  border-color: var(--yt-fg);
  box-shadow: 0 1px 0 0 var(--yt-fg);
}

.yt-composer__name {
  height: 32px;
  max-width: 280px;
  font-size: 13px;
}

.yt-composer__actions {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.yt-composer__hint {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--yt-fg-secondary);
}
.yt-composer__status {
  font-size: 12px;
  color: var(--yt-fg-secondary);
}

/* Reply composer: same anatomy, one step smaller. */
.yt-composer--reply {
  gap: 12px;
  margin-top: 12px;
}
.yt-composer--reply .yt-composer__body { font-size: 13px; }
.yt-composer--reply .yt-composer__name,
.yt-composer--reply .yt-composer__actions { display: flex; }
.yt-composer--reply .yt-composer__name { display: block; }


/* -- A single comment ----------------------------------------------------- */

.yt-comment {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  scroll-margin-top: calc(var(--yt-masthead-h) + 16px);
}
.yt-comment--reply { gap: 12px; }

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

.yt-comment__main {
  flex: 1 1 auto;
  min-width: 0;
}

.yt-comment__pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--yt-fg-secondary);
}
.yt-comment__pin .yt-icon { color: var(--yt-fg-secondary); }

.yt-comment__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 2px;
  min-width: 0;
}
.yt-comment__author {
  font-size: 13px;
  font-weight: 500;
  color: var(--yt-fg);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yt-comment__author:hover { color: var(--yt-fg); }
.yt-comment__time {
  font-size: 12px;
  color: var(--yt-fg-secondary);
  white-space: nowrap;
}

.yt-comment__body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--yt-fg);
  /* Unmoderated text: a 200-character "word" must wrap, not widen the page. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
/* linkify_description leaves URL / #tag / @handle anchors unclassed and
   tokens.css resets link colour to inherit — without this they read as body
   text. .yt-ts already has its own colour and is unaffected. */
.yt-comment__body a { color: var(--yt-accent); }
.yt-comment__body a:hover { text-decoration: underline; }
.yt-comment--reply .yt-comment__body { font-size: 13px; }

/* No "read more" clamp. A truncated body needs a working expander, and every
   pure-CSS one either duplicates the text or turns the whole comment into a
   <summary> button; a JS-only one leaves the comment permanently cut off
   wherever the script does not run. Long comments therefore render in full —
   the page scrolls, and nothing is hidden behind a dead control. Reuse
   .yt-clamp-3 from tokens.css if a caller ever wants a clamp it can own.
   The body wraps unbreakable strings (see overflow-wrap above), which is the
   part that would otherwise widen the page. */

.yt-comment__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  min-width: 0;
}
.yt-comment__actions .yt-icon-btn .yt-icon { width: 18px; height: 18px; }
.yt-comment__actions .yt-icon-btn[aria-pressed="true"] { color: var(--yt-accent); }

.yt-comment__likes {
  min-width: 16px;
  font-size: 12px;
  color: var(--yt-fg-secondary);
  font-variant-numeric: tabular-nums;
}

/* Reply disclosure. A <details> so the toggle needs no JavaScript at all; the
   summary swaps its own label between the closed and open states, which is why
   there are two spans inside it. Opening it takes a full flex line. */
.yt-comment__reply { flex: 0 0 auto; }
.yt-comment__reply[open] { flex: 1 1 100%; }

.yt-comment__reply-summary {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--yt-fg);
  cursor: pointer;
  list-style: none;
  transition: background var(--yt-transition);
}
.yt-comment__reply-summary::-webkit-details-marker { display: none; }
.yt-comment__reply-summary::marker { content: ""; }
.yt-comment__reply-summary:hover { background: var(--yt-bg-hover); }

.yt-comment__reply [data-when="open"] { display: none; }
.yt-comment__reply[open] [data-when="closed"] { display: none; }
.yt-comment__reply[open] [data-when="open"] { display: inline; }

/* Replies disclosure. One level deep only — see comment.html. */
.yt-comment__replies {
  margin-top: 8px;
}
.yt-comment__replies-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 16px;
  color: var(--yt-accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background var(--yt-transition);
}
.yt-comment__replies-summary::-webkit-details-marker { display: none; }
.yt-comment__replies-summary::marker { content: ""; }
.yt-comment__replies-summary:hover {
  background: color-mix(in srgb, var(--yt-accent) 12%, transparent);
}
.yt-comment__replies-summary .yt-icon { transition: transform var(--yt-transition); }
.yt-comment__replies[open] > .yt-comment__replies-summary .yt-icon {
  transform: rotate(180deg);
}

.yt-comment__replies-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 480px) {
  .yt-comment,
  .yt-composer { gap: 12px; }
  .yt-comments__list { gap: 20px; }
}


/* ==========================================================================
   9. Table  (queue dashboard)

   <div class="yt-table-wrap">
     <table class="yt-table">
       <thead class="yt-table__head"><tr><th>…</th></tr></thead>
       <tbody><tr><td>…</td></tr></tbody>
     </table>
   </div>

   The scroll container is REQUIRED. A table cannot scroll itself without
   `display:block`, which destroys column alignment, so the wrapper (or any
   element with overflow-x:auto) has to come from the page markup. .yt-table-wrap
   is provided here so that is one class, not a hand-rolled style.
   ========================================================================== */

.yt-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--yt-radius-md);
  border: 1px solid var(--yt-border);
}

.yt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
/* The 560px floor is scoped to the scroll container on purpose: if the wrapper
   is ever forgotten the columns squash instead of pushing the whole page into
   horizontal scroll, so the one constraint this file cannot enforce fails
   safe. */
.yt-table-wrap > .yt-table { min-width: 560px; }

.yt-table th,
.yt-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--yt-border);
  vertical-align: middle;
}
.yt-table tbody tr:last-child > th,
.yt-table tbody tr:last-child > td { border-bottom: 0; }

.yt-table__head th,
.yt-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--yt-bg-elevated);
  color: var(--yt-fg-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.yt-table tbody tr:hover { background: var(--yt-bg-hover); }
.yt-table__num,
.yt-table td.yt-table__num,
.yt-table th.yt-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.yt-table caption {
  padding: 12px 16px;
  color: var(--yt-fg-secondary);
  font-size: 12px;
  text-align: left;
}
.yt-table__empty {
  padding: 24px 16px;
  color: var(--yt-fg-secondary);
  text-align: center;
}


/* ==========================================================================
   10. Details / disclosure  (queue dashboard rows, FAQ accordions)

   <details class="yt-details">
     <summary>Question</summary>
     <div class="yt-details__body">Answer</div>
   </details>

   The caret is drawn with two currentColor borders, so it never needs a
   literal colour or an icon include.
   ========================================================================== */

.yt-details {
  border-bottom: 1px solid var(--yt-border);
  min-width: 0;
}
.yt-details:first-of-type { border-top: 1px solid var(--yt-border); }

.yt-details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  color: var(--yt-fg);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color var(--yt-transition);
}
.yt-details > summary::-webkit-details-marker { display: none; }
.yt-details > summary::marker { content: ""; }
.yt-details > summary:hover { color: var(--yt-accent); }

.yt-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--yt-transition);
}
.yt-details[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.yt-details__body,
.yt-details > summary + * {
  padding: 0 4px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--yt-fg-secondary);
  overflow-wrap: anywhere;
}
.yt-details__body a { color: var(--yt-accent); }
.yt-details__body a:hover { text-decoration: underline; }

/* Compact variant for a "show the failure log" row inside a table cell. */
.yt-details--inline {
  border: 0;
}
.yt-details--inline:first-of-type { border-top: 0; }
.yt-details--inline > summary {
  padding: 4px 0;
  font-size: 13px;
  gap: 6px;
}
.yt-details--inline > summary::after { margin-left: 4px; }
.yt-details--inline .yt-details__body,
.yt-details--inline > summary + * {
  padding: 4px 0 8px;
  font-size: 12px;
}


/* ==========================================================================
   11. SEO footer  (landing.html and video_list.html only)
   ========================================================================== */

.yt-footer {
  margin-top: 48px;
  padding: 40px 24px 24px;
  border-top: 1px solid var(--yt-border);
  background: var(--yt-bg);
  color: var(--yt-fg-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.yt-footer__inner {
  display: grid;
  /* minmax(min(240px,100%),1fr) is the no-overflow form: at 320px the track
     collapses to the container width instead of forcing a 240px minimum. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 32px 24px;
  max-width: 1600px;
  margin: 0 auto;
}
@media (min-width: 1040px) {
  .yt-footer__inner { grid-template-columns: 1.7fr 1fr 1.15fr 1.15fr; }
}

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

.yt-footer__title {
  margin-bottom: 12px;
  color: var(--yt-fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}

.yt-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--yt-fg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.yt-footer__blurb {
  max-width: 46ch;
  margin-bottom: 16px;
}
.yt-footer__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.yt-footer__stack .yt-badge { font-size: 11px; }

.yt-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.yt-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--yt-fg-secondary);
  transition: color var(--yt-transition);
}
.yt-footer__links a:hover,
.yt-footer__links a:focus-visible { color: var(--yt-fg); }
.yt-footer__links .yt-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  opacity: .7;
}

.yt-footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  max-width: 1600px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--yt-border);
  font-size: 12px;
}
.yt-footer__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.yt-footer__fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.yt-footer__fact .yt-icon { width: 14px; height: 14px; }

@media (max-width: 792px) {
  .yt-footer { padding: 32px 16px 24px; }
}