/* Direction A: Review, Packaging, the Share popover and the Publish dialog (ported from .orch/qa/flow-design/phase2/p2.css;
   plans .orch/plans/pages/review.md, packaging.md). Tokens: css/flow-stage.css :root. Scoped to .da-rv (review),
   .da-pk (packaging), .da-share (share popover) and .da-pub (publish dialog). Loaded after flow-head.css. */

/* ---------- shared: the stage at 8 / 4, the card exactly the art box's height ---------- */
:root .da-rv, :root .da-pk { margin-top: 0; }
:root :is(.da-rv, .da-pk) .p2-stage { align-items: stretch; }
:root :is(.da-rv, .da-pk) .p2-art { padding: 36px 40px 24px; justify-content: flex-start; }
:root :is(.da-rv, .da-pk) .p2-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(38,46,78,0), rgba(38,46,78,.32)); }
:root :is(.da-rv, .da-pk) .p2-side { position: relative; min-height: 420px; }
:root :is(.da-rv, .da-pk) .p2-card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; animation: da-cardIn var(--t-medium) var(--ease-out); }
@keyframes da-cardIn { from { opacity: 0; transform: translateX(16px); } }
@keyframes da-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes da-fade { from { opacity: 0; } }
@keyframes da-spin { to { transform: rotate(360deg); } }
@keyframes da-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
:root :is(.da-rv, .da-pk) .p2-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; container-type: inline-size; background: var(--dk-paper, #fff); box-shadow: 0 2px 6px rgba(31,31,33,.08), 0 24px 60px rgba(31,31,33,.18); }
:root :is(.da-rv, .da-pk) .p2-i { display: inline-grid; place-items: center; flex: none; }
:root :is(.da-rv, .da-pk, .da-share, .da-pub) .textbtn { cursor: pointer; }
:root :is(.da-rv, .da-pk) .p2-quiet { color: var(--s-ink-2); text-decoration-color: var(--dk-t-1f1f21a25, rgba(31,31,33,.25)); font-weight: 400; }
:root :is(.da-rv, .da-pk) .card-scroll { padding: 22px 22px 18px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%); padding-bottom: 34px; }
:root :is(.da-rv, .da-pk) .p2-check { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; user-select: none; }
:root :is(.da-rv, .da-pk) .p2-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root :is(.da-rv, .da-pk) .p2-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--dk-l-1f1f21a32, rgba(31,31,33,.32)); display: grid; place-items: center; transition: background var(--t-micro), border-color var(--t-micro); }
:root :is(.da-rv, .da-pk) .p2-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--dk-paper, #fff); border-bottom: 2px solid var(--dk-paper, #fff); transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform var(--t-small) var(--ease-spring); }
:root :is(.da-rv, .da-pk) .p2-check input:checked + .p2-box { background: var(--s-ink); border-color: var(--s-ink); }
:root :is(.da-rv, .da-pk) .p2-check input:checked + .p2-box::after { transform: rotate(-45deg) scale(1); }
:root :is(.da-rv, .da-pk) .p2-check input:focus-visible + .p2-box { box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root :is(.da-rv, .da-pk) .p2-popover { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 340px; background: var(--s-card); border: 1px solid var(--s-hair); border-radius: 18px; box-shadow: var(--s-pop-shadow); padding: 16px; }
:root :is(.da-rv, .da-pk) .p2-popover[hidden] { display: none; }
:root :is(.da-rv, .da-pk, .da-share) .p2-pop-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; font-size: 13px; }
:root :is(.da-rv, .da-pk, .da-share) .p2-pop-h b { font-size: 15px; font-weight: 500; }

/* ================= REVIEW ================= */
/* rs-wire:review (.orch/qa/flow-design/riverside-review/index.html): three white panels on the page. Left, the side panel
   (Transcript / Graphics / Changes, the list scrolling inside, the whole-video box); right, the cut (16:9, contained, the
   largest that fits) with its transport row; under it the whole cut on one timeline. On a desktop the editor fills the
   window under the head and only the side panel's list scrolls; on a phone the panels stack (cut, timeline, side).
   Type: the shell's 4 sizes and 2 weights; space 4/8/12/16; selection is a tint fill. */
