/* Styles for the Explore YouTube tab only. Uses FamTiVi tokens from famtivi.css. */
.ex-source-form { display: grid; gap: 12px; }
.ex-source-side { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.ex-source-side .field { flex: 0 1 200px; }
.ex-detected { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ex-type-search { background: var(--blue-soft); } .ex-type-channel { background: var(--green-soft); }
.ex-type-playlist { background: var(--yellow-soft); } .ex-type-unavailable { background: var(--red-soft); }
.ex-sources { list-style: none; margin: 12px 0 0; padding: 0; }
.ex-sources li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.ex-sources li.ex-drop { box-shadow: inset 0 2px 0 var(--brand); }
.ex-src-grip { width: 18px; height: 28px; cursor: grab; border-radius: 4px; opacity: .9;
  background: radial-gradient(circle, #b9c2c9 1.2px, transparent 1.7px) 0 0 / 6px 8px; }
.ex-src-grip:hover { background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.7px); }
.ex-src-grip:active { cursor: grabbing; }
.ex-src-actions { display: inline-flex; gap: 6px; }
.ex-src-actions .icon-button { width: 33px; height: 33px; min-width: 33px; min-height: 33px; }
.ex-source-value { overflow-wrap: anywhere; font-size: .9rem; }
.ex-source-title { font-weight: 700; }
.ex-source-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ex-error { color: var(--red); font-weight: 600; }
.ex-fetch-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px; }
.ex-bar { display: block; height: 6px; background: var(--brand-soft); border-radius: 3px; overflow: hidden; }
.ex-bar i { display: block; height: 100%; background: var(--brand); }

.ex-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 14px; }
.ex-filter-extras { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
.ex-channels summary { cursor: pointer; margin: 4px 0; }
.ex-chan-list { max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; display: grid; gap: 2px; }
.ex-chan-list .check-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ex-chan-name { display: grid; gap: 2px; font-size: .88rem; }

.ex-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 8px; }
.ex-stats-note { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.ex-note-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }   /* Hide Shorts, then Show / Hide stats, at the right end of the row */
.ex-stats-note .switch { color: var(--ink); }
.ex-stat b { display: block; font-size: 1.1rem; } .ex-stat span { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ex-hist { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.ex-hist i { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; }
.ex-hist-axis { display: flex; justify-content: space-between; }
.ex-toolbar { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ex-top-group { display: contents; }
.ex-stats-toggle, .ex-reset-mob { display: none; }
@media (max-width: 767px) {
  .ex-top-group, .ex-reset-desk { display: none; }
  .ex-reset-mob { display: inline; }
  .ex-stats-toggle { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
  .ex-stats-folded .ex-stat { display: none; }
  .ex-stats { margin: 0; gap: 4px 24px; }
  .ex-wb .ex-toolbar { margin-top: -4px; padding-top: 0; }
  .ex-wb .ex-stats-note { margin-top: -4px; font-size: .72rem; gap: 4px 4px; }
  .ex-stats-note .switch { font-size: .72rem; gap: 6px; }   /* small enough for "Showing x of y · Show stats" and the switch to share a row from about 360px up */
  .ex-tool-group { gap: 4px 22px; flex-wrap: wrap; } .ex-tool-group .ex-link { white-space: nowrap; font-size: .8rem; padding-inline: 0; }
}
.ex-sort-mob { display: none; }
.ex-topn { width: 76px; } .ex-topby { width: auto; }

.ex-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 8px; }
.ex-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.ex-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); text-align: left; padding: 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.ex-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.ex-table td.ex-vidcell { white-space: normal; }
.ex-table td.ex-pick { text-align: right; vertical-align: bottom; padding-bottom: 10px; }   /* Workbench results: the tick box sits at the row's bottom right */
.ex-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ex-table tr.sel { background: var(--brand-soft); }
.ex-table input[type=checkbox] { width: 20px; height: 20px; }
.ex-sort { all: unset; cursor: pointer; font-weight: 700; } .ex-sort:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ex-vid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 300px; }
.ex-vid img { width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; display: block; }
.ex-vid > div:last-child { min-width: 0; }
.ex-vid-title, .ex-vid .muted { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The title may run right up to the Published column (5pt gap), over two lines, then ends in "…" */
.ex-table td.ex-vidcell { padding-right: 5pt; }
.ex-vid-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ex-vid .muted { font-weight: 400; }
.ex-vid .badge { margin-left: 6px; }

.ex-send { display: grid; gap: 12px; justify-items: start; }
.ex-send-field { width: 100%; max-width: 560px; }
.ex-send-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
@media (max-width: 700px) { .ex-source-form { grid-template-columns: 1fr; } }

/* Sidebar: Explore + "On YouTube" / "In the Works" playlist sections (reuses .parent-nav / .nav-item). */
.parent-nav.ex-side { display: flex; flex-direction: column; align-items: stretch; gap: 3px; position: static; padding: 14px 12px; max-height: 60vh; overflow-y: auto; }
.ex-side-item { justify-content: flex-start; min-width: 0; min-height: 44px; font-size: .88rem; text-align: left; }
.ex-side-wb:not(.active) { border: 1px solid var(--line); }
.ex-side-item .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ex-side-item .ex-mark { flex: none; display: block; }   /* the small YouTube / PlaylistMaker marks in front of a list */
.ex-side-count { font-size: .72rem; font-weight: 700; opacity: .75; }
.ex-side-title { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-side-add { width: 32px; height: 32px; min-height: 32px; }
/* Row buttons (up / down / remove): 75% of the 44px default, with room between them */
.ex-row-actions .icon-button { width: 33px; height: 33px; min-width: 33px; min-height: 33px; margin-left: 8px; }
.ex-row-actions .icon-button:first-child { margin-left: 0; }
.ex-side-empty { margin: 4px 6px; }
@media (min-width: 1100px) { .parent-nav.ex-side { position: sticky; top: 0; align-self: start; height: 100vh; max-height: none; padding: 26px 15px; } }
.ex-selall-text { display: none; }   /* phones only, see below */
.ex-wb-pl { display: none; }
.ex-menu-bar, .ex-menu-btn { display: none; }   /* the bar is for tablets and the button for phones, see below */
/* Tablet: the menu runs across the top in columns a quarter of the screen wide. The first column never changes (Workbench, On YouTube,
   PlaylistMaker, connection status, API Quota); the open section's playlists fill the columns to its right, and more columns scroll sideways. */
@media (min-width: 768px) and (max-width: 1099px) {
  .parent-nav.ex-side { flex-wrap: wrap; align-content: flex-start; column-gap: 14px; height: clamp(300px, 40vh, 420px); max-height: none; overflow-x: auto; overflow-y: hidden; }
  .parent-nav.ex-side > * { order: 2; width: calc((100% - 56px) / 4); margin: 0 0 3px; }   /* 56px = 3 column gaps + 1 more beside the first column */
  .parent-nav.ex-side > .ex-side-wb, .parent-nav.ex-side > .ex-side-toggle, .parent-nav.ex-side > .ex-side-foot, .parent-nav.ex-side > .ex-side-note { order: 1; }
  .parent-nav.ex-side > .promo-side { order: 3; }
  .parent-nav.ex-side::after { content: ""; order: 1; flex: none; width: 0; height: 9999px; }   /* forces the playlists into the next column */
  .parent-nav.ex-side > .ex-side-pill { width: auto; margin: 2px 0 4px 12px; }
  .ex-menu-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; background: rgba(255,255,255,0.76); border-bottom: 1px solid var(--line); }
  .ex-menu-label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .parent-nav.ex-side.ex-side-collapsed { display: none; }
  .parent-nav.ex-side .ex-side-summary { display: none; }
  /* the choices open to the right, so the selected section's arrow points right; the others point down */
  .parent-nav.ex-side .ex-side-toggle .ex-chev svg { transform: rotate(90deg); }
  .parent-nav.ex-side .ex-side-toggle[data-open] .ex-chev svg { transform: rotate(0deg); }
  .parent-nav.ex-side > .ex-side-toggle[data-open] { background: var(--brand-soft); color: var(--ink); }
}
.ex-pl-title { margin: 0 0 8px; }
.ex-row-actions { white-space: nowrap; text-align: right; }

/* Collapsible "On YouTube" header */
.ex-side-toggle { width: 100%; gap: 6px; min-height: 32px; border-radius: 8px; font-family: inherit; }
.ex-side-toggle:hover { background: var(--brand-soft); }
.ex-side-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
/* the small round icon button at the right of an open section's header (Refresh, New list) */
.ex-side-act { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--brand); border-radius: 50%; background: none; color: var(--brand); cursor: pointer; }
.ex-side-act:hover:not(:disabled) { background: var(--brand-soft); }
.ex-side-act:disabled { opacity: .6; cursor: default; }
.ex-side-act.ex-spin svg { animation: ex-spin 1s linear infinite; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
.ex-side-grow { flex: 1; }
.ex-chev svg { transition: transform .15s; }
.ex-side-toggle[data-open] .ex-chev svg { transform: rotate(90deg); }
.ex-side-summary { font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* Channels / playlists found by keyword (inline under the search box), and the "add to pool" row under the results */
.ex-cands { max-height: 440px; overflow-y: auto; }
.ex-find-list li.ex-cand-on { background: color-mix(in srgb, var(--brand) 8%, transparent); }
/* Compact (half-height) buttons: the Explore pair with "Add all to pool" under it, all the same height */
.ex-cand-actions { display: grid; gap: 6px; justify-items: stretch; }
.ex-cand-actions .button { min-height: 25px; padding-top: 0; padding-bottom: 0; font-size: .8rem; line-height: 1; }
.ex-cand-actions .ex-btn-group { display: flex; }
.ex-cand-actions .ex-btn-group > .button { flex: 1 1 0; }
.ex-cand-add { border-radius: 999px; }
.ex-more { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ex-pool-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 767px) { .ex-pool-add .ex-btn-group { display: flex; flex: 1 1 100%; } }
.ex-find-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.ex-find-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ex-find-thumb { width: 96px; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 6px; display: block; }
.ex-find-ph { background: repeating-linear-gradient(45deg, #0000000d 0 8px, #00000017 8px 16px); }
.ex-find-more { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.ex-find-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* API Quota page */
.ex-side-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.qt-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; font-size: .88rem; background: #fff6df; border: 1px solid #f0d58b; color: #7a5a06; }
.qt-banner.hot { background: var(--red-soft); border-color: #f3c4c8; color: #a52832; }
.qt-banner span { flex: 1 1 320px; }
.qt-banner .ex-link { color: inherit; }
.qt-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 32px; }
.qt-meter-block { display: grid; gap: 6px; align-content: start; }
.qt-big { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.qt-meter { height: 12px; border-radius: 6px; }
.qt-meter.warm i { background: #d99a1c; } .qt-meter.hot i { background: var(--red); }
.qt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.qt-table { font-size: .86rem; }
.qt-table code { font-size: .82rem; }
.qt-table .badge { margin-left: 6px; }
.qt-share { width: 28%; min-width: 70px; }
.qt-hist { height: 72px; }
.qt-axis { display: flex; justify-content: space-between; }
.qt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.qt-day { display: grid; gap: 2px; justify-items: center; text-align: center; }
.qt-day .ex-hist { width: 100%; justify-content: center; }
.qt-day .ex-hist i { max-width: 36px; }

/* Workbench heading: large bold name, small gray description on the same line */
.ex-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; }
.ex-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.ex-reset-wb { margin-left: auto; }
.ex-reset-full { margin-left: .3em; }
.ex-intro h2 { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }

/* Playlist title with an edit icon to its left; Delete Playlist pushed to the right edge */
.ex-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ex-title-row .ex-pl-title { margin: 0; overflow-wrap: anywhere; flex: 1; min-width: 0; }
/* Status line under the title; the title takes the full width and wraps onto as many lines as it needs */
.ex-pl-head { flex-direction: column; align-items: stretch; gap: 2px; }
.ex-pl-head .ex-title-row { flex: none; align-items: flex-start; }
.ex-pl-head .ex-title-input { flex: 1; min-width: 0; }
.ex-pl-head { position: relative; }
.ex-pl-head .ex-title-row { padding-right: 52px; }   /* room for the icon at the top right */
.ex-pl-brand { position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ex-pl-brand img, .ex-pl-brand svg { display: block; }
.ex-pl-status { padding-left: 43px; }
/* A YouTube playlist has no edit icon, so its status lines up with the title's left edge and sits closer to it */
.ex-pl-status.ex-pl-status-yt { padding-left: 0; margin-top: -6px; }
.ex-title-edit { width: 33px; height: 33px; min-width: 33px; min-height: 33px; flex: 0 0 33px; }
.ex-title-input { font-size: 1.2rem; font-weight: 700; }
.ex-fetch-note { margin: 4px 0 0; }
.ex-fetch-note + .ex-fetch-row { margin-top: 4px; }
.ex-fetch-row .ex-push-right { margin-left: auto; }
/* Segmented button group: related buttons joined in one pill, divided by thin lines (used for the playlist options) */
.ex-btn-group { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.ex-btn-group > .button { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.ex-btn-group > .button + .button { border-left: 1px solid var(--line-strong); }
.ex-btn-group > .button:focus-visible { outline-offset: -4px; }   /* the group clips anything outside it */

/* ===== Workbench: a quieter look (scoped to .ex-wb, so playlist pages keep the standard styling) ===== */
.ex-wb .content-review-section { box-shadow: none; border-radius: 14px; padding: 18px 20px; gap: 14px; }
.ex-wb .curated-section-heading h3 { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ex-wb .input, .ex-wb .select { min-height: 38px; font-size: .9rem; border-radius: 10px; }

/* Segmented control (radios underneath) */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; }
.seg-opt { padding: 5px 14px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.seg-opt:hover { color: var(--ink); }
.seg-opt:has(input:checked) { background: #fff; color: var(--brand-deep); box-shadow: 0 1px 2px rgba(10, 40, 50, .14), 0 0 0 1px var(--line); }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.seg-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.ex-opts .seg-opt { padding: 3px 10px; font-size: .78rem; }

/* Sources: type + options on one row, then one input row, then a one-line hint */
.ex-opts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ex-opts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ex-opt-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ex-opt-pair { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ex-add-row { display: flex; gap: 8px; }
@media (max-width: 767px) {
  .ex-add-row.ex-add-wrap { flex-wrap: wrap; } .ex-add-row.ex-add-wrap .input { flex: 1 1 100%; }
  .ex-add-row.ex-add-wrap .button { flex: 1 1 0; justify-content: center; }   /* ID or link: the two buttons share their own row under the box */
  .ex-opts-row, .ex-opts { gap: 8px 6px; } .ex-opts .seg-opt { padding: 3px 7px; } .ex-opts .seg { gap: 0; }
  .ex-opt-pair { flex-wrap: wrap; max-width: 100%; } .ex-opts .seg { max-width: 100%; flex-wrap: wrap; }
  .ex-opts-row > .seg { max-width: 100%; } .ex-opts-row > .seg .seg-opt { padding: 4px 8px; font-size: .8rem; }
}
.ex-add-row .input { flex: 1; min-width: 0; }
.ex-hint { margin: -6px 0 0; font-size: .78rem; color: var(--muted); }

/* Filters: search + one chip + one switch up front, the rest one click away */
.ex-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ex-search { flex: 1 1 240px; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.ex-chip:hover { border-color: var(--brand); }
.ex-chip .ex-chev svg { transition: transform .15s; display: block; }
.ex-chip[aria-expanded="true"] .ex-chev svg { transform: rotate(90deg); }
.ex-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem; line-height: 18px; text-align: center; }
.ex-link { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--brand-deep); cursor: pointer; border-radius: 6px; }
.ex-link:hover { text-decoration: underline; }
.ex-adv { display: grid; gap: 10px; padding: 12px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; }
.ex-adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.ex-mini { display: grid; gap: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ex-wb .ex-channels summary { font-size: .84rem; }
.ex-mini .input, .ex-mini .select { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }

/* Toggle switch (checkbox underneath) */
.switch { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; font-size: .84rem; font-weight: 600; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #c5d3d6; transition: background .18s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s; }
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Selection toolbar and stats, flattened */
.ex-wb .ex-toolbar { background: none; border: 0; border-radius: 0; padding: 0; margin-top: -6px; justify-content: flex-start; gap: 10px 14px; }   /* no rule above it: it belongs to the table below */
.ex-tool-group { display: inline-flex; gap: 2px 22px; margin-right: auto; }
.ex-wb .ex-topn { width: 64px; }
.ex-wb .ex-hist { height: 36px; }
.ex-wb .ex-hist i { opacity: .55; }
.ex-wb .ex-stat b { font-size: 1rem; }

/* Edit mode bar and import summary */
.ex-edit-bar { display: flex; align-items: center; gap: 12px; }
.ex-summary { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.ex-summary-list { margin: 0; padding-left: 22px; display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }

/* Drag a playlist row by its number */
.ex-table td.ex-grip { position: relative; cursor: grab; user-select: none; padding-left: 38px; white-space: nowrap; font-weight: 800; }
/* 4 columns of light gray dots, inset top and bottom so adjacent rows don't run together */
.ex-grip::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 24px;
  background: radial-gradient(circle, #c3c9d0 1.2px, transparent 1.7px) 0 0 / 6px 8px; }
.ex-grip:hover { color: var(--brand); background-color: var(--brand-soft); }
.ex-grip:hover::before { background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.7px); }
.ex-grip:active { cursor: grabbing; }
.ex-table tr.ex-drop td { box-shadow: inset 0 2px 0 var(--brand); }

/* FamTiVi cross-promotion (famtivi-promo.js): a card at the end of the publish/update dialogs, and a dismissible one in the sidebar */
.promo-card { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-soft); }
.promo-card strong { font-size: .95rem; }
.promo-card p { margin: 4px 0 0; color: var(--muted); }
.promo-done { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-top: 14px; border-left: 4px solid var(--yellow); }
a.button { text-decoration: none; }
.promo-side { position: relative; display: grid; gap: 6px; margin: 18px 0 0; padding: 12px 34px 12px 12px; border-left: 4px solid var(--yellow); font-size: .8rem; }
.promo-side .ex-side-pill { margin: 2px 0 0; justify-self: start; text-decoration: none; }
.promo-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 6px; padding: 2px 6px; }
.promo-x:hover { background: var(--brand-soft); color: var(--ink); }

/* The PlaylistMaker icon is already a rounded square: show it by itself, not inside FamTiVi's tinted circle behind the logo. */
.topbar-brand .brand-mark { background: transparent; border-radius: 0; width: auto; height: auto; }
.topbar-brand .brand-mark img { width: 42px; height: 42px; display: block; }

/* Sidebar note shown when the YouTube features are off */
.ex-side-note { display: grid; gap: 6px; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #fff6df; border: 1px solid #f0d58b; color: #7a5a06; font-size: .8rem; }
.ex-side-note a.ex-side-pill { margin: 2px 0 0; justify-self: start; text-decoration: none; }

/* Small capsule under a section header (Refresh / New List) */
.ex-side-pill { align-self: flex-start; margin: 2px 0 4px 22px; padding: 3px 12px; border: 1px solid var(--brand); border-radius: 999px; background: none; color: var(--brand); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ex-side-pill:hover:not(:disabled) { background: var(--brand-soft); }
.ex-side-pill:disabled { opacity: .6; cursor: default; }

/* Clickable thumbnail + player dialog */
.ex-thumb { position: relative; display: block; padding: 0; border: 0; background: #000; border-radius: 6px; cursor: pointer; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; }
.ex-thumb:disabled { cursor: not-allowed; opacity: .5; }
/* YouTube thumbnails (developers.google.com/youtube/data/reference/rest/v3/thumbnails): 16:9 "medium" (320x180) normally, 4:3 as a fallback; shown whole (contain), never cropped or stretched. */
.ex-vid .ex-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.ex-thumb-ph { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #0000000d 0 8px, #00000017 8px 16px); }
.ex-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .12s; }
.ex-thumb:hover .ex-thumb-play, .ex-thumb:focus-visible .ex-thumb-play { opacity: 1; }
.ex-thumb:disabled .ex-thumb-play { display: none; }
.ex-player-dialog.modal-wide { max-width: 900px; }
.ex-player { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 10px; overflow: hidden; }
.ex-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Source type radios */
.ex-kind { border: 0; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.ex-kind legend { font-weight: 700; padding: 0; margin-bottom: 6px; float: left; width: 100%; }

/* Phones: sidebar items back to one row each, a shorter sidebar, full-width save button, narrower dialogs */
@media (max-width: 767px) {
  .content-workspace > *, .ex-wb > * { min-width: 0; }
  /* Title and Reset on one line; the description under both */
  .ex-intro { align-items: center; }
  .ex-intro h2 { order: 0; } .ex-reset-wb { order: 1; } .ex-intro > .muted { order: 2; flex: 1 0 100%; }
  .ex-reset-full { display: none; }
  .parent-main { padding-inline: 10px; }
  .ex-wb .content-review-section { padding: 16px 12px; }
  .parent-nav.ex-side { max-height: 36vh; padding: 8px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; column-gap: 8px; row-gap: 3px; }
  .parent-nav.ex-side > * { width: 100%; }
  .parent-nav.ex-side > .ex-side-pill { width: auto; }
  /* Workbench and the Hide/Show button share the first row; the button is a square as tall as the Workbench link */
  .parent-nav.ex-side > .ex-side-wb { width: calc(100% - 52px); }
  /* Menu folded while on the Workbench: the row would only link to where you already are, so it says what Show reveals instead */
  .parent-nav.ex-side-collapsed > .ex-side-wb.active .ex-wb-lab { display: none; }
  .parent-nav.ex-side-collapsed > .ex-side-wb.active .ex-wb-pl { display: inline; }
  .ex-menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 44px !important; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--ink); font: inherit; font-size: .6rem; font-weight: 700; cursor: pointer; }
  .ex-menu-btn:hover { background: var(--brand-soft); }
  .parent-nav.ex-side.ex-side-collapsed > :not(.ex-side-wb):not(.ex-menu-btn) { display: none; }
  .nav-item.ex-side-item { flex-direction: row; flex: none; gap: 8px; padding: 0 12px; font-size: .88rem; }
  .ex-side-item .nav-label { max-width: none; text-align: left; }
  .ex-send-foot { flex-direction: column; align-items: stretch; }
  .ex-send-foot .button { width: 100%; }
  .ex-table-wrap { max-height: 60vh; }
  /* Each video is a two-row card: checkbox/number, thumbnail and title on top, the numbers (with their labels) underneath */
  .ex-sort-mob { display: flex; align-items: center; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ex-sort-mob::-webkit-scrollbar { display: none; }
  .ex-sort-chip { flex: none; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .ex-sort-chip.on { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
  .ex-sort-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .ex-cards [data-l="Published"], .ex-cards [data-l="Like %"] { display: none; }
  .ex-table-wrap { overflow-x: hidden; }
  .ex-cards, .ex-cards tbody { display: block; }
  .ex-cards thead { display: block; } .ex-cards thead:not(:has(input)) { display: none; }
  .ex-cards .ex-st-from { display: none; }
  .ex-wb .ex-cards .ex-vid-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .ex-cards thead tr { display: flex; } .ex-cards thead th { display: none; } .ex-cards thead th:has(input) { display: block; position: static; border: 0; }
  .ex-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); }
  .ex-cards tr::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .ex-cards td { padding: 0; border: 0; white-space: normal; order: 0; }
  .ex-cards .ex-vidcell { order: 1; flex: 1 1 0; min-width: 0; }
  /* Edit mode: number with its checkbox underneath on the left, the video in the middle, up / down stacked at the right end of the
     thumbnail row; Length and Views on a row below, lined up with the thumbnail */
  .ex-cards .ex-row-actions { flex: none; display: flex; flex-direction: column; gap: 4px; }
  .ex-cards .ex-row-actions .icon-button { margin: 0; }
  .ex-cards tr:has(.ex-row-actions) { display: grid; grid-template-columns: 24px minmax(0, 1fr) 33px; column-gap: 8px; row-gap: 4px; align-items: center; }
  .ex-cards tr:has(.ex-row-actions)::after { display: none; }
  .ex-cards tr:has(.ex-row-actions) .ex-grip { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; }
  .ex-cards tr:has(.ex-row-actions) td:has(> input[type=checkbox]) { grid-column: 1; grid-row: 2; align-self: start; justify-self: center; }
  .ex-cards tr:has(.ex-row-actions) .ex-vidcell { grid-column: 2; grid-row: 1 / span 2; }
  .ex-cards tr:has(.ex-row-actions) .ex-row-actions { grid-column: 3; grid-row: 1 / span 2; }
  .ex-cards tr:has(.ex-row-actions) [data-l="Length"] { grid-column: 2; grid-row: 3; justify-self: start; }
  .ex-cards tr:has(.ex-row-actions) [data-l="Views"] { grid-column: 2 / span 2; grid-row: 3; justify-self: end; }
  /* Playlist view: the list of videos runs edge to edge inside its card (the card's own padding is 18px) */
  .ex-pl-vids { margin: 8px -18px -18px; border-width: 1px 0 0; border-radius: 0 0 var(--radius) var(--radius); }
  .ex-pl-vids .ex-cards tr { padding-left: 8px; padding-right: 8px; }
  /* "Select all": its checkbox lines up with the row checkboxes below (centred in the same 24px column), the text starts where the thumbnails do */
  .ex-pl-vids .ex-cards thead th:has(input) { padding: 0; }
  .ex-selall { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .8rem; font-weight: 700; }
  .ex-selall input { margin: 0 4px 0 6px; }
  .ex-selall-text { display: inline; }
  .ex-cards tr:has(.ex-row-actions) .ex-vid-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }   /* the title is narrower here, so give it two lines */
  .ex-cards td.ex-grip { padding-left: 0; }
  .ex-cards .ex-grip::before { display: none; }   /* the dots are invisible at this size, and only took up room before the number */
  .ex-cards .ex-st { order: 2; font-size: .8rem; text-align: left; white-space: nowrap; }
  .ex-cards .ex-st[data-l]::before { content: attr(data-l) " "; color: var(--muted); }
  .ex-cards .ex-st-from:empty { display: none; }
  .ex-vid { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; min-width: 0; }
  .ex-vid .ex-thumb, .ex-vid img { width: 104px; }
  .ex-cards input[type=checkbox] { width: 14px; height: 14px; }
  .ex-cards td.ex-pick { order: 3; margin-left: auto; padding: 0; }
  .ex-cards td.ex-pick input[type=checkbox] { width: 18px; height: 18px; display: block; }
  .ex-find-list li { grid-template-columns: 72px minmax(0, 1fr); }
  .ex-find-list li > :last-child { grid-column: 1 / -1; }
  .ex-find-thumb { width: 72px; }
  .ex-find-dialog .modal-body { max-height: calc(100vh - 160px); }
}

/* Connection status in the sidebar (green = signed in with Google) and its explanation dialog */
.ex-conn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; background: none; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; text-align: left; cursor: pointer; border-radius: 8px; }
.ex-conn:hover { background: var(--brand-soft); }
.ex-conn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* The connection status and the ? (Help) share a row */
.ex-conn-row { display: flex; align-items: center; gap: 6px; }
.ex-conn-row .ex-conn { flex: 1; width: auto; min-width: 0; }
.ex-help { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--brand-deep); text-decoration: none; }
.ex-help:hover { background: var(--brand-soft); }
.ex-help:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ex-settings { display: grid; gap: 8px; max-width: 520px; }
.ex-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.ex-dot.on { background: #1f9d55; box-shadow: 0 0 0 3px #1f9d5530; } .ex-dot.off { background: #d93a45; box-shadow: 0 0 0 3px #d93a4530; }
.ex-conn-body h4 { margin: 14px 0 4px; font-size: .9rem; } .ex-conn-body h4:first-child { margin-top: 0; }
.ex-conn-body ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }

/* Phones: drag dots | description with the video count (no check mark) right under it | on the right, the type tag above the buttons */
@media (max-width: 767px) {
  .ex-sources li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 10px 0; }
  .ex-sources li > :nth-child(1) { grid-row: 1 / 3; grid-column: 1; align-self: center; }
  .ex-sources li > :nth-child(3) { grid-row: 1; grid-column: 2; }
  .ex-sources li > :nth-child(4) { grid-row: 2; grid-column: 2; align-self: start; text-align: left; margin-top: -4px; }
  /* the tag and the buttons share the right-hand cell, the buttons just below the tag */
  .ex-sources li > :nth-child(2) { grid-row: 1 / 3; grid-column: 3; justify-self: end; align-self: start; }
  .ex-sources li > :nth-child(5) { grid-row: 1 / 3; grid-column: 3; justify-self: end; align-self: start; margin-top: 30px; }
  .ex-check { display: none; }
}

/* Playlist page buttons: a "Playlist options" heading and short names on phones */
.ex-pl-opts-head, .ex-lab-s { display: none; }
.ex-del-compact { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #f3c4c8; border-radius: 10px; background: var(--red-soft); color: #a52832; cursor: pointer; }
.ex-del-compact:hover:not(:disabled) { background: #ffd8db; border-color: #e5999f; color: #8c1e27; }
.ex-del-compact:disabled { opacity: .6; cursor: default; }
@media (max-width: 1099px) {
  .ex-pl-opts-head { display: flex; align-items: center; justify-content: space-between; flex: 1 0 100%; margin-top: 6px; }
  .ex-del-full { display: none; }
}
@media (max-width: 767px) {
  .ex-lab-f { display: none; } .ex-lab-s { display: inline; }
  /* each group takes a full row, its buttons share it equally */
  .ex-fetch-row { gap: 10px; }
  .ex-fetch-row > .ex-btn-group { display: flex; flex: 1 0 100%; }
  .ex-btn-group > .button { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; }
}