/* rs-wire:videos: the Videos page in the riverside component style (.orch/qa/flow-design/riverside-review/videos.html).
   Hierarchy: one focal point (the Needs you panel and its one periwinkle-deep action), then the library, quieter:
   segmented tabs, one white panel with sort + Grid/List, tiles straight on the panel. Selection is a tint fill.
   Type 20 / 15 / 13 / 12, weights 400 / 500; 12 inside panels, 16 between panels. Shell tokens: css/rs-shell.css. */

:root .dav { display: flex; flex-direction: column; gap: var(--rs-gap); min-width: 0; font: var(--rs-w-reg) var(--rs-fs-body)/1.45 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); padding-bottom: var(--rs-s16); }
:root .dav *, :root .dav *::before, :root .dav *::after, :root .dav-recent *, :root .dav-menu * { box-sizing: border-box; }
:where(.dav, .dav-recent) :where(h1, h2, h3, p, ul) { margin: 0; }
:where(.dav, .dav-recent) ul { padding: 0; list-style: none; }
:where(.dav, .dav-recent, .dav-menu) :where(button, input, select) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.dav, .dav-recent, .dav-menu) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.dav, .dav-recent) a { color: inherit; }
:root .dav [hidden], :root .dav-recent[hidden] { display: none !important; }
:root .dav .rs-faint { color: var(--rs-tx-2); font-weight: var(--rs-w-reg); }
:root .dav-i { display: block; width: 16px; height: 16px; flex: none; }
:root .dav .dav-spin { animation: dav-turn 2.4s linear infinite; }
@keyframes dav-turn { to { transform: rotate(360deg); } }
:root .dav .rs-btn svg.dav-i { width: 16px; height: 16px; }
:root .dav .rs-btn--primary svg.dav-i { stroke-width: 2; }

/* section heading row (Insights' .sh) */
:root .dav-sh { display: flex; align-items: flex-start; gap: var(--rs-s16); }
:root .dav-sh .rs-cap { margin-top: var(--rs-s4); }
:root .dav-sh-r { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--rs-s12); }

/* ---------- head: title + one line; Create video is secondary (the focal action lives in Needs you) ---------- */
:root .dav-head { display: flex; align-items: flex-end; gap: var(--rs-s16); }
:root .dav-tbox { flex: 1; min-width: 0; }
:root .dav-tbox .rs-cap { margin-top: 2px; }
:root #davCreate { flex: none; }