:root .fstage--ws[data-page="review"] { max-width: none; }
:root .da-rv { font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); display: flex; flex-direction: column; gap: var(--rs-gap); min-width: 0; }
:root .da-rv h2 { margin: 0; font: var(--rs-w-med) var(--rs-fs-sec)/20px var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); white-space: nowrap; }
:root .da-rv .rv-cap { font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-3); }
:root .da-rv .textbtn, :root .da-rv .rs-tbtn { font: var(--rs-w-med) var(--rs-fs-cap)/16px var(--rs-font); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); background: none; border: 0; padding: 2px 4px; border-radius: var(--rs-r-xs); text-decoration: none; cursor: pointer; white-space: nowrap; }
:root .da-rv .textbtn:hover, :root .da-rv .rs-tbtn:hover { background: var(--rs-sel); }
:root .da-rv .textbtn:disabled { opacity: .45; cursor: default; background: none; }
:root .da-rv .rw-below:empty, :root .da-rv .ws-below:empty, :root .da-rv .ws-rail:empty, :root .da-rv #rvShare:empty { display: none; }
:root .da-rv .rv-ed { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--rs-gap); min-width: 0; }
:root .da-rv .rv-pane { background: var(--rs-panel); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); min-width: 0; min-height: 0; position: relative; }
:root .da-rv .rv-phd { flex: none; display: flex; align-items: center; gap: 12px; min-height: 20px; }
:root .da-rv .rv-phd .rv-cap { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- the side panel ---- */
:root .da-rv .rv-side { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; overflow: hidden; }
:root .da-rv .rv-side > .rv-phd { padding: 12px 12px 8px; }
:root .da-rv .rv-side > .rw-tabs { flex: none; margin: 0 12px 8px; width: auto; }
:root .da-rv .rv-views { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--rs-line-2) transparent; }
:root .da-rv .rv-views > [role="tabpanel"][hidden] { display: none; }
:root .da-rv .rv-hint { margin: 0 4px 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-rv #rvAsr:empty, :root .da-rv .rw-vnotes:empty { display: none; }
:root .da-rv #rvAsr { margin: 4px 0 8px; font-size: var(--rs-fs-cap); }
/* misheard words (js/asr-fixes.js): the mockup's one green line, "✓ 2 misheard words fixed: Schope → Shope  Undo"; words kept off screen listed under it */
:root .da-rv #rvAsr .asr.asr--line { margin: 0; padding: 0; border: 0; background: none; display: grid; gap: 4px; }
:root .da-rv #rvAsr .asr--line .asr-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--rs-r-inner); background: var(--rs-pos-soft); font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-tx); }
:root .da-rv #rvAsr .asr--line .asr-head > .vi, :root .da-rv #rvAsr .asr--line .asr-head > svg { width: 14px; height: 14px; color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .da-rv #rvAsr .asr-sum { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .da-rv #rvAsr .asr-sum strong { font-weight: var(--rs-w-reg); color: var(--rs-tx); }
:root .da-rv #rvAsr .asr-heard { color: var(--rs-tx-3); }
:root .da-rv #rvAsr .asr--line .asr-undo { flex: none; margin-left: auto; padding: 2px 4px; font: var(--rs-w-med) var(--rs-fs-cap)/16px var(--rs-font); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-rv #rvAsr .asr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
:root .da-rv #rvAsr .asr-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; min-height: 0; padding: 4px 8px 4px 6px; font-size: var(--rs-fs-cap); line-height: 16px; }
:root .da-rv #rvAsr .asr-at { min-height: 0; padding: 0; font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-tx-3); text-align: left; }
:root .da-rv #rvAsr .asr-tx { color: var(--rs-tx-2); }
:root .da-rv #rvAsr .asr-why { display: inline; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-rv #reSuggest { margin: 0 0 12px; padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: none; border: 0; font-size: var(--rs-fs-cap); }
:root .da-rv #reSuggest h2 { font-size: var(--rs-fs-body); margin: 0 0 4px; }
:root .da-rv #reSuggest .reedit-sub, :root .da-rv #reSuggest .reedit-row p { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-rv #reSuggest .reedit-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; margin-top: 8px; border-top: 1px solid var(--rs-line); }
:root .da-rv #reSuggest .reedit-row p { grid-column: 1; }
:root .da-rv #reSuggest .reedit-row .plan-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
:root .da-rv #reSuggest .btn { height: 28px; padding: 0 12px; font-size: var(--rs-fs-cap); border-radius: var(--rs-r-pill); }
:root .da-rv #reSuggest .field-note:empty { display: none; }

/* transcript lines */
:root .da-rv .rw-lines, :root .da-rv .rw-gfx, :root .da-rv .tnotes { list-style: none; margin: 0; padding: 0; border: 0; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
:root .da-rv .tline.rw-line { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; margin: 0; padding: 0; border: 0; border-radius: var(--rs-r-sm); background: none; box-shadow: none; transition: background var(--rs-t); user-select: none; -webkit-user-select: none; }
:root .da-rv .tline.rw-line:hover { background: var(--rs-inset); }
:root .da-rv .tline.rw-line.is-now, :root .da-rv .tline.rw-line.is-sel { background: var(--rs-sel); }
:root .da-rv .tline.rw-line.is-pick { background: var(--rs-sel); border-radius: 0; }
:root .da-rv .tline.rw-line.pick-top { border-top-left-radius: var(--rs-r-sm); border-top-right-radius: var(--rs-r-sm); }
:root .da-rv .tline.rw-line.pick-bot { border-bottom-left-radius: var(--rs-r-sm); border-bottom-right-radius: var(--rs-r-sm); }
:root .da-rv .tline-main { grid-column: 1 / -1; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; width: 100%; min-width: 0; padding: 6px 8px 6px 6px; margin: 0; border: 0; border-radius: var(--rs-r-sm); background: none; box-shadow: none; text-align: left; font: var(--rs-w-reg) var(--rs-fs-body)/20px var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx-2); cursor: pointer; outline: none; }
:root .da-rv .tline-main:focus-visible { box-shadow: inset 0 0 0 2px var(--rs-peri); }
:root .da-rv .tline-main .t { font-size: var(--rs-fs-cap); line-height: 20px; color: var(--rs-tx-3); font-variant-numeric: tabular-nums; font-weight: var(--rs-w-reg); padding: 0; }
:root .da-rv .tline-main .x { font-weight: var(--rs-w-reg); min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
:root .da-rv .tline.is-now .tline-main, :root .da-rv .tline.is-pick .tline-main, :root .da-rv .tline.is-sel .tline-main { color: var(--rs-tx); }
:root .da-rv .tline.is-now .tline-main .t, :root .da-rv .tline.is-pick .tline-main .t { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .da-rv .tline.is-cut .tline-main .x { color: var(--rs-tx-3); text-decoration: line-through; text-decoration-color: var(--dk-t-1f1f21a30, rgba(31,31,33,.3)); }
:root .da-rv .tline.rw-line > .rw-src, :root .da-rv .tline.rw-line > .rw-back { grid-column: 2; justify-self: start; margin: -6px 0 6px; }
:root .da-rv .rw-back { position: static; padding: 2px 4px; background: none; }
:root .da-rv .rw-src { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border: 0; border-radius: var(--rs-r-xs); background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font: var(--rs-w-reg) var(--rs-fs-cap)/1 var(--rs-font); cursor: pointer; }
:root .da-rv .rw-src .vi { width: 12px; height: 12px; }
/* Note / Take out appear on hover or focus, top right of the line */
:root .da-rv .rw-tools { position: absolute; right: 6px; top: 4px; z-index: 2; display: flex; gap: 2px; margin: 0; padding: 2px; border-radius: var(--rs-r-sm); background: var(--rs-panel); box-shadow: 0 1px 2px rgba(31,31,33,.08), 0 0 0 1px var(--rs-line); opacity: 0; pointer-events: none; transition: opacity var(--rs-t); }
:root .da-rv .tline:hover .rw-tools, :root .da-rv .tline:focus-within .rw-tools { opacity: 1; pointer-events: auto; }
:root .da-rv .tline.is-pick .rw-tools, :root .da-rv .tline.is-cut .rw-tools { display: none; }
:root .da-rv .rw-tools button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; width: auto; height: 24px; padding: 0 8px; border: 0; border-radius: var(--rs-r-xs); background: none; color: var(--rs-tx-2); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); cursor: pointer; }
:root .da-rv .rw-tools button .tl { display: inline; }
:root .da-rv .rw-tools button .vi { width: 13px; height: 13px; }
:root .da-rv .rw-tools button:hover, :root .da-rv .rw-tools button:focus-visible { background: var(--rs-inset); color: var(--rs-tx); outline: none; }
:root .da-rv .rw-tools .hold-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--rs-neg); transform: scaleX(0); transform-origin: left; }
:root .da-rv .rw-tools button.is-holding .hold-fill { transform: scaleX(1); transition: transform var(--hold-ms, 800ms) linear; }
/* notes on a line, a graphic, or the whole video */
:root .da-rv .tline.rw-line > .tnotes { grid-column: 2; padding: 0 8px 8px 0; }
:root .da-rv .rw-vnotes .tnotes { padding: 0 0 8px; }
:root .da-rv .rw-nc { margin-top: 4px; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 8px; padding: 8px 10px; border: 0; border-radius: var(--rs-r-sm); background: var(--rs-inset); box-shadow: none; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx); cursor: default; user-select: text; -webkit-user-select: text; }
:root .da-rv .rw-nc .p2-i { display: grid; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); margin-top: 1px; }
:root .da-rv .rw-nc .p2-i .vi { width: 14px; height: 14px; }
:root .da-rv .rw-nc q { quotes: "“" "”"; font-style: normal; min-width: 0; overflow-wrap: anywhere; }
:root .da-rv .rw-nc .st { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--rs-tx-2); }
:root .da-rv .rw-nc .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rs-peri); box-shadow: 0 0 0 3px rgba(135,153,195,.25); flex: none; }
:root .da-rv .rw-nc .st b { display: inline; flex: 0 1 auto; min-width: 0; font-weight: var(--rs-w-reg); }
:root .da-rv .rw-nc .st .textbtn { margin-left: auto; padding: 0 4px; }
:root .da-rv .rw-nc .st .textbtn + .textbtn { margin-left: 0; }
:root .da-rv .rw-nc .rv-rg { color: var(--rs-tx-3); }
:root .da-rv .rw-nc .tnote-msg { flex-basis: 100%; }
:root .da-rv .rw-nc .rw-nacts { grid-column: 2; display: flex; gap: 8px; }
:root .da-rv .rw-nc.tnote--working .st b { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-rv .rw-nc.tnote--failed, :root .da-rv .rw-nc.tnote--needs { background: var(--rs-neg-soft); box-shadow: none; }
/* rs-wire:review rhythm: inner boxes are flat wells (no border or shadow); a note on a tinted (picked / playing) line reads white */
:root .da-rv .tline.is-now .rw-nc:not(.tnote--failed):not(.tnote--needs), :root .da-rv .tline.is-pick .rw-nc:not(.tnote--failed):not(.tnote--needs), :root .da-rv .tline.is-sel .rw-nc:not(.tnote--failed):not(.tnote--needs) { background: var(--rs-panel); }
:root .da-rv .rw-nc.tnote--failed .st::before, :root .da-rv .rw-nc.tnote--needs .st::before { background: var(--rs-neg); box-shadow: none; }
:root .da-rv .rw-nc.tnote--failed .st b, :root .da-rv .rw-nc.tnote--failed .tnote-msg, :root .da-rv .rw-nc.tnote--needs .st b { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .da-rv .rw-nc.tnote--done .st::before { background: var(--rs-pos); box-shadow: none; }
:root .da-rv .rw-nc.tnote--done .st b { color: var(--dk-tx-rs-pos, var(--rs-pos)); }

/* the change box under the picked line(s) */
:root .da-rv .rv-lbox { grid-column: 1 / -1; position: relative; margin: 8px 0 12px; padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-panel); box-shadow: var(--rs-pop-shadow), 0 0 0 1px var(--rs-line); display: grid; gap: 8px; cursor: default; user-select: text; -webkit-user-select: text; animation: rvLbOpen var(--rs-t) var(--rs-ease); }
:root .da-rv .rv-lbox[hidden] { display: none; }
:root .da-rv .rv-lbox::before { content: ""; position: absolute; top: -6px; left: 48px; width: 12px; height: 12px; background: var(--rs-panel); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--rs-line); border-top-left-radius: 2px; }
@keyframes rvLbOpen { from { opacity: 0; transform: translateY(-4px); } }
:root .da-rv .rv-lb-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
:root .da-rv .rv-lb-h b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); white-space: nowrap; }
:root .da-rv .rv-lb-x { margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: var(--rs-r-xs); background: none; display: grid; place-items: center; color: var(--rs-tx-3); cursor: pointer; padding: 0; flex: none; }
:root .da-rv .rv-lb-x:hover { background: var(--rs-inset); color: var(--rs-tx); }
:root .da-rv .rv-lb-q { display: flex; flex-wrap: wrap; gap: 4px; }
:root .da-rv .rv-lb-q button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--rs-r-pill); background: none; box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx-2); cursor: pointer; }
:root .da-rv .rv-lb-q button:hover { background: var(--rs-inset); color: var(--rs-tx); }
:root .da-rv .rv-lb-q .vi { width: 13px; height: 13px; }
:root .da-rv .rv-lbox textarea { display: block; width: 100%; min-height: 60px; resize: none; border: 0; outline: none; margin: 0; padding: 8px 10px; border-radius: var(--rs-r-sm); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-reg) var(--rs-fs-body)/20px var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root .da-rv .rv-lbox textarea::placeholder { color: var(--rs-tx-3); }
:root .da-rv .rv-lbox textarea:focus { background: var(--rs-panel); box-shadow: var(--rs-ring); }
:root .da-rv .rv-lb-f { display: flex; align-items: center; gap: 8px; }
:root .da-rv .rv-lb-f .rv-cap { margin-right: auto; }
:root .da-rv .rv-lb-send { height: 32px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-tx); color: var(--dk-oninv, #fff); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; }
:root .da-rv .rv-lb-send .vi { width: 14px; height: 14px; }
:root .da-rv .rv-lb-send:disabled { opacity: .35; cursor: default; }
:root .da-rv .rv-lscrim { display: none; }

/* graphics tab */
:root .da-rv .rv-g { margin: 12px 0 0; padding: 12px; border: 0; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: none; }
:root .da-rv .rv-g:first-child { margin-top: 4px; }
:root .da-rv .rv-g.is-sel { background: var(--rs-sel); box-shadow: none; }
:root .da-rv .gitem.rw-g-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; border-radius: var(--rs-r-xs); }
:root .da-rv .gitem.rw-g-top:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rs-peri-soft); }
:root .da-rv .rw-g-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rs-r-xs); overflow: hidden; box-shadow: 0 0 0 1px var(--rs-line); background: var(--rs-raise); }
:root .da-rv .rw-g-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
:root .da-rv .rw-g-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root .da-rv .rw-g-t { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); font-variant-numeric: tabular-nums; }
:root .da-rv .rv-g.is-sel .rw-g-t { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .da-rv .rw-g-w { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 18px; color: var(--rs-tx); }
:root .da-rv .gitem-says { font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-2); }
:root .da-rv .rv-g.is-removed .rw-g-img { filter: grayscale(1) opacity(.5); }
:root .da-rv .rv-g.is-removed .rw-g-w { color: var(--rs-tx-3); text-decoration: line-through; }
:root .da-rv .rv-g .tnotes { padding: 4px 0 0; }
:root .da-rv .rw-g-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 10px; padding: 0; }
:root .da-rv .rw-g-acts button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; height: auto; min-height: 52px; padding: 8px 2px 6px; border: 0; border-radius: var(--rs-r-sm); background: none; box-shadow: none; font: var(--rs-w-reg) var(--rs-fs-cap)/14px var(--rs-font); color: var(--rs-tx-2); cursor: pointer; white-space: normal; text-align: center; }
:root .da-rv .rw-g-acts button .vi { width: 16px; height: 16px; flex: none; }
:root .da-rv .rw-g-acts button:hover:not(:disabled) { background: var(--rs-panel); color: var(--rs-tx); box-shadow: 0 0 0 1px var(--rs-line); }
:root .da-rv .rw-g-acts button:disabled { opacity: .45; cursor: default; }
:root .da-rv .rw-g-acts button[aria-pressed="true"] { background: var(--rs-panel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: 0 0 0 1px var(--rs-line-2); }
:root .da-rv .rw-g-acts .rv-gfb-change { background: none; color: var(--rs-tx-2); border: 0; }
:root .da-rv .rv-gkept { align-self: flex-start; margin-top: 4px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: var(--rs-r-xs); background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); font-size: var(--rs-fs-cap); }
:root .da-rv .rv-gkept.is-off { background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .da-rv .rv-gsum { margin: 4px 4px 8px; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-3); }
:root .da-rv .rv-g:first-of-type { margin-top: 0; }
:root .da-rv .rw-g-acts .rv-gfb-said { grid-column: 1 / -1; }
:root .da-rv .rv-gfb-said { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin: 8px 0 0; }
:root .da-rv .rw-g-acts .rv-gfb-said { margin: 4px 0 0; }
:root .da-rv .rv-gnote { display: inline-block; margin-top: 8px; padding: 2px 4px; }
:root .da-rv .rv-gform { margin-top: 8px; display: grid; gap: 8px; }
:root .da-rv .rv-gform[hidden] { display: none; }
:root .da-rv .rv-gform .input, :root .da-rv .rv-gfform .input { font: var(--rs-w-reg) var(--rs-fs-body)/20px var(--rs-font); border-radius: var(--rs-r-sm); }
:root .da-rv .rv-gform .form-actions, :root .da-rv .rv-gfform .form-actions { display: flex; gap: 8px; margin: 0; }
:root .da-rv .rv-gform .btn, :root .da-rv .rv-gfform .btn { height: 32px; padding: 0 12px; font-size: var(--rs-fs-body); border-radius: var(--rs-r-pill); }
:root .da-rv .rv-gempty { padding: 12px 4px; }
:root .da-rv .rw-gfx:not(:empty) + .rv-gempty { display: none; }
/* Change...: a pop-up over the page */
:root .da-rv .rv-gfscrim { position: fixed; inset: 0; z-index: 70; background: var(--dk-s-1f1f21a24, rgba(31,31,33,.24)); animation: da-fade var(--rs-t) var(--rs-ease); }
:root .da-rv .rv-gfform { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); padding: 16px; border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: var(--rs-pop-shadow); display: grid; gap: 12px; }
:root .da-rv .rv-gfform[hidden] { display: none; }
:root .da-rv .rv-gfform-top { display: grid; grid-template-columns: 136px 1fr; gap: 12px; align-items: center; }
:root .da-rv .rv-gfform-h { display: flex; flex-direction: column; margin: 0; }
:root .da-rv .rv-gfform-h .rv-gfform-at { font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-rv .rv-gfform-h b { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); }
:root .da-rv .rv-gfform-h span { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-rv .rv-gfform textarea { resize: vertical; }
:root .da-rv .gx-sugs { display: flex; flex-wrap: wrap; gap: 4px; }
:root .da-rv .gx-sugs button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-reg) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx-2); cursor: pointer; }
:root .da-rv .gx-sugs button:hover { color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .da-rv .rv-gfform .form-actions { justify-content: flex-end; }

/* changes tab: versions newest first on a rule, the current one tinted */
:root .da-rv .rw-hist-acts { display: flex; gap: 8px; margin: 4px 0 8px; }
:root .da-rv .rw-hist { position: relative; list-style: none; margin: 4px 0 0; padding: 0 0 0 18px; }
:root .da-rv .rw-hist::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 16px; width: 1px; background: var(--rs-line-2); }
:root .da-rv .rw-h { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; margin-bottom: 4px; border-radius: var(--rs-r-inner); font-size: var(--rs-fs-body); }
:root .da-rv .rw-h::before { content: ""; position: absolute; left: -17px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--rs-panel); box-shadow: inset 0 0 0 1.5px var(--rs-peri); transform: none; }
:root .da-rv .rw-h:first-child { background: var(--rs-sel); }
:root .da-rv .rw-h:first-child::before { background: var(--rs-peri-deep); box-shadow: 0 0 0 3px rgba(76,95,146,.16); }
:root .da-rv .rw-h b { font-weight: var(--rs-w-med); }
:root .da-rv .rw-h .when { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); margin: 0; justify-self: end; }
:root .da-rv .rw-h p { grid-column: 1 / -1; margin: 2px 0 4px; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-2); }
:root .da-rv .rw-h .textbtn { grid-column: 1 / -1; justify-self: start; display: inline-block; padding: 0; margin: 0; }
:root .da-rv .rv-hnote { margin: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }

