/* Watch later, Continue watching, History, playlists, programs and the Library (SPEC 36-39). Builds on style.css tokens.
   The red progress bar on thumbnails (.thumb-progress) is in style.css: every page with cards shows it. */

.lists-btn-sm, .list-panel .btn-sm, .program-page .btn-sm, .program-panel .btn-sm, .playlist-page .btn-sm, .program-editor .btn-sm, .save-pop .btn-sm {
  height: 32px; padding: 0 12px; font-size: 13px; gap: 6px;
}
.btn.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.eyebrow a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.eyebrow a:hover { text-decoration: underline; }

/* Visibility and draft pills: words and an icon, never colour alone */
.list-vis {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  font: 700 11.5px/1.5 var(--font); letter-spacing: 0; text-transform: none;
}
.list-vis-public { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--ok-text); }
.list-vis-draft { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--text); }
/* Light theme: --ok-text (#15803d) is under 4.5:1 on the pill's green tint (#166534: about 5.7:1) */
@media (prefers-color-scheme: light) {
  .list-vis-public { color: #166534; }
}

/* Shelves: a row of cards that scrolls sideways inside itself (Home, the Library) ---------------------------------- */

.home-shelf { margin-bottom: 30px; }
.home-shelf .section-title, .lib-section .section-title { display: flex; align-items: center; gap: 8px; }
.home-shelf .section-title .icon, .lib-section .section-title .icon { color: var(--text-2); flex: none; }
.shelf-row {
  position: relative; /* keeps the cards' .visually-hidden text from widening the page */
  display: grid; grid-auto-flow: column; grid-auto-columns: 264px; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 4px;
  margin: -4px -4px 0; padding: 4px 4px 12px; /* room for focus rings */
}
.shelf-row > * { scroll-snap-align: start; min-width: 0; }
.shelf-card .shelf-text, .playlist-card .card-text, .program-card .card-text { margin-top: 10px; min-width: 0; }
.shelf-card .card-title, .playlist-card .card-title, .program-card .card-title { font-size: 15px; }
.shelf-thumb { position: relative; }
.shelf-remove {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.72); color: #fff; cursor: pointer;
}
.shelf-remove:hover, .shelf-remove:focus-visible { background: rgba(0, 0, 0, 0.92); }
.shelf-remove:disabled { opacity: 0.5; cursor: default; }
.shelf-left { font-weight: 600; }

/* Playlist cards: the first video's thumbnail on a small pile */
.playlist-grid, .program-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.playlist-stack { position: relative; display: block; aspect-ratio: 16 / 9; margin-top: 8px; }
.playlist-stack::before, .playlist-stack::after {
  content: ""; position: absolute; height: 24px; border-radius: 10px 10px 0 0; background: var(--surface-2);
}
.playlist-stack::before { left: 10%; right: 10%; top: -8px; opacity: 0.55; }
.playlist-stack::after { left: 5%; right: 5%; top: -4px; background: var(--hover); }
.playlist-stack-img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
}
.playlist-stack-img img { width: 100%; height: 100%; object-fit: cover; }
.playlist-stack-count {
  position: absolute; z-index: 2; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.82); color: #fff; font-size: 12px; font-weight: 700;
}
.card-meta .list-vis { margin-left: 2px; }

/* Program cards */
.program-cover {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-2);
}
.program-cover img { width: 100%; height: 100%; object-fit: cover; }
.program-card-next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.program-card-next strong { color: var(--text); }
.program-meter { height: 6px; margin-top: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.program-meter > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--accent); }
.program-meter-lg { height: 8px; max-width: 460px; margin-top: 0; }

/* The Library and History pages ------------------------------------------------------------------------------- */

.lib-section { margin-bottom: 34px; }
.lib-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.lib-section-head .section-title { margin: 0; }
.lib-empty { max-width: 640px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); }
.lib-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.lib-page-head .page-title { margin-bottom: 8px; }