/* offline line */
:root .dav-warn { display: flex; align-items: center; gap: var(--rs-s8); padding: var(--rs-pad); border-radius: var(--rs-r-inner); background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .dav-warn > span { flex: 1; min-width: 0; color: var(--rs-tx); }
:root .dav-warn .rs-tbtn { color: var(--dk-tx-rs-neg, var(--rs-neg)); font-size: var(--rs-fs-body); }
:root .dav-warn.checking { background: var(--rs-inset); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: inset 0 0 0 1px var(--rs-line); }

/* ---------- tones: icon colour only, the words stay ink ---------- */
:root .dav .t-attention, :root .dav .t-busy { --tone: var(--rs-peri-deep); }
:root .dav .t-done { --tone: var(--rs-pos); }
:root .dav .t-failed { --tone: var(--rs-neg); }
:root .dav .t-draft { --tone: var(--rs-tx-2); }
:root .dav .t-unknown { --tone: var(--rs-tx-3); }

/* ---------- frames: poster, or a calm planned board ---------- */
:root .dav-fr { container-type: inline-size; position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--rs-r-sm); overflow: hidden; background: var(--rs-inset); box-shadow: 0 0 0 1px var(--rs-line); }
:root .dav-fr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:root .dav-fr.plan { background: var(--rs-raise); }
:root .dav-fc { position: absolute; inset: 12px; pointer-events: none; }
:root .dav-fc i { position: absolute; width: 12px; height: 12px; border: solid var(--rs-tx-3); border-width: 0; }
:root .dav-fc i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
:root .dav-fc i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
:root .dav-fc i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
:root .dav-fc i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
:root .dav-slip { position: absolute; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line), 0 2px 6px rgba(31,31,33,.06); border-radius: var(--rs-r-xs); padding: var(--rs-s8) var(--rs-s12); display: flex; flex-direction: column; gap: var(--rs-s4); min-width: 0; }
:root .dav-slip .k { display: inline-flex; align-items: center; gap: var(--rs-s4); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dav-slip .k .dav-i { width: 12px; height: 12px; }
:root .dav-slip .t { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.35; color: var(--rs-tx); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root .dav-slip.k-finder { left: 10%; right: 10%; top: 50%; transform: translateY(-62%); align-items: center; text-align: center; }
:root .dav-slip.k-finder .k { color: var(--rs-tx-2); }
:root .dav-slip.k-note { left: 8%; right: 12%; top: 12%; }
:root .dav-slip.k-script { left: 12%; right: 12%; top: 10%; bottom: -8px; border-radius: var(--rs-r-xs) var(--rs-r-xs) 0 0; }
:root .dav-slip .rule { display: block; height: 3px; border-radius: 2px; background: var(--rs-inset); margin-top: var(--rs-s4); }
:root .dav-slip .rule + .rule { width: 72%; }
:root .dav-slip .rl2 { display: none; height: 3px; border-radius: 2px; background: var(--rs-inset); margin-top: var(--rs-s4); width: 100%; }
:root .dav-slip .rl2 + .rl2 { width: 64%; }
@container (max-width: 264px) {
  :root .dav-slip .t { display: none; }
  :root .dav-slip .rl2 { display: block; }
  :root .dav-slip.k-finder .rl2 { display: none; }
  :root .dav-slip.k-finder { transform: translateY(-70%); }
}
:root .dav-mg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rs-tx-3); }
:root .dav-mg .dav-i { width: 20px; height: 20px; }
/* status chip on the frame: quiet */
:root .dav-stc { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: inline-flex; align-items: center; gap: var(--rs-s4); height: 24px; padding: 0 var(--rs-s8); border-radius: var(--rs-r-sm); background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line), 0 1px 2px rgba(31,31,33,.08); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx); white-space: nowrap; }
:root .dav-stc .dav-i { width: 14px; height: 14px; color: var(--tone); }
:root .dav-stc span { overflow: hidden; text-overflow: ellipsis; }
/* busy: a thin line along the bottom that moves only when a step changes */
:root .dav-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--dk-b-ffffffa60, rgba(255,255,255,.6)); }
:root .dav-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--rs-peri-deep); transition: width 360ms var(--rs-ease); }
/* failed: calm dimmed frame, one alert glyph */
:root .dav-fr.failed > img { filter: grayscale(.7) brightness(.95); }
:root .dav-dim { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--rs-s4); padding: var(--rs-s12); text-align: center; background: var(--dk-b-f7f6f2a82, rgba(247,246,242,.82)); color: var(--rs-tx); font-size: var(--rs-fs-cap); }
:root .dav-dim .dav-i { width: 20px; height: 20px; color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .dav-fr.mini .dav-dim p { display: none; }
/* a failed frame says so over the planned board; the board's own slip (kicker + title) showed through the veil and collided with it */
:root .dav-fr.failed .dav-slip { visibility: hidden; }
:root .dav-fr.unknown > img { filter: grayscale(.4); opacity: .85; }

/* ---------- 1 · Needs you ---------- */
:root .dav-nwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--rs-s16); margin-top: var(--rs-s12); }
:root .dav-nwrap.solo { grid-template-columns: minmax(0, 1fr); }
:root .dav-lead { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--rs-s16); align-items: start; min-width: 0; }
:root .dav-nwrap.solo .dav-lead { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
:root .dav-lead > a { display: block; }
:root .dav-lead .ltx { min-width: 0; padding-top: var(--rs-s4); }
:root .dav-lead .lst { display: inline-flex; align-items: center; gap: var(--rs-s4); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--tone); }
:root .dav-lead .lst .dav-i { width: 14px; height: 14px; }
:root .dav-lead h3 { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; margin-top: var(--rs-s4); }
:root .dav-lead h3 a { text-decoration: none; }
:root .dav-lead h3 a:hover { text-decoration: underline; text-decoration-color: var(--rs-line-2); text-underline-offset: 3px; }
:root .dav-lead .lwhy { margin-top: var(--rs-s8); }
:root .dav-lead .sub { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: var(--rs-s4); }
:root .dav-lead .frow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rs-s8) var(--rs-s12); margin-top: var(--rs-s16); }
:root .dav-others { position: relative; padding-left: var(--rs-s16) !important; display: grid; gap: var(--rs-s4); align-content: start; min-width: 0; }
:root .dav-others::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rs-line); }
:root .dav-nr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--rs-s12); padding: var(--rs-s8); border-radius: var(--rs-r-inner); align-items: start; }
:root .dav-nr:hover { background: var(--rs-inset); }
:root .dav-nr > a { display: block; }
:root .dav-nr .nb { min-width: 0; }
:root .dav-nr .nt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--rs-w-med); line-height: 1.4; text-decoration: none; }
:root .dav-nr .ns { display: flex; gap: var(--rs-s4); align-items: flex-start; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: var(--rs-s4); }
:root .dav-nr .ns span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .dav-nr .ns .dav-i { width: 14px; height: 14px; margin-top: 2px; color: var(--tone); }
:root .dav-nr .rs-btn { margin-top: var(--rs-s8); }
:root .dav-others .omore { padding: var(--rs-s4) var(--rs-s8); }

