/*
 * The steps of a video (js/steps.js) and its Packaging step (js/packaging.js): title, thumbnail, ready to post.
 * Shared tokens only (styles.css :root, re-pointed by css/looks.css): type roles (--type-*), spacing (--s*), the
 * measure, and --button as the one accent: the page's primary action and the current selection. No look-scoped
 * rules, so both looks come out the same size.
 */

/* ---------- the steps: navigation, one row ----------
   One step model (js/steps.js position()): every step before the current one is done (a tick), the current one is
   solid with its number and a small "Now" tag under its label, the rest are upcoming. The step on screen has the ring. */
.vsteps { min-width: 0; margin: var(--s3) 0 var(--s5); }
.vsteps .fsteps { margin: 0; }
.fsteps.fsteps--nav { max-width: 52rem; padding-left: 0; }
.fsteps--nav .fstep { min-width: 0; }
.fsteps--nav .fstep-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s2) 0 5px; border-radius: var(--r-sm);
  color: inherit; text-decoration: none; white-space: nowrap; }
.fsteps--nav .fstep-n { margin-right: 2px; }
.fsteps--nav a.fstep-link:hover .fstep-label { text-decoration: underline; text-underline-offset: 3px; }
.fsteps--nav a.fstep-link:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.fsteps--nav .fstep.is-locked { color: var(--muted); }
.fsteps--nav .fstep.is-locked .fstep-link { cursor: default; }
.fsteps--nav .fstep-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.fsteps--nav .fstep-tag { font: var(--w-medium) 12px/1.2 var(--sans); color: var(--muted); letter-spacing: 0.02em; }
/* a finished step is quiet (soft fill, ink tick); the current step is solid with its number; the page on screen has the ring */
html[data-look] .fsteps--nav .fstep.is-done .fstep-n { background: var(--soft); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look] .fsteps--nav .fstep.is-current .fstep-n { background: var(--button); border-color: var(--button); color: var(--pearl); box-shadow: none; }
html[data-look="volare"] .fsteps--nav .fstep.is-current .fstep-n { color: var(--v-charcoal); }
html[data-look="stage"] .fsteps--nav .fstep.is-current .fstep-n { color: var(--s-ink); }
html[data-look] .fsteps--nav .fstep.is-on .fstep-n { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink-strong); }
.fsteps--nav .fstep.is-current .fstep-label { font-weight: var(--fw-strong); }
.fsteps-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0 0 var(--s1); font: var(--w-medium) var(--text-md)/1.3 var(--sans); color: var(--ink-strong); }
.fsteps-next { font: var(--type-meta); font-weight: var(--fw-strong); color: var(--link, var(--ink)); text-decoration: underline; text-underline-offset: 3px; }
.fsteps-bar { display: none; height: 6px; margin-top: var(--s2); border-radius: 999px; background: var(--line-2); overflow: hidden; }
.fsteps-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ink-900); }
@media (max-width: 1024px) {
  /* Seven labelled steps do not fit a narrow screen: the same position as "Step N of M: name" and a progress bar, nothing dropped or clipped. */
  .vsteps > .fsteps--nav { display: none; }
  .fsteps-bar { display: block; }
}

/* Short pages for a step already behind the video (or skipped). */
.step-head { font: var(--type-section); color: var(--ink-strong); margin: 0; }
.step-head:focus { outline: none; }
.step-head:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 4px; }
.step-past:not(.step-hero) .estate { padding-left: 0; padding-right: 0; }
/* Past or empty step: one centred hero on the page (the card gives up its box, as every page-sized state does):
   the step's name as a small label, a large title, a body-size line, one full-height button. */
/* ASK 7 (2026-10-28): a past step with nothing to fill in (Upload, Setup) sits in the middle of the page, not in a left column */
.app .card.set-card.script-card.step-hero { margin-inline: auto; }
.app .card.step-hero { min-height: 28rem; display: grid; grid-template-rows: auto 1fr; padding: var(--s4) 0 0; }
.step-hero > .step-head { text-align: center; font: var(--w-medium) var(--text-2xs)/1.2 var(--font-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.app .card.step-hero .estate--page { align-self: center; padding: var(--s5) var(--s4) var(--s7); }
.app .card.step-hero .estate-title { font: var(--w-medium) var(--text-3xl)/1.2 var(--font-sans); letter-spacing: var(--track-title); max-width: 24ch; }
.app .card.step-hero .estate-body { font: var(--type-body); color: var(--ink); max-width: 44ch; }
.app .card.step-hero .estate-actions .btn { min-height: 3rem; padding-inline: var(--s6); font-size: var(--text-md); }
/* The idea step, past: the brief laid out across the column, with the way forward as one full-height button. */
.app .card.step-idea { padding: var(--s6) var(--s6) var(--s7); gap: var(--s5); }
.step-idea > .step-head { font: var(--w-medium) var(--text-3xl)/1.2 var(--font-sans); }
.step-idea .step-facts { max-width: none; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s5) var(--s6); }
.step-idea .step-facts .type-body { font: var(--type-body); color: var(--ink); }
.step-idea .btn { min-height: 3rem; padding-inline: var(--s6); font-size: var(--text-md); }
.step-facts { display: grid; gap: var(--s3); max-width: var(--measure); }
.step-facts .field-label { margin-bottom: var(--s1); }
.step-list { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s2); font: var(--type-body); }
.step-script { display: grid; gap: var(--s2); max-width: var(--measure); font: var(--type-body); color: var(--ink); }
.step-script p { margin: 0; }

/* One line on the Script, Review and Download steps: where the title and thumbnail stand. */
.pk-titleline, .pk-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0; font: var(--type-body); color: var(--ink); overflow-wrap: anywhere; }
.pk-titleline { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
/* inside the info panel it sits like the panel's groups: the card's own padding, a hairline above when it follows one */
.rv-pkline { padding: var(--s4) var(--pad-card); margin: 0; border-top: 1px solid var(--line); }
.rv-info > .rv-pkline:first-child { padding-top: var(--pad-card); border-top: 0; }
.rv-info > .rv-pkline:last-child { padding-bottom: var(--pad-card); }

/* ---------- the Packaging page ---------- */
.pk { display: grid; gap: var(--gap-card); min-width: 0; }
.pk-intro { display: grid; gap: var(--s1); }
.pk-lead { margin: 0; font: var(--type-body); color: var(--ink); }
.pk-closed { margin: var(--s2) 0 0; padding: var(--s3) var(--s4); border-left: 2px solid var(--line-2); font: var(--type-body); color: var(--ink); max-width: var(--measure); }
.pk-msg { margin: 0; }
.pk-msg:empty { display: none; }

.app .card.pk-sec { padding: var(--pad-card); display: grid; gap: var(--s4); min-width: 0; }
.pk-sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; }
.pk-sec-head h3 { margin: 0; }
.pk-sec-head p { margin: var(--s1) 0 0; max-width: var(--measure); }
.pk-letter { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--soft); color: var(--ink-strong);
  font: var(--type-meta); font-weight: var(--fw-strong); font-variant-numeric: var(--nums-tabular); margin-top: 2px; }
