/* Sacred Command Center · Studio (Auri's content studio, ported). Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2). The page
   head, tabs, buttons, Seg, Sheet and Menu are the kit's; these classes lay out the studio's own parts. Class prefix st-.
   A status is a word with the kit's dot; only Live and the one crimson-filled button carry color. No colored side stripes, no glow. */

.st-page { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding-bottom: var(--s-6); }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start; }
.st-cols > * { min-width: 0; }
@media (min-width: 1100px) { .st-cols { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); } }
.st-mt { margin-top: var(--s-2); }
.st-pad { padding: var(--s-3); }
.st-b { font-weight: 700; }
.st-act { color: var(--text); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.st-num { font-variant-numeric: tabular-nums; }
.st-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-wrap { flex-wrap: wrap; }
.st-clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* A sheet's body is a column that scrolls; the studio's cards and sections inside it keep their height instead of shrinking and clipping their rows. */
.sheet-b:has(.st-card, .st-sec, .st-lightbox, .st-result, .st-field) > * { flex-shrink: 0; }

/* ── Section, card, row ───────────────────────────────────────────────────────────────── */
.st-sec { display: flex; flex-direction: column; min-width: 0; margin-top: var(--s-3); }
.st-sec:first-child { margin-top: 0; }
.st-sec-h { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.st-sec-h h2 { margin: 0; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; color: var(--text-2); }
.st-sec-r { color: var(--text-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-sec-a { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.st-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.st-card > * + * { border-top: 1px solid var(--line); }
.st-card > .st-grid, .st-card > .st-presets { border-top: 0; }
.st-row { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) var(--s-3); min-width: 0; }
.st-row.st-wrap { flex-wrap: wrap; }
.st-row--btn { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; border-radius: 0; font: inherit; cursor: pointer; }
.st-row--btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) { .st-row--btn:not(:disabled):hover { background: var(--hover); } }
.st-row--btn[aria-pressed="true"] .st-t { font-weight: 700; }
.st-row--btn[aria-pressed="true"] { background: var(--hover); }
.st-row--two { align-items: center; }
.st-row--field { gap: var(--s-3); }
.st-row--field > label { flex: none; min-width: 5.5rem; color: var(--text-2); font-size: var(--fs-cell); font-weight: 600; }
.st-row--field > .input { flex: 1 1 auto; min-width: 0; }
.st-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-2); padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: 0; min-height: var(--tap); }
.st-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-t { color: var(--text); font-size: var(--fs-cell); font-weight: 600; overflow-wrap: anywhere; }
.st-s { color: var(--text-2); font-size: var(--fs-cell); overflow-wrap: anywhere; }
.st-f { color: var(--text-3); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.st-v { margin-left: auto; flex: none; color: var(--text-2); font-size: var(--fs-cell); font-variant-numeric: tabular-nums; }
.st-v.st-wrap { flex: 0 1 auto; white-space: normal; max-width: 60%; text-align: right; }
.st-v.st-b { color: var(--text); }
.st-cap-l { color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); }
.st-dl, .st-dl dd { margin: 0; }
.st-caption { margin: var(--s-2) 0 0; color: var(--text-3); font-size: var(--fs-caption); max-width: var(--measure); }
.st-meta-line { margin: 0 0 var(--s-2); color: var(--text-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.st-note-line { margin: 0 0 var(--s-2); }
.st-words { margin: var(--s-1) 0; color: var(--text-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.st-words.is-err, .st-inline-err { color: var(--danger-text); }
.st-inline-err { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); font-size: var(--fs-caption); font-weight: 600; }
.st-inline-err .i { color: var(--accent-mark); flex: none; }
.st-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3); }
.st-skel { display: grid; gap: var(--s-2); padding: var(--s-3); }
.st-skel span { display: block; height: 14px; border-radius: var(--r-button); background: var(--skeleton); }
.st-skel span:nth-child(2) { width: 70%; }
.st-skel span:nth-child(3) { width: 45%; }
.st-pick .st-thumb { width: 44px; flex: none; }
.st-pick .st-thumb .st-dur { display: none; }
.st-pair { display: flex; align-items: center; gap: var(--s-2); }
.st-pair > .input { flex: 1 1 auto; min-width: 0; }
.st-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; min-width: 0; max-width: 100%; }
.st-row > .st-acts { margin-left: auto; }
.st-engine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: 0; color: var(--text-2); font-size: var(--fs-caption); }
.st-engine-l { color: var(--text-3); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }
.st-engine-i { display: inline-flex; align-items: center; gap: var(--s-2); }
.st-engine-i.is-on { color: var(--text); }

