/* ===========================================================================
   watch.css - watch-PAGE furniture, not the player.

   Loaded ONLY on /videos/{id}, by VideoController::show(). The player itself
   and everything mounted inside it lives in player.css.

   ⚠ One watch-page rule deliberately stays in theme.css: the mask unclip
   `.watch-actions.is-scrollable:has(.pl-panel:not([hidden]))`. It sits with the
   shared scroller/fade mechanism it overrides (app.js DRAG_ROWS stamps
   .is-scrollable), and its comment generalises the rule to any future scroller
   with a popover child - separating the exception from the rule it documents
   would lose that.
   =========================================================================== */

/* Scrollable action row. The bar hiding is the shared .scrollbar-none class in
   the markup; overflow stays CSS-side on purpose — the Bootstrap utility is
   !important, which the :has() unclip below (not !important) could not beat. */
.watch-actions {
    overflow-x: auto;
}

/* When the playlist dropdown is open, drop the scroll clipping so the panel
   (which opens downward) isn't cut off by overflow-x's implied overflow-y. */
.watch-actions:has(.pl-panel:not([hidden])) {
    overflow: visible;
}

/* ---------------------------------------------------------------------------
   Playlists — watch-page add-to-playlist menu
   --------------------------------------------------------------------------- */
/* Anchored dropdown panel (custom, not a Bootstrap dropdown: it hosts live
   checkboxes + a create form, and must not close on inside clicks). Surface
   cosmetics are utilities in the markup. */
.pl-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 40;
    width: 260px;
    /* Never let the panel exceed the viewport on narrow phones (it's anchored
       to a mid-row button, so a fixed 260px could spill past the edge). */
    max-width: calc(100vw - 24px);
}

/* Fixed-px scroll cap on the playlist list. */
.pl-list {
    max-height: 220px;
}

/* Dropdown-row affordance + hover for the custom add-to-playlist panel; kept
   whole (rather than utilities) because watch.js builds rows with this same
   class ('form-check pl-item'); form-check owns the checkbox layout inside. */
.pl-item {
    padding: 4px 8px;
    border-radius: var(--bs-border-radius-sm);
}

.pl-item:hover {
    background: var(--card);
}