/* phone: the page's own search (the top bar has none at 390), grouped with the tabs */
:root .dav-libctl { display: flex; flex-direction: column; gap: var(--rs-gap); min-width: 0; }
:root .dav-psearch { display: none; position: relative; }

/* ---------- library tabs: a segmented control ---------- */
:root .dav-tabsrow { display: flex; align-items: center; gap: var(--rs-s16); min-width: 0; }
:root .dav-tabs > button { height: 32px; padding: 0 var(--rs-s16); gap: var(--rs-s8); }
:root .dav-n { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-2); font-variant-numeric: tabular-nums; }
:root .dav-tabs > [aria-selected="true"] .dav-n { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dav-tabs.sk .dav-n { display: inline-block; width: 12px; height: 8px; border-radius: 4px; background: var(--rs-line); color: transparent; }

/* library panel controls: sort + Grid/List, every label shown */
:root .dav-sort { display: inline-flex; align-items: center; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dav-sort select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 32px 0 12px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-body); color: var(--rs-tx); cursor: pointer; outline: none; }
:root .dav-sort select:hover { box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .dav-sort select:focus-visible { box-shadow: var(--rs-ring); }
:root .dav-vseg .dav-i { width: 14px; height: 14px; }
:root .dav-calm { position: relative; isolation: isolate; display: flex; gap: var(--rs-s8); align-items: flex-start; margin-top: var(--rs-s12); color: var(--rs-tx-2); padding: var(--rs-pad); }
:root .dav-calm::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .dav-calm .dav-i { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); margin-top: 2px; }
:root .dav-sheet { outline: none; }

