/* Direction A: processing (ported from .orch/qa/flow-design; see .orch/plans/pages/). Loaded after flow-head.css.
   The shared video header box on every step, the ⋯ menu + Delete dialog, Processing (#proc-*) and Download (#dl-*).
   Source: .orch/qa/flow-design/phase2/p2.css (pc-, dl-, p2- classes), scoped to .fstage; state on .p2-stage[data-pstate]. */

/* ---------------- the header: one box on every step, so the frame never moves ---------------- */
:root .fstage .head.p2-head, html body .head.p2-head { margin: 0 0 20px; }
:root .fstage .head.p2-head h1, html body .head.p2-head h1 { font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -.035em; margin: 0; min-height: 46px; }
:root .fstage .head.p2-head h1.long, html body .head.p2-head h1.long { text-wrap: balance; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; max-width: 620px; min-height: 46px; display: flex; align-items: flex-end; }
:root .fstage .head.p2-head .head-sub, html body .head.p2-head .head-sub { display: block; margin: 8px 0 0; font-size: 15px; min-height: 22px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .fstage .head.p2-head .head-sub:empty::before { content: "\00a0"; }
:root .fstage .head.p2-head .head-prog { flex: none; }
html body .head.p2-head .prog-pill { height: 44px; }
html body .head.p2-head .ws-title { outline: none; border-radius: 6px; cursor: text; }
html body .head.p2-head .ws-title:focus-visible { box-shadow: 0 0 0 3px var(--s-peri-soft); }
html body .head.p2-head .ws-title[contenteditable="true"] { box-shadow: 0 0 0 3px var(--s-peri-soft); background: var(--s-card); }
html body .head.p2-head .ws-actions { display: flex; align-items: center; gap: 8px; }
html body .head.p2-head .p2-cutacts.ghost { visibility: hidden; }
html body .head.p2-head .p2-more[aria-expanded="true"] { border-color: var(--dk-l-1f1f21a24, rgba(31,31,33,.24)); }
html body .head.p2-head .p2-menu .danger { color: var(--dk-tx-s-danger, var(--s-danger)); }
@media (max-width: 760px) {
  :root .fstage .head.p2-head h1, html body .head.p2-head h1 { font-size: 30px; min-height: 0; }
  :root .fstage .head.p2-head h1.long, html body .head.p2-head h1.long { font-size: 20px; line-height: 1.25; min-height: 0; }
  :root .fstage .head.p2-head .head-sub, html body .head.p2-head .head-sub { font-size: 13px; min-height: 20px; }
  html body .head.p2-head .head-prog { grid-area: prog; }
  html body .head.p2-head .p2-cutacts.ghost { display: none; }
  html body .head.p2-head .p2-acts > .p2-pop-anchor { grid-area: btns; justify-self: end; }
  html body .head.p2-head .head-prog .prog-pill { width: 100%; }
}
/* Setup shrinks its own head in flow-stage.css; the shared box wins so nothing jumps between steps */
:root .fstage[data-page="setup"] .head.p2-head { margin-bottom: 20px; }
:root .fstage[data-page="setup"] .head.p2-head .head-sub { display: block; }
:root .fstage[data-page="setup"] .head.p2-head .prog-pill { height: 44px; }

/* the workspace pages ride the same capped .fstage as Upload and Setup */
:root .fstage.fstage--ws { margin: 0 auto; width: 100%; }
:root .fstage--ws .ws-practice, :root .fstage--ws [data-practice-banner] { margin-top: 20px; font-size: 12px; color: var(--s-ink-2); background: none; border: 0; padding: 0; }
:root .fstage--ws [data-practice-banner] .type-strong { font-weight: 500; color: var(--s-ink-2); }

/* ---------------- dialogs (Delete) ---------------- */
dialog.da-dlg { border: 0; padding: 0; border-radius: 22px; background: var(--s-card); color: var(--s-ink); width: min(460px, calc(100vw - 32px)); box-shadow: var(--s-pop-shadow); font-size: 15px; line-height: 1.5; }
dialog.da-dlg::backdrop { background: var(--dk-s-1f1f21a32, rgba(31,31,33,.32)); }
dialog.da-dlg form { padding: 26px; }
dialog.da-dlg h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; outline: none; }
dialog.da-dlg .p2-dlg-p { margin: 6px 0 0; color: var(--s-ink-2); font-size: 14px; }
dialog.da-dlg .field { margin-top: 16px; }
dialog.da-dlg .field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
dialog.da-dlg .input { width: 100%; box-sizing: border-box; border: 1px solid var(--dk-l-1f1f21a16, rgba(31,31,33,.16)); border-radius: 12px; padding: 10px 14px; font: inherit; outline: none; }
dialog.da-dlg .input:focus { border-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); box-shadow: 0 0 0 3px var(--s-peri-soft); }
dialog.da-dlg .pop-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
dialog.da-dlg .pill { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
dialog.da-dlg .pill.line { background: var(--s-card); border-color: var(--s-line); color: var(--s-ink); }
dialog.da-dlg .pill.ink { background: var(--s-ink); color: var(--dk-oninv, #fff); }
dialog.da-dlg .p2-danger { background: var(--s-danger); color: #fff; }
dialog.da-dlg .p2-danger:disabled { opacity: .4; cursor: not-allowed; }
dialog.da-dlg .pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--s-peri-soft), 0 0 0 1px var(--s-peri); }

/* ---------------- shared bits on these pages ---------------- */
:root .fstage .p2-i { display: inline-grid; place-items: center; flex: none; }
:root .fstage .p2-kick { display: block; font-size: 12px; font-weight: 500; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); letter-spacing: .01em; }
:root .fstage .p2-quiet { color: var(--s-ink-2); text-decoration-color: var(--dk-t-1f1f21a25, rgba(31,31,33,.25)); font-weight: 400; }
:root .fstage .p2-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
:root .fstage .textbtn { cursor: pointer; }
:root .fstage .pill .vi { display: block; }
:root .fstage .p2-stage { align-items: stretch; }
:root .fstage .p2-art { padding: 36px 40px 24px; justify-content: flex-start; }
:root .fstage .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 .fstage .p2-side { position: relative; min-height: 420px; }
:root .fstage .p2-card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; animation: da-card-in var(--t-medium) var(--ease-out); }
@keyframes da-card-in { from { opacity: 0; transform: translateX(16px); } }
:root .fstage .p2-card .card-scroll { padding: 22px 22px 18px; }
:root .fstage .p2-side:has(> [data-card="proc"]) { display: flex; flex-direction: column; }
:root .fstage .p2-card[data-card="proc"] { position: relative; inset: auto; flex: 1 0 auto; overflow: visible; }
:root .fstage .p2-card[data-card="proc"] .card-scroll { flex: 1 0 auto; overflow: visible; }
:root .fstage .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); view-transition-name: frame; }
:root .fstage .p2-stage.quiet-art .lay-quiet { opacity: 1; }
:root .fstage .p2-stage.quiet-art .lay-live { opacity: 0; }
:root .fstage .p2-stage.quiet-art .glow { opacity: 0; }
:root .fstage .p2-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; }
:root .fstage .p2-row > .p2-i { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .fstage .p2-row-t b { display: block; font-size: 14px; font-weight: 500; }
:root .fstage .p2-row-t span { display: block; font-size: 12px; color: var(--s-ink-2); }
:root .fstage .p2-row .switch { margin: 0; }
:root .fstage .p2-details { margin-top: 6px; border-top: 1px solid var(--s-line); }
:root .fstage .p2-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 6px; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px; }
:root .fstage .p2-details summary::-webkit-details-marker { display: none; }
:root .fstage .chev-s { 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-small) var(--ease-out); margin-right: 4px; }
:root .fstage .p2-details[open] .chev-s { transform: rotate(225deg); }
:root .fstage .p2-details .set-list { margin: 4px 0 0; }
:root .fstage .p2-details .set-list > div { font-size: 13px; padding: 9px 0; }
:root .fstage .p2-hold { position: relative; overflow: hidden; }
:root .fstage .p2-hold-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
:root .fstage .p2-hold.is-holding .p2-hold-fill { transform: scaleX(1); transition: transform var(--hold-ms, 900ms) linear; }
@keyframes da-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes da-land { from { opacity: 0; transform: scale(.4); } }
@keyframes da-swap { from { opacity: 0; transform: translateY(6px); } }
@keyframes da-spin { to { transform: rotate(360deg); } }
@keyframes da-skel { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* ================= PROCESSING ================= */
:root .fstage .pc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(76,95,146,.12); }
:root .fstage .pc-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--s-peri-deep), var(--s-peri)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease-out); box-shadow: 0 0 10px rgba(135,153,195,.8); }
:root .fstage .pc-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 2px), var(--dk-b-ffffffa95, rgba(255,255,255,.95)) calc(100% / 7 - 2px) calc(100% / 7)); }
/* failed */
:root .fstage .pc-fail { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; animation: da-rise var(--t-medium) var(--ease-out); }
:root .fstage .pc-fail-card { width: min(440px, 100%); background: var(--dk-b-ffffffa97, rgba(255,255,255,.97)); border-radius: 18px; padding: 24px 26px; box-shadow: 0 12px 40px rgba(31,31,33,.18); }
:root .fstage .pc-fail-card .glyph { justify-content: start; }
:root .fstage .pc-fail-card h2 { text-wrap: balance; margin-top: 10px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
:root .fstage .pc-fail-card p { margin-top: 6px; font-size: 14px; color: var(--s-ink-2); }
:root .fstage .pc-fail-card .problem-actions { margin-top: 16px; }
:root .fstage .pc-quietacts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
:root .fstage .pc-quietacts .textbtn { font-size: 13px; padding: 0; }
:root .fstage .pc-faildetail { margin-top: 8px; font-size: 12px; color: var(--s-ink-2); }
@keyframes da-wipe { from { clip-path: circle(0% at 62% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes da-fade { from { opacity: 0; } }
@keyframes da-facet { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-28deg) scale(.4); } }
@keyframes da-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes da-rib { from { opacity: 0; transform: scaleX(0); } }
@keyframes da-end { from { opacity: 0; transform: rotate(45deg) scale(0); } }

/* ================= DOWNLOAD ================= */
:root .fstage .dl-frame { background: var(--dk-inv, #1f1f21); }
:root .fstage .dl-frame img, :root .fstage .dl-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--t-medium), opacity var(--t-medium); }
:root .fstage .dl-frame video { opacity: 0; }
:root .fstage .p2-stage.dl-playing .dl-frame video { opacity: 1; }
:root .fstage .dl-none { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.4); }
:root .fstage .dl-playcut { display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-left: 10px; padding: 0 13px 0 11px; border-radius: var(--r-pill); border: 0; background: var(--dk-b-ffffffa92, rgba(255,255,255,.92)); color: var(--s-ink); font-size: 12px; font-weight: 500; text-shadow: none; vertical-align: middle; transition: background var(--t-small); }
:root .fstage .dl-playcut .vi { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .fstage .dl-playcut:hover { background: var(--dk-paper, #fff); }
:root .fstage .dl-playcut:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dk-paper, #fff); }
:root .fstage .dl-prep { position: absolute; inset: 0; display: grid; place-items: center; background: var(--dk-b-f3f2eda25, rgba(243,242,237,.25)); z-index: 2; }
:root .fstage .dl-prep-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--dk-b-ffffffa96, rgba(255,255,255,.96)); box-shadow: var(--s-shadow); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
:root .fstage .dl-spin { display: grid; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .fstage .dl-spin .vi { animation: da-spin 3s linear infinite; }
:root .fstage .p2-stage[data-pstate="dl-preparing"] .dl-frame img { filter: grayscale(.85) brightness(1.06); }
:root .fstage .p2-stage[data-pstate="dl-failed"] .dl-frame img { filter: grayscale(1) brightness(1.05); }
:root .fstage .p2-stage[data-pstate="dl-failed"] .dl-playcut { visibility: hidden; }
:root .fstage .dl-more--wait .dl-act[disabled] { cursor: default; opacity: .55; }
:root .fstage .dl-saved { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; background: radial-gradient(30% 40% at 50% 50%, var(--dk-b-1f1f21a40, rgba(31,31,33,.4)), var(--dk-b-1f1f21a0, rgba(31,31,33,0))); }
:root .fstage .dl-saved[hidden] { display: none; }
:root .fstage .dl-saved .vi { filter: drop-shadow(0 4px 14px rgba(31,31,33,.4)); animation: da-land 520ms var(--ease-spring) both; }
:root .fstage .dl-frame.drop { animation: da-drop 900ms var(--ease-inout); }
@keyframes da-drop { 0% { transform: none; } 35% { transform: translateY(10px) scale(.95); } 70% { transform: translateY(-4px) scale(1.01); } 100% { transform: none; } }
:root .fstage .dl-savedpill { position: absolute; left: 2.6cqw; top: 2.6cqw; z-index: 2; display: none; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); color: var(--s-ink); font-size: 12px; font-weight: 500; box-shadow: var(--s-shadow); }
:root .fstage .dl-savedpill .vi { color: var(--dk-tx-s-positive, var(--s-positive)); }
:root .fstage .p2-stage.dl-done .dl-savedpill { display: inline-flex; animation: da-rise var(--t-medium) var(--ease-out) 900ms both; }
:root .fstage .dl-cap { margin-top: 14px; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(31,31,33,.45); text-align: center; }
:root .fstage .dl-caplink { color: #fff; text-decoration-color: rgba(255,255,255,.6); font-size: 13px; margin-left: 6px; font-weight: 400; }
:root .fstage .p2-stage[data-pstate="dl-preparing"] .dl-playcut { visibility: hidden; }
:root .fstage .dl-h { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
:root .fstage .dl-file { display: grid; grid-template-columns: 26px 1fr; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--dk-b-fbfaf8, #FBFAF8); box-shadow: inset 0 0 0 1px var(--s-hair); }
:root .fstage .dl-fi { display: grid; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .fstage .dl-file b { display: block; font-size: 15px; font-weight: 500; }
:root .fstage .dl-file span { display: block; font-size: 13px; color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
:root .fstage .dl-file .dl-where { color: var(--s-faint); font-size: 12px; margin-top: 2px; }
:root .fstage .dl-gorow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
:root .fstage .dl-go { position: relative; overflow: hidden; margin-top: 14px; min-width: 150px; }
:root .fstage .dl-go:disabled { background: var(--dk-b-1f1f21a28, rgba(31,31,33,.28)); cursor: progress; }
:root .fstage .p2-stage.dl-done .dl-go { background: var(--s-card); color: var(--s-ink); border-color: var(--s-line); }
:root .fstage .p2-stage.dl-done .dl-file { display: none; }
:root .fstage .p2-stage.dl-done .dl-go { margin-top: 10px; }
:root .fstage .dl-stop { margin-top: 14px; font-size: 13px; }
:root .fstage .dl-more { margin-top: 16px; border-top: 1px solid var(--s-line); }
:root .fstage .dl-act { width: calc(100% + 12px); display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 11px 6px; margin: 0 -6px; border: 0; background: none; text-align: left; border-radius: 10px; transition: background var(--t-micro); }
:root .fstage .dl-act[hidden] { display: none; }
:root .fstage .dl-act:hover, :root .fstage .dl-act:focus-visible { background: var(--s-shell); outline: none; }
:root .fstage .dl-act .p2-i { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); margin-top: 1px; }
:root .fstage .dl-act b { display: block; font-size: 14px; font-weight: 500; }
:root .fstage .dl-act span span { display: block; font-size: 12px; color: var(--s-ink-2); }
:root .fstage .dl-act.ok b { color: var(--dk-tx-s-positive, var(--s-positive)); }
:root .fstage .dl-act .bar { display: block; position: relative; height: 3px; border-radius: 3px; background: var(--s-peri-soft); margin-top: 6px; overflow: hidden; }
:root .fstage .dl-act .bar--run i { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--s-peri-deep); animation: da-run 1.2s var(--ease-inout) infinite; }
@keyframes da-run { from { left: -40%; } to { left: 100%; } }
/* the follow-up: only after a download, share or publish (Parker) */
:root .fstage .dl-after { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-large) var(--ease-out); }
:root .fstage .dl-after-in { overflow: hidden; min-height: 0; margin-top: 8px; }
:root .fstage .p2-stage:not(.rate-open) .dl-after { visibility: hidden; }
:root .fstage .p2-stage.rate-open .dl-after { grid-template-rows: 1fr; }
:root .fstage .p2-stage.rate-still .dl-after { transition: none; }
:root .fstage .p2-stage.rate-open .dl-after-in { border-top: 1px solid var(--s-line); padding-top: 16px; }
:root .fstage .dl-version { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--s-line); font-size: 12px; color: var(--s-ink-2); }
:root .fstage .dl-version .textbtn { font-size: 12px; padding: 0; }
:root .fstage .dl-raw { margin-top: 10px; }

/* ================= 390 ================= */
@media (max-width: 760px) {
  :root .fstage .p2-art { padding: 14px 14px 18px; }
  :root .fstage .p2-side { min-height: 0; }
  :root .fstage .p2-card { position: relative; inset: auto; overflow: visible; }
  :root .fstage .p2-card .card-scroll { overflow: visible; padding: 18px 16px 14px; }
  :root .fstage .p2-card .card-foot { border-radius: 0 0 18px 18px; padding: 10px 14px; }
  :root .fstage .p2-card .card-foot::before { display: none; }
  /* questions and failures leave the frame and sit in the flow, so nothing is clipped */
  :root .fstage .p2-stage[data-pstate="dl-failed"] .dl-frame { aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root .fstage .p2-stage[data-pstate="dl-failed"] .dl-frame > :not(.pc-fail) { display: none; }
  :root .fstage .dl-cap { font-size: 12px; margin-top: 10px; }
  :root .fstage .dl-playcut { height: 28px; font-size: 11px; }
  :root .fstage .dl-prep-pill { font-size: 12px; padding: 7px 12px; }
  :root .fstage .dl-saved .vi { width: 36px; height: 36px; }
}
@media (min-width: 761px) {
  :root .fstage .p2-card:not([data-card="proc"]) .card-scroll { -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 .fstage .p2-card .card-foot::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root .fstage .dl-spin .vi { animation: none; }
}

/* ---- the rating follow-up (js/after-approve.js) inside the Download card, as the mockup's #dl-rate ---- */
:root .fstage .aa-card { margin: 0; }
:root .fstage .aa-feel h3, :root .fstage .aa-next h3 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
:root .fstage .aa-next h3 { font-size: 15px; }
:root .fstage .aa-sub { font-size: 12px; margin-top: 2px; color: var(--s-ink-2); }
:root .fstage .aa-form { display: block; }
:root .fstage .dl-rate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; max-width: none; }
:root .fstage .dl-r { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 0; padding: 10px 2px 8px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-card); font-size: 11px; color: var(--s-ink-2); transition: transform var(--t-micro) var(--ease-out), background var(--t-small), color var(--t-small), border-color var(--t-small); }
:root .fstage .dl-r:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--dk-l-1f1f21a24, rgba(31,31,33,.24)); color: var(--s-ink-2); }
:root .fstage .dl-r:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--s-peri-soft); }
:root .fstage .dl-r .g { display: grid; place-items: center; height: 24px; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
:root .fstage .dl-r .aa-word { font-size: 11px; }
:root .fstage .dl-r[aria-checked="true"] { background: var(--s-ink); color: var(--dk-oninv, #fff); border-color: var(--s-ink); }
:root .fstage .dl-r[aria-checked="true"] .g { color: #fff; animation: da-land 420ms var(--ease-spring) both; }
:root .fstage .dl-why { display: none; margin-top: 12px; }
:root .fstage .aa-form.is-picked .dl-why { display: block; animation: da-rise var(--t-medium) var(--ease-out); }
:root .fstage .dl-why .lbl { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
:root .fstage .dl-why .faint { font-weight: 400; color: var(--s-faint); }
:root .fstage .dl-why textarea { font-size: 13px; min-height: 0; }
:root .fstage .aa-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
:root .fstage .aa-actions .pill:disabled { opacity: .45; cursor: not-allowed; }
:root .fstage .aa-error { margin-top: 6px; font-size: 12px; color: var(--dk-tx-s-danger, var(--s-danger)); }
:root .fstage .aa-said-line { margin-top: 4px; font-size: 13px; color: var(--s-ink-2); }
:root .fstage .aa-said-line .textbtn { font-size: 12px; padding: 0 2px; }
:root .fstage .aa-said { margin-top: 6px; font-size: 13px; color: var(--s-ink); }
:root .fstage .dl-next { margin-top: 16px; }
:root .fstage .dl-next.is-quiet { display: none; }
:root .fstage .aa-list { margin-top: 8px; }
:root .fstage .aa-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--s-hair); font-size: 13px; }
:root .fstage .aa-item:first-child { padding-top: 9px; border-top: 1px solid var(--s-hair); }
:root .fstage .aa-switch { margin: 0; min-height: 0; padding: 0; align-items: center; }
:root .fstage .aa-switch .sw { min-width: 36px; }
:root .fstage .aa-next .aa-sub .textbtn { font-size: 12px; padding: 0 2px; }
@media (max-width: 760px) {
  html body .head.p2-head .ws-actions button, html body .head.p2-head .ws-actions a { width: 36px; height: 36px; min-width: 0; padding: 0; justify-content: center; gap: 0; }
  html body .head.p2-head .ws-actions button > span, html body .head.p2-head .ws-actions a > span { display: none; }
}
html body .head.p2-head .p2-back { display: flex; width: max-content; }
html body .head.p2-head { font-size: 15px; line-height: 1.5; }
html[data-look] body .head.p2-head #wsSteps { margin: 0; }
:root .fstage dialog.da-dlg .pill.p2-danger, :root dialog.da-dlg .pill.p2-danger { background: var(--s-danger); color: #fff; }
:root .fstage dialog.da-dlg .pill.p2-danger:disabled, :root dialog.da-dlg .pill.p2-danger:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }


/* Publish to YouTube, refused (js/youtube-publish.js refusedHtml; mockup dl-refused / dl-refused-401) */
:root .sdlg.da-pub.ytp-narrow { width: min(560px, calc(100vw - 32px)); }
:root .da-pub .ytp-acct { margin: -4px 0 14px; font-size: 13px; color: var(--s-ink-2); }
:root .da-pub .ytp-fail { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--s-danger-soft); }
:root .da-pub .ytp-fail-i { flex: none; color: var(--dk-tx-s-danger, var(--s-danger)); margin-top: 1px; }
:root .da-pub .ytp-fail strong { display: block; font-weight: 500; color: var(--dk-tx-s-danger, var(--s-danger)); }
:root .da-pub .ytp-fail p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--s-ink-2); }

