/* styles/phone-gen.css — the PHONE Generate page (6 Oct 2026, src/PhoneGenerate.jsx). Hugo's mockup
   10-generate: the desktop Generate page (src/GeneratePage.jsx, mounted inside .pgn-page) re-stacked into ONE
   column for a thumb, every control kept: shot picker, Image / Video / Voice over, From the shotlist,
   References, Overall direction, the 4 grid frame directions, the settings, the prompt sent to the model,
   Generate grid / All models, then the results (Gallery / Panel) with their actions.
   - Phone tier only and only inside .pgn-page (the phone wrapper), so the desktop page never changes.
   - ONE scroller: the phone page. The desktop's own scrollers (picker list, builder, results drawer) flow.
   - Every control >= 40px, nothing past the right edge (rows that can outgrow 360px scroll sideways).
   - Colours are skin tokens only. */

/* ════════ ONE COLUMN, ONE SCROLLER ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body { display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-page {
  display: block; height: auto; min-height: 0; max-height: none; overflow: visible; padding: 0; margin: 0;
  background: transparent; border: 0; box-shadow: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shell {
  display: flex; flex-direction: column; gap: var(--pk-3); height: auto; min-height: 0; max-height: none;
  overflow: visible; padding: 0; margin: 0; grid-template-columns: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-drawer,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker {
  position: static; width: auto; min-width: 0; max-width: none; height: auto; min-height: 0; max-height: none;
  overflow: visible; margin: 0; transform: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder { display: flex; flex-direction: column; gap: var(--pk-3); padding: 0; background: transparent; border: 0; box-shadow: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder > *,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-row-2col > *,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-col > * { min-width: 0; max-width: 100%; }
/* the desktop title block: the picked shot's card and the shotlist card carry the name on the phone */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-header { display: none; }

/* every panel of the page: the solid card colour, one radius, lighter than the page */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-drawer {
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); background: var(--card-bg-solid);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings { padding: var(--pk-3); }
/* section titles: the mockup's small spaced caps */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section-head,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-setting-label {
  font-family: var(--font-body); font-size: var(--pk-fs-small); font-weight: var(--fw-semi);
  letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted);
}