.history-note { margin-bottom: 20px; }
.history-day { margin-bottom: 26px; }
.history-day-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.history-list { display: grid; gap: 14px; }
.history-item { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.history-item .thumb { border-radius: 10px; }
.history-item-text { min-width: 0; padding-top: 2px; }
.history-item .card-title { font-size: 15px; }
.card-channel-inline { color: var(--text-2); }
.card-channel-inline:hover { color: var(--text); text-decoration: underline; }
.history-more { display: flex; margin: 8px auto 0; }
.history-more[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* A playlist page ------------------------------------------------------------------------------------------------ */

.playlist-page { max-width: 1100px; margin: 0 auto; }
.playlist-head { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 28px; }
.playlist-head-art .playlist-stack-img { aspect-ratio: 16 / 9; height: auto; }
.playlist-head-text { min-width: 0; }
.playlist-title {
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: 0.01em;
  margin: 4px 0 10px; overflow-wrap: anywhere;
}
.program-by-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; min-width: 0; }
.program-by { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.program-by:hover span { text-decoration: underline; }
.playlist-facts { margin-top: 8px; }
.playlist-desc { margin-top: 10px; max-width: 70ch; white-space: pre-wrap; color: var(--text-2); overflow-wrap: anywhere; }
.playlist-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.playlist-edit { margin-top: 16px; padding: 16px; max-width: 560px; border-radius: var(--radius); background: var(--surface); }
.playlist-vis-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.playlist-vis-field legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.playlist-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.playlist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.playlist-item {
  display: grid; grid-template-columns: auto 26px 168px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px; border-radius: 12px; background: var(--bg);
}
.playlist-page:not([data-mine]) .playlist-item { grid-template-columns: 26px 168px minmax(0, 1fr); }
.playlist-item:hover { background: var(--surface); }
.playlist-item .thumb { border-radius: 8px; }
.playlist-item-text { min-width: 0; }
.playlist-item .card-title { font-size: 15px; }
.playlist-n { text-align: center; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.playlist-gone .thumb-fallback { color: var(--text-2); background: var(--surface-2); }
.playlist-item-tools { display: flex; gap: 2px; }
.watched-label { display: inline-flex; align-items: center; gap: 3px; color: var(--ok-text); font-weight: 700; }
[data-sort-item].is-dragging { position: relative; z-index: 3; background: var(--surface-2); box-shadow: var(--shadow); }
.is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.drag-handle {
  display: grid; place-items: center; width: 28px; height: 44px; border-radius: 6px;
  color: var(--text-2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.drag-handle:hover { background: var(--surface-2); color: var(--text); }

/* The watch page: the Save menu ------------------------------------------------------------------------------------ */

.menu.save-menu > summary.btn { padding: 0 16px; border-radius: 999px; list-style: none; }
.menu.save-menu > summary.btn::-webkit-details-marker { display: none; }
.menu.save-menu[open] > summary.btn { background: var(--hover); }
.save-pop { left: 0; right: auto; width: 290px; padding: 10px; }
.save-pop-title { padding: 2px 6px 8px; font-weight: 700; }
.save-pop .save-option { padding: 8px 6px; border-radius: 8px; align-items: center; }
.save-pop .save-option:hover { background: var(--surface-2); }
.save-pop .save-option.is-disabled { color: var(--text-3); cursor: default; }
.save-option-text { display: flex !important; align-items: center; gap: 6px; min-width: 0; flex: 1; flex-wrap: nowrap !important; }
.save-option-text .ellipsis { min-width: 0; flex: 0 1 auto; }
.save-option-text .icon { flex: none; color: var(--text-2); }
.save-lists { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; margin: 4px 0; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.save-lists:empty { display: none; }
.menu-pop button.save-new-toggle { font-weight: 600; margin-top: 4px; }
.menu-pop button.save-more { color: var(--accent-text); font-size: 13px; font-weight: 700; }
.save-new-form { display: grid; gap: 8px; padding: 6px; }
.save-new-form input[type="text"] {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text);
}
.save-new-form input[type="text"]:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.save-new-vis select {
  width: 100%; height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); appearance: none; -webkit-appearance: none;
}
.save-new-vis .icon { right: 12px; }
.menu-pop .save-new-form button.btn {
  width: auto; justify-self: start; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px;
}
.menu-pop .save-new-form button.btn-primary { background: var(--accent); color: #fff; }
.menu-pop .save-new-form button.btn-primary:hover { background: var(--accent-hover); }

/* The watch page: the playlist and program panels (SPEC 37.5, 38.5). Wider screens: beside the player, as tall as it,
   with the list scrolling inside. Narrower: a bar under the player that opens the list. ------------------------------ */

.watch-page.has-list-panel { grid-template-areas: "player panel" "info next"; grid-template-rows: auto 1fr; }
.watch-page.has-list-panel .watch-main { display: contents; }
.watch-page.has-list-panel .player { grid-area: player; }
.watch-page.has-list-panel .watch-info { grid-area: info; min-width: 0; }
.watch-page.has-list-panel .up-next { grid-area: next; }
.watch-page.has-list-panel .list-panel { grid-area: panel; align-self: stretch; min-height: 0; contain: size; }
.watch-page.has-chat-replay.has-list-panel { grid-template-areas: "player replay" "info panel" "info next"; grid-template-rows: auto auto 1fr; }
.watch-page.has-chat-replay.has-list-panel .list-panel { contain: none; align-self: start; max-height: 560px; }

.list-panel {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.list-panel-head { display: grid; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.list-panel-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.list-panel-heading a:hover { text-decoration: underline; }
.list-panel-pos { color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-panel-toggle {
  display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px;
  padding: 0; border: 0; background: none; color: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.list-panel-toggle-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.list-panel-toggle-text .ellipsis { min-width: 0; flex: 0 1 auto; }
.list-panel-toggle-text .list-panel-pos { flex: none; }
.list-panel-toggle .icon { flex: none; transition: transform 0.15s; }
.list-panel.is-open .list-panel-toggle .icon { transform: rotate(180deg); }
.list-panel-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.list-panel-items { list-style: none; margin: 0; padding: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.list-panel-more { flex: none; margin: 0; padding: 8px 14px 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.list-panel-more a { color: var(--accent-text); }
.list-panel-more a:hover { text-decoration: underline; }
.list-panel-item { display: grid; grid-template-columns: 22px 96px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px; border-radius: 8px; }
.list-panel-item.no-thumb { grid-template-columns: 22px minmax(0, 1fr); }
.list-panel-item:hover { background: var(--surface-2); }
.list-panel-item.is-current { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.list-panel-item .thumb { border-radius: 6px; }
.list-panel-item .badge { right: 4px; bottom: 4px; padding: 1px 4px; font-size: 10.5px; }
.list-panel-n { display: grid; place-items: center; color: var(--text-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.list-panel-item.is-current .list-panel-n { color: var(--accent-text); }
.list-panel-item.is-current .list-panel-n .icon-play { fill: currentColor; }
.list-panel-item.is-done .list-panel-n { color: var(--ok-text); }
.list-panel-text { display: grid; gap: 1px; min-width: 0; }
.list-panel-title {
  font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.list-panel-title:hover { text-decoration: underline; }
.list-panel-day { font-size: 12px; font-weight: 700; color: var(--text-2); }
.list-panel-day strong { color: var(--accent-text); }
.list-panel-note { overflow-wrap: anywhere; }
.program-panel-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 32px; }
.program-day-done { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; color: var(--ok-text); }
.program-day-done .link { color: var(--accent-text); }
.program-undo { font-size: 13px; }
.up-next-list { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.up-next-list-label { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; color: var(--accent-text); font-size: 12px; font-weight: 700; }

@media (min-width: 1101px) {
  .list-panel-toggle { display: none !important; }
}
@media (max-width: 1100px) {
  .watch-page.has-list-panel { grid-template-areas: "player" "panel" "info" "next"; grid-template-rows: none; }
  .watch-page.has-chat-replay.has-list-panel { grid-template-areas: "player" "replay" "panel" "info" "next"; grid-template-rows: none; }
  .watch-page.has-list-panel .list-panel { contain: none; align-self: start; max-height: none; }
  .list-panel-heading, .list-panel-owner { display: none; }
  .list-panel-toggle { display: flex; }
  .list-panel-head { padding: 8px 14px 10px; }
  .list-panel:not(.is-open) .list-panel-items, .list-panel:not(.is-open) .list-panel-more { display: none; }
  .list-panel.is-open .list-panel-items { max-height: 55vh; max-height: 55dvh; border-top: 0; }
}
@media (max-width: 720px) {
  .watch-page.has-list-panel .list-panel { margin: 0 16px; }
}

/* A program page ------------------------------------------------------------------------------------------------- */

.program-page { max-width: 920px; }
.program-hero { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 20px; }
.program-hero-art { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--surface-2); }
.program-hero-art img, .program-hero-art .thumb-fallback { width: 100%; height: 100%; object-fit: cover; }
.program-hero-text { min-width: 0; }
.program-title {
  font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.05; text-transform: uppercase;
  letter-spacing: 0.01em; margin: 4px 0 10px; overflow-wrap: anywhere;
}
.program-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--text-2); }
.program-level { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 700; }
.program-owner-note { margin-top: 8px; }
.program-desc { margin-bottom: 22px; max-width: 75ch; white-space: pre-wrap; color: var(--text-2); overflow-wrap: anywhere; }
.program-state { display: grid; gap: 12px; margin-bottom: 24px; padding: 16px; border-radius: var(--radius); background: var(--surface); }
.program-where { font-size: 16px; }
.program-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.program-complete { display: flex; align-items: center; gap: 14px; }
.program-complete-icon {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--star) 18%, transparent); color: var(--star);
}
.program-complete-title { font-size: 20px; font-weight: 800; }
.program-days-title { margin-bottom: 12px; }
.program-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.program-day {
  display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 90px;
}
.program-day.is-next { border-color: var(--accent); background: var(--accent-soft); }
.program-day .thumb { border-radius: 8px; }
.program-day-tile { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
.program-day-text { min-width: 0; }
.program-day-line { overflow-wrap: anywhere; }
.program-day-n { font-weight: 800; }
a.program-day-title { font-weight: 600; }
a.program-day-title:hover { text-decoration: underline; }
.program-day.is-done .program-day-title { color: var(--text-2); }
.program-day-note { margin-top: 2px; overflow-wrap: anywhere; }
.program-up-next {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
}
.program-check { white-space: nowrap; }
.program-check.is-done { color: var(--ok-text); }
@media (prefers-color-scheme: light) {
  .program-check.is-done { color: #166534; } /* --ok-text is 4.2:1 on the button's --surface-2; this is 6:1 */
}
span.program-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.program-fix { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; }
.program-fix .icon { color: var(--warn); }

/* NoRep Studio > Programs: the editor ---------------------------------------------------------------------------- */

.editor-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.program-editor .panel { margin-bottom: 16px; }
.editor-error { margin-bottom: 14px; }
.editor-cover-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.editor-cover-preview { width: 200px; }
.editor-cover-controls { display: grid; gap: 6px; min-width: 0; flex: 1 1 220px; justify-items: start; }
.editor-days { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.editor-day {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.editor-day.is-rest { background: var(--bg); }
.editor-day.has-problem { border-color: color-mix(in srgb, var(--warn) 70%, transparent); }
.editor-day-main { min-width: 0; }
.editor-day-label { margin-bottom: 8px; font-size: inherit; font-weight: 800; }
.editor-day-fields { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 14px; align-items: end; }
.editor-day-fields .field label { font-size: 13px; }
.editor-day-video { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.editor-day-note { grid-column: 1 / -1; }
.editor-day-pick { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 180px; }
.editor-day-thumb { width: 96px; }
.editor-day-title { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.editor-day-tools { display: flex; flex-direction: column; gap: 2px; }
.editor-day-problem { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text); font-weight: 600; }
.editor-day-problem .icon { color: var(--warn); flex: none; }
.editor-add, .editor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.editor-actions { margin: 4px 0 22px; }
.editor-delete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.program-stats-sub { margin: 18px 0 8px; font-size: 14px; font-weight: 700; }
.picker-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.picker-dialog .dialog-body { gap: 10px; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.picker-search {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text);
}
.picker-search:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.picker-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.picker-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 8px;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.picker-item:hover, .picker-item:focus-visible { background: var(--surface-2); }
.picker-item .dash-thumb { width: 88px; }
.picker-item-text { display: grid; gap: 2px; min-width: 0; }
.picker-item-title { font-weight: 600; overflow-wrap: anywhere; }

/* Phones ----------------------------------------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .shelf-row { grid-auto-columns: minmax(200px, 78%); gap: 12px; }
  .shelf-row-playlists, .shelf-row-programs { grid-auto-columns: minmax(200px, 72%); }
  .playlist-head, .program-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .playlist-title { font-size: 28px; }
  .program-title { font-size: 30px; }
  .playlist-item {
    grid-template-columns: auto 120px minmax(0, 1fr);
    grid-template-areas: "handle thumb text" "handle tools tools";
    row-gap: 4px;
  }
  .playlist-page:not([data-mine]) .playlist-item { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "thumb text"; }
  .playlist-item .drag-handle { grid-area: handle; align-self: center; }
  .playlist-item > .thumb { grid-area: thumb; align-self: start; }
  .playlist-item-text { grid-area: text; }
  .playlist-item-tools { grid-area: tools; justify-content: flex-end; }
  .playlist-n { display: none; }
  .history-item { grid-template-columns: 140px minmax(0, 1fr) auto; gap: 10px; }
  .history-item .card-title, .playlist-item .card-title { font-size: 14px; }
  .program-day { grid-template-columns: 104px minmax(0, 1fr); }
  .program-day .program-check { grid-column: 1 / -1; justify-self: start; }
  .editor-day { grid-template-columns: auto minmax(0, 1fr); }
  .editor-day-fields { grid-template-columns: minmax(0, 1fr); }
  .editor-day-tools { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}
@media (max-width: 480px) {
  /* The Save menu becomes a sheet along the bottom of the screen, so it never runs off an edge */
  .save-pop { position: fixed; left: 12px !important; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 70vh; max-height: 70dvh; }
  /* While the sheet is open, the toast ("Saved to Watch later") shows above it, not over its lowest rows */
  body:has(.save-menu[open]) .toast { top: 12px; bottom: auto; }
  .history-item { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .playlist-item { grid-template-columns: auto 100px minmax(0, 1fr); }
  .playlist-page:not([data-mine]) .playlist-item { grid-template-columns: 100px minmax(0, 1fr); }
  .program-day { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  .editor-cover-preview { width: 150px; }
}