/* Download: Saving · N% (the button fills as the file comes down; the frame's bar follows) */
:root .fstage .dl-go-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--s-peri-deep), var(--s-peri)); transform-origin: left; transform: scaleX(var(--g, 0)); pointer-events: none; }
:root .fstage .dl-go-l { position: relative; font-variant-numeric: tabular-nums; }
:root .fstage .dl-savebar { opacity: 0; transition: opacity var(--t-small); }
:root .fstage .p2-stage.dl-sending .dl-savebar { opacity: 1; }
:root .fstage .p2-stage.dl-sending .dl-go { cursor: progress; }

/* parity2 review: Download alignment (measured): the caption row centres as one line; the button row carries the gap */
:root .fstage .dl-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 6px; row-gap: 8px; }
:root .fstage .dl-cap .dl-caplink { margin-left: 0; }
:root .fstage .dl-cap .dl-playcut { margin-left: 4px; }
:root .fstage .dl-gorow { margin-top: 14px; }
:root .fstage .dl-gorow .dl-go, :root .fstage .dl-gorow .dl-stop { margin-top: 0; }
:root .fstage .p2-stage.dl-done .dl-gorow { margin-top: 10px; }
:root .fstage .p2-stage.dl-done .dl-gorow .dl-go { margin-top: 0; }