/* ---------- grid: tiles straight on the panel ---------- */
:root .dav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--rs-s8); margin: var(--rs-s8) calc(-1 * var(--rs-s8)) 0; }
:root .dav-tile { position: relative; padding: var(--rs-s8); border-radius: var(--rs-r-inner); transition: background var(--rs-t); min-width: 0; }
:root .dav-tile:hover { background: var(--rs-inset); }
:root .dav-tile.is-picked, :root .dav-lr.is-picked { background: var(--rs-sel); }
:root .dav-tile.archived .dav-fr > img, :root .dav-lr.archived .dav-fr > img { opacity: .75; }
:root .dav-tile h3 { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.4; margin-top: var(--rs-s8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .dav-tile h3 a { text-decoration: none; outline: none; }
:root .dav-tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rs-r-inner); }
:root .dav-tile h3 a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--rs-peri); }
:root .dav-tile .sub { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: var(--rs-s4); }
/* select + more: on hover / focus / while selecting; always on touch */
:root .dav-sel { position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; margin: 0; }
:root .dav-sel input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: var(--rs-r-xs); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1.5px var(--rs-line-2), 0 1px 2px rgba(31,31,33,.1); display: grid; place-items: center; cursor: pointer; margin: 0; transition: background var(--rs-t); outline: none; }
:root .dav-sel input:focus-visible { box-shadow: var(--rs-ring); }
:root .dav-sel input:checked { background: var(--rs-peri-deep); box-shadow: none; }
:root .dav-sel input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--dk-paper, #fff); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
:root .dav-tile .dav-sel { left: 12px; top: 12px; }
:root .dav-more { position: absolute; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--rs-tx-2); }
:root .dav-more:hover, :root .dav-more[aria-expanded="true"] { color: var(--rs-tx); background: var(--rs-inset); }
:root .dav-more:focus-visible { outline: none; box-shadow: var(--rs-ring); }
:root .dav-tile .dav-more { right: 12px; top: 12px; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line), 0 1px 2px rgba(31,31,33,.1); }
:root .dav-tile .dav-more:hover, :root .dav-tile .dav-more[aria-expanded="true"] { background: var(--dk-paper, #fff); color: var(--rs-tx); }
:root .dav-tile .dav-sel, :root .dav-tile .dav-more { opacity: 0; transition: opacity var(--rs-t); }
:root .dav-tile:hover .dav-sel, :root .dav-tile:hover .dav-more, :root .dav-tile:focus-within .dav-sel, :root .dav-tile:focus-within .dav-more,
:root .is-selecting .dav-tile .dav-sel, :root .dav-tile.is-picked .dav-sel, :root .dav-tile .dav-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { :root .dav-tile .dav-sel, :root .dav-tile .dav-more { opacity: 1; } }

/* ---------- list ---------- */
:root .dav-vl { margin: var(--rs-s8) calc(-1 * var(--rs-s8)) 0; }
:root .dav-lh, :root .dav-lr { display: grid; grid-template-columns: 28px 96px minmax(0, 1fr) 196px 128px 168px 28px; gap: var(--rs-s12); align-items: center; padding: var(--rs-s8); }
:root .dav-lh { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); border-bottom: 1px solid var(--rs-line); margin: 0 var(--rs-s8) var(--rs-s4); padding: 0 0 var(--rs-s8); }
:root .dav-lr { position: relative; border-radius: var(--rs-r-inner); transition: background var(--rs-t); cursor: pointer; }
:root .dav-lr:hover { background: var(--rs-inset); }
:root .dav-lr .dav-sel, :root .dav-lr .dav-more { position: static; }
:root .dav-lr .tt { min-width: 0; }
:root .dav-lr .tt a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--rs-w-med); line-height: 1.4; text-decoration: none; }
:root .dav-lr .tt a:hover { text-decoration: underline; text-decoration-color: var(--rs-line-2); text-underline-offset: 3px; }
:root .dav-lr .tt .s { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: var(--rs-s4); }
:root .dav-lr .tt .det { display: block; font-size: var(--rs-fs-cap); margin-top: var(--rs-s4); }
:root .dav-lstat { display: inline-flex; align-items: center; gap: var(--rs-s8); min-width: 0; }
:root .dav-lstat .dav-i { color: var(--tone); }
:root .dav-lstat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .dav-lstat-m, :root .dav-lr .when-m { display: none; }
:root .dav-lr .lwhen { color: var(--rs-tx-2); font-size: var(--rs-fs-cap); }
:root .dav-lr .nx { justify-self: end; }
:root .dav-next { display: inline-flex; align-items: center; gap: var(--rs-s4); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); text-decoration: none; white-space: nowrap; padding: var(--rs-s4); border-radius: var(--rs-r-xs); }
:root .dav-next:hover { background: var(--rs-sel); }
:root .dav-next .dav-i { width: 14px; height: 14px; }

