/* Storyraise Video list, v2 (video list UX round 1, L6 to L16). Logic in js/video-list.js.
   Every rule that changes the list is scoped under [data-vl2], which index.html sets only
   when video_list_v2 is on (o/{slug}.has_feature.video_editor_depth, the composer's switch).
   With the flag off, nothing here applies except the hidden short tab labels.
   The dashboard is dark-only, so these use its fixed palette, like video-team.css. */

/* the short phone tab labels exist in the markup for everyone; only v2 shows them */
.vt-views .vl2-short { display: none; }

/* L14: the composer's button tokens (css/video-tokens.css), here only for the Videos views.
   The composer sheet itself is not loaded: it turns every .btn-primary teal page-wide. */
#dashboard [data-dashboard-main]:has([data-vl2]) {
  --sr-btn-primary: #0f766e;
  --sr-btn-primary-hover: #115e59;
  --sr-btn-primary-content: #ffffff;
  --sr-btn-secondary: #3a4f60;
  --sr-btn-secondary-hover: #46607a;
  --sr-btn-secondary-content: #ffffff;
  --vl2-card: #222a34;
  --vl2-card-hi: #26303b;
  --vl2-line: rgba(255, 255, 255, 0.1);
  --vl2-muted: rgba(255, 255, 255, 0.7);
  --vl2-focus: #7dd3fc;
}
#dashboard .btn.vl2-new {
  background: var(--sr-btn-primary, #0f766e); border-color: var(--sr-btn-primary, #0f766e); color: var(--sr-btn-primary-content, #fff) !important;
  gap: 0.3rem; padding: 0 0.85rem 0 0.6rem !important; font-weight: 700; text-transform: none;
}
#dashboard .btn.vl2-new:hover { background: var(--sr-btn-primary-hover, #115e59); border-color: var(--sr-btn-primary-hover, #115e59); }
#dashboard .btn.vl2-new .material-symbols-outlined { font-size: 1.25rem; }
/* R3 M10: New video is the page's one primary on every tab; Campaigns' Add campaign steps down instead (below) */
/* Team's Refresh, Results' and Nudge's quiet buttons: the secondary slate, never a second teal */
#dashboard [data-dashboard-main]:has([data-vl2]) :is([data-vt-team], [data-vt-teammate], [data-vt-campaigns], [data-vt-detail]) .btn.btn-ghost:not(.btn-square) {
  background: var(--sr-btn-secondary); border-color: var(--sr-btn-secondary); color: var(--sr-btn-secondary-content) !important;
}
#dashboard [data-dashboard-main]:has([data-vl2]) :is([data-vt-team], [data-vt-teammate], [data-vt-campaigns], [data-vt-detail]) .btn.btn-ghost:not(.btn-square):hover { background: var(--sr-btn-secondary-hover); }

/* ---------- the header (L3 for v2, L10, L13) ---------- */
#dashboard .vl2-head { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; margin-left: 1rem; }
#dashboard .vl2-head .vl2-search { flex: 1 1 14rem; min-width: 10rem; max-width: 22rem; width: auto; }
#dashboard .vl2-head :is(.vl2-search, .vl2-select) {
  background: rgba(53, 79, 102, 0.27) !important; border: 0.15rem solid rgba(var(--buiilderFrontRGB)) !important; color: #fff;
}
#dashboard .vl2-head .vl2-select { width: auto; flex: 0 1 auto; min-width: 0; max-width: 13rem; }
#dashboard .vl2-head .vl2-select:disabled { opacity: 0.6; }
#dashboard .vl2-head .vl2-filter-btn { display: none; position: relative; }
#dashboard .vl2-head .vl2-new { flex: none; }
/* search and filters only sort the video grid, so they show only there (every width) */
#dashboard .vl2-head:not([data-vt-grid]) > :is(input, select, .vl2-filter-btn) { display: none !important; }
/* no videos yet: the empty state carries the one New video, and there is nothing to filter */
#dashboard .vl2-head[data-vl2-empty][data-vt-grid] { display: none !important; }
.vl2-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 2px #1d232a; }