.pk-sub { margin: 0; font: var(--type-body-strong); color: var(--ink-strong); }
.pk-block { display: grid; gap: var(--s3); min-width: 0; }
.pk-block + .pk-block { padding-top: var(--s5); border-top: 1px solid var(--line); }
.pk-sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.pk-sec .estate--row, .pk-sec .estate--card, .pk-sec .wstate--row { padding-left: 0; padding-right: 0; }

/* Choices: each is the hit target; the chosen one carries the accent (the current selection). */
.pk-set { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; max-width: 48rem; }
.pk-opt { display: flex; align-items: stretch; gap: var(--s2); min-width: 0; flex-wrap: wrap; }
.pk-opt > .pkg-option { flex: 1 1 20rem; min-width: 0; }
.pk .pkg-option { position: relative; padding: var(--s3); }
.pk .pkg-option:has(input:checked) { border-color: var(--button); box-shadow: inset 0 0 0 1px var(--button); }
.pk .pkg-option input { accent-color: var(--button); }
.pk-tag { margin-left: auto; align-self: flex-start; flex: none; padding: 0 var(--s2); border-radius: 999px; background: var(--button); color: var(--pearl);
  font: var(--type-meta); font-weight: var(--fw-strong); line-height: 1.6; }
.pk-own { display: grid; gap: var(--s2); min-width: 0; flex-direction: column; }
.pk-opt.pk-own { display: grid; }
.pk-opt > .pkg-why { flex: 1 1 100%; margin: calc(-1 * var(--s1)) 0 0 calc(var(--s3) + 1.25rem); display: grid; gap: var(--s1); }
.pkg-why > summary { cursor: pointer; width: max-content; list-style: none; font: var(--type-meta); font-weight: var(--fw-strong); color: var(--muted); padding: var(--s1) 0; }
.pkg-why > summary::-webkit-details-marker { display: none; }
.pkg-why > summary::before { content: "›"; display: inline-block; margin-right: var(--s1); transition: transform .15s; }
.pkg-why[open] > summary::before { transform: rotate(90deg); }
.pkg-why > summary:hover, .pkg-why[open] > summary { color: var(--ink); }
.pkg-why > summary:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; border-radius: 4px; }
.pkg-why > .pkg-notes { margin-top: 0; }
.pk-own-field { display: grid; gap: var(--s2); padding: 0 var(--s3) var(--s2) calc(var(--s3) + 1.25rem); max-width: 40rem; }
.pk-own-field[hidden] { display: none; }
.pk-own-field .plan-actions { margin-top: var(--s1); }
.pk-countline { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; font: var(--type-meta); color: var(--muted); }
.pk-count { font-variant-numeric: var(--nums-tabular); }
.pk-count.is-long { color: var(--ink); font-weight: var(--fw-strong); }
.pk-soft { color: var(--ink); }
.pk .pkg-reword { flex: 1 1 100%; border-color: var(--button); }
.pk-for { margin: 0; font: var(--type-meta); color: var(--muted); }
.pk .pkg-wait { max-width: 40rem; }

/* The two doors: equal, side by side; the open one carries the accent. */
.pk-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 48rem; }
.pk-door { display: grid; gap: var(--s1); text-align: left; min-height: 44px; padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: var(--type-body); cursor: pointer; transition: border-color var(--motion), box-shadow var(--motion); }
.pk-door:hover { border-color: var(--muted); }
.pk-door.is-on { border-color: var(--button); box-shadow: inset 0 0 0 1px var(--button); }
.pk-door:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.pk-door .type-strong { color: var(--ink-strong); }
.pk-panel { display: grid; gap: var(--s5); min-width: 0; }
.pk-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pk-door { transition: none; } }

/* Images from Volare (js/thumbnails.js) inside the door. */
.tn-images { display: grid; gap: var(--s4); min-width: 0; container-type: inline-size; }
.tn-images-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.tn-images .rv-group { padding: 0; border: 0; }
.tn-images .tn-group + .tn-group { padding-top: var(--s4); border-top: 1px solid var(--line); }

/* Upload my own */
.pk-drop { display: grid; justify-items: center; gap: var(--s1); padding: var(--s6) var(--s4); border: 1px dashed var(--dashed); border-radius: var(--r-sm);
  text-align: center; color: var(--ink); cursor: pointer; max-width: 48rem; }
.pk-drop:hover, .pk-drop.is-over { border-color: var(--button); background: var(--hover-bg); }
.pk-drop:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.pk-drop[aria-disabled="true"] { cursor: default; opacity: .6; }
.pk-drop .type-meta { max-width: 36rem; }
.pk-ups { list-style: none; margin: 0; padding: 0; display: grid; max-width: 48rem; }
.pk-up { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s3) 0; }
.pk-up + .pk-up { border-top: 1px solid var(--line); }
.pk-up img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--tile); }
.pk-up-meta { display: grid; gap: var(--s1); min-width: 0; }
.pk-up-meta p { margin: 0; }
.pk-up-ops { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.pk-file { position: relative; cursor: pointer; }
.pk-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pk-file[disabled] { opacity: .55; pointer-events: none; }
.pk-fit { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-sm, 10px); background: var(--fill-faint-hover, var(--dk-b-1f1f21a4, rgba(31,31,33,.04))); max-width: 48rem; }
.pk-fit p { margin: 0; max-width: var(--measure); }
#pkUpMsg:empty { display: none; }