/* ---------- search: what was said ---------- */
:root .dav-moms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-s4) var(--rs-s12); margin: var(--rs-s8) calc(-1 * var(--rs-s8)) 0 !important; }
:root .dav-mo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--rs-s12); padding: var(--rs-s8); border-radius: var(--rs-r-inner); text-decoration: none; align-items: start; }
:root .dav-mo:hover { background: var(--rs-inset); }
:root .dav-mo .tc { position: absolute; left: 4px; bottom: 4px; height: 20px; padding: 0 4px; border-radius: 4px; background: rgba(20,21,25,.62); color: #fff; font-size: var(--rs-fs-cap); font-variant-numeric: tabular-nums; line-height: 20px; }
:root .dav-mo .q { display: block; line-height: 1.5; }
:root .dav-mo mark { background: var(--rs-sel); color: inherit; border-radius: 3px; padding: 0 2px; }
:root .dav-mo .mvid { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: var(--rs-s4); }

/* ---------- empty / no-match blocks ---------- */
:root .dav .dav-blank { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .dav-blank { display: grid; justify-items: center; text-align: center; gap: var(--rs-s8); padding: var(--rs-s32) var(--rs-s16); }
:root .dav-blank .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dav-blank .ic .dav-i { width: 20px; height: 20px; }
:root .dav-blank h3 { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; }
:root .dav-blank p { color: var(--rs-tx-2); max-width: 420px; }
:root .dav-blank .rs-btn { margin-top: var(--rs-s8); }

/* first video: art earns its place here, and only here */
:root .dav-first { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--rs-s24); align-items: center; }
:root .dav-fart { position: relative; isolation: isolate; aspect-ratio: 16 / 9; border-radius: var(--rs-r-inner); overflow: hidden; background: var(--rs-peri); box-shadow: 0 0 0 1px var(--rs-line); }
:root .dav-fart > canvas.fs-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
:root .dav-fart .steps { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: var(--rs-s8); flex-wrap: wrap; }
:root .dav-fart .steps span { display: inline-flex; align-items: center; gap: var(--rs-s4); height: 24px; padding: 0 var(--rs-s8); border-radius: var(--rs-r-sm); background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root .dav-fart .steps .dav-i { width: 14px; height: 14px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .dav-fside { max-width: 440px; }
:root .dav-fside h2 { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); letter-spacing: -.01em; line-height: 1.3; margin-top: var(--rs-s12); }
:root .dav-fside > p { color: var(--rs-tx-2); margin-top: var(--rs-s8); }
:root .dav-fside .frow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rs-s12); margin-top: var(--rs-s16); }
:root .dav-fside .ways::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rs-line); }
:root .dav-fside .ways { position: relative; margin-top: var(--rs-s24); padding-top: var(--rs-s16) !important; display: grid; gap: var(--rs-s8); }
:root .dav-fside .ways li { display: grid; grid-template-columns: 16px 1fr; gap: var(--rs-s12); color: var(--rs-tx-2); }
:root .dav-fside .ways .dav-i { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); margin-top: 2px; }