/* ---------- the poster grid (L12) ---------- */
#dashboard [data-vl2] .vl2-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
#dashboard [data-vl2] .vl2-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--vl2-card); border-radius: 12px; color: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
#dashboard [data-vl2] .vl2-card:hover, #dashboard [data-vl2] .vl2-card:focus-within {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24); transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { #dashboard [data-vl2] .vl2-card { transition: none; } #dashboard [data-vl2] .vl2-card:hover { transform: none; } }
#dashboard [data-vl2] .vl2-card[data-menu-open] { z-index: 5; }
#dashboard [data-vl2] .vl2-poster {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px 12px 0 0; overflow: hidden;
  background: #2a3644 no-repeat center center / cover;
}
#dashboard [data-vl2] .vl2-poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#dashboard [data-vl2] .vl2-poster::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); pointer-events: none; }
#dashboard [data-vl2] .vl2-poster-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; font-weight: 600; }
#dashboard [data-vl2] .vl2-poster-empty .material-symbols-outlined { font-size: 1.75rem; font-weight: 300; }
#dashboard [data-vl2] .vl2-chip {
  position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 1; height: 20px; padding: 0 0.5rem; border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: #334155; color: #e2e8f0;
}
#dashboard [data-vl2] .vl2-chip[data-vl2-chip="not-recorded"] { background: #334155; color: #e2e8f0; }
#dashboard [data-vl2] .vl2-chip[data-vl2-chip="ready-to-send"] { background: #134e4a; color: #ccfbf1; }
#dashboard [data-vl2] .vl2-chip[data-vl2-chip="sent"] { background: #2e1065; color: #ddd6fe; }
#dashboard [data-vl2] .vl2-chip[data-vl2-chip="watched"] { background: #14532d; color: #bbf7d0; }
#dashboard [data-vl2] .vl2-chip[data-vl2-chip="review"] { background: #78350f; color: #fde68a; }
#dashboard [data-vl2] .vl2-assignee { position: absolute; top: 3rem; right: 0.6rem; z-index: 1; }

#dashboard [data-vl2] .vl2-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.2rem; padding: 12px; min-width: 0; }
#dashboard [data-vl2] .vl2-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: #fff; text-decoration: none; text-wrap: pretty;
}
#dashboard [data-vl2] .vl2-title:hover { text-decoration: underline; }
#dashboard [data-vl2] .vl2-title:focus-visible { outline: 2px solid var(--vl2-focus); outline-offset: 2px; border-radius: 4px; }
#dashboard [data-vl2] .vl2-rename { width: 100%; background: rgba(53, 79, 102, 0.4); border: 0.15rem solid var(--vl2-focus); color: #fff; font-weight: 700; }
#dashboard [data-vl2] .vl2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; font-size: 0.8rem; color: var(--vl2-muted); min-width: 0; }
#dashboard [data-vl2] .vl2-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#dashboard [data-vl2] .vl2-tag { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.75rem; }
#dashboard [data-vl2] .vl2-tag .material-symbols-outlined { font-size: 0.85rem; }
#dashboard [data-vl2] .vl2-stats { margin: 0; font-size: 0.8rem; color: var(--vl2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard [data-vl2] .vl2-next {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 32px;
  padding: 0.2rem 0.1rem; background: none; border: 0; cursor: pointer;
  font-size: 0.85rem; font-weight: 700; color: #5eead4; text-decoration: none;
}
#dashboard [data-vl2] .vl2-next[data-vl2-next="results"] { color: #7dd3fc; }
#dashboard [data-vl2] .vl2-next .material-symbols-outlined { font-size: 1.1rem; }
#dashboard [data-vl2] .vl2-next:hover { text-decoration: underline; }
#dashboard [data-vl2] .vl2-next:focus-visible { outline: 2px solid var(--vl2-focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- the card menu (by click, touch and keyboard; L2 for v2) ---------- */
#dashboard [data-vl2] .vl2-menu-root { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; }
#dashboard [data-vl2] .vl2-menu-btn {
  width: 32px; height: 32px; min-height: 32px; padding: 0 !important; border: 0; border-radius: 8px;
  background: rgba(15, 23, 32, 0.72); color: #fff; opacity: 0.8;
}
#dashboard [data-vl2] :is(.vl2-card, .vl2-row):hover .vl2-menu-btn,
#dashboard [data-vl2] .vl2-menu-btn:focus-visible,
#dashboard [data-vl2] .vl2-menu-btn[aria-expanded="true"] { opacity: 1; background: rgba(15, 23, 32, 0.92); }
#dashboard [data-vl2] .vl2-menu-btn:focus-visible { outline: 2px solid var(--vl2-focus); outline-offset: 1px; }
#dashboard [data-vl2] .vl2-menu {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 13rem; margin: 0; padding: 0.35rem; list-style: none;
  background: #2b3542; border: 1px solid var(--vl2-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
