/* Ported from .orch/qa/flow-design/shared/flow-head.css (Direction A): the header shared by every step of a video. */
/* The page header, identical on every step of the flow (Upload, Setup = dir-A; Processing, Review, Packaging, Download = phase2).
   Back to Videos · working title + sub-line · progress pill · Share / Publish (only once a cut exists) · ⋯
   Loaded LAST on both pages so the header's box is the same everywhere and the art box (the frame) never moves. */
body .head.p2-head { position: relative; z-index: 10; display: block; margin: 0 0 20px; min-height: 0; }
.p2-back { display: inline-flex; align-items: center; gap: 8px; height: 24px; font-size: 13px; line-height: 1; color: var(--s-ink-2); text-decoration: none; margin: 0 0 8px; padding: 0; border-radius: 6px; }
.p2-back:hover { color: var(--s-ink); }
.p2-back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--s-peri-soft); }
.p2-back-ar { width: 10px; height: 10px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 3px; }
body .head.p2-head .head-row { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
.p2-titlebox { min-width: 0; }
body .head.p2-head h1 { font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -.035em; margin: 0; }
body .head.p2-head .head-sub { display: block; margin: 8px 0 0; font-size: 15px; line-height: 1.5; min-height: 22px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-acts { display: flex; align-items: center; gap: 10px; flex: none; }
body .head.p2-head .prog { margin: 0; }
body .head.p2-head .prog-pill { height: 44px; width: 312px; justify-content: space-between; }
.p2-cutacts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* the head row is a size container so the pill can follow the stage grid: its right edge sits on the end of the
   stage's 9th column (Share/Publish + ⋯ fill the last 3 columns), so when the sidebar collapses and the stage widens
   the pill moves with the columns, frame by frame through the 220 ms move. 232px stays the floor (Share + Publish). */
@media (min-width: 761px) {
  body .head.p2-head .head-row { container-type: inline-size; }
  .p2-cutacts { width: max(232px, calc(25cqw - 50px)); }
}
.p2-cutacts.ghost { visibility: hidden; }  /* no cut yet: Share/Publish keep their place so the pill never moves */
.p2-hbtn { gap: 7px; }
.p2-hbtn .vi { width: 16px; height: 16px; }
.p2-more { display: grid; gap: 3px; align-content: center; justify-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--s-line); background: var(--s-card); padding: 0; cursor: pointer; }
.p2-more i { width: 4px; height: 4px; background: var(--s-ink); transform: rotate(45deg); display: block; }
.p2-more:hover { border-color: var(--dk-l-1f1f21a24, rgba(31,31,33,.24)); }
.p2-more:focus-visible, .p2-hbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--s-peri-soft), 0 0 0 1px var(--s-peri); }
.p2-head .p2-pop-anchor { position: relative; }
.p2-head .p2-popover { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; 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-head .p2-popover[hidden] { display: none; }
.p2-head .p2-menu, .p2-menu.is-portal { width: 220px; padding: 6px; }
.p2-head .p2-menu button, .p2-head .p2-menu a, .p2-menu.is-portal button { 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; }
.p2-head .p2-menu button:hover, .p2-head .p2-menu button:focus-visible, .p2-head .p2-menu a:hover, .p2-head .p2-menu a:focus-visible, .p2-menu.is-portal button:hover, .p2-menu.is-portal button:focus-visible { background: var(--s-shell); outline: none; }
.p2-head .p2-menu .danger, .p2-menu.is-portal .danger { color: var(--dk-tx-s-danger, var(--s-danger)); }

@media (max-width: 760px) {
  body .head.p2-head { margin-bottom: 14px; }
  body .head.p2-head .head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title btns" "prog prog"; align-items: center; gap: 12px 10px; }
  .p2-titlebox { grid-area: title; }
  .p2-acts { display: contents; }
  body .head.p2-head .prog { grid-area: prog; margin: 0; }
  .p2-cutacts, .p2-head .p2-acts > .p2-pop-anchor { grid-area: btns; }
  .p2-head .p2-acts > .p2-pop-anchor { justify-self: end; }
  .p2-cutacts { margin-right: 44px; }
  .p2-cutacts.ghost { display: none; }
  .p2-hl { display: none; }
  .p2-hbtn { width: 36px; height: 36px; padding: 0; }
  .p2-hbtn .p2-count { display: none; }
  body .head.p2-head h1 { font-size: 30px; }
  body .head.p2-head .head-sub { display: block; font-size: 13px; min-height: 20px; white-space: normal; overflow: visible; text-overflow: clip; }
  body .head.p2-head .prog-pill { width: 100%; justify-content: space-between; height: 44px; }
  .p2-head .p2-popover { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; z-index: 65; }
}
/* parity2 (create): a menu row that does nothing yet (Rename before the video has a name); the New video ⋯ menu sits on <body>
   (js/flow-stage.js) so an open menu never changes the head's box */
.p2-head .p2-menu button:disabled, .p2-menu.is-portal button:disabled { color: var(--s-faint); cursor: default; background: none; }
.p2-popover.is-portal { position: fixed; z-index: 70; 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; }
@media (max-width: 760px) { .p2-popover.is-portal { left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px; width: auto; } }