/* ── Status, cost, the Generate button ────────────────────────────────────────────────── */
.st-status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.st-status.is-on { color: var(--text); }
.st-status.is-err { color: var(--danger-text); }
.st-cost { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: var(--tap); color: var(--text-2); font-size: var(--fs-cell); font-variant-numeric: tabular-nums; }
.st-cost b { color: var(--text); font-weight: 700; }
.st-cost.is-err { color: var(--danger-text); }
.st-cost .i { color: var(--accent-mark); flex: none; }
.st-go { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.st-go--plain { margin-top: var(--s-2); }
.st-go-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--s-2); }
.st-go-line .st-cost { flex: 1 1 12em; min-width: 0; }
@media (max-width: 899px) { .st-go:not(.st-go--plain) { position: sticky; z-index: 5; bottom: 0; padding: var(--s-2) 0 var(--s-3); background: var(--bg); } }
/* On a phone the bottom bar sits under the sticky price line and the capture button floats over its right end: the line stops short of it. */
@media (max-width: 767px) { .st-go:not(.st-go--plain) { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-right: calc(var(--fab) + var(--s-3)); } }

/* ── Model picker ─────────────────────────────────────────────────────────────────────── */
.st-model-now { display: none; }
@media (max-width: 767px) { .st-model-now { display: block; } .st-models:not(.is-open) .st-model-all { display: none; } .st-models.is-open .st-model-all { margin-top: var(--s-2); } }
.st-cats { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }
.st-cat { min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-button); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-caption); font-weight: 600; cursor: pointer; }
.st-cat[aria-pressed="true"] { background: var(--raised); border-color: var(--line-strong); color: var(--text); }
@media (hover: hover) { .st-cat:not([aria-pressed="true"]):hover { color: var(--text); border-color: var(--line-strong); } }

/* ── Parameter form ───────────────────────────────────────────────────────────────────── */
.st-form .st-row > .seg, .st-row > .st-seg { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.st-field { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); min-width: 0; }
.st-field > label { color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; }
.st-field .textarea { min-height: 92px; }
.st-counter { text-align: right; color: var(--text-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.st-counter.is-over { color: var(--danger-text); font-weight: 700; }
.st-num { width: 6rem; min-width: 0; margin-left: auto; text-align: right; }
.st-text { width: min(16rem, 55%); min-width: 0; margin-left: auto; }
.st-hex { width: 6.5rem; flex: none; }
.st-picker { margin-left: auto; min-width: 0; flex: 0 1 15rem; max-width: 100%; }
.st-picker .select { width: 100%; min-width: 0; }
.st-row:has(> .st-picker) { flex-wrap: wrap; }
.st-row:has(> .st-picker) > .st-m { flex-basis: 10rem; }
.st-row--field .st-picker { max-width: none; }
.st-stepper { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; flex: none; }
.st-stepper .input { width: 5rem; text-align: center; padding: 0 var(--s-2); }
.st-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; margin-left: auto; width: 44px; height: 26px; border: 1px solid var(--line-field); border-radius: var(--r-button); background: var(--surface-2); cursor: pointer; }
.st-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--r-button); background: var(--text-3); transition: transform var(--t-feedback) var(--ease-out); }
.st-switch:checked { background: var(--accent); border-color: var(--accent); }
.st-switch:checked::before { transform: translateX(18px); background: var(--on-accent); }
.st-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-list { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-3); }
.st-item { display: flex; gap: var(--s-2); align-items: center; }
.st-item > .input { flex: 1 1 8em; min-width: 0; }
.st-notes { margin: 0; padding: var(--s-2) var(--s-3) var(--s-3) var(--s-6); display: grid; gap: var(--s-1); }
.st-notes li { list-style: disc; color: var(--text-2); font-size: var(--fs-cell); }
.st-pair .btn { flex: none; padding: 0 var(--s-3); min-width: 4.5rem; }