#dashboard [data-vl2] .vl2-menu :is(a, button) {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 36px; padding: 0.35rem 0.6rem; border: 0; border-radius: 6px;
  background: none; color: #fff; font-size: 0.875rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
#dashboard [data-vl2] .vl2-menu :is(a, button):is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.1); outline: none; }
#dashboard [data-vl2] .vl2-menu .material-symbols-outlined { font-size: 1.1rem; color: rgba(255, 255, 255, 0.75); }
#dashboard [data-vl2] .vl2-menu .vl2-ext { font-size: 14px; margin-left: auto; }
#dashboard [data-vl2] .vl2-menu .vl2-sep { height: 1px; margin: 0.3rem 0.2rem; background: var(--vl2-line); }

/* ---------- the shelf of drafts with no recording (L6) ---------- */
#dashboard [data-vl2] .vl2-shelf { margin: 1.5rem 0 0; border-top: 1px solid var(--vl2-line); }
#dashboard [data-vl2] .vl2-grid + .vl2-shelf { margin-top: 1.75rem; }
#dashboard [data-vl2] .vl2-grid:not(:first-child), #dashboard [data-vl2] .vl2-note + .vl2-shelf { margin-top: 0; }
#dashboard [data-vl2] .vl2-shelf > summary {
  display: flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.5rem 0; cursor: pointer; list-style: none;
  font-size: 0.95rem; font-weight: 700; color: #fff;
}
#dashboard [data-vl2] .vl2-shelf > summary::-webkit-details-marker { display: none; }
#dashboard [data-vl2] .vl2-shelf > summary:focus-visible { outline: 2px solid var(--vl2-focus); outline-offset: 2px; border-radius: 4px; }
#dashboard [data-vl2] .vl2-shelf .vl2-chev { transition: transform 0.15s ease; }
#dashboard [data-vl2] .vl2-shelf[open] .vl2-chev { transform: rotate(90deg); }
#dashboard [data-vl2] .vl2-count { color: var(--vl2-muted); font-weight: 500; }
#dashboard [data-vl2] .vl2-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
#dashboard [data-vl2] .vl2-row {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.4rem 0.5rem 0.4rem 0.6rem;
  border-radius: 10px; background: var(--vl2-card);
}
#dashboard [data-vl2] .vl2-row:hover, #dashboard [data-vl2] .vl2-row:focus-within { background: var(--vl2-card-hi); }
#dashboard [data-vl2] .vl2-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #3a4a5c; color: #e2e8f0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
#dashboard [data-vl2] .vl2-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#dashboard [data-vl2] .vl2-row-text .vl2-title { -webkit-line-clamp: 1; min-height: 0; font-size: 0.9rem; }
#dashboard [data-vl2] .vl2-row-text small { font-size: 0.8rem; color: var(--vl2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard [data-vl2] .vl2-row .vl2-record {
  flex: none; min-height: 32px; height: 32px; padding: 0 0.85rem !important; border-radius: 8px; text-transform: none;
  background: transparent; border: 1.5px solid #2dd4bf; color: #5eead4 !important; font-weight: 700;
}
#dashboard [data-vl2] .vl2-row .vl2-record:hover { background: rgba(45, 212, 191, 0.12); }
#dashboard [data-vl2] .vl2-row .vl2-menu-root { position: relative; top: auto; right: auto; flex: none; }
#dashboard [data-vl2] .vl2-row .vl2-menu-btn { background: transparent; opacity: 1; }
#dashboard [data-vl2] .vl2-row .vl2-menu-btn:hover, #dashboard [data-vl2] .vl2-row .vl2-menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
#dashboard [data-vl2] .vl2-row:has(.vl2-menu) { z-index: 5; }
#dashboard [data-vl2] .vl2-shelf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 0 0; }
#dashboard [data-vl2] .vl2-shelf-foot .btn-ghost { text-transform: none; color: var(--vl2-muted); gap: 0.35rem; }
#dashboard [data-vl2] .vl2-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 0.875rem; }
#dashboard [data-vl2] .vl2-confirm .btn { text-transform: none; }