/* loading */
:root .dav-sk { display: block; border-radius: var(--rs-r-sm); background: linear-gradient(90deg, var(--rs-inset) 0 40%, var(--dk-paper, #fff) 50%, var(--rs-inset) 60% 100%); background-size: 300% 100%; animation: dav-shim 1.4s linear infinite; box-shadow: inset 0 0 0 1px var(--rs-line); }
@keyframes dav-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
:root .dav-tile.skt:hover { background: none; }

/* entry + re-flow motion (js/da-videos.js flip / leave) */
:root .dav .dav-enter { animation: dav-up 220ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes dav-up { from { opacity: 0; transform: translateY(6px); } }
:root .dav .dav-leaving { opacity: 0; transform: scale(.97); transition: opacity 200ms, transform 200ms; }

/* ---------- bulk bar: sticks to the bottom of the page while anything is selected ---------- */
:root .dav-bulk { width: max-content; position: sticky; bottom: var(--rs-s16); z-index: 20; align-self: center; display: flex; align-items: center; gap: var(--rs-s8); flex-wrap: wrap; justify-content: center; padding: var(--rs-s8); border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: 0 0 0 1px var(--rs-line-2), 0 8px 24px rgba(31,31,33,.12); max-width: 100%; }
:root .dav-bulk .bulk-count { margin: 0; flex-basis: auto; font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); padding: 0 var(--rs-s8) 0 var(--rs-s12); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .dav-bulk .rs-btn--danger { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .dav-bulk .rs-btn[disabled] { opacity: 1; color: var(--rs-tx-3); }

/* ---------- popovers: per-video menu (on body) and recent searches (under the top-bar search) ---------- */
:root .dav-menu, :root .dav-recent { z-index: 60; background: var(--dk-paper, #fff); border-radius: var(--rs-r-panel); padding: var(--rs-s4); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); font: var(--rs-w-reg) var(--rs-fs-body)/1.45 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root .dav-menu { position: absolute; min-width: 200px; }
:root .dav-menu button { display: flex; align-items: center; gap: var(--rs-s8); width: 100%; height: 32px; padding: 0 var(--rs-s12) 0 var(--rs-s8); border-radius: var(--rs-r-sm); text-align: left; color: var(--rs-tx); white-space: nowrap; outline: none; }
:root .dav-menu button .dav-i { color: var(--rs-tx-2); }
:root .dav-menu button:hover, :root .dav-menu button:focus-visible { background: var(--rs-inset); }
:root .dav-menu .danger, :root .dav-menu .danger .dav-i { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .dav-menu hr { border: 0; height: 1px; background: var(--rs-line); margin: var(--rs-s4) var(--rs-s8); }

:root .dav-recent { position: fixed; max-width: calc(100vw - 32px); max-height: min(72vh, 560px); overflow-y: auto; }
:root .dav-recent .ph { display: flex; align-items: center; gap: var(--rs-s8); padding: var(--rs-s8) var(--rs-s8) var(--rs-s4); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dav-recent .ph b { font-weight: var(--rs-w-med); color: var(--rs-tx); font-size: var(--rs-fs-body); }
:root .dav-recent .ph .rs-tbtn { margin-left: auto; }
:root .dav-recent .rq { display: flex; align-items: center; gap: var(--rs-s8); height: 32px; padding: 0 var(--rs-s4) 0 var(--rs-s8); border-radius: var(--rs-r-sm); }
:root .dav-recent .rq:hover, :root .dav-recent .rq:focus-within { background: var(--rs-inset); }
:root .dav-recent .rq .go { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--rs-s8); height: 32px; text-align: left; white-space: nowrap; overflow: hidden; outline: none; }
:root .dav-recent .rq .go span { overflow: hidden; text-overflow: ellipsis; }
:root .dav-recent .rq .dav-i { color: var(--rs-tx-3); }
:root .dav-recent .rq .x { width: 24px; height: 24px; border-radius: var(--rs-r-xs); display: grid; place-items: center; color: var(--rs-tx-3); }
:root .dav-recent .rq .x:hover { color: var(--rs-tx); background: var(--dk-paper, #fff); }
:root .dav-recent .rq .x .dav-i { width: 14px; height: 14px; }
:root .dav-recent .rv { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--rs-s12); align-items: center; padding: var(--rs-s4) var(--rs-s8); border-radius: var(--rs-r-sm); text-decoration: none; outline: none; }
:root .dav-recent .rv:hover, :root .dav-recent .rv:focus-visible { background: var(--rs-inset); }
:root .dav-recent .rv .dav-fr { border-radius: 4px; }
:root .dav-recent .rv .dav-mg .dav-i { width: 16px; height: 16px; }
:root .dav-recent .rvt { min-width: 0; }
:root .dav-recent .rv .t { display: block; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .dav-recent .rv .s { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .dav-recent .sep { height: 1px; background: var(--rs-line); margin: var(--rs-s4) var(--rs-s8); }
:root .dav-recent .pe { padding: var(--rs-s16) var(--rs-s8); color: var(--rs-tx-2); text-align: center; }

/* the "/" hint inside the top-bar search while this page owns it */
html[data-look] body.app .gsearch .search { position: relative; }
:root .dav-kbd { position: absolute; right: 10px; top: 50%; margin-top: -10px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rs-line-2); background: var(--rs-panel); font: var(--rs-w-reg) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx-2); pointer-events: none; transition: box-shadow var(--rs-t), color var(--rs-t), opacity var(--rs-t); }
:root .gsearch.dav-hot .dav-kbd { box-shadow: inset 0 0 0 1px var(--rs-peri); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); background: var(--rs-sel); }
:root .gsearch input:focus ~ .dav-kbd, :root .gsearch.dav-typing .dav-kbd { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  :root .dav .dav-spin, :root .dav-sk, :root .dav .dav-enter { animation: none !important; }
}

/* ---------- smaller desktops / phones ---------- */
@media (max-width: 1240px) {
  :root .dav-nwrap { grid-template-columns: minmax(0, 1fr); }
  :root .dav-others::before { left: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  :root .dav-others { padding-left: 0 !important; padding-top: var(--rs-s12) !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 1180px) {
  :root .dav-lh, :root .dav-lr { grid-template-columns: 28px 96px minmax(0, 1fr) 180px 160px 28px; }
  :root .dav-lh .c-when, :root .dav-lr .lwhen { display: none; }
  :root .dav-lr .when-m { display: inline; }
  :root .dav-moms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1040px) {
  :root .dav-tabs > button { padding: 0 var(--rs-s12); }
}
@media (max-width: 960px) {
  :root .dav-lh, :root .dav-lr { grid-template-columns: 28px 96px minmax(0, 1fr) 160px 28px; }
  :root .dav-lh .c-nx, :root .dav-lr .nx { display: none; }
}
@media (max-width: 760px) {
  :root .dav-head { flex-wrap: wrap; align-items: flex-start; }
  :root .dav-tbox { flex-basis: 100%; }
  :root .dav-psearch { display: block; }
  :root .dav-psearch .dav-i { position: absolute; left: 14px; top: 50%; margin-top: -8px; color: var(--rs-tx-3); pointer-events: none; }
  :root .dav-psearch input { width: 100%; height: 40px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); padding: 0 16px 0 40px; font-size: var(--rs-fs-body); outline: none; -webkit-appearance: none; appearance: none; }
  :root .dav-psearch input:focus { box-shadow: var(--rs-ring); }
  :root .dav-tabsrow { display: block; }
  :root .dav-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--rs-r-panel); width: 100%; gap: 2px; }
  :root .dav-tabs > button { padding: 0 var(--rs-s8); border-radius: var(--rs-r-inner); }
  :root .dav-sh { flex-wrap: wrap; }
  :root .dav-sh-r { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; }
  :root .dav-lead, :root .dav-nwrap.solo .dav-lead { grid-template-columns: minmax(0, 1fr); gap: var(--rs-s12); }
  :root .dav-others { grid-template-columns: minmax(0, 1fr); }
  :root .dav-nr { padding: var(--rs-s8) 0; }
  :root .dav-nr:hover { background: none; }
  :root .dav-grid { grid-template-columns: minmax(0, 1fr); }
  :root .dav-lh { display: none; }
  :root .dav-lr { grid-template-columns: 28px 80px minmax(0, 1fr) 28px; gap: var(--rs-s8); padding: var(--rs-s8) var(--rs-s4); align-items: start; }
  :root .dav-lr .dav-lstat-c { display: none; }
  :root .dav-lr .tt a { display: block; }
  :root .dav-lstat-m { display: flex; margin-top: var(--rs-s4); font-size: var(--rs-fs-cap); gap: var(--rs-s4); }
  :root .dav-lstat-m .dav-i { width: 14px; height: 14px; }
  :root .dav-mo { grid-template-columns: 96px minmax(0, 1fr); }
  :root .dav-first { grid-template-columns: minmax(0, 1fr); gap: var(--rs-s16); }
  :root .dav-bulk { border-radius: var(--rs-r-panel); }
}
:root .gsearch .search:has(.dav-kbd) input { padding-right: 40px; }

/* no one-word last lines in titles */
:root .dav :is(.dav-blank p, .dav-mo .q, .dav-lead .lwhy) { text-wrap: pretty; }
:root .dav :is(.dav-tile h3, .dav-lead h3, .dav-nr .nt, .dav-lr .tt a, .dav-fside h2) { text-wrap: balance; }