/* ════════ SHOT PICKER (folded to the picked shot) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker { display: flex; flex-direction: column; padding: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pk-2); padding: var(--pk-2) var(--pk-3); border: 0; background: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap { grid-column: 1 / -1; display: flex; gap: var(--pk-4); min-height: 40px; margin: 0; border-bottom: 1px solid var(--card-border); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab { min-height: 40px; padding: 0 var(--pk-1); font-size: var(--pk-fs-control); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-search {
  min-width: 0; width: 100%; min-height: 40px; padding: 0 var(--pk-3); margin: 0; box-sizing: border-box;
  border: 1px solid var(--input-border); border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-16);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-count { margin: 0; white-space: nowrap; font-size: var(--pk-fs-meta); color: var(--ink-muted); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-list {
  display: flex; flex-direction: column; gap: var(--pk-1); max-height: none; overflow: visible; padding: 0 var(--pk-2) var(--pk-2);
}
body[data-ui-tier="s"] .pgn-page.is-list-open .pgn-body .gen-shotpicker-list { max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; }
body[data-ui-tier="s"] .pgn-page:not(.is-list-open) .pgn-body .gen-shotpicker-list > .gen-shot-row:not(.is-active) { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 40px; align-items: center; gap: var(--pk-3);
  width: 100%; min-height: 64px; padding: var(--pk-1); margin: 0; box-sizing: border-box;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-row); background: transparent; color: var(--ink); text-align: left;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row.is-active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-thumb { width: 112px; height: auto; aspect-ratio: 21 / 9; min-height: 0; border-radius: var(--pk-radius-small); overflow: hidden; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-thumb img { width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-meta { min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: var(--fw-semi); }
/* the fold's chevron on the picked shot (down = tap to choose another shot) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row.is-active::after {
  content: ""; grid-column: 3; justify-self: center; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg);
}
body[data-ui-tier="s"] .pgn-page.is-list-open .pgn-body .gen-shot-row.is-active::after { margin-top: 4px; transform: rotate(-135deg); }

/* ════════ IMAGE / VIDEO / VOICE OVER ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--pk-2); min-width: 0; min-height: 48px; padding: 0 var(--pk-2);
  border-radius: var(--pk-radius-control); background: var(--card-bg-solid);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-btn.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card-bg-solid)); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-icon { width: 20px; height: 20px; flex: 0 0 20px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-text { min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-fs-control); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-sub { display: none; }

/* ════════ FROM THE SHOTLIST ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card { display: flex; flex-direction: column; gap: var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span { flex: 1 1 100%; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 var(--pk-2); border-radius: var(--pk-radius-control); font-size: var(--pk-fs-meta); white-space: nowrap; text-transform: none; letter-spacing: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-grid { display: flex; flex-direction: column; gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--pk-2); align-items: baseline; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-label { font-size: var(--pk-fs-small); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-value { min-width: 0; font-size: var(--pk-fs-meta); line-height: 1.4; overflow-wrap: anywhere; }

/* ════════ REFERENCES + DIRECTION (two columns -> one) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-row-2col { display: flex; flex-direction: column; gap: var(--pk-3); grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-col { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section { display: flex; flex-direction: column; gap: var(--pk-3); height: auto; min-height: 0; max-height: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs > .gen-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-search { flex: 1 1 120px; min-width: 0; min-height: 40px; box-sizing: border-box; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); font-size: var(--fs-16); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-jobslots { display: inline-flex; gap: var(--pk-1); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-jobslot { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; }
/* the category chips + the shot filter: one sideways row each (never clipped) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-tabs,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-shotfilter {
  display: flex; flex-wrap: nowrap; gap: var(--pk-1); min-width: 0; max-width: 100%; width: auto;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-tabs::-webkit-scrollbar,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-shotfilter::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-shotfilter-row { min-width: 0; max-width: 100%; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-tab,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-sf-btn { flex: 0 0 auto; min-height: 40px; padding: 0 var(--pk-3); border-radius: var(--pk-radius-chip); font-size: var(--pk-fs-meta); white-space: nowrap; }
/* the reference tiles: one sideways strip */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-grid {
  display: flex; flex-wrap: nowrap; gap: var(--pk-2); height: auto; max-height: none; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; grid-template-columns: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-grid::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-ref-tile { flex: 0 0 148px; width: 148px; min-height: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-ref-move { width: 40px; height: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-selected-bar { min-width: 0; overflow-x: auto; }
/* Overall direction / Latest edit */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-head { display: flex; gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tab { min-height: 40px; padding: 0 var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-3col { display: flex; flex-direction: column; gap: var(--pk-2); grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell { min-width: 0; }

/* ════════ FIELDS: one size everywhere ════════ */
/* one-line fields 16px (a phone never zooms the page on focus), the writing boxes 14px (the mockup's size) */
body[data-ui-tier="s"] .pgn-page .pgn-body :is(input[type="text"], input[type="search"], input:not([type]), select) {
  max-width: 100%; box-sizing: border-box; font-size: var(--fs-16);
}
body[data-ui-tier="s"] .pgn-page .pgn-body textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; font-size: var(--fs-14); line-height: 1.4; }
body[data-ui-tier="s"] .pgn-page .pgn-body select { min-height: 40px; }

/* ════════ SETTINGS: every pill group one sideways row ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings { display: flex; flex-direction: column; gap: var(--pk-3); grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-setting {
  display: flex; flex-direction: column; gap: var(--pk-2); width: auto; min-width: 0; height: auto; min-height: 0;
  padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-setting-labelrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-model-row,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-res-row,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode-btns {
  display: flex; flex-wrap: nowrap; gap: var(--pk-1); width: auto; min-width: 0; max-width: 100%; height: auto;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; grid-template-columns: none; grid-template-rows: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-model-row::-webkit-scrollbar,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-res-row::-webkit-scrollbar,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode-btns::-webkit-scrollbar { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-model-btn,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-res-btn,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode-btn {
  flex: 0 0 auto; width: auto; min-width: 48px; height: auto; min-height: 40px; padding: 0 var(--pk-3); margin: 0;
  border-radius: var(--pk-radius-chip); font-size: var(--pk-fs-meta); line-height: 1.15; white-space: nowrap; text-align: center;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode { display: flex; align-items: center; gap: var(--pk-2); min-width: 0; max-width: 100%; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-modeopts-switch { flex-direction: column; align-items: stretch; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-modeopts-switch .gen-slicemode-btn { flex: 1 1 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode-label { font-size: var(--pk-fs-small); color: var(--ink-muted); white-space: nowrap; }

/* ════════ GRID FRAME DIRECTIONS ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-grid { display: flex; flex-direction: column; gap: var(--pk-2); grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-cell { display: flex; flex-direction: column; gap: var(--pk-1); min-width: 0; padding: 0; border: 0; background: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-input { min-height: 44px; height: auto; }

/* ════════ PROMPT SENT TO MODEL ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section-head--toggle { min-height: 40px; width: 100%; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-split { display: flex; flex-direction: column; gap: var(--pk-2); grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block-label--toggle { min-height: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text { min-height: 200px; font-family: var(--font-body); font-size: var(--pk-fs-meta); line-height: 1.45; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refine-reset { min-height: 40px; }

/* ════════ GENERATE / ALL MODELS ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-footer { position: static; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap { display: flex; flex-wrap: wrap; gap: var(--pk-2); width: 100%; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > button { flex: 1 1 140px; min-width: 0; min-height: 48px; border-radius: var(--pk-radius-control); white-space: normal; }

/* ════════ RESULTS (Gallery / Panel) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-drawer { display: flex; flex-direction: column; padding: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-2); padding: var(--pk-2) var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-title { font-size: var(--pk-fs-small); font-weight: var(--fw-semi); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-modebtn { min-height: 40px; padding: 0 var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-list { display: flex; flex-direction: column; gap: var(--pk-3); height: auto; max-height: none; overflow: visible; padding: 0 var(--pk-3) var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-card { width: auto; min-width: 0; padding: var(--pk-2); border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb { width: 100%; height: auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > button { width: 40px; height: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow { display: flex; flex-wrap: wrap; gap: var(--pk-1); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act { flex: 1 1 auto; min-width: 40px; min-height: 40px; padding: 0 var(--pk-3); border-radius: var(--pk-radius-control); font-size: var(--pk-fs-meta); }

/* ════════ NO DESKTOP SHARE-THE-HEIGHT: everything sizes to its content ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-grid,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tabbody,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-3col,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-editwrap,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-direction,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-setting,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-res-row,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-col { flex: 0 0 auto; height: auto; min-height: 0; max-height: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section { overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-direction { min-height: 44px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row.gen-pillgrid,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row {
  display: flex; width: auto; grid-template-columns: none; grid-template-rows: none; grid-auto-flow: unset;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-setting { width: auto; min-width: 0; max-width: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillgrid .gen-model-btn,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-btn { width: auto; height: auto; min-height: 40px; flex: 0 0 auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode--brow { flex: 0 1 auto; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode--brow .gen-slicemode-btn { min-width: 48px; }

/* Image / Video / Voice over: the whole word fits at 360 */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-btn { gap: 6px; padding: 0 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-icon,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-icon svg { width: 18px; height: 18px; flex: 0 0 18px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-title { font-size: var(--fs-13); text-transform: none; }

/* From the shotlist: the name beside the title, the three buttons one row under it; the values fold to 3 lines
   until the card is tapped (src/PhoneGenerate.jsx toggles .is-ctx-open) */
/* the title + the shot's name fill the first line (the name takes what is left, then "…"), the 3 buttons the next */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span { flex: 0 0 auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span { flex: 1 1 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: var(--pk-fs-meta); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button { flex: 1 1 28%; margin: 0; order: 2; }
/* the mockup puts Copy path / Open folder / Open shot UNDER the details: the head's pieces join the card's row */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--pk-3) var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head { display: contents !important; }   /* the desktop sets display inline */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-context-grid { flex: 1 1 100%; order: 1; min-width: 0; }
body[data-ui-tier="s"] .pgn-page:not(.is-ctx-open) .pgn-body .gen-context-value {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* Generate grid / All models: two equal pills on one row */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > button { width: 100%; min-height: 48px; padding: 4px var(--pk-2); font-size: var(--fs-13); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }

/* ════════ SETTINGS AS THE MOCKUP'S BOXES ════════ */
/* two columns of boxes; Mode (its five buttons, grid size, one / several shots) spans both */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-3) var(--pk-2); min-width: 0; width: auto; min-height: 0;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings > .gen-setting:not(.gen-pillcard) { grid-column: 1 / -1; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings > .gen-setting { flex: none; min-width: 0; max-width: none; height: auto; }
/* Mode's buttons wrap (all visible, like the mockup's More options) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode { flex-wrap: wrap; overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode > .gen-model-btn { flex: 1 1 auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-modeopts { display: flex; flex-direction: column; gap: var(--pk-2); min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-modeopts-switch .gen-slicemode-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-modeopts-switch .gen-slicemode-btn { width: auto; min-width: 0; }
/* a pill card = a box showing its pick + a chevron; the pick list opens in a pull-up sheet */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard { gap: var(--pk-1); cursor: pointer; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard > .gen-setting-label { text-transform: none; letter-spacing: 0; font-size: var(--pk-fs-meta); font-weight: var(--fw-med); color: var(--ink-muted); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-model-row,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-res-row {
  position: relative; display: flex; flex-direction: row; align-items: center; min-height: 44px; padding: 0 36px 0 var(--pk-3); overflow: hidden;
  border: 1px solid var(--input-border); border-radius: var(--pk-radius-control); background: var(--input-bg);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-model-row::after,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-res-row::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-btn, .gen-res-btn):not(.is-active) { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-btn, .gen-res-btn).is-active {
  display: block; flex: 1 1 auto; min-width: 0; min-height: 40px; height: 40px; line-height: 40px; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: transparent; box-shadow: none; color: var(--ink); text-align: left; font-size: var(--pk-fs-control); font-weight: var(--fw-med); pointer-events: none;
}
/* nothing picked (a style / time of day that is off) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-row, .gen-res-row):not(:has(.is-active))::before {
  content: "None"; color: var(--ink-muted); font-size: var(--pk-fs-control);
}

/* the mockup's order: the 4 grid frame directions sit with the other directions, BEFORE the settings */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder > .gen-settings,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder > .gen-settings ~ * { order: 1; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder > .gen-settings ~ .gen-section:has(> .gen-quad-grid) { order: 0; }

/* the result card's picture tools (compare, reuse, use as reference, copy prompt, depth, crop, discard) only
   appear on HOVER on the desktop: a phone has no hover, so they always show, as 40px circles */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb { position: relative; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > :is(.gen-gens-cmp, .gen-gens-reuse, .gen-gens-useref, .gen-gens-copy, .gen-gens-depth, .gen-gens-crop, .gen-gens-discard) {
  opacity: 1; width: 40px; height: 40px; bottom: 6px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--card-bg-solid) 82%, transparent); color: var(--ink); border: 1px solid var(--card-border);
}
/* (placed in a strip under the picture, see below) */
/* the desktop sets the All models button's width inline (30%, one line): equal halves here, wrapping */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn { flex: none !important; width: 100% !important; margin: 0 !important; white-space: normal !important; }

/* ════════ EVERY STATE (Video, Voice over, Craft, Upscale, Edit, several shots, Assets) ════════ */
/* a thumb-sized floor for every control on the page (min-* beats the desktop's fixed 22-30px heights) */
body[data-ui-tier="s"] .pgn-page .pgn-body button { min-height: 40px; min-width: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-row-2col,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-video-inputs,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-video-field { flex: 0 0 auto; height: auto; min-height: 0; max-height: none; overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-video-inputs { display: flex; flex-direction: column; gap: var(--pk-2); grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-video-field { width: auto; min-width: 0; }
/* button rows that can outgrow a phone wrap */
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-videohead-row, .gen-ph-actions, .gen-vset-row, .gen-preview-refine-row, .gen-gens-head) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-2); height: auto; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-ph-group, .gen-swap-toggle) { max-width: 100%; min-width: 0; height: auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-swap-toggle { display: inline-flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-swap-seg { height: auto; padding: 0 var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-twain-chip { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; height: auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-twain-btn { min-width: 0; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-craft-status { flex: 1 1 100%; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-duration-slider { width: 100%; min-height: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-notes-presets { display: flex; flex-wrap: wrap; gap: var(--pk-1); min-width: 0; max-width: 100%; overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-cine-head { flex-wrap: wrap; gap: var(--pk-2); min-width: 0; }

/* ════════ ASSETS TAB (the asset generator, .ga-*) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-shell {
  display: flex; flex-direction: column; gap: var(--pk-3); height: auto; min-height: 0; max-height: none; overflow: visible; grid-template-columns: none; padding: 0; margin: 0;
}
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.ga-picker, .ga-builder, .ga-preview, .ga-drawer) {
  position: static; width: auto; min-width: 0; max-width: none; height: auto; min-height: 0; max-height: none; overflow: visible; transform: none; margin: 0;
}
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.ga-picker, .ga-preview) { border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); background: var(--card-bg-solid); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-preview { padding: var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-builder { display: flex; flex-direction: column; gap: var(--pk-3); padding: 0; background: transparent; border: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-builder > * { min-width: 0; max-width: 100%; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-picker-head { padding: var(--pk-2) var(--pk-3); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-search { font-size: var(--fs-16); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-kindpills { display: flex; flex-wrap: nowrap; gap: var(--pk-1); overflow-x: auto; scrollbar-width: none; grid-template-columns: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-kindpill { flex: 0 0 auto; padding: 0 var(--pk-3); border-radius: var(--pk-radius-chip); }
/* the asset cards: one sideways strip (the picked asset first in view) */
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-grid {
  display: flex; flex-wrap: nowrap; gap: var(--pk-2); height: auto; max-height: none; padding: 0 var(--pk-3) var(--pk-3);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; grid-template-columns: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-card { flex: 0 0 112px; width: 112px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-picker-foot { padding: 0 var(--pk-3) var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-block,
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-head-wrap {
  padding: var(--pk-3); border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); background: var(--card-bg-solid);
  width: auto; height: auto; max-height: none; overflow: visible;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-preview .ga-block { padding: 0; border: 0; background: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.ga-ref-tabs, .ga-ref-row, .ga-tmpl-tiles, .ga-attached-row) {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--pk-1); width: auto; height: auto; max-height: none; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; grid-template-columns: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-ref-tab { flex: 0 0 auto; width: auto; padding: 0 var(--pk-3); border-radius: var(--pk-radius-chip); white-space: nowrap; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.ga-tmpl-tiles-wrap, .ga-tmpl-summary, .ga-tmpl-summary-text, .ga-assembled-wrap, .ga-asset-head, .ga-desc, .ga-meta) { width: auto; min-width: 0; max-width: 100%; height: auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-tmpl-tiles > * { flex: 0 0 auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-settings-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-assembled { width: 100%; min-height: 160px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-preview-tools { display: flex; flex-wrap: wrap; gap: var(--pk-1); }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-picker { display: flex; flex-direction: column; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.ga-grid, .ga-picker-head, .ga-picker-foot) { flex: 0 0 auto; }
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-card { height: auto; align-self: flex-start; }

/* Several shots (a batch): the whole list stays open, every tap picks a shot (no fold, no chevron) */
body[data-ui-tier="s"] .pgn-page:has(.gen-batch-section) .pgn-body .gen-shotpicker-list { max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; }
body[data-ui-tier="s"] .pgn-page:has(.gen-batch-section) .pgn-body .gen-shotpicker-list > .gen-shot-row:not(.is-active) { display: grid; }
body[data-ui-tier="s"] .pgn-page:has(.gen-batch-section) .pgn-body .gen-shot-row.is-active::after { content: none; }

/* the result card's picture stays clean: its tools flow in a row UNDER the picture (discard at the far end) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-1); height: auto; background: transparent; overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > img { flex: 1 1 100%; display: block; width: 100%; height: auto; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > :is(.gen-gens-cmp, .gen-gens-reuse, .gen-gens-useref, .gen-gens-copy, .gen-gens-depth, .gen-gens-crop, .gen-gens-discard) {
  position: static; flex: 0 0 40px; inset: auto; background: transparent; border-color: var(--card-border);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > .gen-gens-discard { margin-left: auto; }

/* the mockup titles the settings panel */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings::before {
  content: "Generation settings"; grid-column: 1 / -1;
  font-size: var(--pk-fs-small); font-weight: var(--fw-semi); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink-muted);
}

/* a narrow phone (360): Image / Video / Voice over lose their icons so the whole word fits */
@media (max-width: 389px) {
  body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-icon { display: none; }
}

/* ════════════════ DENSITY PASS (coordinator review of round 3: "~1.5x too big") ════════════════
   The mockup's proportions (its phone panel ÷ 412): body 13-14px, secondary 11-12px, labels 10-11px caps, controls
   30-36px to SEE inside a 40px tap area (a transparent 3-4px top + bottom border band, the fill clipped to the
   padding box, the outline an inset ring), 12px card padding, 8-12px gaps. Collapsible sections (src/
   PhoneGenerate.jsx) fold From the shotlist, Overall direction, the grid frame directions and the settings. */
body[data-ui-tier="s"] .pgn-page { position: relative; gap: var(--pk-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shell,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-row-2col,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-col { gap: 10px; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-context-card, .gen-section, .gen-settings) { padding: 10px 12px 12px; gap: 8px; border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-shotpicker, .gen-gens-drawer) { border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-section-head, .gen-gens-title) { font-size: var(--fs-11); letter-spacing: var(--track-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings::before { font-size: var(--fs-11); letter-spacing: var(--track-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section-head { min-height: 24px; }

/* the band: 32-34px to see, 40px to tap */
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-mode-btn, .gen-refs-tab, .gen-refs-sf-btn, .gen-dir-tab, .gen-model-btn, .gen-res-btn, .gen-slicemode-btn, .gen-gens-act, .gen-gens-modebtn, .gen-swap-seg, .gen-craft-btn, .gen-refine-reset, .gen-twain-btn, .gen-notes-preset-add) {
  min-height: 40px; height: auto; border-style: solid; border-color: transparent; border-width: 3px 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--card-border); font-size: var(--fs-12-5); line-height: 1.1; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3px);
}
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-mode-btn, .gen-refs-tab, .gen-refs-sf-btn, .gen-model-btn, .gen-res-btn, .gen-slicemode-btn, .gen-gens-modebtn, .gen-swap-seg):is(.is-active, .is-on) {
  box-shadow: inset 0 0 0 1px var(--accent); background-color: color-mix(in srgb, var(--accent) 20%, var(--card-bg-solid)); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-gens-act, .gen-craft-btn, .gen-refine-reset, .gen-twain-btn, .gen-notes-preset-add) { border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3px); }
/* the underline tabs and the bare text buttons carry no ring */
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-dir-tab, .gen-refine-reset) { box-shadow: none; background-color: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tab.is-on { box-shadow: inset 0 -2px 0 var(--accent); background-color: transparent; }

/* ── picker: tabs 36, search 32 to see, the picked shot ~48 ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-head { padding: 4px 12px 6px; gap: 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap { min-height: 36px; gap: var(--pk-4); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab { min-height: 36px; font-size: var(--fs-13); padding: 0 2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-search {
  min-height: 40px; height: 40px; padding: 0 12px; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--input-border); background-color: var(--input-bg);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-count { font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-list { padding: 0 8px 8px; gap: 4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row { grid-template-columns: 92px minmax(0, 1fr) 32px; gap: 10px; min-height: 48px; padding: 3px; border-radius: var(--pk-radius-row); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-thumb { width: 92px; border-radius: var(--pk-radius-small); }

/* ── Image / Video / Voice over: 34 to see ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-row { gap: 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-btn { padding: 0 6px; gap: 6px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3px); background-color: var(--card-bg-solid); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-title { font-size: var(--fs-13); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-icon,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-icon svg { width: 16px; height: 16px; flex-basis: 16px; }

/* ── From the shotlist: 11px caps labels, 12px values on one line until tapped ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card { gap: 8px 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-context-grid { gap: 3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-row { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-label { font-size: var(--fs-10-5); letter-spacing: var(--track-12); line-height: 1.6; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-value { font-size: var(--fs-12); line-height: 1.45; }
body[data-ui-tier="s"] .pgn-page:not(.is-ctx-open) .pgn-body .gen-context-value { -webkit-line-clamp: 1; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span { font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button {
  min-height: 40px; border-width: 4px 0; border-style: solid; border-color: transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--card-border); border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); font-size: var(--fs-12);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span { margin-right: 36px; }   /* room for the fold chevron */

/* ── References ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs > .gen-section-head { gap: 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-jobslot { width: 40px; height: 40px; min-width: 40px; border: 5px solid transparent; background-clip: padding-box; box-shadow: none; font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-search { min-height: 40px; height: 40px; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--input-border); }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-refs-tab, .gen-refs-sf-btn) { padding: 0 10px; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3px); font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-shotfilter { border: 0; background: transparent; padding: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-ref-tile { flex-basis: 120px; width: 120px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-ref-tile-label { font-size: var(--fs-11); }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-ref-tile-img, .gen-ref-img) { border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-selected-bar { min-height: 0; padding: 4px 0 0; font-size: var(--fs-12); }

/* ── Overall direction: label left, its field right (the mockup's rows) ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-3col { gap: 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell > label,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-video-label { font-size: var(--fs-10-5); letter-spacing: var(--track-10); line-height: 1.3; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell > label > * { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-direction, .gen-quad-input) {
  field-sizing: content; min-height: 32px; max-height: 120px; padding: 6px 10px; border-radius: var(--pk-radius-control); font-size: var(--fs-13); line-height: 1.35; resize: none;
}

/* ── the 4 grid frame directions: (1) Upper-left [field] ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-grid { counter-reset: pgnq; gap: 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-cell { counter-increment: pgnq; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-label { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; margin: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-num { font-size: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-num::before {
  content: counter(pgnq); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--card-border); font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-pos { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); text-transform: capitalize; letter-spacing: 0; color: var(--ink); }

/* ── Generation settings: two columns of labelled 32px boxes ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings { gap: 8px 10px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-setting-label { font-size: var(--fs-12); letter-spacing: 0; text-transform: none; font-weight: var(--fw-med); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-model-row,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-res-row {
  min-height: 40px; padding: 0 30px 0 10px; border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--input-border); background-color: var(--input-bg); border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-model-row::after,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-res-row::after { right: 12px; width: 6px; height: 6px; margin-top: -5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-btn, .gen-res-btn).is-active {
  margin: -4px 0; height: 40px; line-height: 40px; border: 0; box-shadow: none; background: transparent; font-size: var(--fs-13);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-row, .gen-res-row):not(:has(.is-active))::before { font-size: var(--fs-13); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings :is(.gen-model-row--mode, .gen-slicemode-btns) { gap: 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings :is(.gen-model-row--mode > .gen-model-btn, .gen-slicemode-btn) { padding: 0 10px; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3px); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-slicemode-label { font-size: var(--fs-11); }

/* ── Prompt sent to model ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section-head--toggle { min-height: 32px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block-sub { font-size: var(--fs-11); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text { height: 132px; min-height: 0; padding: 8px 10px; font-size: var(--fs-12-5); line-height: 1.45; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refine-reset { font-size: var(--fs-12); }

/* ── Generate grid | All models: the big pair ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > button { min-height: 48px; font-size: var(--fs-13); letter-spacing: var(--track-10); }

/* ── Results: compact cards ── */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-head { padding: 6px 12px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-modebtn { padding: 0 12px; font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-list { gap: 10px; padding: 0 10px 10px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-card { padding: 6px; border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-meta { min-height: 0; margin: 2px 2px 4px; font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-label { font-size: var(--fs-13); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-model { font-size: var(--fs-11); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow { gap: 4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act { padding: 0 8px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3px); font-size: var(--fs-12); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb { gap: 2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > :is(.gen-gens-cmp, .gen-gens-reuse, .gen-gens-useref, .gen-gens-copy, .gen-gens-depth, .gen-gens-crop, .gen-gens-discard) {
  width: 40px; height: 40px; border: 5px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--card-border);
}

/* ── the collapsible sections: the chevron (src/PhoneGenerate.jsx places it at each section's top right) ── */
body[data-ui-tier="s"] .pgn-page .pgn-fold {
  position: absolute; z-index: 1; width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pgn-page .pgn-fold.is-folded svg { transform: rotate(180deg); }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-section--match-refs > .gen-dir-head, .gen-section:has(> .gen-quad-grid) > .gen-section-head) { padding-right: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings { padding-right: 12px; }
body[data-ui-tier="s"] .pgn-page.is-fold-ctx .pgn-body .gen-context-card > :not(.gen-section-head),
body[data-ui-tier="s"] .pgn-page.is-fold-ctx .pgn-body .gen-context-card > .gen-section-head > button,
body[data-ui-tier="s"] .pgn-page.is-fold-dir .pgn-body .gen-section--match-refs > :not(:first-child),
body[data-ui-tier="s"] .pgn-page.is-fold-quad .pgn-body .gen-section:has(> .gen-quad-grid) > .gen-quad-grid,
body[data-ui-tier="s"] .pgn-page.is-fold-set .pgn-body .gen-settings > .gen-setting { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-row { padding: 0; margin: 0; border: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-cell { grid-template-columns: 112px minmax(0, 1fr); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section-head--toggle { min-height: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section-head { margin: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-label { justify-self: start; text-align: left; padding: 0; margin: 0; }
/* the shot name stays on the title line (the line is full, so the three buttons wrap under the details) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span { flex: 1 1 calc(100% - 190px); }

/* ════════════════════════ THE MOCKUP, MEASURED (6 Oct 2026, round 1 of the measured build) ════════════════════════
   Hugo's mockup 10-generate at 412 CSS px wide; every size is the spec's (ours / mockup within 0.95-1.05):
   cards 390 wide with 11.3px gutters, 8px apart; the shot picker card holds the tabs (a lighter band, the amber
   underline), the search + count, the picked shot (46 tall: a 130 x 41 picture, the title 13px, a square chevron)
   and Image / Video / Voice over (33 tall); From the shotlist (17px rows, three 25px buttons); References (title +
   Attach, search + Kind, the category chips four a row, what is picked — a chip opens its pictures in a sheet);
   Overall direction and the grid frame directions (label | an 18px field per row); Generation settings (Mode |
   Model, Visual style | Time of day, Aspect ratio | Resolution boxes, More options, Shots); the prompt (82 tall);
   GENERATE GRID (241) | ALL MODELS (142); the results (a 70px picture strip, the version + model, two rows of three
   23.5px buttons). Type 7.5-13px as measured. Every control keeps a 40px TAP area (a transparent top + bottom band
   in whole px, an equal negative margin, the corner R / R + band).
   The material (dark skins, the glass family): near-opaque navy glass cards with a thin cool rim over the photo
   (which glows in the gutters), recessed dark fields, one amber-lit active style everywhere, a copper GENERATE pill.
   A pale skin keeps its own card colours. */
body[data-ui-tier="s"] .pgn-page {
  --pgn-card: var(--card-bg-solid);
  --pgn-rim: var(--card-border);
  --pgn-band: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));
  --pgn-field: var(--input-bg);
  --pgn-field-rim: var(--input-border);
  --pgn-ctl: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));
  --pgn-ctl-rim: var(--card-border);
  --pgn-amber: color-mix(in srgb, var(--accent) 20%, var(--card-bg-solid));
  --pgn-amber-rim: var(--accent);
  --pgn-amber-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --pgn-amber-ink: var(--ink);
  --pgn-gold-ink: var(--ink);
  --pgn-gold-ink-2: var(--ink);
  --pgn-gold-line: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --pgn-grey: color-mix(in srgb, var(--ink) 16%, var(--card-bg-solid));
  --pgn-grey-rim: color-mix(in srgb, var(--ink) 26%, transparent);
  --pgn-sage: color-mix(in srgb, var(--ok) 12%, var(--card-bg-solid));
  --pgn-sage-rim: color-mix(in srgb, var(--ok) 45%, var(--card-bg-solid));
  --pgn-slate: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid));
  --pgn-slate-rim: color-mix(in srgb, var(--ink) 26%, transparent);
  --pgn-num: color-mix(in srgb, var(--ink) 18%, var(--card-bg-solid));
  --pgn-go: var(--cta-bg);
  --pgn-go-2: var(--cta-bg);
  --pgn-go-rim: transparent;
  --pgn-go-ink: var(--cta-ink);
  --pgn-alt: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid));
}
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page {
  --pgn-card: color-mix(in srgb, color-mix(in srgb, var(--bg) 8%, var(--card-bg-solid)) 93%, transparent);       /* L* 15.5 */
  --pgn-rim: color-mix(in srgb, var(--ink) 19%, transparent);                                                  /* L* 27-34 */
  --pgn-band: color-mix(in srgb, var(--ink) 7%, var(--card-bg-solid));                                         /* L* 21 */
  --pgn-field: color-mix(in srgb, var(--bg) 26%, var(--card-bg-solid));                                        /* L* 13.8 */
  --pgn-field-rim: color-mix(in srgb, var(--ink) 12%, transparent);
  --pgn-ctl: color-mix(in srgb, var(--ink) 4%, var(--card-bg-solid));                                          /* L* 18.5 */
  --pgn-ctl-rim: color-mix(in srgb, var(--ink) 24%, transparent);                                              /* L* 30 */
  --pgn-amber: color-mix(in srgb, var(--accent) 38%, var(--black));                                            /* L* 26: dark amber glass */
  --pgn-amber-rim: color-mix(in srgb, var(--accent) 88%, var(--ink));
  --pgn-amber-glow: color-mix(in srgb, var(--accent) 34%, transparent);
  --pgn-amber-ink: var(--ink);                                                                                /* buttons on amber: white ink (Image, Grid 2x2, Push to shot) */
  --pgn-gold-ink: oklch(from var(--accent) calc(l + 0.1285) calc(c * 0.912) calc(h + 26.4));                   /* picked chips / segments: the mockup's gold #F5CC63 (This shot, One shot, Gallery) */
  --pgn-gold-ink-2: oklch(from var(--accent) calc(l + 0.175) calc(c * 0.719) calc(h + 33));                    /* Shot frame ✓: the paler gold #F6E08F */
  --pgn-gold-line: oklch(from var(--accent) calc(l + 0.157) calc(c * 0.987) calc(h + 28.3));                   /* the tab underline #FFD660 */
  --pgn-grey: color-mix(in srgb, var(--ink) 17%, var(--card-bg-solid));                                        /* L* 30.6 */
  --pgn-grey-rim: color-mix(in srgb, var(--ink) 30%, transparent);
  --pgn-sage: color-mix(in srgb, var(--ok) 14%, color-mix(in srgb, var(--bg) 40%, var(--card-bg-solid)));
  --pgn-sage-rim: color-mix(in srgb, var(--ok) 40%, var(--card-bg-solid));
  --pgn-slate: color-mix(in srgb, var(--blue-41) 10%, color-mix(in srgb, var(--bg) 25%, var(--card-bg-solid)));
  --pgn-slate-rim: color-mix(in srgb, var(--blue-41) 30%, color-mix(in srgb, var(--ink) 25%, var(--card-bg-solid)));
  --pgn-num: color-mix(in srgb, var(--ink) 20%, var(--card-bg-solid));                                         /* L* 31 */
  --pgn-go: color-mix(in srgb, var(--accent) 45%, var(--black));
  --pgn-go-2: color-mix(in srgb, var(--accent) 40%, var(--black));
  --pgn-go-rim: color-mix(in srgb, var(--accent) 70%, var(--card-bg-solid));
  --pgn-go-ink: var(--ink);
  --pgn-alt: color-mix(in srgb, var(--ink) 15%, var(--card-bg-solid));                                         /* L* 29 */
}
/* the photo glows between the cards (glass): the page is see-through over a soft dark veil */
body[data-ui-tier="s"] .main-content > .pk-page.pgn-page { background: transparent; }
/* the mockup's warm light between the cards: soft amber pools along both gutters (light, not a filter on the photo) */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pgn-page) {
  background-image:
    radial-gradient(28px 120px at 0 300px, color-mix(in srgb, var(--accent) 30%, transparent), transparent),
    radial-gradient(28px 120px at 0 540px, color-mix(in srgb, var(--accent) 26%, transparent), transparent),
    radial-gradient(28px 120px at 0 760px, color-mix(in srgb, var(--accent) 28%, transparent), transparent),
    radial-gradient(28px 120px at 100% 420px, color-mix(in srgb, var(--accent) 26%, transparent), transparent),
    radial-gradient(28px 120px at 100% 660px, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
}

/* ── the page: 11.3px gutters, 8px between cards ── */
body[data-ui-tier="s"] .pgn-page.pg4-page { padding: 5px 11.3px 24px; gap: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shell { gap: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder { gap: 8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-row-2col, .gen-col) { gap: 8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-shotpicker, .gen-context-card, .gen-section, .gen-settings, .gen-gens-drawer) {
  border: 0; border-radius: var(--pk-radius-card); background: var(--pgn-card);
  box-shadow: inset 0 0 0 1px var(--pgn-rim), inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 6px 18px color-mix(in srgb, var(--black) 35%, transparent);
}
/* section titles: Inter 9.5 / 700, caps, tracked */
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-section-head, .gen-gens-title) {
  min-height: 0; font-family: var(--font-body); font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.09em; line-height: 12px; text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings::before { font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.09em; line-height: 12px; color: var(--ink); }

/* ════════ THE SHOT PICKER CARD (+ Image / Video / Voice over at its foot) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 1px 0 0 var(--pgn-rim), inset -1px 0 0 var(--pgn-rim), inset 0 1px 0 var(--pgn-rim); overflow: visible; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-head {
  display: grid; grid-template-columns: 294.6px minmax(0, 1fr); align-items: center; gap: 0; padding: 0; border: 0; background: transparent;
}
/* the tab strip: a lighter band, the hairline at its foot, the amber underline under the picked tab */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap {
  grid-column: 1 / -1; display: flex; gap: 7.6px; height: 29.1px; min-height: 0; margin: 0; padding: 0 0 0 4.9px; border: 0;
  border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0; background: var(--pgn-band); box-shadow: inset 0 -0.8px 0 color-mix(in srgb, var(--black) 30%, var(--pgn-band));
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64.8px; height: 41.5px; min-height: 0; margin: -4.4px 0 -8px; padding: 0;
  border: 9px solid transparent; border-left-width: 0; border-right-width: 0; background: transparent; box-shadow: none;
  font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-med); line-height: 1; color: color-mix(in srgb, var(--ink) 86%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab.active { font-weight: var(--fw-semi); color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab::after { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-picker-tabwrap > .tab.active::before {
  content: ""; position: absolute; left: -0.8px; right: -0.8px; bottom: -2.4px; height: 2.4px; border-radius: var(--pk-radius-small);
  background: var(--pgn-gold-line); box-shadow: 0 0 6px var(--pgn-amber-glow);
}
/* search (294.6 x 22.7) + "12 shots" */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-search {
  grid-column: 1; width: 294.6px; height: 40.7px; min-height: 0; margin: 0.7px 0 -9px 12.2px; padding: 0 10px 0 31px;
  border: 9px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); background-color: var(--pgn-field);
  background-image: radial-gradient(circle at 12.4px calc(50% - 1px), transparent 3.9px, color-mix(in srgb, var(--ink) 85%, transparent) 4.3px, color-mix(in srgb, var(--ink) 85%, transparent) 5.3px, transparent 5.7px),
    linear-gradient(45deg, transparent 42%, color-mix(in srgb, var(--ink) 85%, transparent) 43%, color-mix(in srgb, var(--ink) 85%, transparent) 57%, transparent 58%);
  background-repeat: no-repeat; background-size: auto, 4.5px 4.5px; background-position: 0 0, 15.6px calc(50% + 3.4px);
  box-shadow: inset 0 0 0 1px var(--pgn-field-rim), inset 0 2px 5px color-mix(in srgb, var(--black) 30%, transparent);
  font-size: 16px;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-search::placeholder { font-size: 10px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-count { grid-column: 2; justify-self: start; margin: 0.7px 0 -9px 9.9px; font-size: 10px; font-weight: var(--fw-med); color: color-mix(in srgb, var(--ink) 88%, transparent); }
/* the picked shot: 377.2 x 46.1, its picture 130.3 x 41.3, the title 13 / 600, a 25.9 square chevron */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-list { gap: 4px; padding: 12.1px 6.5px 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row {
  grid-template-columns: 130.3px minmax(0, 1fr) 25.9px; gap: 11.3px; min-height: 0; height: 46.1px; padding: 1.6px 7.6px 1.6px 5.7px;
  border: 0; border-radius: var(--pk-radius-row); background: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-rim);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row.is-active { background: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-rim); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-thumb { width: 130.3px; height: 41.3px; aspect-ratio: auto; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-id { font-size: 13px; font-weight: var(--fw-semi); color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shot-row.is-active::after {
  grid-column: 3; justify-self: stretch; align-self: center; width: 25.9px; height: 25.9px; margin: 0; box-sizing: border-box;
  border: 0; border-radius: var(--pk-radius-control); transform: none;
  background: var(--pgn-field) no-repeat center / 10px 5px; box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  background-image: linear-gradient(45deg, transparent 46%, var(--ink) 47%, var(--ink) 58%, transparent 59%), linear-gradient(-45deg, transparent 46%, var(--ink) 47%, var(--ink) 58%, transparent 59%);
  background-size: 5px 5px, 5px 5px; background-position: calc(50% - 2.3px) 50%, calc(50% + 2.3px) 50%;
}
body[data-ui-tier="s"] .pgn-page.is-list-open .pgn-body .gen-shot-row.is-active::after { margin: 0; transform: rotate(180deg); }
/* Image / Video / Voice over: the picker card's foot (121 x 33.2 each, 6.5 apart) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder > .gen-mode-row {
  gap: 6.5px; margin: 0; padding: 9px 6.5px 3.4px; border-radius: 0 0 var(--pk-radius-card) var(--pk-radius-card);
  background: var(--pgn-card); box-shadow: inset 1px 0 0 var(--pgn-rim), inset -1px 0 0 var(--pgn-rim), inset 0 -1px 0 var(--pgn-rim), 0 6px 18px color-mix(in srgb, var(--black) 35%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-btn {
  justify-content: flex-start; gap: 0; height: 41.2px; min-height: 0; margin: -4px 0; padding: 0 0 0 13.8px; border: 4px solid transparent; border-left-width: 0; border-right-width: 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); background-color: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-btn.is-active {
  /* the desktop's active rule paints an accent border + a border-box fill: both would fill the transparent tap band */
  border-color: transparent; background-clip: padding-box;
  background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim), inset 0 0 6px var(--pgn-amber-glow);
  filter: drop-shadow(0 0 4px var(--pgn-amber-glow));
}
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-mode-icon, .gen-mode-icon svg) { width: 13px; height: 13px; flex: 0 0 13px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-text { margin-left: 15px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-title { font-size: 10px; font-weight: var(--fw-semi); color: var(--ink); }

/* ════════ FROM THE SHOTLIST (191.8 tall) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card { gap: 0; padding: 10.6px 12.6px 9.6px 12.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span:first-child { margin-left: 2.4px; font-size: 9.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span {
  flex: 1 1 calc(100% - 190px); margin: 0 36px 0 0; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.09em; color: var(--ink); text-transform: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-context-grid { gap: 0; margin-top: 7.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-row {
  grid-template-columns: 94.5px minmax(0, 1fr); gap: 0; align-items: center; min-height: 16.2px; height: auto; margin-bottom: 0.8px; box-shadow: inset 0 -0.8px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-label { font-size: 8.5px; font-weight: var(--fw-semi); letter-spacing: 0.08em; line-height: 16.2px; color: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-value { font-size: 9.5px; line-height: 16.2px; color: var(--ink); }
/* Copy path (116.6) · Open folder (115.7) · Open shot ↗ (120.6, the sage rim): 25.1 tall */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button {
  flex: 0 0 auto; width: 116.6px; height: 41.1px; min-height: 0; margin: calc(9.1px - 8px) 0 -8px; padding: 0; gap: 9px;
  border-width: 8px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px);
  background-clip: padding-box; background-image: none;
  background-color: var(--pgn-ctl); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim); font-size: 9.5px; font-weight: var(--fw-med); color: var(--ink); order: 2;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button:nth-of-type(2) { width: 115.7px; margin-left: 5.4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button:nth-of-type(3) { width: 120.6px; margin-left: 6.2px; background-color: var(--pgn-sage); box-shadow: inset 0 0 0 1px var(--pgn-sage-rim); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card { column-gap: 0; }

/* ════════ REFERENCES: title + Attach · search + Kind · the category chips · what is picked ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs {
  position: relative; display: grid; grid-template-columns: 135.2px minmax(0, 1fr) auto; align-items: center; gap: 0; padding: 12.2px 13.8px 12px 13.8px;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs > .gen-section-head { display: contents; }
/* (the title is the head's own text: the first free cell, row 1) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslots { grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; gap: 2px; margin: -10px 0 -10px -40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslot {
  width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; border: 7px solid transparent; background-clip: padding-box; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim); background-color: transparent; font-size: 8px; font-weight: var(--fw-semi); color: color-mix(in srgb, var(--ink) 70%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslot.is-on { background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim); color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-search {
  grid-column: 1; grid-row: 2; width: 135.2px; height: 41.1px; min-height: 0; margin: calc(12.4px - 8px) 0 -8px -0.6px; padding: 0 10px;
  border: 8px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); background-color: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font-size: 16px; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-search::placeholder { font-size: 10px; font-weight: var(--fw-med); color: var(--ink); }
/* the category chips: 4 a row, 23.5 tall */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-tabs {
  position: static; grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6.4px 8.8px; margin: 8.1px 0 0 -0.6px; padding: 0;
  overflow: visible; max-width: none; width: auto; -webkit-mask-image: none; mask-image: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-tab {
  width: auto; min-width: 0; height: 41.5px; min-height: 0; margin: -9px 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis;
  border: 9px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 9px); background-color: var(--pgn-ctl); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font-size: 9.5px; font-weight: var(--fw-med); letter-spacing: 0; text-transform: none; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-tab.is-active {
  background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim), inset 0 0 6px var(--pgn-amber-glow); color: var(--pgn-gold-ink);
  filter: drop-shadow(0 0 4px var(--pgn-amber-glow));
}
/* + Attach (the drop / paste pill: a tap opens the file picker) — top right, 66.4 x 21 */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-droppill {
  position: absolute; top: calc(6.5px - 10px); right: 13.8px; width: 66.4px; height: 41px; margin: 0; padding: 0;
  border-width: 10px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 10px);
  background-color: var(--pgn-alt); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim); font-size: 9px; font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-droppill:not(.is-busy):not(.is-over) { font-size: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-droppill:not(.is-busy):not(.is-over)::before { content: "+  Attach"; font-size: 9px; white-space: pre; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-droperr { grid-column: 1 / -1; font-size: 10px; }
/* Kind: [the This-shot filter's pick ▾] — 121.4 x 25.1 (a tap opens the list) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-shotfilter-row { grid-column: 2 / 4; grid-row: 2; justify-self: end; display: flex; align-items: center; margin: 4.4px 0 0; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-shotfilter-row::before { content: "Kind:"; margin-right: 10px; font-size: 8.5px; font-weight: var(--fw-med); color: color-mix(in srgb, var(--ink) 86%, transparent); }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-shotfilter {
  position: relative; display: flex; width: 121.4px; height: 25.1px; padding: 0; overflow: visible; border-radius: var(--pk-radius-control);
  background: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim); cursor: pointer;
}
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-shotfilter::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); transform: rotate(45deg); pointer-events: none;
}
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-sf-btn:not(.is-on) { display: none; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-sf-btn.is-on {
  flex: 1 1 auto; justify-content: flex-start; height: 41.1px; min-height: 0; margin: -8px 0; padding: 0 28px 0 13.8px;
  border: 8px solid transparent; border-left-width: 0; border-right-width: 0; background: transparent; box-shadow: none;
  font-size: 10px; font-weight: var(--fw-med); color: var(--ink); pointer-events: none;
}
/* the pictures (the desktop's tiles) only in the sheet; "No references selected." italic 10.5 */
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs :is(.gen-refs-grid, .gen-refs-upload-row) { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-selected-bar { grid-column: 1 / -1; grid-row: 4; min-height: 0; margin: 11.6px 0 0; padding: 0; font-size: 10.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-selected-empty { font-size: 10.5px; font-style: italic; color: color-mix(in srgb, var(--ink) 80%, transparent); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs > :not(.gen-section-head):not(.gen-refs-tabs):not(.gen-refs-shotfilter-row):not(.gen-refs-grid):not(.gen-refs-selected-bar):not(.gen-refs-upload-row) { grid-column: 1 / -1; }
/* the SHEET: a category's pictures over the whole page (src/PhoneGenerate.jsx: a chip opens it, ✕ / Back close it) */
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs {
  position: fixed; inset: 0; z-index: calc(var(--z-mobile-drawer) + 10); display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 24px; overflow-y: auto; overscroll-behavior: contain; border-radius: 0;
  background: var(--card-bg-solid); box-shadow: none;
}
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs > .gen-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; padding-right: 44px; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-jobslots { margin: 0; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-search { flex: 1 1 100%; width: 100%; margin: -8px 0; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-tabs { margin: 0; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-droppill { position: static; width: auto; margin: -10px 0; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-shotfilter-row { justify-self: auto; margin: 0; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-shotfilter { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-sf-btn { height: 40px; padding: 0 10px; font-size: 11px; }
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-refs-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex-wrap: wrap; overflow: visible; max-height: none; height: auto;
}
body[data-ui-tier="s"] .pgn-page.is-refs-open .pgn-body .gen-section--refs .gen-ref-tile { flex: none; width: auto; min-width: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-refs-close {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: calc(var(--z-mobile-drawer) + 11);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid)); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ════════ OVERALL DIRECTION · the grid frame directions: label | an 18px field per row ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--match-refs { gap: 0; padding: 9.5px 11.5px 5.7px 12.9px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-head { gap: 18px; min-height: 0; padding-right: 40px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tab {
  height: 32px; min-height: 0; margin: -10px 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tab.is-on { box-shadow: none; color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tabbody { margin-top: 11px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-3col { gap: 4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell { grid-template-columns: 120.7px 243.6px; gap: 0; align-items: center; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell > label { padding-left: 0.8px; font-size: 7.5px; font-weight: var(--fw-semi); letter-spacing: 0.1em; line-height: 1.2; color: color-mix(in srgb, var(--ink) 90%, var(--accent)); }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-direction, .gen-quad-input) {
  field-sizing: fixed; height: 39.8px; min-height: 0; max-height: none; margin: -11px 0; padding: 0 10px; overflow: hidden; white-space: nowrap; resize: none;
  border: 11px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-small) / calc(var(--pk-radius-small) + 11px); background-color: var(--pgn-field);
  box-shadow: inset 0 0 0 1px var(--pgn-field-rim); font-size: 16px; line-height: 17.8px; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-direction { font-size: 9.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-input { font-size: 8.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-direction, .gen-quad-input):focus { field-sizing: content; height: auto; min-height: 39.8px; white-space: pre-wrap; overflow: auto; font-size: 16px; line-height: 1.35; }
/* 4 grid frame directions: (n) Upper-left [field] */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section:has(> .gen-quad-grid) { gap: 0; padding: 9.7px 10.8px 6px 12.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section:has(> .gen-quad-grid) > .gen-section-head { margin-left: 1.6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-grid { gap: 3.8px; margin-top: 9.8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-cell { grid-template-columns: 94.7px 272px; gap: 0; align-items: center; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-label { gap: 12.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-num::before {
  width: 17.8px; height: 17.8px; border-radius: 50%; background: var(--pgn-num); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent);
  font-size: 10px; font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-pos { font-size: 8.5px; font-weight: var(--fw-med); text-transform: capitalize; color: var(--ink); }

/* ════════ GENERATION SETTINGS: Mode | Model, Visual style | Time of day, Aspect ratio | Resolution, More options, Shots ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings {
  position: relative; grid-template-columns: 174.8px 174px; column-gap: 15.4px; row-gap: 0; align-items: start; padding: 12.1px 13.2px 8.1px 13.8px;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings::before { grid-row: 1; margin: 0 0 6.6px; }
/* the Mode setting's three parts join the grid: "Mode" (row 2, left), More options (row 8), Shots (row 9) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings > .gen-setting:not(.gen-pillcard) { display: contents; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-setting-labelrow { grid-column: 1; grid-row: 2; height: 46.6px; align-items: flex-start; justify-content: flex-start; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-setting-labelrow > .gen-slicemode { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings :is(.gen-setting-label, .gen-pillcard > .gen-setting-label) {
  font-size: 9.5px; font-weight: var(--fw-med); letter-spacing: 0; text-transform: none; line-height: 12px; color: color-mix(in srgb, var(--ink) 90%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard { gap: 1.8px; height: 46.6px; margin: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard:is(.gen-setting--models) { grid-column: 2; grid-row: 2; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard:is(.gen-setting--style) { grid-column: 1; grid-row: 3; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard:is(.gen-setting--tod) { grid-column: 2; grid-row: 3; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard:is(.gen-setting--aspect) { grid-column: 1; grid-row: 4; height: 48.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard:is(.gen-setting--res) { grid-column: 2; grid-row: 4; height: 48.3px; }
/* a setting box: 24.3 tall (Aspect / Resolution 25.1), the pick left, a chevron right */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-row, .gen-res-row) {
  height: 40.3px; min-height: 0; margin: -8px 0; padding: 0 30px 0 11px; border-width: 8px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); background-color: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard:is(.gen-setting--aspect, .gen-setting--res) :is(.gen-model-row, .gen-res-row) { height: 41.1px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-row, .gen-res-row)::after { right: 13.5px; width: 5px; height: 5px; margin-top: -4.2px; border-width: 0 1.4px 1.4px 0; border-color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-btn, .gen-res-btn).is-active { height: 24.3px; line-height: 24.3px; margin: 0; font-size: 10px; font-weight: var(--fw-med); color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-model-row, .gen-res-row):not(:has(.is-active))::before { font-size: 10px; color: var(--ink); }
/* the five modes: the picked one is the Mode box (amber, "Grid · 2×2"); the others are More options */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode {
  grid-column: 1 / -1; grid-row: 5; flex-wrap: wrap; gap: 0 5.5px; margin: 8.1px 0 0; padding: 0; overflow: visible; height: auto; min-height: 0;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode::before {
  content: "More options"; flex: 0 0 100%; margin: 0 0 4.4px; font-size: 9.5px; font-weight: var(--fw-med); line-height: 12px; color: color-mix(in srgb, var(--ink) 90%, transparent);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode > .gen-model-btn {
  flex: 0 0 auto; width: auto; height: 41.5px; min-height: 0; margin: -9px 0; padding: 0 16px; border-width: 9px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); background-color: var(--pgn-ctl); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font-size: 9.5px; font-weight: var(--fw-med); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode > .gen-model-btn.is-active {
  position: absolute; left: 13.8px; top: calc(44.5px - 8px); width: 174.8px; height: 40.3px; margin: 0; padding: 0 30px 0 11px; border-width: 8px 0; justify-content: flex-start; text-align: left;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px);
  background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim), inset 0 0 6px var(--pgn-amber-glow);
  filter: drop-shadow(0 0 4px var(--pgn-amber-glow));
  font-size: 10px; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode > .gen-model-btn.is-active[data-pgn-size]::after { content: "  ·  " attr(data-pgn-size); white-space: pre; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode > .gen-model-btn.is-active::before {
  content: ""; position: absolute; right: 13.5px; top: 50%; width: 5px; height: 5px; margin-top: -4.2px; border-right: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); transform: rotate(45deg);
}
/* Shots: One shot (active, amber) · Several shots */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts { grid-column: 1 / -1; grid-row: 6; gap: 0; margin: 8.3px 0 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts-switch { gap: 4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts .gen-slicemode-label { font-size: 9.5px; font-weight: var(--fw-med); letter-spacing: 0; text-transform: none; line-height: 12px; color: color-mix(in srgb, var(--ink) 90%, transparent); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts-switch .gen-slicemode-btns { display: flex; gap: 7.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts-switch .gen-slicemode-btn {
  flex: 0 0 auto; width: auto; height: 41.1px; min-height: 0; margin: -8px 0; padding: 0 16px; border-width: 8px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); background-color: var(--pgn-ctl); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font-size: 9.5px; font-weight: var(--fw-med); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts-switch .gen-slicemode-btn.is-active {
  padding: 0 20px; background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim), inset 0 0 6px var(--pgn-amber-glow); color: var(--pgn-gold-ink);
}

/* ════════ THE PROMPT SENT TO MODEL (82 tall, Inter 10 / 14.6) ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-section { position: relative; gap: 0; padding: 11.7px 11.8px 7.3px 12.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-section > .gen-section-head--toggle,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-section .gen-preview-block--header,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-section .gen-preview-block-sub { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-split { gap: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block-label { display: block; min-height: 0; padding: 0; margin: 0 0 8.5px 1.6px; background: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block-tag--accent {
  display: inline; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.09em; line-height: 12px; text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text {
  height: 81.8px; min-height: 0; margin: 0; padding: 4px 9px 4px 5.6px; border: 0; border-radius: var(--pk-radius-control);
  background: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-field-rim), inset 0 2px 5px color-mix(in srgb, var(--black) 28%, transparent);
  font-size: 10px; line-height: 14.6px; color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-refine-row { position: absolute; top: 2px; right: 10px; min-height: 0; height: auto; gap: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refine-reset { height: 40px; min-height: 40px; padding: 0 4px; font-size: 9.5px; text-decoration: none; color: color-mix(in srgb, var(--ink) 70%, transparent); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refine-reset:disabled { opacity: 0.5; }

/* ════════ GENERATE GRID (241.2) | ALL MODELS (141.7): 36.4 tall, 10 / 700 caps tracked ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-footer { margin: -1.9px 0 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: 5.7px; padding: 0 0.6px 0 0.8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn {
  flex: 0 0 241.2px !important; width: 241.2px !important; height: 40.4px; min-height: 0; margin: -2px 0 !important; padding: 0 6px;
  border: 2px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 2px);
  background-color: var(--pgn-go); background-image: linear-gradient(to bottom, var(--pgn-go), color-mix(in srgb, var(--pgn-go) 86%, var(--accent)) 48%, var(--pgn-go-2));
  box-shadow: inset 0 0 0 1px var(--pgn-go-rim); filter: drop-shadow(0 0 7px var(--pgn-amber-glow)); color: var(--pgn-go-ink);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn + .gen-go-btn {
  flex: 1 1 141.7px !important; width: auto !important; letter-spacing: 0.06em;
  background-color: var(--pgn-alt); background-image: none; box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-job-detail { margin: 6px 2px 0; font-size: 10px; color: color-mix(in srgb, var(--ink) 75%, transparent); }

/* ════════ RESULTS: RESULTS + Gallery | Panel, then each picture: a 70px strip, the version + model, 2 x 3 buttons ════════ */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-drawer { padding: 0 0 6px; gap: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-head { min-height: 0; height: 35.6px; padding: 0 10.4px 0 14.6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-modetoggle { display: inline-flex; gap: 2.4px; padding: 0; background: transparent; border: 0; box-shadow: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-modebtn {
  width: 63.9px; height: 40.7px; min-height: 0; margin: -9px 0; padding: 0; border-width: 9px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); background-color: var(--pgn-ctl); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font-size: 9.5px; font-weight: var(--fw-semi); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-modebtn + .gen-gens-modebtn { width: 60.7px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-modebtn.is-active { background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pgn-amber-rim) 60%, var(--pgn-amber)); color: var(--pgn-gold-ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars { padding: 0 12px 6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-list { gap: 5.7px; padding: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-card {
  display: flex; flex-direction: column; gap: 0; padding: 5.7px 11.4px 6.4px; border: 0; border-radius: var(--pk-radius-card);
  background: var(--pgn-card); box-shadow: inset 0 0 0 1px var(--pgn-rim), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
/* the picture: a 367.5 x 70.4 strip; its tools open from a tap on it (the ⋯ mark) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb { position: relative; display: block; height: 70.4px; margin: 0; border-radius: var(--pk-radius-small); overflow: hidden; background: var(--black); cursor: pointer; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > button { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb::after {
  content: "⋯"; position: absolute; left: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 16px; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--black) 55%, transparent); color: var(--ink); font-size: 12px; line-height: 1; pointer-events: none;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-badge--current {
  top: 3.2px; right: 3.6px; display: grid; place-items: center; height: 15.4px; padding: 0 7px; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--accent) 92%, var(--ink)); color: var(--white); font-size: 8px; font-weight: var(--fw-heavy); letter-spacing: 0.04em; line-height: 1;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb .ga-style-pill { position: absolute; left: 30px; bottom: 4px; font-size: 8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-meta { display: flex; align-items: baseline; justify-content: space-between; min-height: 0; height: 18px; margin: 2.4px 1.5px 0 3.2px; line-height: 18px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-label { font-size: 12px; font-weight: var(--fw-bold); color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-model { font-size: 9px; font-weight: var(--fw-med); letter-spacing: 0.03em; color: color-mix(in srgb, var(--ink) 88%, transparent); }
/* two rows of three: Shot frame (126.3) · Good take (112.5) · In shot / Push (112.5); → Storyboard (144.9) · 3D (104.4) · ↻ (102) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow { display: flex; flex-wrap: wrap; gap: 4.8px 7.6px; margin-top: 4.7px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act {
  flex: 0 0 auto; min-width: 0; height: 41.5px; min-height: 0; margin: -9px 0; padding: 0 6px; border-width: 9px 0; gap: 5px; background-clip: padding-box; background-image: none; white-space: nowrap; overflow: hidden;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); background-color: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font-size: 9.5px; font-weight: var(--fw-med); color: var(--ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--promote { flex-basis: 126.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--good { flex-basis: 112.5px; background-color: var(--pgn-grey); box-shadow: inset 0 0 0 1px var(--pgn-grey-rim); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--push { flex-basis: 112.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--send { flex-basis: 104.4px; height: 40.3px; border-width: 8px 0; margin: -8px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--send:nth-child(4) { flex-basis: 144.9px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--restyle { flex: 1 1 auto; height: 40.3px; border-width: 8px 0; margin: -8px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--restyle svg { width: 11.3px; height: 11.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-gens-act--promote.is-current, .gen-gens-act--push:not(.is-pushed)) {
  background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim), inset 0 0 5px var(--pgn-amber-glow); color: var(--pgn-amber-ink);
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--promote.is-current { color: var(--pgn-gold-ink-2); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--push.is-pushed { background-color: var(--pgn-slate); box-shadow: inset 0 0 0 1px var(--pgn-slate-rim); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--approve { flex: 1 1 100%; width: 100%; margin-top: 5.6px; }
/* the fold chevrons sit on the cards' title rows (src/PhoneGenerate.jsx measures them) */
body[data-ui-tier="s"] .pgn-page .pgn-fold { width: 40px; height: 40px; margin: -12px -6px 0 0; color: color-mix(in srgb, var(--ink) 80%, transparent); }
body[data-ui-tier="s"] .pgn-page .pgn-fold svg { width: 12px; height: 12px; }

/* (round 1, measured fixes) the skins draw these desktop buttons with a 1px border at a higher specificity: the band wins back */
/* the shotlist card's three buttons and the shot's name carry the desktop's INLINE styles (border, fill, padding, type):
   the phone's measured look needs !important to reach them */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button {
  min-width: 0 !important; padding: 0 !important; border: 8px solid transparent !important; border-left-width: 0 !important; border-right-width: 0 !important;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px) !important; background: var(--pgn-ctl) !important; background-clip: padding-box !important;
  font-size: 9.5px !important; font-weight: var(--fw-med) !important; color: var(--ink) !important;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button:nth-of-type(3) { background: var(--pgn-sage) !important; background-clip: padding-box !important; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span { font-size: 9.5px !important; font-weight: var(--fw-bold) !important; color: var(--ink) !important; letter-spacing: 0.09em !important; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-setting-labelrow { margin: 0; padding: 0; min-height: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts { height: auto; min-height: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts-switch .gen-slicemode-btns { height: auto; min-height: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; border: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-split { margin: 0; padding: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block--body { margin: 0; padding: 0; gap: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block-label { line-height: 12px; height: 12px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-head { margin: 0; padding-top: 0; padding-bottom: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tabbody { padding: 0; margin-top: 10px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-thumb > :is(button, .gen-gens-cmp) { display: none; }
/* the settings boxes sit straight under their labels (the desktop spaces the card's parts apart) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard { justify-content: flex-start; }
/* GENERATE GRID: the copper-lit pill (a bright rim, a warm glow); ALL MODELS may take two lines (its label is longer) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn:first-child {
  box-shadow: inset 0 0 0 1.2px var(--pgn-amber-rim), inset 0 1px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  filter: drop-shadow(0 0 9px var(--pgn-amber-glow));
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn + .gen-go-btn { white-space: normal !important; line-height: 12px; padding: 0 6px; text-overflow: clip; }
/* Reset to raw assembled: on the title row, right */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-refine-row { top: -14px; right: -2px; }
/* the in-flight / failed model bars: one compact line each (label · status · ✕), a thin track under */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars { padding: 0 12px 6px; margin: 0; border: 0; background: transparent; box-shadow: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars .ga-genbar-row { margin: 0 0 4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars .ga-genbar-top { height: 22px; margin: 0; align-items: center; font-size: 9.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars .ga-genbar-label { font-size: 9.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars .ga-genbar-right { display: inline-flex; align-items: center; gap: 4px; height: 22px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars .ga-genbar-cancel { width: 40px; height: 40px; min-height: 0; margin: -9px -11px -9px 0; border: 11px solid transparent; background-clip: padding-box; font-size: 9px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-bars .ga-genbar-track { height: 3px; border: 0; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-job-detail { margin: 5px 2px -2px; font-size: 9.5px; }
/* the job slots: small numbered dots beside the title (40px taps) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslots { gap: 0; margin: -11px 0 -11px -46px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslot { width: 32px; height: 40px; border-width: 11px 7px; font-size: 8px; }
/* Kind's pick reads from the left, like the other boxes */
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-sf-btn.is-on { text-align: left; }

/* ════════ (round 1b, positions measured against the mockup's own offsets inside each card) ════════ */
/* the settings boxes sit 5px under their labels (the desktop gives the label an 8px bottom margin) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard > .gen-setting-label { margin: 0; }
/* More options 172.6 / its pills 190.2, Shots 220.3 / its pills 235.5 from the card's top */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode { margin-top: 0.4px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode::before { margin-bottom: 5.6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts { margin-top: 6.5px; }
/* "12 shots" stands 14px clear of the search (the mockup's 332 px) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-count { margin-left: 26px; }
/* REFERENCES: the title row is the title's own line (the job slots' 40px taps overlap it); the category box 31.6
   under the card's top, the chips 64.8, two rows of four; the rest of the categories open from the box */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslots { margin-top: -14px; margin-bottom: -14px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs > .gen-section-head { line-height: 12px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-search { margin-top: -0.6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-shotfilter-row { margin-top: 0; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-search { visibility: hidden; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-tabs > .gen-refs-tab:not(.gen-refs-droppill):nth-child(n+9) { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-refs-cat {
  position: absolute; z-index: 2; display: flex; align-items: center; box-sizing: border-box; min-height: 0; margin: 0; padding: 0 28px 0 11px;
  border: 8px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); background-color: var(--pgn-field); box-shadow: inset 0 0 0 1px var(--pgn-ctl-rim);
  font: inherit; font-size: 10px; font-weight: var(--fw-med); color: var(--ink); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
body[data-ui-tier="s"] .pgn-page .pgn-refs-cat::after {
  content: ""; position: absolute; right: 13.5px; top: 50%; width: 5px; height: 5px; margin-top: -4.2px; border-right: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); transform: rotate(45deg);
}
body[data-ui-tier="s"] .pgn-page .pgn-refs-cat.is-on { background-color: var(--pgn-amber); box-shadow: inset 0 0 0 1px var(--pgn-amber-rim); }
/* the settings rows at the mockup's pitch: labels 29.3 / 77.1 / 124.9, More options 172.6 */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings::before { margin-bottom: 5.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings .gen-setting-labelrow,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings .gen-pillcard { height: 47.8px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings .gen-pillcard:is(.gen-setting--aspect, .gen-setting--res) { height: 47.3px; }
/* the title row is the title's 12px line (the section's own strut was 21px) */
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs { line-height: 12px; padding-top: 10.2px; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-search { margin-top: 1.4px; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-selected-bar { margin-top: 9.3px; line-height: 13px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts-switch .gen-slicemode-btn.is-active { padding: 0 21.7px; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs { padding-top: 8.2px; padding-bottom: 9.9px; }
body[data-ui-tier="s"] .pgn-page:not(.is-refs-open) .pgn-body .gen-section--refs .gen-refs-shotfilter-row { margin-top: 4.7px; }
/* the 4 grid frame directions: the rows 3.5px higher in their card, the position 12px after the number's circle */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-grid { margin-top: 6.3px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-label { gap: 3.9px; }
/* PROMPT SENT TO MODEL: its caps 12px under the card's top, like the other card titles */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-block-tag--accent { position: relative; top: -3.5px; }

/* the shotlist card's buttons carry the mockup's icons (a document for Copy path, an open folder) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button:nth-of-type(1)::before,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button:nth-of-type(2)::before {
  content: ""; display: inline-block; vertical-align: -2px; width: 11.5px; height: 11.5px; margin-right: 9px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%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='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > button:nth-of-type(2)::before { width: 13px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
/* the prompt card's icons (src/PhoneGenerate.jsx places them): edit + copy at the title row's right, 13.8 to see,
   40 to tap; Reset to raw assembled is the third, a ↺ beside them (dim until the prompt was refined) */
body[data-ui-tier="s"] .pgn-page .pgn-pv-icon {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0;
  border: 0; background: transparent; box-shadow: none; color: var(--ink); cursor: pointer;
}
body[data-ui-tier="s"] .pgn-page .pgn-pv-icon svg { width: 13.8px; height: 13.8px; }
body[data-ui-tier="s"] .pgn-page .pgn-pv-icon.is-done { color: var(--ok); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-refine-row { top: -14.3px; right: 59.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-refine-row .gen-refine-reset {
  width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0; color: var(--ink); display: flex; align-items: center; justify-content: center;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-refine-row .gen-refine-reset::before {
  content: ""; width: 13.8px; height: 13.8px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%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='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-refine-row .gen-refine-reset:disabled { opacity: 0.4; }
/* Redo's ↻ at full ink like the mockup's */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--restyle { color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--restyle { background-color: color-mix(in srgb, var(--pgn-ctl) 50%, var(--pgn-field)); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell > label { position: relative; top: -1.5px; }
/* the results card is RESULTS on the phone, like the mockup (the desktop says Generations) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-title { font-size: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-title::before { content: "Results"; font-size: 9.5px; letter-spacing: 0.09em; }
/* the job slots: 40px taps (overlapping by 8px so the dots keep their 14px spacing) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-jobslot { width: 40px; border-width: 11px; margin: 0 -4px; }
/* (round 1b) 40px taps everywhere, the visual sizes unchanged: the direction tabs and Approve grid → slice take a
   transparent band; "12 shots" keeps its place from the card's right edge (it runs off a 360px phone otherwise);
   the direction fields give the room back on a narrower phone */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-tab { height: 40px; margin: -14px 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-act--approve { flex: none; height: 41.5px; min-height: 0; margin: -3.4px 0 -9px; border-width: 9px 0; border-style: solid; border-color: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-count { justify-self: end; margin-left: 0; margin-right: 24.6px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell { grid-template-columns: 120.7px minmax(0, 243.6px); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-cell { grid-template-columns: 94.7px minmax(0, 272px); }
/* the settings' two columns give the room back on a narrower phone (174.8 | 174 at 412); the Mode box follows */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings.gen-settings { grid-template-columns: minmax(0, 174.8px) minmax(0, 174px); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode > .gen-model-btn.is-active { width: min(174.8px, calc((100% - 41.2px) / 2)); }
/* the grid frame directions card: "4 grid frame directions" (src/PhoneGenerate.jsx sets the count), its positions
   read "Upper-left" like the mockup */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section:has(> .gen-quad-grid) > .gen-section-head[data-pgn-n] { font-size: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section:has(> .gen-quad-grid) > .gen-section-head[data-pgn-n]::before { content: attr(data-pgn-n) " grid frame directions"; font-size: 9.5px; letter-spacing: 0.09em; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-pos { text-transform: lowercase; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-pos::first-letter { text-transform: uppercase; }
/* GENERATE GRID a touch deeper (the mockup's L* 30.9; measured without the side menu's stray shadow) */
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page { --pgn-go: color-mix(in srgb, var(--accent) 41%, var(--black)); --pgn-go-2: color-mix(in srgb, var(--accent) 36%, var(--black)); }

/* ════════ ROUND 2 (after the measured shell) ════════
   The result card's actions follow the mockup's two states. Not yet in the shot (mockup v017_f1): Set as shot frame |
   Good take over Push to shot | → Storyboard | 3D | ↻ (212.9 | 145.7 · 100.4 | 106 | 68.8 | 66.4). In the shot (v018_f1):
   three over three (126.3 | 112.5 | 112.5 · 144.9 | 104.4 | 102). Shares of the row, so a narrower phone keeps the rows. */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow { --pgn-agap: 8.9px; column-gap: var(--pgn-agap); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--promote { flex: 0 0 calc((100% - var(--pgn-agap)) * 0.5935); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--good { flex: 0 0 calc((100% - var(--pgn-agap)) * 0.4060); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--push { flex: 0 0 calc((100% - 3 * var(--pgn-agap)) * 0.2937); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--send { flex: 0 0 calc((100% - 3 * var(--pgn-agap)) * 0.2012); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--send:nth-child(4) { flex-basis: calc((100% - 3 * var(--pgn-agap)) * 0.3101); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--restyle { flex: 0 0 calc((100% - 3 * var(--pgn-agap)) * 0.1942); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow:has(> .gen-gens-act--push.is-pushed) > .gen-gens-act--promote { flex-basis: calc((100% - 2 * var(--pgn-agap)) * 0.3594); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow:has(> .gen-gens-act--push.is-pushed) > :is(.gen-gens-act--good, .gen-gens-act--push) { flex-basis: calc((100% - 2 * var(--pgn-agap)) * 0.3201); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow:has(> .gen-gens-act--push.is-pushed) > .gen-gens-act--send:nth-child(4) { flex-basis: calc((100% - 2 * var(--pgn-agap)) * 0.4123); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow:has(> .gen-gens-act--push.is-pushed) > .gen-gens-act--send:nth-child(5) { flex-basis: calc((100% - 2 * var(--pgn-agap)) * 0.2970); }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow:has(> .gen-gens-act--push.is-pushed) > .gen-gens-act--restyle { flex-basis: calc((100% - 2 * var(--pgn-agap)) * 0.2900); }
/* "→ 3D" reads "3D" like the mockup (the button keeps its own text for a screen reader) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--send:nth-child(5) { font-size: 0; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-actrow > .gen-gens-act--send:nth-child(5)::after { content: "3D"; font-size: 9.5px; }
/* a failed job's fix link ("Top up ↗") at the row's own size, not 11.5 */
body[data-ui-tier="s"] .pgn-page .pgn-body .ga-genbar-fix { font-size: 9.5px; }
/* FROM THE SHOTLIST · <shot>: a space before the shot's name like the mockup's " – " */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-context-card > .gen-section-head > span + span { margin-left: 3px; }
/* the fold chevrons at the mockup's drawn size (8.3 x 5.3, full ink): a 14.2px glyph, a 7-unit tall path (PhoneGenerate) */
body[data-ui-tier="s"] .pgn-page .pgn-fold { color: var(--ink); }
body[data-ui-tier="s"] .pgn-page .pgn-fold svg { width: 13.6px; height: 13.6px; }
/* the prompt's edit / copy icons a notch larger (the mockup's 12.1 x 13 / 11.3 x 13 ink) */
body[data-ui-tier="s"] .pgn-page .pgn-pv-icon svg { width: 14.7px; height: 14.7px; }
/* RESULTS: the mockup sets this title wider than its siblings (51.8 for the 7 letters) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-title::before { letter-spacing: 0.16em; }
/* the settings' labels (Mode, Model, ..., More options, Shots): 9.7px with a touch of tracking like the mockup */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings :is(.gen-setting-label, .gen-pillcard > .gen-setting-label),
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode::before,
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-modeopts .gen-slicemode-label { font-size: 9.7px; letter-spacing: 0.035em; }
/* Kind: at the mockup's 22.7 x 8.1 ink */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-shotfilter-row::before { font-size: 9.6px; }
/* the direction labels (SCENE & ENVIRONMENT ...): caps 6.5 tall like the mockup's mean, the tracking a touch tighter */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-dir-cell > label { font-size: 7.9px; letter-spacing: 0.085em; }
/* the frame numbers' discs a step darker (the mockup's L* 30.4) and 18.2 round (the mockup's 17.8-18.6) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-num::before { width: 18px; height: 18px; }
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page { --pgn-num: color-mix(in srgb, var(--ink) 16%, var(--card-bg-solid)); }
/* the result card's buttons: the field a step lighter (the mockup's L* 14.3-16.2), the amber states lighter (L* 31.5-32.8) */
body[data-ui-tier="s"] .pgn-page .pgn-body :is(.gen-gens-act--promote:not(.is-current), .gen-gens-act--send) { background-color: color-mix(in srgb, var(--ink) 3%, var(--pgn-field)); }
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body :is(.gen-gens-act--promote.is-current, .gen-gens-act--push:not(.is-pushed)) {
  background-color: color-mix(in srgb, var(--accent) 47%, var(--black));
}
/* More options: the mockup draws it narrower than its sibling labels (56.7 for the 12 letters) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode::before { font-size: 8.7px; letter-spacing: 0.02em; }
/* the reference chips in the mockup's own four columns (81.4 | 82.6 | 82.2 | 89.4: the fourth is wider) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-section--refs .gen-refs-tabs { grid-template-columns: minmax(0, 81.35fr) minmax(0, 82.6fr) minmax(0, 82.2fr) minmax(0, 89.4fr); }
/* the result's model name 14 from the card's right edge like the mockup */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-meta { margin-right: 5.3px; }
/* the fold chevrons where the mockup draws them (13.2 under the card's top, 366 from its left) */
body[data-ui-tier="s"] .pgn-page .pgn-fold { margin: -6.1px -2.3px 0 0; }
/* the result's version label and the shot count with proportional digits like the mockup (the skin's tabular
   digits drew "v018_f1" 15% wider than the mockup's) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-label { font-size: 11.6px; font-feature-settings: "lnum"; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-shotpicker-count { font-size: 9.8px; font-feature-settings: "lnum"; }

/* the mockup draws proportional digits ("01" narrower than "02", "SH1167", "(1)"): the skin's tabular digits off on this page */
body[data-ui-tier="s"] .pgn-page { font-feature-settings: "lnum"; }
/* the frame positions keep the skin's tabular figures: the mockup's "Upper-right" is drawn at that width (50.2) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-quad-pos { font-feature-settings: "lnum", "tnum"; }

/* ════════ ROUND 3 (the judge's findings on round 2, 7 Oct) ════════ */
/* the mockup's wording where the desktop words it differently ("Voice over", "This shot", "All models" on one line,
   "SHOT FRAME" without the star): src/PhoneGenerate.jsx puts it in data-pgn-label, React keeps the desktop's text */
body[data-ui-tier="s"] .pgn-page .pgn-body [data-pgn-label] { font-size: 0 !important; letter-spacing: 0 !important; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-mode-title[data-pgn-label]::after { content: attr(data-pgn-label); font-size: 10px; letter-spacing: 0.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refs-tab[data-pgn-label]::after { content: attr(data-pgn-label); font-size: 9.5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn[data-pgn-label] { white-space: nowrap !important; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-copy-wrap > .gen-go-btn[data-pgn-label]::after { content: attr(data-pgn-label); font-size: 10px; letter-spacing: 0.06em; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-badge--current[data-pgn-label]::after { content: attr(data-pgn-label); font-size: 9px; letter-spacing: 0.04em; }
/* the SHOT FRAME badge: 73.7 x 15.4, 9 / 800 white caps on the bright accent (the mockup's #F39945) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-badge--current {
  position: absolute; top: 3.2px; right: 3.4px; height: 15.4px; padding: 0 5.5px; font-weight: var(--fw-heavy); text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 88%, var(--ink)); color: var(--white);
}
/* the cards a touch closer (the mockup's gaps 6.5-8.9, mean 7.6; the shot picker's buttons 8.0 above the next card) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder { gap: 7.2px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-builder > .gen-mode-row { padding-bottom: 0.8px; }
/* the action row 6.5 under the prompt card and 10.5 above RESULTS in EVERY mode (with or without the server's note) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-footer { position: relative; margin: -0.7px 0 10.5px; }
/* the server's note ("Images wait for the studio PC on this server.") never moves RESULTS: a quiet caption in the
   RESULTS row, between the title and Gallery | Panel (two lines at most) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-footer > .gen-host-note {
  position: absolute; z-index: 1; top: calc(100% + 10.5px); left: 77px; width: 166px; height: 35.6px !important; margin: 0; padding: 0;
  display: flex; align-items: center; overflow: hidden; pointer-events: none;
  white-space: normal !important; font-size: 8px; line-height: 9.6px !important; color: color-mix(in srgb, var(--ink) 62%, transparent);
}
/* the prompt shows whole lines only (5 x 14.6): the bottom inset is a border, so the next line never peeks; the
   rim is the outline; a slim scrollbar like the mockup's, no resize grip (the mockup draws none) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text {
  padding: 4px 9px 0 5.6px; border: 0 solid transparent; border-bottom-width: 4.8px; background-clip: border-box; resize: none;
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 28%, transparent); outline: 1px solid var(--pgn-field-rim); outline-offset: -1px;
}
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text::-webkit-scrollbar { width: 5px; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text::-webkit-scrollbar-track { background: transparent; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text::-webkit-scrollbar-thumb { border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 34%, transparent); }
/* the shot frame's picture is the tall one (70.4, under its badge); the other results' strips are 61.5 like the mockup's */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-card:not(:has(.gen-gens-badge--current)) .gen-gens-thumb { height: 61.5px; }
/* the quiet labels are the mockup's cool grey-blue (#D3E0E9 / #D9E1E8), not the warm cream of the skin's ink */
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page {
  --pgn-label: color-mix(in srgb, var(--ink-muted) 66%, var(--white));
  --pgn-label-2: color-mix(in srgb, var(--ink-muted) 55%, var(--white));
}
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-dir-cell > label,
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-settings :is(.gen-setting-label, .gen-pillcard > .gen-setting-label),
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-settings .gen-model-row--mode::before,
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-settings .gen-modeopts .gen-slicemode-label,
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-section--refs .gen-refs-shotfilter-row::before { color: var(--pgn-label); }
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-gens-model { color: var(--pgn-label-2); }
/* the other results' rows sit as the mockup's second card draws them (label to buttons 16.2, rows 4.0 apart) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-card:not(:has(.gen-gens-badge--current)) .gen-gens-actrow { margin-top: 2.3px; row-gap: 4px; }
/* the version label a hair wider (the mockup draws "v017_f1" 43.7 and "v018_f1" 44.5; our "7" is the narrow one) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-gens-label { letter-spacing: calc(var(--track-03) + 0.1px); }
/* the prompt's type tracked like the mockup's (its first line breaks after "from a", 325.4 wide) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-preview-text { letter-spacing: 0.22px; }
/* the prompt card's title row carries the mockup's two icons (edit, copy): "Reset to raw assembled" shows only when
   there is a refined prompt to reset (it is disabled otherwise, and nothing else on the row moves) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-refine-reset:disabled { display: none; }
/* the redo glyph in the mockup's cool light grey (#DAE3EB) */
body[data-ui-tier="s"][data-skin-family="glass"] .pgn-page .pgn-body .gen-gens-act--restyle:not(:disabled) { color: var(--pgn-label); }
/* 16 Oct 2026 — Time of day's Outdoor | Interior switch is the desktop's: on the phone the card stays the one box
   it was (label + its pick), its pull-up list holds BOTH sides (openPick lists every pill in the card), and the
   box shows the side that holds the pick (the page moves the switch to it on every pick) */
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard :is(.gen-tod-head, .gen-tod-sets) { display: contents; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-tod-switch { display: none; }
body[data-ui-tier="s"] .pgn-page .pgn-body .gen-settings .gen-pillcard .gen-tod-sets > .gen-model-row.is-offset { display: none; }