/* the chat launcher (bottom right) never covers the last row */
#dashboard section[data-video-tab][data-vl2] { margin-bottom: 5.5rem; }

/* ---------- empty, no match, archived note, skeleton ---------- */
#dashboard [data-vl2] .vl2-empty { text-align: center; max-width: 34rem; margin: 3rem auto; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
#dashboard [data-vl2] .vl2-empty > .material-symbols-outlined { font-size: 4.5rem; color: #607d8b; font-weight: 300; }
#dashboard [data-vl2] .vl2-empty h2 { font-family: 'PPFragment TextRegular'; font-size: 1.5rem; font-weight: 100; line-height: 1.45; color: #fff; margin: 0; }
#dashboard [data-vl2] .vl2-empty p { line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0 0 1rem; }
#dashboard [data-vl2] .vl2-nomatch p, #dashboard [data-vl2] .vl2-note { color: var(--vl2-muted); font-size: 0.9rem; margin: 0.5rem 0 1rem; }
#dashboard [data-vl2] .vl2-skeleton .vl2-card { background: rgba(255, 255, 255, 0.04); }
#dashboard [data-vl2] .vl2-skeleton .vl2-poster { background: rgba(255, 255, 255, 0.08); }
#dashboard [data-vl2] .vl2-skeleton .vl2-poster::after { display: none; }
#dashboard [data-vl2] .vl2-skeleton .vl2-body i { display: block; height: 0.8rem; width: 70%; border-radius: 6px; background: rgba(255, 255, 255, 0.08); margin: 0.2rem 0; }
#dashboard [data-vl2] .vl2-skeleton .vl2-body i + i { width: 45%; }