/* Ready to post: each place as a YouTube page shows it. The preview's own colours are the page's light and dark ink. */
.pk-theme { display: flex; gap: var(--s2); }
.pk-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.pk-slot { display: grid; gap: var(--s2); min-width: 0; }
.pk-slot + .pk-slot { padding-top: var(--s5); border-top: 1px solid var(--line); }
.pk-slot-name { display: flex; align-items: center; gap: var(--s2); margin: 0; font: var(--type-body-strong); color: var(--ink-strong); overflow-wrap: anywhere; }
.pk-slot-letter { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); background: var(--ink-900); color: var(--pearl); font: var(--type-meta); font-weight: var(--fw-strong); }
.pk-previews { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 24rem); gap: var(--s5); align-items: start; }
.pk-fig { margin: 0; display: grid; gap: var(--s2); min-width: 0; }
.pk-dl { justify-self: start; display: inline-flex; align-items: center; gap: var(--s1); }
.yt { --yt-bg: var(--pearl); --yt-ink: var(--ink-900); --yt-muted: var(--muted); background: var(--yt-bg); color: var(--yt-ink); border-radius: var(--r-sm);
  padding: var(--s3); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.pk-slots--dark .yt { --yt-bg: var(--ink-900); --yt-ink: var(--pearl); --yt-muted: color-mix(in srgb, var(--pearl) 66%, transparent); box-shadow: none; }
.yt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--tile); }
.yt-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s3); margin-top: var(--s3); }
.yt-avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--yt-muted); opacity: .5; }
.yt-text { display: grid; gap: 2px; min-width: 0; }
.yt-title { margin: 0; font: var(--type-body-strong); color: var(--yt-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.yt-meta { margin: 0; font: var(--type-meta); color: var(--yt-muted); }
.yt--small { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--s2); align-items: start; }
.yt--small .yt-title { font: var(--type-meta); font-weight: var(--fw-strong); }
.pk-test .tn-results { max-width: 28rem; }
.pk-copy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); max-width: 48rem; }
.pk-pre { margin: 0; padding: var(--s3) var(--s4); max-width: 48rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: var(--type-meta); color: var(--ink); background: var(--tile); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }

/* The way forward: the page's one primary action, and a quiet skip. */
.pk-next { display: grid; gap: var(--s2); padding-top: var(--s2); }
.pk-next .type-meta { margin: 0; max-width: var(--measure); }