/* parity2 review: the video ⋯ menu while open on a computer (da-processing.js headMenu) */
.p2-menu.p2-menu--lifted { position: fixed; z-index: 80; width: 220px; padding: 6px; background: var(--s-card); border: 1px solid var(--s-hair); border-radius: 18px; box-shadow: var(--s-pop-shadow); transform-origin: calc(100% - 20px) -8px; }
.p2-menu--lifted button, .p2-menu--lifted a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--s-ink); text-decoration: none; font-family: inherit; cursor: pointer; }
.p2-menu--lifted button:hover, .p2-menu--lifted button:focus-visible, .p2-menu--lifted a:hover, .p2-menu--lifted a:focus-visible { background: var(--s-shell); outline: none; }
.p2-menu--lifted .danger { color: var(--dk-tx-s-danger, var(--s-danger)); }
/* parity2 (create, row 420): the art box sets the stage's height, as in the mockup; the side card fills that height and its
   content scrolls inside it instead of stretching the row (phones keep the stacked card) */
@media (min-width: 761px) {
}

/* ================= rs-wire:processing =================
   Mockup .orch/qa/flow-design/riverside-review/processing.html (+ processing-STATES.md). Review's grid: the card on the
   left (it scrolls on its own), the frame panel and Scenes on the right; the frame is sized by the page alone.
   Shell tokens only (css/rs-shell.css): 20/15/13/12, 400/500, 16 between panels, 12 inside. */