/* ---------- New video's two choices (L10) ---------- */
.vl2-chooser .vq-picker-card { max-width: 30rem; }
.vl2-choices { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.vl2-choice {
  display: flex; align-items: flex-start; gap: 0.85rem; width: 100%; padding: 0.9rem 1rem; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #fff;
}
.vl2-choice:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.vl2-choice:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.vl2-choice > .material-symbols-outlined { flex: none; font-size: 1.6rem; color: #5eead4; margin-top: 0.1rem; }
.vl2-choice b { display: block; font-size: 1rem; font-weight: 700; }
.vl2-choice small { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }

/* ---------- the phone Filter sheet (L13) ---------- */
.vl2-sheet-wrap { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.vl2-sheet {
  width: 100%; max-width: 32rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0;
  background: #222a34; color: #fff; display: flex; flex-direction: column; gap: 0.4rem; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
}
#dashboard .vl2-sheet h2 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
.vl2-sheet label { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin-top: 0.35rem; }
.vl2-sheet select { width: 100%; min-height: 44px; background: rgba(53, 79, 102, 0.4); border: 0.15rem solid rgba(var(--buiilderFrontRGB)); color: #fff; }
.vl2-sheet-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }
.vl2-sheet-actions .btn { min-height: 44px; height: 44px; text-transform: none; }

/* ---------- L16: Team and Campaigns ---------- */
#dashboard .vl2-team-empty { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; }
#dashboard .vl2-howto { margin-top: 1rem; }
#dashboard .vl2-howto summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); min-height: 32px; display: inline-flex; align-items: center; gap: 0.35rem; list-style: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
#dashboard .vl2-howto summary::-webkit-details-marker { display: none; }
#dashboard .vl2-howto summary .material-symbols-outlined { font-size: 1.05rem; text-decoration: none; }
#dashboard .vl2-howto summary:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; border-radius: 4px; }
#dashboard .vl2-howto p { margin: 0.4rem 0 0; max-width: 46rem; line-height: 1.5; }

/* ---------- 1280 and narrower desktops ---------- */
@media (max-width: 1100px) {
  #dashboard .vl2-head .vl2-select { max-width: 10rem; }
}

/* ---------- phone (L13): a video above the fold ---------- */
@media (max-width: 767px) {
  /* the header: row 1 is the title and New video, row 2 is search and Filter */
  #dashboard [data-dashboard-main]:has(.vl2-head) [data-dashboard-header] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; height: auto; padding: 0.25rem 0 0.5rem; }
  #dashboard [data-dashboard-main]:has(.vl2-head) [data-dashboard-header] > * { flex: 0 1 auto; }
  #dashboard [data-dashboard-main]:has(.vl2-head) [data-dashboard-header] > div:first-child { flex: 1 1 0; min-width: 0; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head,
  #dashboard [data-dashboard-main]:has(.vl2-head) [data-dashboard-header] div:has(> .vl2-head) { display: contents !important; }
  #dashboard [data-dashboard-main]:has(.vl2-head) [data-dashboard-header] h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head > * { max-width: none; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head .vl2-new { order: 1; flex: 0 0 auto; height: 40px; min-height: 40px; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head .vl2-search { order: 2; flex: 1 1 calc(100% - 44px - 0.5rem); width: auto !important; min-width: 0; max-width: none; height: 44px; margin: 0 !important; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head .vl2-filter-btn { order: 3; display: inline-flex; width: 44px; height: 44px; min-height: 44px; flex: none;
    background: rgba(53, 79, 102, 0.27); border: 0.15rem solid rgba(var(--buiilderFrontRGB)); color: #fff; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head .vl2-select { display: none; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head:not([data-vt-grid]) .vl2-filter-btn,
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head:not([data-vt-grid]) .vl2-search { display: none !important; }
  #dashboard [data-dashboard-main]:has(.vl2-head) .vl2-head[data-vl2-empty][data-vt-grid] { display: none !important; }
  /* the intro line goes; the tabs are one strip with short labels */
  #dashboard [data-dashboard-main]:has(.vl2-head) div:has(> p):has(+ .vt-views[data-vl2]) { display: none; }
  #dashboard .vt-views[data-vl2] { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin: 0 0 0.5rem; scrollbar-width: none; }
  #dashboard .vt-views[data-vl2] a { flex: 1 0 auto; text-align: center; padding: 0.5rem 0.75rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  #dashboard .vt-views[data-vl2] .vl2-long { display: none; }
  #dashboard .vt-views[data-vl2] .vl2-short { display: inline; }
  #dashboard [data-dashboard-main]:has(.vl2-head) section[data-video-tab][data-vl2] { padding-top: 0 !important; }
  #dashboard [data-dashboard-main]:has(.vl2-head) main > .py-6 { padding-top: 0.5rem !important; }
  #dashboard [data-dashboard-main]:has(.vl2-head) [data-dashboard-header] { padding-top: 0; }
  /* the phone menu bar is sticky too (58 px): the header sticks under it, not behind it */
  #dashboard [data-dashboard-main]:has(.vl2-head) .sticky_header { top: 58px; box-shadow: 0 -0.5rem 0 #1b1d21; }
  #dashboard [data-vl2] .vl2-grid { padding-top: 0; }

  /* recorded videos are 88 px rows: the poster left, the words right */
  #dashboard [data-vl2] .vl2-grid { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  #dashboard [data-vl2] .vl2-card { flex-direction: row; align-items: stretch; min-height: 88px; }
  #dashboard [data-vl2] .vl2-card:hover { transform: none; }
  #dashboard [data-vl2] .vl2-poster { flex: none; width: 128px; aspect-ratio: auto; height: auto; min-height: 88px; border-radius: 12px 0 0 12px; }
  #dashboard [data-vl2] .vl2-poster-empty { font-size: 0; gap: 0; }
  #dashboard [data-vl2] .vl2-chip { left: 0.4rem; bottom: 0.4rem; height: 18px; font-size: 11px; padding: 0 0.4rem; max-width: calc(100% - 0.8rem); overflow: hidden; text-overflow: ellipsis; }
  #dashboard [data-vl2] .vl2-assignee { top: 0.4rem; right: auto; left: 0.4rem; }
  #dashboard [data-vl2] .vl2-body { padding: 8px 52px 8px 12px; gap: 0.1rem; justify-content: center; }
  #dashboard [data-vl2] .vl2-title { -webkit-line-clamp: 2; min-height: 0; font-size: 0.9rem; }
  #dashboard [data-vl2] .vl2-card[data-has-stats] .vl2-meta { display: none; }
  #dashboard [data-vl2] .vl2-next { margin-top: 0.1rem; min-height: 28px; }
  #dashboard [data-vl2] .vl2-card > .vl2-menu-root { top: 50%; right: 4px; transform: translateY(-50%); }
  #dashboard [data-vl2] .vl2-card > .vl2-menu-root .vl2-menu { top: calc(100% + 2px); }
  #dashboard [data-vl2] .vl2-menu-btn,
  #dashboard [data-vl2] :is(.vl2-card, .vl2-row):hover .vl2-menu-btn { width: 44px; height: 44px; min-height: 44px; opacity: 1; background: transparent; box-shadow: none; }
  #dashboard [data-vl2] .vl2-menu :is(a, button) { min-height: 44px; }
  /* shelf rows: the Record button and the menu stay 44 px targets */
  #dashboard [data-vl2] .vl2-row { gap: 0.5rem; padding: 0.35rem 0.25rem 0.35rem 0.5rem; }
  #dashboard [data-vl2] .vl2-row .vl2-record { height: 40px; min-height: 40px; padding: 0 0.7rem !important; }
  #dashboard [data-vl2] .vl2-shelf-foot .btn { min-height: 44px; height: auto; white-space: normal; text-align: left; }
}

/* ---------- list R3, builder A: M2 sections and teal budget, M3 groups, M4 recent line, M9 ---------- */
/* M2: "To do" and "All videos" headers, in the shelf summary's quiet weight */
#dashboard [data-vl2] .vl2-sec { display: flex; align-items: baseline; gap: 0.3rem; margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.7); letter-spacing: 0; }
#dashboard [data-vl2] .vl2-sec .vl2-count { font-weight: 500; }
#dashboard [data-vl2] .vl2-grid + .vl2-sec { margin-top: 1.75rem; }
/* M2: one teal per card at most. Library next steps are quiet until the card is hovered or focused */
#dashboard [data-vl2] [data-vl2-section="library"] .vl2-next { color: rgba(255, 255, 255, 0.88); }
#dashboard [data-vl2] [data-vl2-section="library"] .vl2-next .material-symbols-outlined { color: rgba(255, 255, 255, 0.7); }
#dashboard [data-vl2] [data-vl2-section="library"] .vl2-card:is(:hover, :focus-within) .vl2-next,
#dashboard [data-vl2] [data-vl2-section="library"] .vl2-card:is(:hover, :focus-within) .vl2-next .material-symbols-outlined { color: #5eead4; }
#dashboard [data-vl2] [data-vl2-section="library"] .vl2-card:is(:hover, :focus-within) .vl2-next[data-vl2-next="results"],
#dashboard [data-vl2] [data-vl2-section="library"] .vl2-card:is(:hover, :focus-within) .vl2-next[data-vl2-next="results"] .material-symbols-outlined { color: #7dd3fc; }
/* M2: Record in a shelf row is a neutral outline, teal only on the row under the pointer or focus */
#dashboard [data-vl2] .vl2-row .vl2-record { border-color: rgba(255, 255, 255, 0.24); color: #fff !important; }
#dashboard [data-vl2] .vl2-row:is(:hover, :focus-within) .vl2-record { border-color: #2dd4bf; color: #5eead4 !important; }
/* M3: a row with no donor shows a camera, not the title's initials */
#dashboard [data-vl2] .vl2-avatar .material-symbols-outlined { font-size: 1.2rem; font-weight: 400; color: rgba(255, 255, 255, 0.75); }
/* M4: the one quiet line that says drafts are waiting below */
#dashboard [data-vl2] .vl2-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.85rem; font-size: 0.875rem; color: var(--vl2-muted); }
#dashboard [data-vl2] .vl2-recent .material-symbols-outlined { font-size: 1.1rem; }
#dashboard [data-vl2] .vl2-recent a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); min-height: 32px; display: inline-flex; align-items: center; }
#dashboard [data-vl2] .vl2-recent a:focus-visible { outline: 2px solid var(--vl2-focus); outline-offset: 2px; border-radius: 4px; }
/* F7 (list R3): "1 day ago" never splits across lines */
#dashboard [data-vl2] .vl2-when { white-space: nowrap; }
/* F5: Tidy up (18) is a quiet text button, as wide as its words */
#dashboard [data-vl2] .vl2-shelf-foot .vl2-tidy { padding-left: 0.5rem; padding-right: 0.5rem; }
@media (max-width: 767px) {
  /* F4 (list R3): the recent line sits above To do on phones too, as on desktop */
  /* M9: on phones the verb drops after a donor's name so the name fits (never on an archived item, F7) */
  #dashboard [data-vl2] :is(.vl2-row, .vl2-card) .vl2-verb { display: none; }
  #dashboard [data-vl2] .vl2-shelf-foot .vl2-tidy { flex: none; width: auto; }
  /* F7: a card's "For Zoe Tester · Archived 10 seconds ago" gets a second line instead of an ellipsis */
  #dashboard [data-vl2] .vl2-card .vl2-meta > span:first-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #dashboard [data-vl2] .vl2-sec { margin-bottom: 0.4rem; }
  #dashboard [data-vl2] .vl2-grid + .vl2-sec { margin-top: 1.25rem; }
  #dashboard [data-vl2] .vl2-recent { margin-bottom: 0.4rem; }
  /* F4: one block of text, so "Show them" follows the words instead of taking its own line; the
     link's padding keeps a tall tap area without growing the line */
  #dashboard [data-vl2] .vl2-recent { display: block; line-height: 1.45; margin-bottom: 0.6rem; }
  #dashboard [data-vl2] .vl2-recent .material-symbols-outlined { vertical-align: -0.22em; margin-right: 0.2rem; }
  #dashboard [data-vl2] .vl2-recent a { display: inline; min-height: 0; padding: 0.55rem 0.3rem; margin: -0.55rem -0.3rem; }
}

/* ================= Video list round 3, builder B (M5 to M8, M10, M11) ================= */

/* M5: no dead bands. Videos starts on the same line as the side panels (their box top sits
   right under the tabs); a shelf that is all there is has no rule or gap above it. */
#dashboard section[data-video-tab][data-vl2] { padding-top: 0; }
#dashboard [data-vl2] .vl2-shelf:first-child,
#dashboard [data-vl2] .vl2-note + .vl2-shelf { border-top: 0; margin-top: 0; }

/* M8: an archived card says Archived, in slate */
#dashboard [data-vl2] .vl2-chip[data-vl2-chip="archived"] { background: #334155; color: #e2e8f0; }
/* M8: a menu near the bottom of the window opens upward (js/video-list.js menu_should_flip) */
#dashboard [data-vl2] .vl2-menu-root > .vl2-menu.vl2-menu[data-flip] { top: auto; bottom: calc(100% + 4px); }

/* M6: the Record button's icon shows only on the phone */
#dashboard [data-vl2] .vl2-row .vl2-record-icon { display: none; }

/* M10: Campaigns' Add campaign is the secondary slate, so New video stays the one teal */
#dashboard [data-dashboard-main]:has([data-vl2]) [data-vt-campaigns] .vt-panel-head .btn.vt-primary {
  background: var(--sr-btn-secondary); border-color: var(--sr-btn-secondary); color: var(--sr-btn-secondary-content) !important;
}
#dashboard [data-dashboard-main]:has([data-vl2]) [data-vt-campaigns] .vt-panel-head .btn.vt-primary:hover:not(:disabled) { background: var(--sr-btn-secondary-hover); border-color: var(--sr-btn-secondary-hover); }
/* M10: Team's Nudge sits on the name's line, its icon at text size */
#dashboard [data-dashboard-main]:has([data-vl2]) .vt-team-table .vt-nudge .material-symbols-outlined { font-size: 1rem; }

@media (max-width: 767px) {
  /* M6: shelf rows. Record is a 44 px icon button; the "For" line gets two lines. */
  #dashboard [data-vl2] .vl2-row .vl2-record { width: 44px; height: 44px; min-height: 44px; padding: 0 !important; justify-content: center; }
  #dashboard [data-vl2] .vl2-row .vl2-record-icon { display: inline; font-size: 1.35rem; }
  #dashboard [data-vl2] .vl2-row .vl2-record-label { display: none; }
  #dashboard [data-vl2] .vl2-row-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}

/* M8: on the phone the Videos toast spans the screen (16 px gutters) instead of half of it.
   Scoped to the Videos views, so Reports keeps its centered toast. */
@media (max-width: 640px) {
  #dashboard:has([data-vl2]) .bk2-toast-wrap { left: 16px; right: 16px; transform: none; display: flex; justify-content: center; }
  #dashboard:has([data-vl2]) .bk2-toast-wrap > .bk2-toast { flex: 1 1 auto; }
}

/* M6: touch screens never keep a hover lift or underline after a tap */
@media (hover: none) {
  #dashboard [data-vl2] .vl2-card:hover:not(:focus-within) { transform: none; box-shadow: none; }
  #dashboard [data-vl2] :is(.vl2-title, .vl2-next):hover { text-decoration: none; }
  #dashboard [data-vl2] .vl2-row:hover:not(:focus-within) { background: var(--vl2-card); }
  #dashboard [data-vl2] .vl2-row .vl2-record:hover { background: transparent; }
}

/* R3 integration: A's hover-only teal (library next steps, shelf Record) never sticks after a tap */
@media (hover: none) {
  #dashboard [data-vl2] [data-vl2-section="library"] .vl2-card:hover:not(:focus-within) .vl2-next,
  #dashboard [data-vl2] [data-vl2-section="library"] .vl2-card:hover:not(:focus-within) .vl2-next .material-symbols-outlined { color: rgba(255, 255, 255, 0.88); }
  #dashboard [data-vl2] .vl2-row:hover:not(:focus-within) .vl2-record { border-color: rgba(255, 255, 255, 0.24); color: #fff !important; }
}

/* F4 (list R3, founder Q2): on phones "To do" shows (0.8 rem), so both sections are labeled; the first
   video may start lower (y <= 300) as long as the first card is fully on the first screen */
@media (max-width: 767px) {
  #dashboard [data-vl2] .vl2-sec { font-size: 0.8rem; }
}