/* the whole-video box */
:root .da-rv .rv-foot { flex: none; display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--rs-line); }
:root .da-rv .rv-compose { display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px 4px 4px 12px; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .da-rv .rv-compose:focus-within { background: var(--rs-panel); box-shadow: var(--rs-ring); }
:root .da-rv .rv-compose input { flex: 1; min-width: 0; height: 32px; border: 0; padding: 0; background: none; outline: none; box-shadow: none; font: var(--rs-w-reg) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root .da-rv .rv-compose input::placeholder { color: var(--rs-tx-3); }
:root .da-rv .rv-send { width: 32px; height: 32px; flex: none; border: 0; border-radius: 9px; padding: 0; display: grid; place-items: center; background: var(--rs-tx); color: var(--dk-oninv, #fff); cursor: pointer; }
:root .da-rv .rv-send .vi { width: 15px; height: 15px; }
:root .da-rv .rv-frow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:root .da-rv .rv-chk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); cursor: pointer; white-space: nowrap; }
:root .da-rv .rv-chk input { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--rs-line-2); background: var(--rs-panel); display: grid; place-items: center; cursor: pointer; }
:root .da-rv .rv-chk input:checked { background: var(--rs-peri-deep); box-shadow: none; }
:root .da-rv .rv-chk input:checked::after { content: ""; width: 8px; height: 4px; border: solid var(--dk-paper, #fff); border-width: 0 0 1.8px 1.8px; transform: translateY(-1px) rotate(-45deg); }
:root .da-rv .rv-chk input:focus-visible { outline: 2px solid var(--rs-peri); outline-offset: 2px; }
:root .da-rv .rv-frow .rv-cap { text-align: right; }

/* ---- the cut ---- */
:root .da-rv .rv-stagep { grid-column: 2; grid-row: 1; padding: 12px; display: flex; flex-direction: column; overflow: hidden; }
:root .da-rv .rv-stage { position: relative; width: 100%; }
:root .da-rv .rw-player { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; }
:root .da-rv .rw-frame { position: absolute; inset: 0; border-radius: var(--rs-r-sm); overflow: hidden; background: #111; container-type: inline-size; }
:root .da-rv .rw-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #111; cursor: pointer; }
:root .da-rv .rw-skel { position: absolute; inset: 0; display: none; pointer-events: none; background: linear-gradient(100deg, var(--dk-b-ffffffa0, rgba(255,255,255,0)) 35%, var(--dk-b-ffffffa28, rgba(255,255,255,.28)) 50%, var(--dk-b-ffffffa0, rgba(255,255,255,0)) 65%) 0 0 / 300% 100%; animation: da-skel 1.6s linear infinite; }
:root .da-rv .rw-frame.is-loading .rw-skel { display: block; }
:root .da-rv .rw-frame.is-loading { background: var(--rs-raise); }
:root .da-rv .rw-frame.is-loading video { filter: blur(6px) brightness(1.1); background: transparent; }
:root .da-rv .rw-player.is-prev .rw-frame video { filter: saturate(.9) brightness(.97); }
:root .da-rv .rw-frame.is-empty { background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .da-rv .rw-none { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--rs-tx-2); font-size: var(--rs-fs-body); }
:root .da-rv .rw-none .vi { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-rv .rv-vtag { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rs-r-pill); background: rgba(20,21,25,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); letter-spacing: 0; font-variant-numeric: tabular-nums; pointer-events: none; }
:root .da-rv .rv-vtag i { width: 6px; height: 6px; border-radius: 50%; background: var(--rs-peri-light); }
:root .da-rv .rw-compare { position: absolute; right: 12px; top: 12px; left: auto; z-index: 3; display: grid; grid-auto-flow: column; gap: 0; margin: 0; padding: 3px; border: 0; border-radius: var(--rs-r-pill); background: rgba(20,21,25,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }
:root .da-rv .rw-compare button { position: relative; z-index: 1; height: 26px; min-width: 0; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); background: none; box-shadow: none; color: rgba(255,255,255,.82); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); cursor: pointer; transition: color var(--rs-t); }
:root .da-rv .rw-compare button[hidden] { display: none; }
:root .da-rv .rw-compare button[aria-checked="true"] { color: var(--rs-tx); }
:root .da-rv .rw-compare button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dk-paper, #fff); }
:root .da-rv .rw-cthumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: var(--rs-r-pill); background: var(--dk-paper, #fff); transition: transform var(--rs-t) var(--rs-ease), width var(--rs-t) var(--rs-ease); }
:root .da-rv .rw-cmp-cap { position: absolute; right: 12px; top: 48px; z-index: 2; padding: 4px 8px; border-radius: var(--rs-r-xs); background: rgba(20,21,25,.55); color: #fff; font-size: var(--rs-fs-cap); opacity: 0; transition: opacity var(--rs-t); pointer-events: none; }
:root .da-rv .rw-cmp-cap.show { opacity: 1; }
/* applying a note: the frame dims under a blur */
:root .da-rv #rvApplying:empty { display: none; }
:root .da-rv .rw-apply { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 16px; color: #fff; background: rgba(31,31,33,.5); -webkit-backdrop-filter: blur(5px) saturate(.8); backdrop-filter: blur(5px) saturate(.8); animation: da-fade var(--rs-t) var(--rs-ease); }
/* the veil sits on the video, so it is the same dark glass with white type in both themes (the dark-theme tokens turned it pale) */
:root .da-rv .rw-apply-spark { display: grid; }
:root .da-rv .rw-apply-spark .vi { animation: da-spin 3.2s linear infinite; }
:root .da-rv .rw-apply h2 { margin-top: 8px; font-size: var(--rs-fs-sec); color: #fff; white-space: normal; }
:root .da-rv .rw-apply p { margin: 0; font-size: var(--rs-fs-cap); opacity: .9; }
:root .da-rv .rw-apply-bar { margin-top: 8px; width: min(260px, 60%); height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
:root .da-rv .rw-apply-bar i { display: block; height: 100%; width: 40%; background: #fff; border-radius: 4px; animation: da-applyRun 2.6s var(--rs-ease) infinite; }
@keyframes da-applyRun { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
:root .da-rv .rw-apply .pill { margin-top: 8px; height: 32px; padding: 0 16px; font-size: var(--rs-fs-body); }
:root .da-rv .pill.ghost-w { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.6); color: #fff; border-radius: var(--rs-r-pill); }
:root .da-rv .pill.ghost-w:hover { background: var(--dk-b-ffffffa24, rgba(255,255,255,.24)); }
/* approved: the check on a dark glass disc */
:root .da-rv .rw-approved { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(45% 60% at 50% 50%, var(--dk-b-1f1f21a62, rgba(31,31,33,.62)), var(--dk-b-1f1f21a22, rgba(31,31,33,.22))); }
:root .da-rv .rw-approved[hidden] { display: none; }
:root .da-rv .landed-check { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--dk-b-1f1f21a62, rgba(31,31,33,.62)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: da-land 520ms var(--ease-spring, cubic-bezier(.3,1.4,.5,1)) both; }
@keyframes da-land { from { opacity: 0; transform: scale(.4); } }
:root .da-rv.is-approved .rw-compare, :root .da-rv.is-approved .rv-transport .rw-play { opacity: .35; pointer-events: none; }
/* the transport row: play, time, what Volare did, shortcuts */
:root .da-rv .rv-transport { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; padding: 8px 4px 0; container-type: inline-size; min-width: 0; }
:root .da-rv .rw-play { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--rs-tx); color: var(--dk-oninv, #fff); cursor: pointer; transition: transform var(--rs-t) var(--rs-ease); }
:root .da-rv .rw-play:active { transform: scale(.94); }
:root .da-rv .rw-play:focus-visible { outline: 2px solid var(--rs-peri); outline-offset: 2px; }
:root .da-rv .rw-pi { margin-left: 2px; display: grid; }
:root .da-rv .rw-pi .vi { width: 14px; height: 14px; color: currentColor; }   /* the button sets the ink (white on dark in light mode, charcoal on light in dark mode) */
:root .da-rv .rw-pause { display: none; gap: 3px; }
:root .da-rv .rw-pause i { width: 3px; height: 12px; border-radius: 1px; background: currentColor; display: block; }
:root .da-rv .rw-play.playing .rw-pi { display: none; }
:root .da-rv .rw-play.playing .rw-pause { display: flex; }
:root .da-rv .rw-time { font-size: var(--rs-fs-body); color: var(--rs-tx-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root .da-rv .rv-kpis, :root .da-rv #rvKpis { margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0; overflow: hidden; }
:root .da-rv .rv-stats { display: flex; align-items: baseline; gap: 16px; margin: 0; min-width: 0; }
:root .da-rv .rv-stats div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
:root .da-rv .rv-stats dt { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-rv .rv-stats dd { margin: 0; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx); font-variant-numeric: tabular-nums; }
@container (max-width: 700px) { :root .da-rv .rv-stats div:nth-child(n+3) { display: none; } }
@container (max-width: 470px) { :root .da-rv .rv-stats { display: none; } }
:root .da-rv .rw-help { position: relative; flex: none; }
:root .da-rv .rw-q { width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-3); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); cursor: pointer; }
:root .da-rv .rw-q:hover, :root .da-rv .rw-q[aria-expanded="true"] { background: var(--rs-inset); color: var(--rs-tx); }
:root .da-rv .rw-keys { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; width: 280px; padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-panel); box-shadow: var(--rs-pop-shadow), 0 0 0 1px var(--rs-line); }
:root .da-rv .rw-keys[hidden] { display: none; }
:root .da-rv .rv-keys-h { margin: 0 0 4px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .da-rv .rw-keylist { margin: 0; }
:root .da-rv .rw-keylist div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--rs-fs-cap); border-top: 1px solid var(--rs-line); }
:root .da-rv .rw-keylist div:first-child { border-top: 0; }
:root .da-rv .rw-keylist dd { margin: 0; color: var(--rs-tx-2); text-align: right; }
:root .da-rv .rw-keylist kbd { font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); padding: 2px 6px; border-radius: var(--rs-r-xs); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }

/* ---- the whole cut ---- */
:root .da-rv .rv-tl { grid-column: 2; grid-row: 2; padding: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 132px; }
:root .da-rv .rv-tl .rv-phd { margin-bottom: 4px; }
:root .da-rv .rv-legend { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); white-space: nowrap; }
:root .da-rv .rv-legend span { display: inline-flex; align-items: center; gap: 4px; }
:root .da-rv .rv-legend i, :root .da-rv .rv-chip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
:root .da-rv i.g { background: var(--rs-peri-deep); }
:root .da-rv i.n { background: var(--rs-peri); border-radius: 50%; }
:root .da-rv i.o { background: repeating-linear-gradient(-45deg, rgba(154,59,51,.5) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px rgba(154,59,51,.4); }
:root .da-rv .rv-lanes { position: relative; flex: 1; min-height: 76px; --t: 0; }
:root .da-rv .rv-secs { position: absolute; inset: 0; pointer-events: none; }
:root .da-rv .rv-sl { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--dk-l-1f1f21a14, rgba(31,31,33,.14)); }
:root .da-rv .rv-sl span { position: absolute; top: 0; left: 4px; display: block; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .da-rv .rv-chips { position: absolute; left: 0; right: 0; top: 18px; height: 20px; }
:root .da-rv .rv-chip { position: absolute; top: 0; height: 20px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 6px; border: 0; border-radius: 7px; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx); white-space: nowrap; cursor: pointer; z-index: 2; }
:root .da-rv .rv-chip span { overflow: hidden; text-overflow: ellipsis; }
:root .da-rv .rv-chip { padding-left: 2px; }
:root .da-rv .rv-chip .rv-chip-th { position: relative; flex: none; width: 24px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--rs-raise); }
:root .da-rv .rv-chip .rv-chip-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
:root .da-rv .rv-chip span.rv-chip-th { overflow: hidden; }
:root .da-rv .rv-chip:hover { box-shadow: inset 0 0 0 1px var(--rs-peri); }
:root .da-rv .rv-chip--note { background: var(--rs-sel); box-shadow: none; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-rv .rv-chip[aria-pressed="true"] { background: var(--rs-peri-deep); color: #fff; box-shadow: 0 2px 8px rgba(76,95,146,.3); }
:root .da-rv .rv-chip[aria-pressed="true"] i { background: var(--dk-paper, #fff); }
:root .da-rv .rw-scrub { position: absolute; left: 0; right: 0; top: 42px; bottom: 6px; border-radius: 6px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); overflow: hidden; cursor: pointer; outline: none; touch-action: none; }
:root .da-rv .rw-scrub:focus-visible { box-shadow: var(--rs-ring); }
:root .da-rv .rv-lanes { cursor: pointer; touch-action: none; }
:root .da-rv .rv-track { position: absolute; inset: 0; display: block; }
:root .da-rv .rv-track svg { display: block; width: 100%; height: 100%; }
:root .da-rv .rv-track rect.a { fill: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-rv .rv-track rect.b { fill: var(--rs-peri); }
:root .da-rv .rv-track rect.cut { fill: var(--dk-t-1f1f21a18, rgba(31,31,33,.18)); }
:root .da-rv .rw-marks { position: absolute; inset: 0; pointer-events: none; }
:root .da-rv .rw-mk.out { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: repeating-linear-gradient(-45deg, rgba(154,59,51,.32) 0 2px, var(--dk-b-fae9e6a70, rgba(250,233,230,.7)) 2px 5px); box-shadow: inset 0 0 0 1px rgba(154,59,51,.35); }
:root .da-rv .rv-lanes > .rw-head { position: absolute; top: 14px; bottom: 0; left: calc(var(--t) * 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--rs-tx); z-index: 3; pointer-events: none; }
:root .da-rv .rv-lanes > .rw-head::before { content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px 3px 5px 5px; background: var(--rs-tx); }

/* ---- the head: Undo and Approve beside the progress pill (moved there on mount) ---- */
:root .da-rv-head #rvDecide { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; flex: none; }
:root .da-rv-head #rvDecide .rs-btn { height: 40px; }
:root .da-rv-head #rvDecide .rs-btn .vi { width: 16px; height: 16px; }
:root .da-rv-head #rvDecide .rs-btn--primary .vi { color: #fff; }
:root .da-rv-head #rvDecide .rv-hundo[disabled] { opacity: .45; }
:root .da-rv-head #approveBtn:disabled { background: var(--dk-b-1f1f21a28, rgba(31,31,33,.28)); box-shadow: none; color: #fff; cursor: not-allowed; pointer-events: auto; opacity: 1; }
/* phones: Share / Publish at the left, then Undo, Approve and the ⋯ menu on one row (mockup head-r) */
@media (max-width: 760px) {
  :root body .da-rv-head .fstage--ws .head.p2-head .p2-acts > .p2-cutacts { margin-left: 0; margin-right: 0; }
  :root body .da-rv-head .fstage--ws .head.p2-head .p2-acts > .p2-pop-anchor { margin-left: 0; }
}
/* narrower desktops: Publish (not in the mockup's head) folds to its icon so the title keeps its room */
@media (min-width: 761px) and (max-width: 1399px) {
  :root .fstage--ws[data-page="review"] .p2-cutacts .da-hbtn--ink { width: 36px; padding: 0; gap: 0; }
  :root .fstage--ws[data-page="review"] .p2-cutacts .da-hbtn--ink .da-hl { display: none; }
}
/* one primary per view: Publish reads as a secondary button on Review */
:root .fstage--ws[data-page="review"] .da-hbtn--ink { background: var(--rs-panel); color: var(--rs-tx); border-color: var(--rs-line-2); }
:root .fstage--ws[data-page="review"] .da-hbtn--ink .vi { color: var(--rs-tx); }

/* desktop: the editor fills the window under the head; the cut is the largest 16:9 that fits; the timeline keeps its
   own height (a compact scrub strip, bars 44px) and any height left over sits as space under it, never in the bars */
@media (min-width: 761px) {
  :root .fstage--ws[data-page="review"] { display: flex; flex-direction: column; height: calc(100dvh - var(--rs-top-h) - var(--rs-gap)); min-height: 560px; }
  :root .fstage--ws[data-page="review"] > .da-rv { flex: 1; min-height: 0; }
  /* the outlet's 8px bottom padding would push the page 8px past the window (the shell's .main keeps its 16px) */
  :root body.app:has(.fstage--ws[data-page="review"]) .outlet { padding-bottom: 0; }
  :root .da-rv .rv-ed { flex: 1; min-height: 0; grid-template-rows: minmax(0, max-content) minmax(140px, 1fr); }
  :root .da-rv .rv-tl { align-self: start; }
  :root .da-rv .rv-lanes { flex: none; height: 92px; min-height: 0; }   /* 140px row = 24 padding + 24 head + 92 lanes */
  :root .da-rv .rv-ed.no-tl { grid-template-rows: minmax(0, 1fr); }
  :root .da-rv .rv-ed.no-tl .rv-side { grid-row: 1; }
  :root .da-rv .rv-stagep { min-height: 0; }
  :root .da-rv .rv-stage { flex: 0 1 auto; aspect-ratio: 16 / 9; min-height: 0; container-type: size; display: grid; place-items: center; }
  :root .da-rv .rw-player { width: min(100cqw, 100cqh * 16 / 9); max-height: 100%; }
  :root .da-rv .rv-ed.no-tl .rv-stage { flex: 1 1 auto; }
}
@media (min-width: 761px) and (max-width: 1180px) { :root .da-rv .rv-ed { grid-template-columns: 280px minmax(0, 1fr); } :root .da-rv .rv-legend { display: none; } }

/* phones: the cut, then the whole cut, then the side panel (its list scrolls inside); the change box is a bottom sheet */
@media (max-width: 760px) {
  :root .da-rv .rv-ed { display: flex; flex-direction: column; }
  :root .da-rv .rv-stagep { order: 1; }
  :root .da-rv .rv-tl { order: 2; min-height: 0; }
  :root .da-rv .rv-side { order: 3; height: 640px; flex: none; }
  :root .da-rv .rv-vtag { top: auto; bottom: 8px; left: 8px; }
  :root .da-rv .rw-compare { top: 8px; right: 8px; }
  :root .da-rv .rw-compare button { padding: 0 10px; }
  :root .da-rv .rv-stats, :root .da-rv .rv-legend { display: none; }
  :root .da-rv .rv-lanes { flex: none; height: 52px; min-height: 0; }
  :root .da-rv .rv-secs { display: none; }
  :root .da-rv .rv-chips { top: 0; }
  :root .da-rv .rv-chip { padding: 0 6px; gap: 0; }
  :root .da-rv .rv-chip span:not(.rv-chip-th) { display: none; }
  :root .da-rv .rv-chip--note { display: none; }
  :root .da-rv .rw-scrub { top: 26px; bottom: 4px; }
  :root .da-rv .rv-lanes > .rw-head { top: 22px; }
  :root .da-rv .rw-keys { width: min(280px, calc(100vw - 64px)); }
  :root .da-rv .rw-tools { position: static; grid-column: 2; justify-self: start; margin: -2px 0 8px; opacity: 1; pointer-events: auto; display: none; box-shadow: none; padding: 0; gap: 4px; background: none; }
  /* a tap opens the change box (Take out is its first chip), so the hover tools stay hidden on phones (mockup) */
  :root .da-rv .rw-tools button { box-shadow: inset 0 0 0 1px var(--rs-line); background: var(--rs-panel); }
  :root .da-rv .rv-lbox { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; background: var(--rs-panel); box-shadow: var(--rs-pop-shadow); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  :root .da-rv .rv-lbox::before { display: none; }
  :root .da-rv .rv-lbox textarea { font-size: 16px; }
  :root .da-rv .rv-lscrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 59; background: var(--dk-s-1f1f21a12, rgba(31,31,33,.12)); pointer-events: none; }   /* visual only: a tap on another line adds it, a tap elsewhere closes an empty box */
  :root .da-rv-head #rvDecide { margin-left: auto; }
  :root .da-rv-head #rvDecide .rs-btn { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { :root .da-rv .rv-lbox, :root .da-rv .rw-skel { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  :root :is(.da-rv, .da-pk) *, :root :is(.da-rv, .da-pk) *::before, :root :is(.da-rv, .da-pk) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ================= PACKAGING ================= */
:root .da-pk .pk-art { padding: 28px 40px 24px; }
:root .da-pk .pk-tools { display: flex; justify-content: flex-end; gap: 8px; margin: -12px -16px 12px 0; }
:root .da-pk .pk-seg { background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-edge), var(--frost-shadow-sm); display: inline-flex; padding: 3px; border-radius: var(--r-pill); }
:root .da-pk .pk-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; font-size: 12px; font-weight: 500; color: var(--s-ink); transition: background var(--t-small), box-shadow var(--t-small); }
:root .da-pk .pk-seg button[aria-checked="true"] { background: var(--dk-paper, #fff); box-shadow: 0 1px 3px rgba(31,31,33,.12); }
:root .da-pk .pk-seg button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--s-peri-deep); }
:root .da-pk .pk-feed { display: grid; grid-template-columns: 0fr minmax(0, 1fr) 0fr; gap: 0; justify-content: center; transition: grid-template-columns var(--t-large) var(--ease-inout), gap var(--t-large) var(--ease-inout), padding var(--t-large) var(--ease-inout); padding: 0 6%; }
:root .da-pk .feed-small .pk-feed { grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 40px 0; }
:root .da-pk .pk-yt { min-width: 0; border-radius: 20px; padding: 14px 14px 16px; background: var(--dk-paper, #fff); box-shadow: 0 18px 48px rgba(31,31,33,.16); transition: background var(--t-medium), padding var(--t-large) var(--ease-inout), border-radius var(--t-large); }
:root .da-pk .feed-small .pk-yt { padding: 8px 8px 10px; border-radius: 14px; }
:root .da-pk .pk-ghost { overflow: hidden; opacity: 0; padding: 0; transition: opacity var(--t-medium); }
:root .da-pk .feed-small .pk-ghost { opacity: 1; padding: 8px 8px 10px; }
:root .da-pk .pk-gthumb { display: block; aspect-ratio: 16 / 9; border-radius: 9px; background: var(--s-shell); }
:root .da-pk .pk-gl { display: block; height: 9px; border-radius: 4px; background: var(--s-shell); margin: 10px 0 0 36px; }
:root .da-pk .pk-gl.s { width: 50%; margin-top: 6px; }
:root .da-pk .feed-dark .pk-yt { background: #0F0F0F; }
:root .da-pk .feed-dark :is(.pk-gthumb, .pk-gl) { background: #272727; }
:root .da-pk .pk-frame { border-radius: 12px; box-shadow: none; background: var(--s-shell); }
:root .da-pk .feed-small .pk-frame { border-radius: 8px; }
:root .da-pk .pk-frame.is-over { box-shadow: 0 0 0 3px var(--s-peri-deep); }
:root .da-pk .pk-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 200ms var(--ease-out); }
:root .da-pk .pk-frame img.swap { opacity: 0; }
:root .da-pk .pk-view:not(.thumb-set) .pk-frame img { filter: saturate(.7); }
:root .da-pk .pk-empty { position: absolute; inset: 10px; display: grid; place-items: center; border: 1.5px dashed rgba(255,255,255,.9); border-radius: 8px; color: #fff; font-size: clamp(12px, 2.6cqw, 16px); font-weight: 500; text-shadow: 0 1px 8px rgba(31,31,33,.6); background: var(--dk-b-1f1f21a25, rgba(31,31,33,.25)); }
:root .da-pk .pk-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
:root .da-pk .pk-abc { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
:root .da-pk .pk-abc span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--dk-b-1f1f21a55, rgba(31,31,33,.55)); color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600; display: grid; place-items: center; transition: background var(--t-small), color var(--t-small); }
:root .da-pk .pk-abc span.on { background: var(--dk-paper, #fff); color: var(--s-ink); }
:root .da-pk .pk-meta { display: grid; grid-template-columns: 36px 1fr; gap: 12px; margin-top: 12px; }
:root .da-pk .feed-small .pk-meta { grid-template-columns: 24px 1fr; gap: 8px; margin-top: 8px; }
:root .da-pk .pk-av { width: 36px; height: 36px; border-radius: 50%; background: var(--s-peri-deep); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 500; }
:root .da-pk .feed-small .pk-av { width: 24px; height: 24px; font-size: 11px; }
:root .da-pk .pk-title { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--s-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .da-pk .feed-small .pk-title { font-size: 12px; }
:root .da-pk .pk-tph { color: var(--s-ink-2); }
:root .da-pk .pk-ch { margin-top: 3px; font-size: 13px; color: var(--s-ink-2); }
:root .da-pk .feed-small .pk-ch { font-size: 11px; }
:root .da-pk .feed-dark .pk-title { color: #F1F1F1; }
:root .da-pk .feed-dark .pk-ch { color: #AAAAAA; }
:root .da-pk .feed-dark .pk-tph { color: var(--dk-t-717171, #717171); }
:root .da-pk .pk-cap { margin-top: 14px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 6px rgba(31,31,33,.4); }
/* the card: three stages, one open */
:root .da-pk .pk-scroll { padding: 6px 20px 30px; }
:root .da-pk .pk-closed { margin: 12px 0 4px; font-size: 13px; color: var(--s-ink-2); }
:root .da-pk .pk-stage { border-bottom: 1px solid var(--s-line); }
:root .da-pk .pk-stage:last-of-type { border-bottom: 0; }
:root .da-pk .pk-sh { width: 100%; display: grid; grid-template-columns: 22px 1fr 14px; gap: 12px; align-items: center; padding: 15px 0; background: none; border: 0; text-align: left; border-radius: 8px; outline: none; color: var(--s-ink); }
:root .da-pk .pk-sh:focus-visible { box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root .da-pk .pk-sn { width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--s-ink-2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(31,31,33,.2); font-variant-numeric: tabular-nums; }
:root .da-pk .pk-stage.done .pk-sn { box-shadow: inset 0 0 0 1.5px var(--s-peri-deep); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .da-pk .pk-stage.open .pk-sn { box-shadow: inset 0 0 0 1.5px var(--s-ink); color: var(--s-ink); }
:root .da-pk .pk-st { min-width: 0; }
:root .da-pk .pk-st b { display: block; font-size: 15px; font-weight: 500; }
:root .da-pk .pk-sv { font-size: 12px; color: var(--s-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .da-pk .pk-stage.open .pk-sv { display: none; }
:root .da-pk .pk-sx { width: 8px; height: 8px; border-right: 1.5px solid var(--s-ink-2); border-bottom: 1.5px solid var(--s-ink-2); transform: rotate(45deg); transition: transform var(--t-medium) var(--ease-out); }
:root .da-pk .pk-stage.open .pk-sx { transform: rotate(225deg); }
:root .da-pk .pk-sb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-medium) var(--ease-out); }
:root .da-pk .pk-sb > .pk-sb-in { overflow: hidden; min-height: 0; padding: 0 2px; margin: 0 -2px; }
:root .da-pk .pk-stage.open .pk-sb { grid-template-rows: 1fr; }
:root .da-pk .pk-stage:not(.open) .pk-sb { visibility: hidden; }
:root .da-pk .pk-stage.open .pk-sb-in > * { animation: da-rise var(--t-medium) var(--ease-out) both; }
:root .da-pk .pk-stage.open .pk-sb-in > *:nth-child(2) { animation-delay: 40ms; }
:root .da-pk .pk-sb-in { padding-bottom: 16px; }
:root .da-pk .pk-sec { display: block; padding: 0; margin: 0; border: 0; box-shadow: none; background: none; }
:root .da-pk .pk-set { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
:root .da-pk .pk-first p { font-size: 13px; color: var(--s-ink-2); }
:root .da-pk .pk-first .acts { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
:root .da-pk .pk-practice, :root .da-pk .pkg-practice { font-size: 12px; color: var(--s-faint); margin: 0 0 10px; }
:root .da-pk .pk-wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--s-ink-2); margin-bottom: 10px; }
:root .da-pk .pk-wait .vi { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); animation: da-spin 3s linear infinite; }
:root .da-pk .pk-skel { height: 64px; border-radius: 14px; background: linear-gradient(100deg, var(--dk-paper, #fff) 30%, rgba(135,153,195,.18) 50%, var(--dk-paper, #fff) 70%) 0 0 / 300% 100%; box-shadow: inset 0 0 0 1px var(--s-line); animation: da-skel 1.4s linear infinite; margin-bottom: 8px; }
/* title options: ink ring + check, Why folds, Change words */
:root .da-pk .pk-opt { position: relative; display: block; padding: 11px 12px 10px; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-card); transition: border-color var(--t-small), box-shadow var(--t-small); }
:root .da-pk .pk-opt:hover { border-color: var(--dk-l-1f1f21a24, rgba(31,31,33,.24)); }
:root .da-pk .pk-opt.is-chosen, :root .da-pk .pk-opt:has(> .pkg-option input:checked) { border-color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-ink); }
:root .da-pk .pkg-option { display: flex; gap: 10px; align-items: flex-start; padding: 0; border: 0; box-shadow: none; background: none; cursor: pointer; margin: 0; }
:root .da-pk .pkg-option:has(input:checked) { border: 0; box-shadow: none; }
:root .da-pk .pkg-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root .da-pk .pk-opt:focus-within { box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root .da-pk .pk-opt.is-chosen:focus-within { box-shadow: 0 0 0 1px var(--s-ink), 0 0 0 4px var(--s-peri-soft); }
:root .da-pk .pkg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 26px; }
:root .da-pk .pkg-text { font-size: 14px; line-height: 1.35; color: var(--s-ink); }
:root .da-pk .pkg-notes { font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .pk-tag { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--s-ink); color: transparent; font-size: 0; overflow: hidden; animation: da-land var(--t-medium) var(--ease-spring) both; }
:root .da-pk .pk-tag::after { content: ""; position: absolute; left: 6px; top: 5.5px; width: 8px; height: 4.5px; border-left: 2px solid var(--dk-paper, #fff); border-bottom: 2px solid var(--dk-paper, #fff); transform: rotate(-45deg); }
:root .da-pk .pkg-edit { display: inline; margin: 6px 12px 0 0; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); text-decoration: underline; text-decoration-color: var(--dk-t-4c5f92a35, rgba(76,95,146,.35)); text-underline-offset: 3px; min-height: 0; height: auto; }
:root .da-pk .pkg-why { display: inline-block; margin: 6px 0 0; font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .pkg-why summary { display: inline; cursor: pointer; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); list-style: none; }
:root .da-pk .pkg-why summary::-webkit-details-marker { display: none; }
:root .da-pk .pkg-why[open] { display: block; }
:root .da-pk .pkg-why .pkg-notes, :root .da-pk .pkg-flags { display: block; margin-top: 4px; }
:root .da-pk .pkg-flag { display: block; font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .pkg-reword .field-label, :root .da-pk .pk-own-field .field-label { font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .pkg-reword .input, :root .da-pk .pk-own-field .input { margin-top: 6px; padding: 8px 10px; font-size: 14px; }
:root .da-pk .pk-countline { margin: 6px 0 0; font-size: 12px; color: var(--s-faint); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 2px; }
:root .da-pk .pk-count.is-long { color: var(--dk-t-8a5d12, #8A5D12); }
:root .da-pk .pk-soft { color: var(--dk-t-8a5d12, #8A5D12); }
:root .da-pk .plan-actions, :root .da-pk .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
:root .da-pk :is(.plan-actions, .form-actions, .pk-up-ops) .btn { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
:root .da-pk .pk-row2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; }
:root .da-pk .pk-row2 .textbtn { font-size: 13px; padding: 0; }
:root .da-pk .pk-row2 .faint { font-size: 12px; }
:root .da-pk #pkHooks { margin-top: 14px; }
:root .da-pk .pk-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 500; }
:root .da-pk .pk-lbl { display: flex; justify-content: space-between; align-items: baseline; }
:root .da-pk .pk-lbl .faint { font-weight: 400; font-size: 12px; }
:root .da-pk .pk-for, :root .da-pk .pkg-wait { font-size: 12px; color: var(--s-ink-2); margin: 0 0 8px; padding: 0; border: 0; }
:root .da-pk .pk-quiet { margin-top: 8px; font-size: 12px; color: var(--s-ink-2); line-height: 1.45; }
:root .da-pk .pk-quiet.f { color: var(--s-faint); }
/* thumbnail: the two doors as a segmented switch */
:root .da-pk .pk-doors { grid-template-columns: 1fr 1fr; max-width: none; gap: 0; }
:root .da-pk .pk-doors .seg-thumb { width: calc((100% - 8px) / 2); }
:root .da-pk .pk-door { display: flex; min-height: 0; height: 36px; padding: 0 8px; border: 0; box-shadow: none; background: none; font-size: 13px; justify-content: center; align-items: center; }
:root .da-pk .pk-door[aria-selected="true"] { color: var(--s-ink); font-weight: 500; box-shadow: none; }
:root .da-pk #pkWords .pk-opt { padding: 7px 12px; border-radius: 12px; }
/* images (js/thumbnails.js) inside the stage: a 3-column grid with A/B/C tags in pick order */
:root .da-pk .tn-images-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
:root .da-pk .tn-images-head .tn-line--quiet { font-size: 12px; color: var(--s-ink-2); margin: 0; }
:root .da-pk .tn-images .btn { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
:root .da-pk .tn-images .estate { padding: 4px 0; text-align: left; align-items: flex-start; }
:root .da-pk .tn-images .estate-art, :root .da-pk .tn-images .estate .halftone, :root .da-pk .tn-images .estate-ic { display: none; }
:root .da-pk .tn-images .estate-title { font-size: 13px; font-weight: 500; }
:root .da-pk .tn-images :is(.estate-body, .estate-note) { font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .tn-cand-grid, :root .da-pk .tn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
:root .da-pk .tn-cand { position: relative; border-radius: 10px; font-size: 11px; }
:root .da-pk .tn-cand.is-picked { box-shadow: 0 0 0 2px var(--s-ink); }
:root .da-pk .tn-cand img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 10px; }
:root .da-pk .tn-cand-words { display: block; margin-top: 4px; line-height: 1.3; color: var(--s-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .da-pk .tn-line { font-size: 12px; color: var(--s-ink-2); }
/* upload my own */
:root .da-pk .pk-drop { display: grid; justify-items: start; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--dk-l-1f1f21a22, rgba(31,31,33,.22)); background: var(--dk-b-fbfaf8, #FBFAF8); cursor: pointer; font-size: 13px; }
:root .da-pk .pk-drop.is-over { border-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); background: var(--s-peri-soft); }
:root .da-pk .pk-drop .vi { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
/* your images: up to three small tiles in a row (A, B, C), each with Replace and Remove under it */
:root .da-pk .pk-ups { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
:root .da-pk .pk-up { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; min-width: 0; }
:root .da-pk .pk-up + .pk-up { border-top: 0; }
:root .da-pk .pk-up-pic { position: relative; display: block; }
:root .da-pk .pk-up img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px var(--s-line); }
:root .da-pk .pk-up-slot { position: absolute; left: 4px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: var(--s-ink); color: var(--dk-oninv, #fff); font-size: 10px; font-weight: 600; display: grid; place-items: center; }
:root .da-pk .pk-up .type-strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .da-pk .pk-up .type-meta { font-size: 11px; color: var(--s-ink-2); margin: 0; }
:root .da-pk .pk-up-ops { display: flex; gap: 8px; margin-top: 0; flex-wrap: wrap; }
:root .da-pk .pk-up-ops .btn { height: auto; padding: 0; border: 0; background: none; box-shadow: none; font-size: 11px; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); text-decoration: underline; text-underline-offset: 2px; border-radius: 0; min-height: 0; }
:root .da-pk #pkUpMsg:empty { display: none; }
:root .da-pk #pkUpMsg { font-size: 12px; margin: 0 0 8px; color: var(--s-ink-2); }
:root .da-pk #pkUpMsg.is-bad { color: var(--dk-tx-s-danger, var(--s-danger)); display: flex; gap: 6px; align-items: flex-start; }
:root .da-pk #pkUpMsg.is-bad .vi { flex: none; margin-top: 1px; }
:root .da-pk .pk-fit { padding: 14px; border-radius: 14px; background: var(--s-shell); margin-bottom: 8px; font-size: 13px; }
/* post: five short rows */
:root .da-pk .pk-post { display: flex; flex-direction: column; }
:root .da-pk .pk-prow { display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--s-hair); }
:root .da-pk .pk-prow:first-child { border-top: 0; padding-top: 2px; }
:root .da-pk .pk-prow > .p2-i { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); margin-top: 1px; }
:root .da-pk .pk-prow b { font-size: 14px; font-weight: 500; display: block; }
:root .da-pk .pk-prow .s { font-size: 12px; color: var(--s-ink-2); display: block; }
:root .da-pk .pk-prow .a { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
:root .da-pk .pk-prow .a .pill { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
:root .da-pk .pk-prow .a .textbtn { font-size: 13px; padding: 0 4px; }
:root .da-pk .pk-prow > :is(.pk-pre, .pk-res-out, .pk-resform) { grid-column: 2; }
:root .da-pk .pk-pre { margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--s-shell); font: 12px/1.5 inherit; font-family: inherit; white-space: pre-wrap; max-height: 220px; overflow: auto; }
:root .da-pk .pk-res { grid-column: 2; min-width: 0; margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; }
:root .da-pk .pk-res label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--s-ink-2); }
:root .da-pk .pk-res .input { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
:root .da-pk .pk-resform .select { display: block; margin-top: 8px; }
:root .da-pk .pk-resform select { font-size: 13px; padding: 6px 10px; }
:root .da-pk .pk-res-out { margin-top: 6px; font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .pk-res-out b { color: var(--dk-tx-s-positive, var(--s-positive)); font-weight: 500; }
:root .da-pk .pk-rawnote { margin-top: 12px; }
:root .da-pk .pk-yth:empty { display: none; }
:root .da-pk .pk-yth .yt-card { padding: 12px 0; border-top: 1px solid var(--s-hair); }
:root .da-pk .pk-yth .rv-group-head h2 { font-size: 14px; font-weight: 500; margin: 0; }
:root .da-pk .pk-yth .rv-group-head p { font-size: 12px; color: var(--s-ink-2); margin: 2px 0 0; }
:root .da-pk .pk-yth .btn { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
:root .da-pk .pk-msg { font-size: 12px; color: var(--s-ink-2); margin: 8px 0 0; }
:root .da-pk .pk-msg:empty { display: none; }
:root .da-pk .pk-foot { justify-content: space-between; }
:root .da-pk .pk-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; }
:root .da-pk .pk-foot .pill { height: 42px; }
@media (max-width: 760px) {
  :root .da-pk .pk-art { padding: 14px 14px 18px; }
  :root .da-pk .pk-tools { margin: 0 0 12px; justify-content: space-between; }
  :root .da-pk .pk-feed { padding: 0; }
  :root .da-pk .feed-small .pk-feed { grid-template-columns: 1fr 1fr; padding: 12px 0; gap: 8px; }
  :root .da-pk .feed-small .pk-ghost:last-child { display: none; }
  :root .da-pk .pk-yt { padding: 10px 10px 12px; border-radius: 16px; }
  :root .da-pk .pk-title { font-size: 15px; }
  :root .da-pk .pk-cap { font-size: 12px; margin-top: 10px; }
  :root .da-pk .pk-foot .pill { height: 40px; font-size: 14px; padding: 0 16px; }
}

/* ================= Post kit pop-up ================= */
:root .da-kitdlg { width: min(860px, calc(100vw - 32px)); max-width: none; }
:root .da-kit .kit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
:root .da-kit .kit-sub { margin: 0; font-size: 13px; color: var(--s-ink-2); }
:root .da-kit .kit-dl { display: flex; gap: 8px; flex: none; }
:root .da-kit .pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--s-line); background: var(--s-card); font-size: 13px; font-weight: 500; color: var(--s-ink); text-decoration: none; cursor: pointer; }
:root .da-kit .seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); padding: 4px; margin-top: 16px; border-radius: 14px; background: var(--s-shell); border: 1px solid var(--s-hair); }
:root .da-kit .seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 4)); border-radius: 10px; background: var(--s-card); box-shadow: 0 1px 2px rgba(31,31,33,.08), 0 2px 8px rgba(31,31,33,.08); transition: transform var(--t-medium) var(--ease-inout); }
:root .da-kit .segb { position: relative; z-index: 1; height: 36px; border: 0; background: none; font-size: 13px; color: var(--s-ink-2); cursor: pointer; border-radius: 10px; }
:root .da-kit .segb[aria-selected="true"] { color: var(--s-ink); font-weight: 500; }
:root .da-kit .kit-body { margin-top: 14px; }
:root .da-kit .kit-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
:root .da-kit .kit-label b { font-weight: 500; }
:root .da-kit .kit-label .pill { margin-left: auto; }
:root .da-kit .kit-text { width: 100%; font-size: 13px; line-height: 1.55; height: 300px; resize: vertical; }
:root .da-kit .kit-seo { margin-top: 8px; font-size: 12px; color: var(--s-ink-2); padding: 8px 10px; border-radius: 10px; background: var(--s-shell); }
:root .da-kit .kit-seo b { font-weight: 500; color: var(--s-ink); }
:root .da-kit .textbtn { background: none; border: 0; padding: 0 2px; font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) { :root .da-kit .kit-head { flex-direction: column; gap: 10px; } :root .da-kit .kit-text { height: 260px; } :root .da-kit .segb { font-size: 12px; } }
/* thumbnail words: chips, the reason under the picked one only */
:root .da-pk #pkWords { flex-direction: row; flex-wrap: wrap; gap: 6px; }
:root .da-pk #pkWords > .pk-opt { padding: 0 14px; height: 32px; display: inline-flex; align-items: center; border-radius: var(--r-pill); }
:root .da-pk #pkWords > .pk-opt .pkg-body { padding: 0; }
:root .da-pk #pkWords > .pk-opt .pkg-text { font-size: 13px; }
:root .da-pk #pkWords > .pk-opt.is-chosen { background: var(--s-ink); box-shadow: none; }
:root .da-pk #pkWords > .pk-opt.is-chosen .pkg-text { color: #fff; }
:root .da-pk #pkWords > .pk-opt .pkg-why { display: none; }
:root .da-pk #pkWords > .pk-own { flex: 1 1 100%; padding: 0; border: 0; height: auto; }
:root .da-pk #pkWords > .pk-own .pkg-option { display: inline-flex; padding: 0 14px; height: 32px; align-items: center; border-radius: var(--r-pill); border: 1px solid var(--s-line); }
:root .da-pk #pkWords > .pk-own .pkg-notes { display: none; }
:root .da-pk #pkWords .pkg-option { align-items: center; height: 100%; }
:root .da-pk #pkWords > .pk-own .pkg-option { width: auto; max-width: max-content; }
:root .da-pk #pkWords > .pk-own.is-open .pkg-option { background: var(--s-ink); color: var(--dk-oninv, #fff); border-color: var(--s-ink); }
:root .da-pk #pkWords > .pk-own.is-open .pkg-text { color: #fff; }

/* ================= header: Share · 2 and Publish (mounted into the ws-actions slot) ================= */
:root .da-hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid transparent; font: 500 14px/1 inherit; font-family: inherit; white-space: nowrap; cursor: pointer; transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-small), border-color var(--t-micro); }
:root .da-hbtn:active { transform: scale(.97); }
:root .da-hbtn .vi { width: 16px; height: 16px; }
:root .da-hbtn--line { background: var(--s-card); border-color: var(--s-line); color: var(--s-ink); }
:root .da-hbtn--line .vi { color: var(--s-ink); }
:root .da-hbtn--line:hover { border-color: var(--dk-l-1f1f21a22, rgba(31,31,33,.22)); }
:root .da-hbtn--ink { background: var(--s-ink); color: var(--dk-oninv, #fff); }
:root .da-hbtn--ink:hover { box-shadow: 0 6px 18px rgba(31,31,33,.22); }
:root .da-hbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--s-peri-soft), 0 0 0 1px var(--s-peri); }
:root .da-hcount { font-size: 12px; font-weight: 400; color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  :root .da-hbtn { width: 36px; padding: 0; }
  :root .da-hbtn .da-hl, :root .da-hbtn .da-hcount { display: none; }
}

/* ================= Share for review popover ================= */
:root .da-share { position: absolute; z-index: 60; width: 340px; background: var(--s-card); border: 1px solid var(--s-hair); border-radius: 18px; box-shadow: var(--s-pop-shadow); padding: 16px; color: var(--s-ink); font-size: 13px; animation: da-rise var(--t-small) var(--ease-out); outline: none; }
:root .da-share-root.is-sheet .da-share { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; z-index: 66; }
:root .da-share-scrim { position: fixed; inset: 0; z-index: 65; background: var(--dk-s-1f1f21a28, rgba(31,31,33,.28)); }
:root .da-share .faint { color: var(--s-faint); }
:root .da-share .p2-linkrow { display: flex; gap: 8px; }
:root .da-share .input { flex: 1; min-width: 0; border: 1px solid var(--dk-l-1f1f21a16, rgba(31,31,33,.16)); border-radius: 12px; padding: 8px 12px; font-size: 13px; background: var(--s-card); }
:root .da-share .p2-linkmeta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; color: var(--s-ink-2); }
:root .da-share .pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 14px; font-weight: 500; cursor: pointer; }
:root .da-share .pill.ink { background: var(--s-ink); color: var(--dk-oninv, #fff); }
:root .da-share .textbtn { background: none; border: 0; padding: 0 2px; font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); text-decoration: underline; text-decoration-color: var(--dk-t-4c5f92a35, rgba(76,95,146,.35)); text-underline-offset: 3px; cursor: pointer; }
:root .da-share .p2-cmts { margin: 12px 0 6px; border-top: 1px solid var(--s-line); }
:root .da-share .p2-cmts > .faint { font-size: 12px; padding-top: 10px; margin: 0; }
:root .da-share .p2-cmt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
:root .da-share .p2-cmt b { font-weight: 500; }
:root .da-share .p2-cmt p { grid-column: 1 / -1; color: var(--s-ink-2); margin: 0; }
:root .da-share .da-share-why { margin: 8px 0 0; font-size: 12px; }
:root .da-share .da-share-make { margin-top: 10px; }

/* ================= Publish to YouTube dialog (js/youtube-publish.js in a Shell.dialog) ================= */
:root .sdlg.da-pub { width: min(860px, calc(100vw - 32px)); max-width: none; border-radius: 24px; }
:root .da-pub .sdlg-title { font-size: 22px; font-weight: 500; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
:root .da-pub .ytp-note { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px; margin: 0 0 6px; background: none; border: 0; font-size: 14px; color: var(--s-ink-2); }
:root .da-pub .ytp-note strong { font-weight: 500; color: var(--s-ink); }
:root .da-pub .ytp-note--warn { padding: 14px 16px; border-radius: 16px; background: var(--s-shell); }
:root .da-pub .ytp-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
:root .da-pub .ytp-field { margin-top: 16px; border: 0; padding: 0; min-width: 0; }
:root .da-pub .ytp-lab, :root .da-pub legend { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; font-weight: 500; padding: 0; }
:root .da-pub .ytp-count { font-size: 12px; font-weight: 400; color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
:root .da-pub .ytp-count.ytp-over { color: var(--dk-tx-s-danger, var(--s-danger)); }
:root .da-pub .input { width: 100%; border: 1px solid var(--dk-l-1f1f21a16, rgba(31,31,33,.16)); border-radius: 12px; padding: 11px 14px; font-size: 15px; }
:root .da-pub .ytp-desc { font-size: 14px; line-height: 1.45; }
:root .da-pub .ytp-hint { font-size: 13px; color: var(--s-ink-2); margin: 6px 0 0; }
:root .da-pub .ytp-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--dk-tx-s-positive, var(--s-positive)); }
:root .da-pub .ytp-at { font-variant-numeric: tabular-nums; margin-right: 8px; }
:root .da-pub .ytp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
:root .da-pub .ytp-thumb { position: relative; cursor: pointer; }
:root .da-pub .ytp-thumb input { position: absolute; opacity: 0; }
:root .da-pub .ytp-thumb img, :root .da-pub .ytp-thumb-none { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: var(--s-ink-2); background: var(--s-shell); box-shadow: 0 0 0 1px var(--s-line); }
:root .da-pub .ytp-thumb input:checked + * { box-shadow: 0 0 0 2px var(--s-ink); }
:root .da-pub .ytp-privacy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
:root .da-pub .ytp-opt { position: relative; display: block; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-card); font-size: 12px; cursor: pointer; }
:root .da-pub .ytp-opt input { position: absolute; opacity: 0; }
:root .da-pub .ytp-opt strong { display: block; font-size: 13px; font-weight: 500; }
:root .da-pub .ytp-opt .ytp-hint { margin: 0; font-size: 12px; }
:root .da-pub .ytp-opt:has(input:checked) { border-color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-ink); }
:root .da-pub .ytp-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root .da-pub .ytp-opt:has(input:disabled) { opacity: .5; }
:root .da-pub .ytp-preview { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--s-shell); font-size: 13px; }
:root .da-pub .ytp-sum { display: grid; gap: 4px; margin: 8px 0 0; }
:root .da-pub .ytp-sum div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
:root .da-pub .ytp-sum dt { color: var(--s-ink-2); }
:root .da-pub .ytp-sum dd { margin: 0; }
:root .da-pub .ytp-up { margin-top: 6px; }
:root .da-pub .ytp-bar { height: 6px; border-radius: 6px; background: var(--s-peri-soft); overflow: hidden; margin-top: 10px; }
:root .da-pub .ytp-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--s-peri-deep), var(--s-peri)); border-radius: 6px; animation: da-applyRun 2.6s var(--ease-inout) infinite; }
:root .da-pub .ytp-done { text-align: center; padding: 22px 18px 18px; border-radius: 16px; background: var(--s-positive-soft); display: grid; justify-items: center; gap: 4px; }
:root .da-pub .ytp-done-ic { color: var(--dk-tx-s-positive, var(--s-positive)); display: inline-flex; }
:root .da-pub .ytp-done-line { font-size: 17px; margin: 0; }
:root .da-pub .ytp-done-line strong { font-weight: 500; }
:root .da-pub .ytp-done-addr { margin: 0; font-size: 13px; color: var(--s-ink-2); }
:root .da-pub .ytp-done .ytp-hint { max-width: 520px; }
:root .da-pub .ytp-note--connect { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--s-shell); }
:root .da-pub .ytp-note--connect p { margin: 0; }
:root .da-pub .ytp-lock { border: 0; margin: 0; padding: 0; min-width: 0; opacity: .55; }
:root .da-pub .ytp-up.is-known { margin-top: 14px; }
:root .da-pub .ytp-up.is-known .ytp-bar { margin-top: 0; }
:root .da-pub .ytp-up.is-known .ytp-bar span { animation: none; transition: width var(--t-medium) var(--ease-out); }
:root .da-pub .ytp-up-line { margin: 8px 0 0; font-size: 13px; color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
:root .da-pub .sdlg-actions .btn { border-radius: var(--r-pill); height: 44px; padding: 0 22px; }
@media (max-width: 760px) {
  :root .da-pub .ytp-grid { grid-template-columns: 1fr; gap: 0; }
  :root .da-pub .ytp-privacy { grid-template-columns: 1fr; }
}
:root .da-pub .ytp-preview[hidden] { display: none; }

/* Approve's Undo toast: a ring runs down the 10 seconds the approval is held (router.js toast countdown) */
.toast-ring { width: 20px; height: 20px; flex: none; transform: rotate(-90deg); }
.toast-ring circle { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.4; stroke-dasharray: 50.3; stroke-dashoffset: 0; animation: toast-ring 10s linear forwards; }
@keyframes toast-ring { to { stroke-dashoffset: 50.3; } }
@media (prefers-reduced-motion: reduce) { .toast-ring circle { animation: none; } }
:root .da-rv #rvUndoApprove[hidden] { display: none; }

/* a request that failed, said where its result goes (Packaging titles, thumbnails), with Try again */
:root .da-pk .pk-err, :root .da-pk .tn-err { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--s-danger-soft); color: var(--dk-tx-s-danger, var(--s-danger)); font-size: 13px; line-height: 1.4; }
:root .da-pk .pk-err .vi, :root .da-pk .tn-err .vi { flex: none; margin-top: 1px; }
:root .da-pk .pk-err b, :root .da-pk .tn-err b { font-weight: 500; display: block; }
:root .da-pk .pk-err .textbtn, :root .da-pk .tn-err .textbtn { color: var(--dk-tx-s-danger, var(--s-danger)); font-size: 13px; padding: 0; margin-top: 4px; }
:root .da-pub .ytp-connect { border-radius: var(--r-pill); height: 40px; padding: 0 18px; font-size: 14px; }
/* word chips: the label's 44px touch floor made each chip's text sit low and overlap the next row */
:root .da-pk #pkWords .pkg-option { min-height: 0; }
@media (pointer: coarse) { :root .da-pk #pkWords > .pk-opt { height: 44px; } }
/* six places drawing in while Volare makes the thumbnails (nothing made yet) */
:root .da-pk .tn-grid--wait { margin: 4px 0 10px; }
:root .da-pk .tn-wait { aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(100deg, var(--s-peri-soft) 30%, var(--dk-b-ffffffa70, rgba(255,255,255,.7)) 50%, var(--s-peri-soft) 70%) 0 0 / 300% 100%; animation: da-skel 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { :root .da-pk .tn-wait { animation: none; } }

/* parity2 review: alignment (measured) */
:root .da-rv .rw-foot-row .rv-remember { margin: 0; min-height: 0; }
:root .da-pk .pk-title, :root :is(.da-rv, .da-pk, .da-share) .p2-pop-h span, .modal h2 { text-wrap: pretty; }
@media (max-width: 760px) { :root .da-rv .rv-gfform { padding: 16px; } }
/* the three made thumbnails sit in narrow columns: their words and buttons wrap inside the column, never across */
:root .da-pk .tn-grid > li { min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; }
:root .da-pk .tn-grid > li :is(p, span, b, strong, h3, h4, a, button) { max-width: 100%; white-space: normal; }
:root .da-pk .pk-title, :root :is(.da-rv, .da-pk, .da-share) .p2-pop-h span, .modal h2 { text-wrap: balance; }
:root .da-pk .pk-title { display: block; max-height: calc(1.3em * 2); }
:is([role="dialog"], dialog) h2 { text-wrap: balance; }
/* the progress panel while open on a computer: carried to <body>, fixed under its pill (flow-progress.js lift) */
:root .prog-panel.prog-panel--lifted { position: fixed; left: auto; z-index: 80; }
:root .prog-panel.prog-panel--lifted ol { margin: 0; padding: 0; list-style: none; }
:root .prog-panel--lifted, :root .prog-panel--lifted * { box-sizing: border-box; }
:root .prog-panel--lifted svg.vi { display: block; flex: none; }
:root .prog-panel--lifted .faint { color: var(--s-faint); }

/* parity2 review: Publish to YouTube as the mockup draws it: plane + title, "connected as" under it, one chapters
   line, the first picture with its Test & Compare note, three privacy cards in a row, Check before publishing as a
   quiet link on the left of Cancel / Publish */
:root .da-pub .sdlg-x { display: none; }
:root .da-pub .sdlg-title::before { content: ""; flex: none; width: 22px; height: 22px; background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234C5F92'%3E%3Cpolygon points='2,11 22,3 13,22 11,13' fill-opacity='.85'/%3E%3Cpolygon points='11,13 22,3 13,22' fill-opacity='.6'/%3E%3C/svg%3E"); }
:root .da-pub .ytp-acct { margin: -10px 0 4px 34px; font-size: 13px; color: var(--s-ink-2); }
:root .da-pub .ytp-chk { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--dk-tx-s-positive, var(--s-positive, #2E7D4F)); }
:root .da-pub .ytp-chk--warn { color: var(--s-ink-2); }
:root .da-pub .ytp-th { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--s-ink-2); }
:root .da-pub .ytp-th img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
:root .da-pub .ytp-privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:root .da-pub .ytp-privacy .ytp-opt { margin: 0; }
:root .da-pub .sdlg-actions { justify-content: flex-end; }
:root .da-pub .sdlg-actions [data-sdlg-act="0"] { margin-right: auto; background: none; border: 0; box-shadow: none; padding: 0 2px; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { :root .da-pub .ytp-privacy { grid-template-columns: 1fr; } }

/* parity2 review: Packaging › Thumbnail as the mockup draws it: word chips, one grid of six with A/B/C tags */
:root .da-pk .pk-words { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; }
:root .da-pk .pk-word { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--s-line); background: var(--s-card); font-size: 13px; cursor: pointer; transition: background var(--t-small), color var(--t-small), border-color var(--t-small); }
:root .da-pk .pk-word input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root .da-pk .pk-word.is-on, :root .da-pk .pk-word:has(input:checked) { background: var(--s-ink); color: var(--dk-oninv, #fff); border-color: var(--s-ink); }
:root .da-pk .pk-word:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root .da-pk .pk-wwhy { margin: 6px 0 0; font-size: 12px; color: var(--s-ink-2); }
:root .da-pk .pk-own[hidden] { display: none; }
:root .da-pk .pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:root .da-pk .pk-img { position: relative; padding: 0; border: 0; background: var(--s-shell); border-radius: 10px; aspect-ratio: 16 / 9; outline: none; cursor: pointer; }
:root .da-pk .pk-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; transition: transform var(--t-medium) var(--ease-out); }
:root .da-pk .pk-img:hover img { transform: scale(1.03); }
:root .da-pk .pk-img .tag { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 7px; background: var(--s-ink); color: var(--dk-oninv, #fff); font-size: 11px; font-weight: 600; display: grid; place-items: center; transform: scale(0); transition: transform var(--t-small) var(--ease-out); }
:root .da-pk .pk-img[aria-pressed="true"] .tag { transform: scale(1); }
:root .da-pk .pk-img[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s-ink); border-radius: 11px; }
:root .da-pk .pk-img:focus-visible { box-shadow: 0 0 0 3px var(--s-peri-soft), 0 0 0 1px var(--s-peri); }
:root .da-pk .pk-img-x { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; font-size: 11px; color: var(--s-ink-2); text-align: center; }
:root .da-pk .pk-img .menu-b { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 8px; border: 0; background: var(--dk-b-ffffffa92, rgba(255,255,255,.92)); display: grid; gap: 2px; align-content: center; justify-items: center; opacity: 0; transition: opacity var(--t-small); padding: 0; }
:root .da-pk .pk-img .menu-b i { width: 3px; height: 3px; background: var(--s-ink); transform: rotate(45deg); display: block; }
:root .da-pk .pk-img:hover .menu-b, :root .da-pk .pk-img:focus-within .menu-b, :root .da-pk .pk-img .menu-b[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { :root .da-pk .pk-img .menu-b { opacity: 1; } }
:root .da-pk .pk-img.drawing { cursor: default; background: radial-gradient(circle, rgba(135,153,195,.55) 1.1px, transparent 1.6px) 0 0 / 7px 7px, var(--s-peri-soft); }
:root .da-pk .pk-img.drawing::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(100deg, transparent 30%, var(--dk-b-ffffffa70, rgba(255,255,255,.7)) 50%, transparent 70%) 0 0 / 300% 100%; animation: da-skel 1.6s linear infinite; }
@keyframes da-skel { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { :root .da-pk .pk-img.drawing::after { animation: none; } }
:root .da-pk .pk-imgmenu { position: absolute; right: 0; top: 30px; z-index: 5; width: 190px; padding: 6px; background: var(--s-card); border-radius: 14px; box-shadow: var(--s-pop-shadow); border: 1px solid var(--s-hair); text-align: left; }
:root .da-pk .pk-imgmenu[hidden] { display: none; }
:root .da-pk .pk-imgmenu :is(a, button) { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 9px; font-size: 13px; color: var(--s-ink); text-decoration: none; font-family: inherit; cursor: pointer; }
:root .da-pk .pk-imgmenu :is(a, button):hover { background: var(--s-shell); }
:root .da-pk .pk-pcount { font-size: 12px; }
:root .da-pk .pk-quiet { margin: 8px 0 0; font-size: 12px; color: var(--s-ink-2); line-height: 1.45; }
:root .da-pk .pk-quiet + .pk-quiet { margin-top: 4px; }
:root .da-pk .pk-quiet.f { color: var(--s-faint); }
:root .da-pk .pk-row2 .pk-wait { margin: 0; display: inline-flex; align-items: center; gap: 6px; }

/* parity2 review (Parker 2026-10-16): every large card and empty state on Videos, Review, Packaging and Download is
   the shared frosted glass (--frost-* in flow-stage.css), never a flat opaque card */
:root :is(.fstage, .da-rv, .da-pk) .p2-card,
:root .dav-nlist, :root .dav-blank,
:root .ta-modal, :root .sdlg.da-pub {
  background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur);
  box-shadow: var(--frost-edge), var(--frost-shadow); border-color: transparent;
}
@media (max-width: 760px) {
  :root .dav-nlist { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .dav-nitem { background: var(--frost-bg); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-edge), var(--frost-shadow-sm); border-color: transparent; }
}
/* the mockup's graphic row has four actions; the note form stays reachable through Change… */
:root .da-rv .rv-gnote, :root .da-rv .rv-gfform .select { display: none; }
@media (max-width: 680px) { .ta-modal .ta-left { flex-basis: 100%; order: 9; } }