/* ---- the video header on every workspace step (mockup .head: crumb · sub line, the 20px title, pill, ⋯) ---- */
:root body .fstage--ws .head.p2-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back sub acts" "title title acts"; column-gap: 8px; row-gap: 4px; align-items: center; margin: 0 0 var(--rs-gap); font-family: var(--rs-font); }
:root body .fstage--ws .head.p2-head .head-row, :root body .fstage--ws .head.p2-head .p2-titlebox { display: contents; }
:root body .fstage--ws .head.p2-head .p2-back { grid-area: back; height: 16px; margin: 0; gap: 4px; font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-tx-2); }
:root body .fstage--ws .head.p2-head .p2-back:hover { color: var(--rs-tx); }
:root body .fstage--ws .head.p2-head .p2-back-ar { width: 6px; height: 6px; border-width: 1.5px; margin: 0 2px 0 3px; }
:root body .fstage--ws .head.p2-head .head-sub { grid-area: sub; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 0; margin: 0; font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-tx-3); white-space: nowrap; overflow: hidden; }
:root body .fstage--ws .head.p2-head .head-sub::before { content: ""; flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--rs-tx-3); }
:root body .fstage--ws .head.p2-head .head-sub:empty::before { content: ""; }
:root body .fstage--ws .head.p2-head h1, :root body .fstage--ws .head.p2-head h1.long { grid-area: title; display: block; min-width: 0; min-height: 0; max-width: none; margin: 0; font: var(--rs-w-med) var(--rs-fs-title)/28px var(--rs-font); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body .fstage--ws .head.p2-head .ws-title { border-radius: 6px; }
:root body .fstage--ws .head.p2-head .ws-title:hover { background: var(--rs-panel); box-shadow: 0 0 0 4px var(--rs-panel), 0 0 0 5px var(--rs-line-2); }
:root body .fstage--ws .head.p2-head .ws-title[contenteditable="true"] { background: var(--dk-paper, #fff); box-shadow: var(--rs-ring); }
:root body .fstage--ws .head.p2-head .p2-acts { grid-area: acts; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
:root body .fstage--ws .head.p2-head .p2-cutacts { width: auto; margin-right: 0; }
:root body .fstage--ws .head.p2-head .p2-cutacts.ghost { display: none; }
:root body .fstage--ws .head.p2-head .p2-cutacts:not(:has(> .ws-actions > :not([hidden]))) { display: none; }
:root body .fstage--ws .head.p2-head .p2-more { width: 40px; height: 40px; border: 0; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); grid-auto-flow: column; gap: 3px; align-content: center; justify-content: center; }
:root body .fstage--ws .head.p2-head .p2-more i { width: 3px; height: 3px; border-radius: 50%; transform: none; background: var(--rs-tx-2); }
:root body .fstage--ws .head.p2-head .p2-more:hover, :root body .fstage--ws .head.p2-head .p2-more[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root body .fstage--ws .head.p2-head .p2-more:hover i { background: var(--rs-tx); }
/* Packaging and Download: Publish lives in their own cards, not in the header (rs-package, mockup package.html) */
:root body .fstage--ws:is([data-page="review"], [data-page="pack"], [data-page="dl"]) .head.p2-head [data-ytp-open] { display: none; }
/* the progress pill, compact as in the mockups: step marks in small discs, the step name and "N of 6" */
:root body .fstage--ws .head.p2-head .prog-pill { width: auto; height: 40px; gap: 10px; padding: 0 14px 0 8px; border: 0; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-reg) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); white-space: nowrap; }
:root body .fstage--ws .head.p2-head .prog-pill:hover { box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root body .fstage--ws .head.p2-head .prog-pill[aria-expanded="true"] { transform: none; box-shadow: inset 0 0 0 1px var(--rs-peri); }
:root body .fstage--ws .head.p2-head .prog-glyphs { display: flex; gap: 3px; }
:root body .fstage--ws .head.p2-head .pg { width: 22px; height: 22px; border-radius: 50%; color: var(--rs-tx-3); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root body .fstage--ws .head.p2-head .pg .vi { width: 12px; height: 12px; }
:root body .fstage--ws .head.p2-head .pg.done { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root body .fstage--ws .head.p2-head .pg.now { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
:root body .fstage--ws .head.p2-head .pg.now::after { display: none; }
:root body .fstage--ws .head.p2-head .pg.done .vi { display: none; }
:root body .fstage--ws .head.p2-head .pg.done::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 760px) {
  :root body .fstage--ws .head.p2-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "back sub" "title title" "acts acts"; row-gap: 4px; }
  :root body .fstage--ws .head.p2-head h1, :root body .fstage--ws .head.p2-head h1.long { white-space: normal; text-wrap: balance; }
  :root body .fstage--ws .head.p2-head .p2-acts { display: flex; flex-wrap: wrap; width: 100%; margin-top: 8px; }
  /* row 1: the pill and ⋯ (mockup); row 2, at the right: whatever the step adds (Share, Undo / Approve, Continue) */
  :root body .fstage--ws .head.p2-head .p2-acts { justify-content: flex-end; }
  :root body .fstage--ws .head.p2-head .p2-acts > * { order: 2; margin-left: 0; }
  :root body .fstage--ws .head.p2-head .p2-acts > .head-prog { order: 0; flex: 1 1 calc(100% - 48px); min-width: 0; }
  :root body .fstage--ws .head.p2-head .p2-acts > .p2-pop-anchor { order: 1; }
  :root body .fstage--ws .head.p2-head .prog-pill { width: 100%; justify-content: space-between; }
}

/* ---- the page: the grid fills the window under the header, so nothing scrolls on a computer ---- */
:root .fstage.fstage--ws[data-page="proc"] { max-width: none; display: flex; flex-direction: column; height: calc(100dvh - var(--rs-top-h) - var(--rs-gap)); min-height: 600px; font: var(--rs-w-reg) var(--rs-fs-body)/1.45 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root .fstage[data-page="proc"] .head.p2-head { flex: none; }
:root .fstage[data-page="proc"] [data-practice-banner] { flex: none; margin-top: 8px; }
:root .fstage .proc-ed { flex: 1; min-height: 0; display: grid; gap: var(--rs-gap); grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, max-content) minmax(132px, 1fr); grid-template-areas: "card stage" "card tl"; }
:root .fstage .proc-i { width: 16px; height: 16px; flex: none; display: block; }
:root .fstage .proc-cap { font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-3); white-space: nowrap; }
:root .fstage .proc-phd { flex: none; display: flex; align-items: center; gap: 12px; min-height: 20px; min-width: 0; }
:root .fstage .proc-phd h2 { font: var(--rs-w-med) var(--rs-fs-sec)/20px var(--rs-font); white-space: nowrap; }
:root .fstage .proc-phd .proc-cap { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
:root .fstage .proc-phd .proc-rhint { margin-left: 16px; }

/* ---- the card ---- */
:root .fstage .proc-card { grid-area: card; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
:root .fstage .proc-card-h { padding: 12px 12px 0; }
:root .fstage .proc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 12px; display: grid; align-content: start; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--rs-line-2) transparent; }
/* the failure card carries the most (the reason block, the steps, Details open): tighter rhythm so it fits a 900px window */
:root .fstage .p2-stage[data-pstate="failed"] .proc-scroll { gap: 8px; }
:root .fstage .p2-stage[data-pstate="failed"] .proc-st { padding-top: 5px; padding-bottom: 5px; }
:root .fstage .proc-eta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
:root .fstage .proc-eta b { font: var(--rs-w-med) var(--rs-fs-title)/28px var(--rs-font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:root .fstage .proc-eta b:empty { display: none; }
:root .fstage .proc-eta span { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .fstage .p2-stage[data-pstate="off"] .proc-eta b { color: var(--rs-tx-3); }
/* the seven steps */
:root .fstage .proc-steps { display: grid; }
:root .fstage .proc-st { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--rs-r-sm); }
:root .fstage .proc-st:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 25px; bottom: -6px; width: 1px; background: var(--rs-line-2); }
:root .fstage .proc-st.done:not(:last-child)::after { background: var(--rs-peri-light); }
:root .fstage .proc-sg { position: relative; z-index: 1; width: 16px; height: 16px; display: grid; place-items: center; color: var(--rs-tx-3); }
:root .fstage .proc-sg .proc-i { width: 15px; height: 15px; }
:root .fstage .proc-dt { width: 6px; height: 6px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1.5px var(--rs-line-2); }
:root .fstage .proc-st.done .proc-sg { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .fstage .proc-sn { font-size: var(--rs-fs-body); line-height: 20px; color: var(--rs-tx-2); min-width: 0; }
:root .fstage .proc-st.done .proc-sn { color: var(--rs-tx); }
:root .fstage .proc-stime { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .fstage .proc-st.now { background: var(--rs-sel); }
:root .fstage .proc-st.now .proc-sn { color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .fstage .proc-st.now .proc-sg, :root .fstage .proc-st.now .proc-stime { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .fstage .proc-st.now .proc-sg::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--rs-peri); opacity: 0; animation: proc-ping 2.4s var(--rs-ease) infinite; }
@keyframes proc-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
:root .fstage .proc-st.wait { background: rgba(196,150,52,.16); }
:root .fstage .proc-st.wait .proc-sg, :root .fstage .proc-st.wait .proc-stime { color: var(--dk-t-8a6a1f, #7F6119); }
:root .fstage .proc-st.fail { background: var(--rs-neg-soft); }
:root .fstage .proc-st.fail .proc-sg, :root .fstage .proc-st.fail .proc-stime { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .fstage .proc-st:is(.wait, .fail, .off) .proc-sg::before { display: none; }
:root .fstage .proc-sd { grid-column: 2 / -1; margin-top: 2px; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-2); }
:root .fstage .proc-sbr { grid-column: 2 / -1; height: 3px; margin: 8px 0 2px; border-radius: 2px; background: rgba(76,95,146,.16); overflow: hidden; }
:root .fstage .proc-sbr i { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: var(--rs-peri-deep); border-radius: 2px; transition: width 600ms var(--rs-ease); }
/* a question, a failure, a lost connection: a block at the top of the card */
:root .fstage .proc-blk { display: grid; gap: 8px; padding: 12px; border-radius: 12px; }
:root .fstage .proc-blk h3 { font: var(--rs-w-med) var(--rs-fs-sec)/20px var(--rs-font); text-wrap: pretty; }
:root .fstage .proc-blk > p { font-size: var(--rs-fs-cap); line-height: 18px; color: var(--rs-tx-2); }
:root .fstage .proc-kick { display: inline-flex; align-items: center; gap: 6px; 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 .fstage .proc-kick .proc-i { width: 14px; height: 14px; }
:root .fstage .proc-askb { background: var(--rs-inset); }   /* a tinted block, like the failure block: not a card inside the card (rhythm.js) */
:root .fstage .proc-askb .proc-kick { color: var(--dk-t-8a6a1f, #8A6A1F); }
:root .fstage .proc-askb .rs-field { display: grid; gap: 4px; min-width: 0; }
:root .fstage .proc-askb .rs-label { font-size: var(--rs-fs-cap); }
:root .fstage .proc-blk .rs-in[aria-invalid="true"], :root .fstage .proc-telf .rs-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--rs-neg), 0 0 0 3px var(--rs-neg-soft); }
:root .fstage .proc-opt-l { font-weight: var(--rs-w-reg); color: var(--rs-tx-3); }
:root .fstage .proc-opts { display: grid; gap: 8px; }
:root .fstage .proc-opt { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rs-r-inner); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); cursor: pointer; transition: background var(--rs-t), box-shadow var(--rs-t); }
:root .fstage .proc-opt:hover { box-shadow: inset 0 0 0 1px var(--rs-peri); }
:root .fstage .proc-opt input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1.5px var(--rs-line-2); cursor: pointer; }
:root .fstage .proc-opt input:checked { box-shadow: inset 0 0 0 5px var(--rs-peri-deep); }
:root .fstage .proc-opt input:focus-visible { outline: none; box-shadow: inset 0 0 0 5px var(--rs-peri-deep), 0 0 0 3px var(--rs-peri-soft); }
:root .fstage .proc-opt:has(input:checked) { background: var(--rs-sel); box-shadow: none; }
:root .fstage .proc-opt b { font: var(--rs-w-med) var(--rs-fs-body)/18px var(--rs-font); }
:root .fstage .proc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
:root .fstage .proc-acts .rs-cap { color: var(--rs-tx-3); }
:root .fstage .proc-later, :root .fstage .proc-grab { display: none; }
:root .fstage .proc-quiet { color: var(--rs-tx-2); font-weight: var(--rs-w-reg); }
:root .fstage .proc-quiet:hover { color: var(--rs-tx); background: var(--rs-inset); }
:root .fstage .proc-failb { background: var(--rs-neg-soft); }
:root .fstage .proc-failb .proc-kick { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .fstage .proc-quietacts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
:root .fstage .proc-quietacts .rs-tbtn { padding-left: 0; padding-right: 0; }
:root .fstage .proc-quietacts .rs-tbtn:hover { background: none; text-decoration: underline; }
:root .fstage .proc-offb { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--rs-r-inner); background: rgba(196,150,52,.16); font-size: var(--rs-fs-cap); line-height: 18px; }
:root .fstage .proc-offb .proc-i { color: var(--dk-t-8a6a1f, #8A6A1F); margin-top: 1px; }
/* tell me when it's ready (js/processing-comms.js) */
:root .fstage #procComms:empty { display: none; }
:root .fstage .proc-notify { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rs-line); }
:root .fstage .proc-nrow { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 0; }
:root .fstage .proc-nrow > .proc-i { color: var(--rs-tx-3); }
:root .fstage .proc-nrow b { display: block; font: var(--rs-w-med) var(--rs-fs-body)/18px var(--rs-font); }
:root .fstage .proc-nrow span span { display: block; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-2); }
:root body .fstage input.proc-sw[role="switch"] { appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 20px; margin: 0; border-radius: 999px; background: var(--rs-raise); box-shadow: inset 0 0 0 1px var(--rs-line-2); cursor: pointer; transition: background var(--rs-t) var(--rs-ease); }
:root body .fstage input.proc-sw[role="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.22); transition: transform var(--rs-t) var(--rs-ease); }
:root body .fstage input.proc-sw[role="switch"]:checked { background: var(--rs-peri-deep); box-shadow: none; }
:root body .fstage input.proc-sw[role="switch"]:checked::after { transform: translateX(12px); }
:root body .fstage input.proc-sw[role="switch"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rs-peri-soft); }
:root body .fstage input.proc-sw[role="switch"]:disabled { opacity: .5; cursor: not-allowed; }
:root .fstage .proc-telf { display: grid; gap: 4px; padding-left: 28px; }
:root .fstage .proc-telf[hidden] { display: none; }
:root .fstage .proc-srow { display: flex; gap: 8px; align-items: center; min-width: 0; }
:root .fstage .proc-srow .rs-in { flex: 1; }
:root .fstage .proc-status { margin: 0; font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .fstage .proc-status:empty { display: none; }
/* details */
:root .fstage .proc-dd { border-top: 1px solid var(--rs-line); padding-top: 4px; }
:root .fstage .proc-dd summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 4px; margin: 0 -4px; border-radius: var(--rs-r-sm); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); cursor: pointer; }
:root .fstage .proc-dd summary::-webkit-details-marker { display: none; }
:root .fstage .proc-dd summary:hover { background: var(--rs-inset); }
:root .fstage .proc-dd summary .proc-i { width: 15px; height: 15px; color: var(--rs-tx-3); transition: transform var(--rs-t) var(--rs-ease); }
:root .fstage .proc-dd[open] summary .proc-i { transform: rotate(180deg); }
:root .fstage .proc-dl { display: grid; gap: 4px; padding: 4px 0; }
:root .fstage .proc-dl div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--rs-fs-cap); line-height: 18px; }
:root .fstage .proc-dl dt { color: var(--rs-tx-3); }
:root .fstage .proc-dl dd { color: var(--rs-tx); text-align: right; min-width: 0; overflow-wrap: anywhere; }
:root .fstage .proc-faild { margin: 0; padding: 4px 0; font-size: var(--rs-fs-cap); line-height: 18px; color: var(--rs-tx-2); }
:root .fstage .proc-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid var(--rs-line); }
:root .fstage .proc-foot .proc-cap { flex: 1; white-space: normal; }
/* ready: the card lands */
:root .fstage .proc-sum { display: grid; gap: 12px; }
:root .fstage .proc-sum-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
:root .fstage .pc-seal { width: 44px; height: 44px; overflow: visible; }
:root .fstage .pc-seal polygon { fill: var(--rs-peri); fill-opacity: calc(var(--o) + .18); stroke: #fff; stroke-opacity: .85; stroke-width: .7; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
:root .fstage .pc-seal-c { fill: none; stroke: var(--rs-tx); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
:root .fstage .pc-landed .pc-seal polygon { animation: da-facet 560ms var(--rs-ease) backwards; }
:root .fstage .pc-landed .pc-seal-c { animation: da-check 340ms var(--rs-ease) 420ms both; }
:root .fstage .proc-rib { display: flex; gap: 2px; height: 12px; }
:root .fstage .proc-rib-s { flex: var(--m) 1 0; min-width: 10px; border-radius: 3px; background: color-mix(in srgb, var(--rs-peri-deep) calc(30% + var(--k) * 12%), var(--rs-peri-light)); transition: opacity var(--rs-t), transform var(--rs-t); }
:root .fstage .proc-rib.hov .proc-rib-s:not(.on) { opacity: .35; }
:root .fstage .proc-rib-s.on { transform: scaleY(1.35); }
:root .fstage .pc-landed .proc-rib-s { animation: da-rib 520ms var(--rs-ease) calc(300ms + var(--k) * 60ms) backwards; transform-origin: left; }
:root .fstage .proc-ribcap { display: flex; justify-content: space-between; gap: 12px; margin: -4px 0 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); font-variant-numeric: tabular-nums; }
:root .fstage .proc-ribcap b { font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root .fstage .proc-next { margin: 0; font-size: var(--rs-fs-cap); line-height: 18px; color: var(--rs-tx-2); }
:root .fstage .proc-sum-go { justify-self: start; }
:root .fstage .proc-mail { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .fstage .proc-mail[hidden] { display: none; }
:root .fstage .proc-mail .proc-i { width: 14px; height: 14px; color: var(--rs-tx-3); }
:root .fstage .proc-sumsteps { display: grid; gap: 2px; padding: 4px 0 8px; }
:root .fstage .proc-sumsteps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--rs-fs-cap); line-height: 20px; }
:root .fstage .proc-sumsteps .proc-i { width: 14px; height: 14px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }

/* ---- the frame panel: a flat frame (never a dimmed photo), the step meter under it ---- */
:root .fstage .proc-stagep { grid-area: stage; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
:root .fstage .proc-stage { flex: 0 1 auto; width: 100%; aspect-ratio: 16 / 9; min-height: 0; container-type: size; display: grid; place-items: center; }
:root .fstage .proc-frame { position: relative; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; max-height: 100%; overflow: hidden; border-radius: var(--rs-r-sm); background: #17181C; container-type: size; isolation: isolate; }
:root .fstage .proc-ctr { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 8cqw; text-align: center; color: #fff; transition: opacity 240ms var(--rs-ease); }
:root .fstage .proc-ctr .pc-bird { width: min(52cqh * 1.276, 46cqw); aspect-ratio: 970 / 760; margin-bottom: 4cqh; transition: opacity 240ms var(--rs-ease), filter 240ms, transform 240ms var(--rs-ease); }
:root .fstage .p2-stage:is([data-pstate="failed"], [data-pstate="queued"]) .proc-ctr .pc-bird { width: min(32cqh * 1.276, 28cqw); filter: grayscale(1); opacity: .5; }
:root .fstage .p2-stage[data-pstate="done"] .proc-ctr > :not(.pc-bird) { display: none; }
:root .fstage .p2-stage[data-pstate="done"] .proc-ctr .pc-bird { margin-bottom: 0; }
:root .fstage .proc-fk { font-size: var(--rs-fs-cap); color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
:root .fstage .proc-fk:empty, :root .fstage .proc-fd:empty { display: none; }
:root .fstage .proc-fs { margin: 0; font: var(--rs-w-med) var(--rs-fs-title)/28px var(--rs-font); letter-spacing: -.01em; }
:root .fstage .proc-fd { margin: 0; max-width: 52ch; font-size: var(--rs-fs-body); color: rgba(255,255,255,.78); }
:root .fstage .proc-fs.swap, :root .fstage .proc-fd.swap { animation: da-swap 240ms var(--rs-ease); }
:root .fstage .proc-glass { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-top: 8px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); white-space: nowrap; cursor: pointer; }
:root .fstage .proc-glass:hover { background: var(--dk-b-ffffffa22, rgba(255,255,255,.22)); }
:root .fstage .proc-glass:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--dk-paper, #fff), 0 0 0 3px rgba(195,204,225,.5); }
:root .fstage .proc-glass .proc-i { width: 14px; height: 14px; }
:root .fstage .proc-vtag { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(23,24,28,.72); color: #fff; font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
:root .fstage .proc-vtag[hidden] { display: none; }
:root .fstage .proc-vtag i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rs-peri-light); }
:root .fstage .proc-vtag.live i { animation: proc-blink 1.6s ease-in-out infinite; }
@keyframes proc-blink { 50% { opacity: .25; } }
:root .fstage .proc-vtag.wait i { background: var(--dk-b-e7c46a, #E7C46A); }
:root .fstage .proc-vtag.fail i { background: var(--dk-b-f0a396, #F0A396); }
:root .fstage .proc-vtag.ok i { background: var(--dk-b-9bd3a8, #9BD3A8); }
:root .fstage .proc-fbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: var(--dk-b-ffffffa12, rgba(255,255,255,.12)); }
:root .fstage .proc-fbar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--rs-peri-light); transition: width 900ms var(--rs-ease); }
:root .fstage .proc-peek { position: absolute; inset: 0; z-index: 4; background: #111; animation: da-fade 140ms var(--rs-ease); }
:root .fstage .proc-peek[hidden] { display: none; }
:root .fstage .proc-firstcut { position: absolute; inset: 0; z-index: 2; background: #111; }
:root .fstage .proc-firstcut video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
:root .fstage .proc-firstcut .proc-glass { position: absolute; right: 12px; top: 12px; z-index: 2; height: 26px; margin: 0; padding: 0 12px; font-size: var(--rs-fs-cap); background: rgba(23,24,28,.72); box-shadow: none; }
:root .fstage .proc-peek video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root .fstage .proc-peek .proc-glass { position: absolute; right: 12px; top: 12px; z-index: 2; height: 26px; margin: 0; padding: 0 12px; font-size: var(--rs-fs-cap); background: rgba(23,24,28,.72); box-shadow: none; }
/* ready: the cut, clear, with its line on a solid block */
:root .fstage .proc-done { position: absolute; inset: 0; z-index: 4; display: grid; place-items: end start; padding: 16px; }
:root .fstage .proc-done-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root .fstage .pc-landed .proc-done-img { animation: da-wipe 900ms cubic-bezier(.65,0,.35,1) both; }
:root .fstage .proc-done-in { position: relative; z-index: 1; display: grid; justify-items: start; gap: 4px; padding: 12px 16px 16px; border-radius: var(--rs-r-inner); background: rgba(23,24,28,.86); color: #fff; }
:root .fstage .proc-done.noimg { place-items: center; }
:root .fstage .proc-done:not(.noimg) .proc-done-in { position: absolute; left: 16px; bottom: 16px; }   /* laid over the cut, inside it */
:root .fstage .proc-done.noimg .proc-done-in { background: none; justify-items: center; text-align: center; }
:root .fstage .pc-landed .proc-done-in { animation: da-rise 240ms var(--rs-ease) 600ms both; }
:root .fstage .proc-ck { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--dk-b-ffffffa16, rgba(255,255,255,.16)); }
:root .fstage .proc-done-in h2 { font: var(--rs-w-med) var(--rs-fs-title)/28px var(--rs-font); }
:root .fstage .proc-done-in p { margin: 0; font-size: var(--rs-fs-body); color: rgba(255,255,255,.82); }
:root .fstage .proc-done-in .rs-btn { margin-top: 8px; }
/* transport: the step meter, what Volare has done so far */
:root .fstage .proc-transport { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; padding: 8px 4px 0; container-type: inline-size; }
:root .fstage .proc-stepn { font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .fstage .proc-stepn span { color: var(--rs-tx-3); font-weight: var(--rs-w-reg); }
:root .fstage .proc-meter { flex: 1 1 120px; min-width: 80px; display: flex; gap: 3px; height: 6px; }
:root .fstage .proc-meter i { position: relative; flex: 1; overflow: hidden; border-radius: 3px; background: var(--rs-raise); }
:root .fstage .proc-meter i.d { background: var(--rs-peri); }
:root .fstage .proc-meter i.n::after { content: ""; position: absolute; inset: 0; width: calc(var(--sp, .4) * 100%); border-radius: 3px; background: var(--rs-peri-deep); transition: width 900ms var(--rs-ease); }
:root .fstage .proc-meter i.w::after { content: ""; position: absolute; inset: 0; width: 50%; border-radius: 3px; background: var(--dk-b-e7c46a, #E7C46A); }
:root .fstage .proc-meter i.f { background: var(--rs-neg); opacity: .55; }
:root .fstage .proc-stats { display: flex; align-items: baseline; gap: 16px; min-width: 0; overflow: hidden; flex: 0 1 auto; margin: 0; }
:root .fstage .proc-stats:empty { display: none; }
:root .fstage .proc-stats div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
:root .fstage .proc-stats dt { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .fstage .proc-stats dd { order: -1; margin: 0; font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); font-variant-numeric: tabular-nums; }
@container (max-width: 420px) { :root .fstage .proc-stats { display: none; } }

/* ---- Scenes: the cut as Volare builds it, one tile per scene ---- */
:root .fstage .proc-tl { grid-area: tl; display: flex; flex-direction: column; gap: 8px; min-height: 132px; overflow: hidden; container-type: inline-size; }
:root .fstage .proc-track { flex: 1; min-height: 48px; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); grid-template-rows: minmax(40px, 1fr) 16px; grid-auto-flow: column; column-gap: 2px; row-gap: 4px; }
:root .fstage .proc-track .pc-sc { display: contents; }
:root .fstage .proc-track .pc-sc-b { grid-row: 1; position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; padding: 0; border: 0; border-radius: 4px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .fstage .proc-track .pc-sc:first-child .pc-sc-b { border-radius: var(--rs-r-sm) 4px 4px var(--rs-r-sm); }
:root .fstage .proc-track .pc-sc:last-child .pc-sc-b { border-radius: 4px var(--rs-r-sm) var(--rs-r-sm) 4px; }
:root .fstage .proc-track .pc-sc-t { grid-row: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-3); font-variant-numeric: tabular-nums; }
:root .fstage .proc-track .pc-sc-w { display: none; }
:root .fstage .pc-sc.ready .pc-sc-b { cursor: pointer; background: #17181C; transition: box-shadow var(--rs-t), filter var(--rs-t); }
:root .fstage .pc-sc.ready .pc-sc-b video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
:root .fstage .pc-sc.ready .pc-sc-b:hover, :root .fstage .pc-sc.ready .pc-sc-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rs-peri); filter: brightness(1.06); }
:root .fstage .pc-sc.ready .pc-sc-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
:root .fstage .pc-sc.ready.on .pc-sc-b::after, :root .fstage .pc-sc.ready .pc-sc-b:hover::after { box-shadow: inset 0 0 0 2px var(--rs-peri-deep); }
:root .fstage .pc-sc.now .pc-sc-b { background: linear-gradient(90deg, var(--rs-inset) 0 30%, var(--dk-paper, #fff) 50%, var(--rs-inset) 70% 100%) 0 0 / 300% 100%; animation: proc-shim 1.6s linear infinite; }
:root .fstage .proc-drawing { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); white-space: nowrap; }
@keyframes proc-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
:root .fstage .pc-sc.wait .pc-sc-b { background-image: repeating-linear-gradient(-45deg, transparent 0 5px, var(--dk-b-1f1f21a4, rgba(31,31,33,.04)) 5px 10px); }
:root .fstage .pc-sc.drawn .pc-sc-b { background: var(--rs-sel); box-shadow: none; }
/* the empty well is drawn on ::before, so the panel's edge stays the one edge (align check) */
:root .fstage .proc-track--empty { display: grid; place-items: center; grid-template-rows: none; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rs-r-sm); }
:root .fstage .proc-track--empty::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .fstage .proc-track--empty.now::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--dk-b-ffffffa70, rgba(255,255,255,.7)) 50%, transparent 70%) 0 0 / 300% 100%; animation: proc-shim 1.6s linear infinite; }
@container (max-width: 520px) { :root .fstage .proc-rhint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  :root .fstage :is(.proc-st.now .proc-sg::before, .pc-sc.now .pc-sc-b, .proc-track--empty.now::after, .proc-vtag.live i) { animation: none; }
  :root .fstage .pc-landed .proc-done-img { animation: da-fade 300ms ease both; }
}

/* ---- smaller computers ---- */
@media (min-width: 761px) and (max-width: 1180px) { :root .fstage .proc-ed { grid-template-columns: 280px minmax(0, 1fr); } }

/* ---- phone: frame, Scenes, card stacked; the question opens as a bottom sheet ---- */
@media (max-width: 760px) {
  :root .fstage.fstage--ws[data-page="proc"] { height: auto; min-height: 0; margin-bottom: 0; }
  :root .fstage .proc-ed { display: flex; flex-direction: column; }
  :root .fstage .proc-stagep { order: 1; }
  :root .fstage .proc-stage { aspect-ratio: auto; container-type: inline-size; }
  :root .fstage .proc-frame { width: 100%; max-height: none; }
  :root .fstage .proc-tl { order: 2; min-height: 0; }
  :root .fstage .proc-track { flex: none; grid-template-rows: 48px 16px; }
  :root .fstage .proc-card { order: 3; overflow: visible; }
  :root .fstage .proc-scroll { overflow: visible; }
  :root .fstage .proc-ctr .pc-bird { width: min(44cqh * 1.276, 46cqw); margin-bottom: 2cqh; }
  :root .fstage .proc-fk, :root .fstage .proc-fd { display: none; }
  :root .fstage .proc-fs { font-size: var(--rs-fs-sec); line-height: 20px; }
  :root .fstage .proc-glass { height: 28px; margin-top: 4px; font-size: var(--rs-fs-cap); }
  :root .fstage .proc-vtag { left: 8px; top: 8px; }
  :root .fstage .proc-done { padding: 8px; }
  :root .fstage .proc-done-in { padding: 8px 12px 12px; }
  :root .fstage .proc-done:not(.noimg) .proc-done-in { left: 8px; bottom: 8px; }
  :root .fstage .proc-done-in p { display: none; }
  :root .fstage .proc-stepn span { display: none; }
  :root .fstage .proc-askb.sheeted { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 82vh; overflow-y: auto; padding: 8px 16px 24px; border-radius: 16px 16px 0 0; background: var(--rs-panel); box-shadow: 0 -8px 32px rgba(31,31,33,.18), 0 0 0 100vmax rgba(31,31,33,.32); animation: proc-sheet 240ms var(--rs-ease); }
  @keyframes proc-sheet { from { transform: translateY(100%); } }
  :root .fstage .proc-askb.sheeted .proc-grab { display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--rs-line-2); }
  :root .fstage .proc-askb.sheeted .proc-later { display: inline-flex; }
}
/* rs-wire integration: the header's ink action (Publish, js/youtube-publish.js) is the view's periwinkle-deep primary, never black */
:root .p2-head .da-hbtn--ink { background: var(--rs-peri-deep); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root .p2-head .da-hbtn--ink:hover { background: var(--rs-peri-deep-hover); }
:root .p2-head .da-hbtn--ink .vi { color: #fff; }