@media (max-width: 680px) {
  .pk-doors { grid-template-columns: minmax(0, 1fr); }
  .pk-up { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); }
  .pk-previews { grid-template-columns: minmax(0, 1fr); }
  .yt--small { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .pk-own-field { padding-left: var(--s3); }
  .pk-next .btn, .pk-own-field .btn { width: 100%; justify-content: center; }
  /* the "Change words" control sits under its own title as a quiet line, not a row of its own */
  .pk-opt { gap: 0; }
  .pk-opt .pkg-edit { width: auto; min-height: 36px; margin-left: calc(var(--s3) + 1.25rem); padding-inline: 0; font: var(--type-meta); font-weight: var(--fw-strong); }
}
@container (max-width: 36rem) {
  .tn-images .tn-item { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* Q2 polish. The form column sets the card width, so the right third is not empty. "Change words" is a secondary button on the
   option's own row; every option has the same width. */
.pk { max-width: 52rem; }
.pk-set { max-width: none; }
.pk-opt { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; align-items: center; gap: var(--s2) var(--s3); }
.pk-opt > .pkg-option { flex: none; }
.pk-opt > .pkg-why, .pk-opt > .pkg-reword, .pk-opt > .pk-own-field { grid-column: 1 / -1; }
.pk-opt.pk-own > .pkg-option { grid-column: 1 / -1; }
.pk-opt:not(:has(> .pkg-edit)) > .pkg-option { grid-column: 1 / -1; }
html[data-look] .pk .pkg-edit { justify-content: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-strong); }
html[data-look] .pk .pkg-edit:hover { background: var(--hover-bg); }
.pk-doors { max-width: none; }
.pk-drop { max-width: none; }
@media (max-width: 680px) {
  .pk-opt { grid-template-columns: minmax(0, 1fr); }
  html[data-look] .pk .pkg-edit { justify-self: start; }
}

/* Q2 polish. The step row's left edge is the title's: the ring's outer edge (4px out) sits on the content edge, and the
   "video is here" dot (when drawn) sits outside the circle. */
.fsteps--nav .fstep:first-child .fstep-link { padding-left: var(--s1); }
.fsteps--nav .fstep.is-here .fstep-n::after { top: -7px; right: -7px; }
@media (max-width: 860px) {
  /* The step chips on Create (outside .vsteps) keep numbers for all and the name for the one on screen. */
  #stepChips.fsteps--nav .fstep:not(.is-on) .fstep-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #stepChips.fsteps--nav { max-width: 100%; min-width: 0; }
}

/* the fit choice for a picture that is not quite 16:9 (a Shell.dialog, js/packaging.js fitDialog) */
.pk-fitdlg .pk-fit-why { margin: 0 0 14px; font-size: 13px; color: var(--s-ink-2, var(--dk-t-5b5b60, #5b5b60)); }
.pk-fit-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pk-fit-opt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; border-radius: 14px; border: 1px solid var(--s-line, var(--dk-l-1f1f21a12, rgba(31,31,33,.12))); cursor: pointer; font-size: 12px; color: var(--s-ink-2, var(--dk-t-5b5b60, #5b5b60)); }
.pk-fit-opt b { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--s-ink, var(--dk-ink, #1f1f21)); }
.pk-fit-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pk-fit-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--s-ink, var(--dk-l-1f1f21, #1f1f21)); border-color: transparent; }
.pk-fit-opt:has(input:focus-visible) { outline: 3px solid var(--s-peri-soft, var(--dk-l-dfe4f3, #dfe4f3)); outline-offset: 2px; }
.pk-fit-pic { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--dk-inv, #1f1f21); }
.pk-fit-pic img { display: block; width: 100%; height: 100%; }
.pk-fit-pic.is-crop img { object-fit: cover; }
.pk-fit-pic.is-pad img { object-fit: contain; }
@media (max-width: 520px) { .pk-fit-opts { grid-template-columns: 1fr; } }

/* ===================== rs-wire:package =====================
   Packaging and Download in the Riverside component style (mockup .orch/qa/flow-design/riverside-review/package.html).
   Tokens and rs-* classes from css/rs-shell.css. "P" rules beat the older Direction A ones in css/da-review.css. */

/* ---------- the Packaging primary action, placed in the video header's actions (the header itself is styled in
   css/da-processing.css by its owner) ---------- */
.pkx-headgo { display: flex; }
.pkx-headgo .rs-btn { height: 40px; padding: 0 16px 0 20px; }
.pkx-goar { width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
@media (max-width: 760px) { .pkx-headgo { margin-left: auto; } }

/* ---------- Packaging: stages | preview ---------- */
:root .da-pk.pkx { margin: 0; font-size: var(--rs-fs-body); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
.pkx-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 42%, 620px); gap: var(--rs-gap); align-items: start; }
.pkx-stages { display: grid; gap: var(--rs-gap); min-width: 0; }
:root .da-pk.pkx .pkx-closed { display: flex; gap: 12px; align-items: center; margin: 0; padding: 12px; border: 0; border-radius: var(--rs-r-panel); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); font-size: var(--rs-fs-body); max-width: none; }
:root .da-pk.pkx .pkx-closed .vi, :root .da-pk.pkx .pkx-closed svg { flex: none; }
.pkx-stages.is-locked .pk-sb-in { opacity: .5; }
:root .da-pk.pkx .pk-stage { background: var(--rs-panel); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); border: 0; min-width: 0; }
:root .da-pk.pkx .pk-sh { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 12px; padding: 12px; border-radius: var(--rs-r-panel); transition: background var(--rs-t) var(--rs-ease); cursor: pointer; }
:root .da-pk.pkx .pk-sh:hover { background: var(--rs-inset); }
:root .da-pk.pkx .pk-stage.open .pk-sh:hover { background: transparent; }
:root .da-pk.pkx .pk-sh:focus-visible { box-shadow: var(--rs-ring); }
:root .da-pk.pkx .pk-sn { width: 28px; height: 28px; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx-2); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .da-pk.pkx .pk-stage.done .pk-sn { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root .da-pk.pkx .pk-stage.open .pk-sn { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
:root .da-pk.pkx .pk-st b { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; }
:root .da-pk.pkx .pk-sv { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .da-pk.pkx .pk-stage.open .pk-sv { display: block; }
:root .da-pk.pkx .pk-sx { width: 7px; height: 7px; margin-left: 3px; border-color: var(--rs-tx-3); transform: rotate(45deg) translate(-2px, -2px); }
:root .da-pk.pkx .pk-stage.open .pk-sx { transform: rotate(225deg) translate(-2px, -2px); }
:root .da-pk.pkx .pk-stage:not(.open) .pk-sb { display: none; }
:root .da-pk.pkx .pk-sb > .pk-sb-in { display: grid; gap: 12px; padding: 0 12px 12px 52px; margin: 0; overflow: visible; }
:root .da-pk.pkx .pk-sec { display: grid; gap: 12px; }
:root .da-pk.pkx .pk-panel { gap: 12px; }
:root .da-pk.pkx .pk-block { gap: 8px; }
:root .da-pk.pkx .pk-block + .pk-block { padding-top: 4px; border-top: 0; }
:root .da-pk.pkx .pkx-nextst { display: flex; justify-content: flex-end; margin: 0; }
:root .da-pk.pkx .textbtn, :root .da-pk.pkx .pkx-nextst .textbtn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: var(--rs-r-xs); background: none; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); line-height: 1.4; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; cursor: pointer; }
:root .da-pk.pkx .textbtn:hover { background: var(--rs-sel); }
:root .da-pk.pkx .textbtn:disabled { opacity: .45; cursor: default; background: none; }
:root .da-pk.pkx .rs-btn svg, :root .da-pk.pkx .rs-btn .vi { width: 16px; height: 16px; }
:root .da-pk.pkx .pkx-cap, :root .da-pk.pkx .pk-quiet, :root .da-pk.pkx .pk-for, :root .da-pk.pkx .pkg-wait, :root .da-pk.pkx .pk-wwhy, :root .da-pk.pkx .pk-practice, :root .da-pk.pkx .pkg-practice { margin: 0; font-size: var(--rs-fs-cap); line-height: 1.5; color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-quiet.f, :root .da-pk.pkx .pkx-cap.faint { color: var(--rs-tx-3); }
:root .da-pk.pkx .pk-sub { margin: 0; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .da-pk.pkx .pk-lbl { justify-content: flex-start; gap: 8px; }
:root .da-pk.pkx .pk-lbl .faint { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-pk.pkx .pk-row2 { margin: 0; font-size: var(--rs-fs-cap); gap: 8px 16px; flex-wrap: wrap; }
:root .da-pk.pkx .pk-row2 .textbtn { font-size: var(--rs-fs-cap); padding: 2px 4px; }
:root .da-pk.pkx .pk-row2 .faint, :root .da-pk.pkx .pk-pcount { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-wait { margin: 0; font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-pk.pkx .pk-skel { height: 52px; border-radius: var(--rs-r-inner); margin: 0 0 8px; }
:root .da-pk.pkx .pk-first { display: grid; gap: 12px; padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .da-pk.pkx .pk-first p { margin: 0; font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-first .acts { margin: 0; gap: 8px 16px; }
:root .da-pk.pkx :is(.pk-err, .tn-err) { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 8px; padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-neg-soft); color: var(--rs-tx); font-size: var(--rs-fs-body); }
:root .da-pk.pkx :is(.pk-err, .tn-err) > :is(svg, .vi) { color: var(--dk-tx-rs-neg, var(--rs-neg)); margin-top: 2px; }
:root .da-pk.pkx :is(.pk-err, .tn-err) b { font-weight: var(--rs-w-med); }
:root .da-pk.pkx :is(.pk-err, .tn-err) span { display: block; color: var(--rs-tx-2); }
:root .da-pk.pkx :is(.pk-err, .tn-err) .textbtn { margin-top: 8px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .da-pk.pkx .pk-msg { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }

/* title options: selection is a tint fill, a round check at the right */
:root .da-pk.pkx .pk-set { gap: 8px; }
:root .da-pk.pkx .pk-opt { padding: 12px 44px 12px 12px; border: 0; border-radius: var(--rs-r-inner); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); transition: background var(--rs-t) var(--rs-ease); }
:root .da-pk.pkx .pk-opt:hover { background: var(--rs-inset); border: 0; }
:root .da-pk.pkx .pk-opt.is-chosen, :root .da-pk.pkx .pk-opt:has(> .pkg-option input:checked) { background: var(--rs-sel); box-shadow: none; border: 0; }
:root .da-pk.pkx .pk-opt:focus-within { box-shadow: inset 0 0 0 1px var(--rs-line-2), var(--rs-ring); }
:root .da-pk.pkx .pk-opt.is-chosen:focus-within { box-shadow: var(--rs-ring); }
:root .da-pk.pkx .pk-opt::after { content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1.5px var(--rs-line-2); }
:root .da-pk.pkx .pk-opt.is-chosen::after, :root .da-pk.pkx .pk-opt:has(> .pkg-option input:checked)::after { background: var(--rs-peri-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center no-repeat; box-shadow: none; }
:root .da-pk.pkx .pk-tag { display: none; }
:root .da-pk.pkx .pkg-body { padding-right: 0; gap: 4px; }
:root .da-pk.pkx .pkg-text { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.45; color: var(--rs-tx); }
:root .da-pk.pkx .pkg-notes, :root .da-pk.pkx .pkg-flag { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pkg-edit, :root .da-pk.pkx .pkg-why summary { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; }
:root .da-pk.pkx .pkg-edit { margin: 4px 12px 0 0; }
:root .da-pk.pkx .pkg-why { margin: 4px 0 0; font-size: var(--rs-fs-cap); }
:root .da-pk.pkx :is(.pkg-reword, .pk-own-field) { display: grid; gap: 4px; padding: 0; }
:root .da-pk.pkx :is(.pkg-reword, .pk-own-field) .field-label { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx :is(.pkg-reword, .pk-own-field, .pk-own) .input { height: 36px; margin-top: 4px; padding: 0 12px; border: 0; border-radius: var(--rs-r-inner); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); }
:root .da-pk.pkx :is(.pkg-reword, .pk-own-field, .pk-own) .input:focus { box-shadow: var(--rs-ring); outline: none; }
:root .da-pk.pkx .pk-countline { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-pk.pkx :is(.pk-count.is-long, .pk-soft) { color: var(--dk-t-8a5a12, #8A5A12); font-weight: var(--rs-w-reg); }
:root .da-pk.pkx :is(.plan-actions, .form-actions) { margin-top: 4px; gap: 8px; }
:root .da-pk.pkx :is(.plan-actions, .form-actions, .pk-up-ops) .btn { height: 32px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .da-pk.pkx :is(.plan-actions, .form-actions) .btn--ghost { box-shadow: none; background: none; color: var(--rs-tx-2); }

/* thumbnail: words as quiet chips, the six images, your own images */
:root .da-pk.pkx .pk-doors { width: 100%; }
:root .da-pk.pkx .pk-doors .pk-door { height: 30px; padding: 0 14px; border-radius: var(--rs-r-pill); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-doors .pk-door[aria-selected="true"] { background: var(--dk-paper, #fff); color: var(--rs-tx); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root .da-pk.pkx .pk-words { gap: 8px; }
:root .da-pk.pkx .pk-word { height: 32px; 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-size: var(--rs-fs-body); color: var(--rs-tx-2); cursor: pointer; }
:root .da-pk.pkx .pk-word:hover { color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .da-pk.pkx .pk-word.is-on, :root .da-pk.pkx .pk-word:has(input:checked) { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; font-weight: var(--rs-w-med); border: 0; }
:root .da-pk.pkx .pk-word:has(input:focus-visible) { box-shadow: var(--rs-ring); }
:root .da-pk.pkx .pk-grid { gap: 8px; }
:root .da-pk.pkx .pk-img { border-radius: var(--rs-r-sm); background: var(--rs-inset); box-shadow: 0 0 0 1px var(--rs-line); overflow: hidden; }
:root .da-pk.pkx .pk-img img { border-radius: 0; }
:root .da-pk.pkx .pk-img:hover img { transform: none; }
:root .da-pk.pkx .pk-img[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--rs-peri-deep); border-radius: var(--rs-r-sm); }
:root .da-pk.pkx .pk-img:focus-visible { box-shadow: var(--rs-ring); }
:root .da-pk.pkx .pk-img .tag { left: auto; top: auto; right: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--rs-peri-deep); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); box-shadow: 0 0 0 2px var(--dk-paper, #fff); }
:root .da-pk.pkx .pk-img[aria-pressed="false"] .tag, :root .da-pk.pkx .pk-img:not([aria-pressed]) .tag { display: none; }
:root .da-pk.pkx .pk-img .menu-b { right: 8px; top: 8px; width: 28px; height: 28px; border-radius: var(--rs-r-sm); background: rgba(20,21,25,.55); }
:root .da-pk.pkx .pk-img .menu-b i { background: var(--dk-paper, #fff); border-radius: 50%; transform: none; }
:root .da-pk.pkx .pk-img.drawing { background: linear-gradient(90deg, var(--rs-inset) 25%, var(--dk-paper, #fff) 50%, var(--rs-inset) 75%) 0 0 / 200% 100%; }
:root .da-pk.pkx .pk-drop { justify-items: center; text-align: center; gap: 4px; padding: 16px; border: 1.5px dashed var(--rs-line-2); border-radius: var(--rs-r-inner); background: var(--rs-inset); font-size: var(--rs-fs-body); }
:root .da-pk.pkx .pk-drop.is-over, :root .da-pk.pkx .pk-drop:hover { border-color: var(--rs-peri); background: var(--rs-sel); }
:root .da-pk.pkx .pk-drop .type-meta { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-up img { border-radius: var(--rs-r-sm); box-shadow: 0 0 0 1px var(--rs-line); }
:root .da-pk.pkx .pk-up-slot { left: 8px; top: 8px; width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%; background: var(--rs-peri-deep); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); box-shadow: 0 0 0 2px var(--dk-paper, #fff); display: grid; place-items: center; }
:root .da-pk.pkx .pk-up .type-meta { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-up-ops .btn { height: auto; padding: 2px 4px; box-shadow: none; background: none; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-cap); text-decoration: none; }
:root .da-pk.pkx #pkUpMsg { font-size: var(--rs-fs-cap); }
:root .da-pk.pkx #pkUpMsg.is-bad { color: var(--dk-tx-rs-neg, var(--rs-neg)); }

/* description and chapters */
.pkx-chaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.pkx-chaps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rs-line); min-width: 0; }
.pkx-chaps time { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-variant-numeric: tabular-nums; }
.pkx-chaps span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkx-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
.pkx-ok > :is(svg, .vi) { flex: none; margin-top: 1px; color: var(--dk-tx-rs-pos, var(--rs-pos)); }
.pkx-ok.is-warn > :is(svg, .vi) { color: var(--dk-t-9a6b1f, #9A6B1F); }
:root .da-pk.pkx .pkx-descacts { justify-content: flex-start; align-items: center; }
.pkx-r { margin-left: auto; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
:root .da-pk.pkx .pk-pre { margin: 0; padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-reg) var(--rs-fs-cap)/1.6 var(--rs-font); color: var(--rs-tx-2); max-height: 320px; max-width: none; }

/* post rows */
:root .da-pk.pkx .pk-prow { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rs-line); }
:root .da-pk.pkx .pk-prow:first-child { border-top: 0; padding-top: 4px; }
:root .da-pk.pkx .pk-prow > .p2-i { color: var(--rs-tx-3); }
:root .da-pk.pkx .pk-prow b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.4; }
:root .da-pk.pkx .pk-prow .s { margin-top: 2px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-prow .a { grid-column: 3; margin: 0; gap: 8px 12px; justify-content: flex-end; }
:root .da-pk.pkx .pk-prow .a .faint { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-pk.pkx .pk-prow > :is(.pk-pre, .pk-res-out, .pk-resform) { grid-column: 2 / -1; }
:root .da-pk.pkx .pk-resform { display: grid; gap: 8px; margin-top: 8px; }
:root .da-pk.pkx .pk-res { grid-column: auto; margin: 0; gap: 8px; }
:root .da-pk.pkx .pk-res label { font-size: var(--rs-fs-cap); gap: 4px; }
:root .da-pk.pkx :is(.pk-res .input, .pk-resform select) { height: 36px; padding: 0 12px; border: 0; border-radius: var(--rs-r-inner); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); }
:root .da-pk.pkx .pk-res .input { text-align: right; }
:root .da-pk.pkx .pk-res-out { font-size: var(--rs-fs-cap); }
:root .da-pk.pkx .pk-rawnote { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-pk.pkx .pk-yth .yt-card { padding: 12px 0 0; border-top: 1px solid var(--rs-line); }
:root .da-pk.pkx .pk-yth .rv-group-head h2 { font-size: var(--rs-fs-body); }
:root .da-pk.pkx .pk-yth .btn { height: 32px; padding: 0 12px; font-size: var(--rs-fs-body); }
:root .da-pk.pkx .pkx-skipline { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; justify-content: flex-start; padding: 0 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .da-pk.pkx .pkx-skipline .textbtn { padding: 2px 4px; }

/* the preview: the focal point, sticky beside the stages */
.pkx-pv { position: sticky; top: calc(var(--rs-top-h) + var(--rs-gap)); min-width: 0; padding: var(--rs-pad); border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); }
.pkx-pvh h2 { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; }
.pkx-pvh p { margin: 4px 0 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-view { display: grid; gap: 12px; margin-top: 12px; }
:root .da-pk.pkx .pk-tools { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; }
:root .da-pk.pkx .pk-seg { padding: 3px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .da-pk.pkx .pk-seg button { height: 30px; padding: 0 14px; font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-seg button[aria-checked="true"] { color: var(--rs-tx); background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root .da-pk.pkx .pk-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--rs-r-inner); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line); transition: background var(--rs-t) var(--rs-ease); }
:root .da-pk.pkx .feed-dark .pk-feed { background: #0F0F0F; box-shadow: none; }
:root .da-pk.pkx .feed-small .pk-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; }
:root .da-pk.pkx .pk-ghost { display: none; }
:root .da-pk.pkx .feed-small .pk-ghost { display: grid; gap: 8px; align-content: start; opacity: 1; padding: 0; }
:root .da-pk.pkx .pk-yt { padding: 0; border-radius: 0; background: none; box-shadow: none; }
:root .da-pk.pkx .feed-small .pk-yt { padding: 0; }
:root .da-pk.pkx .pk-gthumb { border-radius: var(--rs-r-sm); background: var(--dk-b-e5e5e5, #E5E5E5); }
:root .da-pk.pkx .pk-gl { height: 8px; margin: 0; width: 90%; background: var(--dk-b-e5e5e5, #E5E5E5); }
:root .da-pk.pkx .pk-gl.s { width: 60%; margin: 0; }
:root .da-pk.pkx .feed-dark :is(.pk-gthumb, .pk-gl) { background: #272727; }
:root .da-pk.pkx .pk-frame { border-radius: 12px; background: #1b1c20; box-shadow: none; }
:root .da-pk.pkx .feed-small .pk-frame { border-radius: var(--rs-r-sm); }
:root .da-pk.pkx .pk-frame.is-over { box-shadow: 0 0 0 3px var(--rs-peri); }
:root .da-pk.pkx .pk-abc span { min-width: 24px; height: 24px; border-radius: var(--rs-r-pill); background: rgba(20,21,25,.55); color: #fff; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root .da-pk.pkx .pk-abc span.on { background: var(--dk-paper, #fff); color: var(--rs-tx); }
:root .da-pk.pkx .feed-small .pk-abc { display: none; }
:root .da-pk.pkx .pk-empty { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: auto; height: 28px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill); display: inline-flex; align-items: center; background: rgba(20,21,25,.55); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); white-space: nowrap; text-shadow: none; }
:root .da-pk.pkx .pk-dur { padding: 0 4px; font-size: var(--rs-fs-cap); line-height: 18px; font-weight: var(--rs-w-reg); }
:root .da-pk.pkx .pk-av { background: #5C6A56; font-size: var(--rs-fs-body); }
:root .da-pk.pkx .pk-title { font-size: var(--rs-fs-sec); line-height: 1.4; letter-spacing: 0; color: var(--dk-t-0f0f0f, #0F0F0F); }
:root .da-pk.pkx .feed-small .pk-title { font-size: var(--rs-fs-cap); }
:root .da-pk.pkx .pk-ch { margin-top: 4px; font-size: var(--rs-fs-cap); color: var(--dk-t-606060, #606060); }
:root .da-pk.pkx .feed-small .pk-ch { font-size: 11px; }
:root .da-pk.pkx .feed-dark .pk-title { color: #F1F1F1; }
:root .da-pk.pkx .feed-dark .pk-ch { color: #AAAAAA; }
:root .da-pk.pkx .pk-cap { margin: 0; text-align: left; color: var(--rs-tx-2); font-size: var(--rs-fs-cap); text-shadow: none; }

@media (max-width: 1240px) { :root .da-pk.pkx .pk-sb > .pk-sb-in { padding-left: 12px; } }
@media (max-width: 1100px) {
  .pkx-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  :root .da-pk.pkx .feed-small .pk-feed { grid-template-columns: minmax(0, 1fr); }
  :root .da-pk.pkx .feed-small .pk-ghost { display: none; }
  .pkx-chaps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pkx-grid { grid-template-columns: minmax(0, 1fr); }
  .pkx-pv { position: static; order: -1; }
  :root .da-pk.pkx .pk-feed { padding: 12px; }
  :root .da-pk.pkx .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .da-pk.pkx .pk-prow { grid-template-columns: 20px minmax(0, 1fr); }
  :root .da-pk.pkx .pk-prow .a { grid-column: 2; justify-content: flex-start; }
  :root .da-pk.pkx .pk-res { grid-template-columns: minmax(0, 1fr); }
  :root .da-pk.pkx .pk-ups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:root .da-pk.pkx #pkImages { display: grid; gap: 12px; min-width: 0; }
:root .da-pk.pkx #pkImages > * { margin: 0; }
:root .fstage.fstage--ws:is([data-page="pack"], [data-page="dl"]) { max-width: none; margin: 0; }   /* the mockup fills the page at every width */
/* rs-wire:package: your own images as three places */
.pkx-slots, .pkx-slotops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pkx-slots.is-over .pkx-slot:not(.is-filled), .pkx-slots:has(.is-over) .pkx-slot:not(.is-filled) { border-color: var(--rs-peri); background: var(--rs-sel); }
.pkx-slot { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 8px; border: 1.5px dashed var(--rs-line-2); border-radius: var(--rs-r-sm); background: var(--rs-inset); overflow: hidden; font: var(--rs-w-reg) var(--rs-fs-cap)/1.3 var(--rs-font); color: var(--rs-tx-2); text-align: center; cursor: pointer; }
button.pkx-slot:hover { color: var(--rs-tx); border-color: var(--rs-peri); }
button.pkx-slot:focus-visible { outline: none; box-shadow: var(--rs-ring); }
button.pkx-slot:disabled { cursor: default; opacity: .55; }
.pkx-slot.is-filled { border: 0; box-shadow: 0 0 0 1px var(--rs-line); cursor: default; }
.pkx-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkx-stag { position: absolute; left: 8px; top: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--dk-paper, #fff); color: var(--rs-tx); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); box-shadow: 0 0 0 1px var(--rs-line-2); }
.pkx-slot.is-filled .pkx-stag { background: var(--rs-peri-deep); color: #fff; box-shadow: 0 0 0 2px #fff; }
.pkx-slotops > span { display: flex; justify-content: center; gap: 12px; }
:root .da-pk.pkx .pkx-slotops .pk-file { position: relative; overflow: hidden; }
:root .da-pk.pkx .pkx-slotops .pk-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
:root .da-pk.pkx #pkUpMsg:empty { display: none; }
:root .da-pk.pkx #pkUpMsg { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx #pkUpMsg.is-bad { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
@media (max-width: 760px) { .pkx-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pkx-slotops { display: none; } }
/* the "isn't 16:9" dialog (mockup #pack-thumb-fit): two choices, selection is a tint */
:root .pk-fitdlg .pk-fit-why { margin: 0 0 12px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .pk-fit-opts { gap: 8px; }
:root .pk-fit-opt { gap: 4px; padding: 8px; border: 0; border-radius: var(--rs-r-inner); box-shadow: inset 0 0 0 1px var(--rs-line-2); cursor: pointer; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .pk-fit-opt:has(input:checked) { background: var(--rs-sel); box-shadow: none; }
:root .pk-fit-opt:has(input:focus-visible) { outline: none; box-shadow: var(--rs-ring); }
:root .pk-fit-opt b { margin-top: 4px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root .pk-fit-pic { border-radius: var(--rs-r-xs); background: #222; }
/* rs-wire:package: the Publish to YouTube dialog (mockup #pack-publish / #dl-refused): a white dialog in the shell's
   type scale, inputs as rs-in, selection as a tint, one periwinkle-deep primary. Scoped to .da-pub only. */
:root .sdlg.da-pub.da-pub { width: min(760px, calc(100vw - 32px)); border-radius: 16px; background: var(--dk-paper, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 64px rgba(31,31,33,.24), 0 0 0 1px var(--rs-line); color: var(--rs-tx); font-size: var(--rs-fs-body); }
:root .da-pub.da-pub .sdlg-title { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); letter-spacing: 0; gap: 8px; }
:root .da-pub.da-pub .ytp-acct, :root .da-pub.da-pub .ytp-hint, :root .da-pub.da-pub .ytp-count { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pub.da-pub .ytp-note { font-size: var(--rs-fs-body); }
:root .da-pub.da-pub .ytp-note--warn { padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-inset); }
:root .da-pub.da-pub .ytp-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
:root .da-pub.da-pub .ytp-field { margin-top: 12px; }
:root .da-pub.da-pub :is(.ytp-lab, legend) { margin-bottom: 4px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .da-pub.da-pub .input { min-height: 36px; padding: 8px 12px; border: 0; border-radius: var(--rs-r-inner); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); line-height: 1.5; }
:root .da-pub.da-pub .input:focus { box-shadow: var(--rs-ring); outline: none; }
:root .da-pub.da-pub .ytp-chapters { font-size: var(--rs-fs-cap); }
:root .da-pub.da-pub .ytp-thumb input:checked + * { box-shadow: 0 0 0 2px var(--rs-peri-deep); }
:root .da-pub.da-pub .ytp-privacy { grid-template-columns: minmax(0, 1fr); gap: 4px; }
:root .da-pub.da-pub .ytp-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 12px; border: 0; border-radius: var(--rs-r-sm); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .da-pub.da-pub .ytp-opt strong { font-size: var(--rs-fs-body); }
:root .da-pub.da-pub .ytp-opt:has(input:checked) { background: var(--rs-sel); box-shadow: none; border: 0; }
:root .da-pub.da-pub .ytp-bar { height: 6px; border-radius: 3px; background: var(--rs-raise); overflow: hidden; }
:root .da-pub.da-pub .ytp-bar span { background: var(--rs-peri-deep); }
:root .da-pub.da-pub .ytp-up-line { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); font-variant-numeric: tabular-nums; }
:root .da-pub.da-pub .ytp-fail { padding: 12px; border-radius: var(--rs-r-inner); background: var(--rs-neg-soft); font-size: var(--rs-fs-body); }
:root .da-pub.da-pub .ytp-fail-i { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .da-pub.da-pub .ytp-fail p { color: var(--rs-tx-2); }
:root .da-pub.da-pub .ytp-done-line { font-size: var(--rs-fs-sec); }
:root .da-pub.da-pub .ytp-done-ic { color: var(--dk-tx-rs-pos, var(--rs-pos)); background: var(--rs-pos-soft); }
:root .da-pub.da-pub .sdlg-actions .btn { height: 36px; padding: 0 16px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .da-pub.da-pub .sdlg-actions .btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root .da-pub.da-pub .sdlg-actions .btn--primary:disabled { opacity: .45; }
@media (max-width: 760px) { :root .da-pub.da-pub .ytp-grid { grid-template-columns: minmax(0, 1fr); } }
/* "On YouTube" (js/youtube.js) inside the Post stage, as one more post row */
:root .da-pk.pkx .pk-yth .yt-card { display: grid; gap: 8px; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--rs-line); }
:root .da-pk.pkx .pk-yth .rv-group-head p { margin: 2px 0 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-yth .field-label { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-yth select { width: 100%; height: 36px; padding: 0 32px 0 12px; border: 0; border-radius: var(--rs-r-inner); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); background-color: var(--dk-paper, #fff); }
:root .da-pk.pkx .pk-yth .form-actions { margin: 0; gap: 8px 12px; }
:root .da-pk.pkx .pk-yth .btn { border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .da-pk.pkx .pk-yth .link { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; }
:root .da-pk.pkx .pk-yth .yt-linked { margin: 0; font-size: var(--rs-fs-body); }
:root .da-pk.pkx .pk-yth .yt-linked .muted { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .da-pk.pkx .pk-prow .a .faint { max-width: 180px; text-align: right; }
/* rs-wire:package: the header on Packaging and Download as the package mockup has it: the title wraps (balanced)
   instead of being cut, and the actions sit on the title's last line. Scoped to pack/dl; the header is css/da-processing.css. */
:root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head :is(h1, h1.long) { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
:root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head .p2-acts { align-self: end; }
:root .fstage.da-pk.pkx { max-width: none; width: 100%; margin: 0; }   /* the inner page fills the outlet too (the shared .fstage caps at 1180px) */
@media (min-width: 1101px) { :root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head { grid-template-columns: auto minmax(240px, 1fr) auto; } }
@media (max-width: 760px) {   /* the mockup keeps "Share 2" written out on phones */
  :root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head .ws-actions :is(button, a) { width: auto; padding: 0 14px; gap: 7px; }
  :root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head .ws-actions :is(button, a) > span { display: inline; }
}
:root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head .p2-cutacts { width: auto; }   /* pill, Share, ⋯ and the primary sit 8px apart, as in the mockup */
@media (max-width: 760px) { :root body .fstage--ws:is([data-page="pack"], [data-page="dl"]) .head.p2-head .p2-cutacts { margin-left: 0; margin-right: 0; } }
/* rs-wire:package rhythm: nothing is a card inside a card. Title options, the "first move" box and the preview feed
   are flat inset tints (no border or shadow); the chosen title is the selection tint. */
:root .da-pk.pkx .pk-opt, :root .da-pk.pkx .pk-opt:hover { background: var(--rs-inset); box-shadow: none; border: 0; }
:root .da-pk.pkx .pk-opt:hover { background: var(--rs-raise); }
:root .da-pk.pkx .pk-opt.is-chosen, :root .da-pk.pkx .pk-opt:has(> .pkg-option input:checked) { background: var(--rs-sel); box-shadow: none; }
:root .da-pk.pkx .pk-opt:focus-within, :root .da-pk.pkx .pk-opt.is-chosen:focus-within { box-shadow: none; outline: 2px solid var(--rs-peri); outline-offset: 2px; }
:root .da-pk.pkx .pk-first { box-shadow: none; }
:root .da-pk.pkx .pk-feed { background: var(--rs-inset); box-shadow: none; }
/* rs-wire:package: the chosen title must stand out: other options are open rows on a hairline (no fill, so not a card),
   the chosen one is the selection tint with the filled check (mockup #pack-title-pick) */
:root .da-pk.pkx .pk-opt, :root .da-pk.pkx .pk-opt:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .da-pk.pkx .pk-opt:hover { box-shadow: inset 0 0 0 1px rgba(31,31,33,.22); }
:root .da-pk.pkx .pk-opt.is-chosen, :root .da-pk.pkx .pk-opt:has(> .pkg-option input:checked) { background: var(--rs-sel); box-shadow: none; }


/* A finished Upload, Record or Setup step (Parker 2026-10-28): the facts it settled in a card beside the picture, the
   way Processing lays out its card and frame; where the video is now, one button there, and why the step is locked. */
.past-sum { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: var(--rs-gap); align-items: start; font-family: var(--rs-font); }
.past-card { display: grid; gap: var(--rs-s12); padding: var(--rs-s16); }
.past-eye { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: var(--rs-w-med) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-pos); }
.past-eye svg { flex: none; }
.past-h { margin: 0; font: var(--rs-w-med) var(--rs-fs-title)/1.25 var(--rs-font); letter-spacing: -.01em; color: var(--rs-tx); }
.past-h:focus { outline: none; }
.past-dl { display: grid; margin: 0; border-top: 1px solid var(--rs-line); }
.past-dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--rs-s12); padding: 9px 0; border-bottom: 1px solid var(--rs-line); font-size: var(--rs-fs-body); line-height: 18px; }
.past-dl dt { color: var(--rs-tx-3); }
.past-dl dd { margin: 0; color: var(--rs-tx); min-width: 0; overflow-wrap: anywhere; }
.past-now { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rs-r-inner); background: var(--rs-inset); }
.past-now p { margin: 0; font: var(--rs-w-med) var(--rs-fs-body)/18px var(--rs-font); color: var(--rs-tx); }
.past-now-k { display: block; font: var(--rs-w-reg) var(--rs-fs-cap)/16px var(--rs-font); color: var(--rs-tx-3); }
.past-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-peri-deep); }
.past-now[data-tone="work"] .past-dot { box-shadow: 0 0 0 3px var(--rs-peri-soft); }
.past-now[data-tone="pos"] .past-dot { background: var(--rs-pos); }
.past-now[data-tone="neg"] .past-dot { background: var(--rs-neg); }
.past-now[data-tone="ask"] .past-dot { background: #C49634; }
.past-go { justify-self: start; }
.past-lock { margin: 0; font-size: var(--rs-fs-cap); line-height: 17px; color: var(--rs-tx-3); }
.past-media { margin: 0; display: grid; gap: var(--rs-s8); min-width: 0; }
.past-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rs-r-panel); background: #17181C; container-type: inline-size; box-shadow: var(--rs-shadow); }
.past-frame .past-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.past-media figcaption { font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-3); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .past-sum { grid-template-columns: minmax(0, 1fr); }
  .past-media { order: -1; }
  .past-go { justify-self: stretch; height: 44px; }
  .past-dl div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}