/* ── Media inputs, drop zone, thumbs ──────────────────────────────────────────────────── */
.st-media { margin-top: var(--s-3); }
.st-media-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.st-media-h h3 { margin: 0; font-size: var(--fs-cell); font-weight: 700; color: var(--text); }
.st-media-h span { color: var(--text-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.st-media .st-grid { margin-bottom: var(--s-2); }
.st-drop { display: grid; gap: var(--s-2); justify-items: center; padding: var(--s-3); border: 1px dashed var(--line-field); border-radius: var(--r-card); text-align: center; color: var(--text-2); font-size: var(--fs-cell); }
.st-card .st-drop { border: 0; }
.st-drop.is-over { border-style: solid; border-color: var(--accent); background: var(--hover); }
.st-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 768px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } }
.st-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.st-asset { position: relative; display: grid; gap: var(--s-1); min-width: 0; align-content: start; }
.st-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-button); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
.st-thumb.is-wide { aspect-ratio: 16 / 9; }
.st-thumb.is-tall { aspect-ratio: 9 / 16; }
.st-thumb .st-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; }
.st-thumb .st-open:disabled { cursor: default; }
.st-thumb img, .st-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-hold { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: var(--s-1); padding: var(--s-2); font-size: var(--fs-caption); text-align: center; }
.st-dur { position: absolute; right: var(--s-1); bottom: var(--s-1); padding: 1px var(--s-1); border-radius: var(--r-button); background: var(--scrim); color: var(--linen); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.st-sel, .st-rm, .st-more { position: absolute; top: var(--s-1); width: 28px; height: 28px; min-height: 28px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-button); background: var(--surface); color: var(--text); cursor: pointer; }
.st-sel { left: var(--s-1); }
.st-rm, .st-more { right: var(--s-1); }
.st-sel::after, .st-rm::after, .st-more::after { content: ""; position: absolute; inset: -8px; }
.st-sel[aria-pressed="true"], .st-sel.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.st-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); min-width: 0; color: var(--text-2); font-size: var(--fs-caption); }
.st-cap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-cap .i { flex: none; }
.st-cell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); min-width: 0; }
.st-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); flex-wrap: wrap; min-height: 24px; color: var(--text-2); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.st-runner { color: var(--text-3); }
.st-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-2); align-items: start; }
@media (min-width: 768px) { .st-result.n2, .st-result.n3, .st-result.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-lightbox { display: grid; gap: var(--s-3); justify-items: center; }
.st-lightbox img, .st-lightbox video { display: block; max-width: 100%; max-height: 70dvh; border-radius: var(--r-button); background: var(--surface-2); }
.st-lightbox .st-meta-line { text-align: center; }
.st-lightbox .st-acts { justify-content: center; }
.st-btnpair { display: flex; gap: var(--s-2); min-width: 0; }
.st-btnpair > .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--s-2); }

/* ── History filters, chips ───────────────────────────────────────────────────────────── */
.st-filter-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); }
.st-focus-chip { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-2); padding: 0 0 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-button); color: var(--text); font-size: var(--fs-caption); font-weight: 600; max-width: 100%; }
.st-focus-chip > span { min-width: 0; overflow-wrap: anywhere; }
.st-filters { margin-bottom: var(--s-2); }

/* ── Presets, swatches, steps ─────────────────────────────────────────────────────────── */
.st-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
.st-presets.st-pad { padding: var(--s-3); }
.st-preset { display: grid; gap: var(--s-1); min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: var(--r-button); min-height: 0; }
.st-preset[aria-pressed="true"] .st-thumb { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.st-preset[aria-pressed="true"] .st-cap { color: var(--text); font-weight: 700; }
.st-search { display: flex; align-items: center; gap: var(--s-2); }
.st-search > .i { flex: none; color: var(--text-3); }
.st-search > .input { flex: 1 1 auto; min-width: 0; }
.st-swatches { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.st-swatch { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.st-swatch i { display: inline-block; width: 18px; height: 18px; border-radius: var(--r-button); background: var(--surface-2); border: 1px solid var(--line-strong); }
.st-steps { padding: 0; }
.st-step { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-2) var(--s-3); }
.st-n { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: var(--r-button); display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-2); font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.st-step.is-done .st-n { background: var(--gilt); border-color: var(--gilt); color: var(--on-gilt); }
.st-step.is-active .st-n { background: var(--raised); color: var(--text); }
.st-step-body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s-2); }
.st-step-body h3 { margin: 0; font-size: var(--fs-cell); font-weight: 700; }
.st-step-h { display: flex; align-items: flex-start; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.st-step-h > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.st-step-h .i { margin-top: 4px; flex: none; }
.st-step-h .st-s { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s-2); font-weight: 500; color: var(--text-2); }
.st-step-b { display: grid; gap: var(--s-2); }
.st-step-b > .st-row { padding-left: 0; padding-right: 0; }
.st-step-b > .st-card { background: var(--surface-2); }
.st-step-b > .st-field { padding: 0; }
.st-step-b .textarea { min-height: 120px; }

/* ── Edit: trim ───────────────────────────────────────────────────────────────────────── */
.st-trim { position: relative; display: grid; gap: var(--s-2); }
.st-trim video { display: block; width: 100%; max-height: 60dvh; border-radius: var(--r-button); background: var(--surface-2); }
.st-ranges { position: relative; height: 44px; }
.st-ranges input[type="range"] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.st-ranges input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.st-ranges input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.st-ranges input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: var(--r-button); background: var(--text); border: 2px solid var(--bg); cursor: grab; }
.st-ranges input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border-radius: var(--r-button); background: var(--text); border: 2px solid var(--bg); cursor: grab; }
.st-nums { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.st-nums label { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-cell); }
.st-nums .input { width: 7rem; min-width: 0; font-variant-numeric: tabular-nums; }
.st-render .st-row .st-status { margin-top: 2px; }

/* ── Phone ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .st-v.st-wrap { max-width: 55%; }
  .st-text { width: 50%; }
  .st-row--field > label { min-width: 4.5rem; }
  .st-sec-a { margin-left: 0; width: 100%; }
}