/* «Витрина сайтов» (web/admin-showcase.js): every example the websites show — a card per thing, its «before» and «after». */
.show-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--space-grid, 14px); }
.show-summary > div:first-child { flex: 1 1 280px; min-width: 0; }
.show-summary h2 { margin: 0 0 8px; font-size: 18px; }
.show-summary progress { width: min(420px, 100%); height: 8px; accent-color: var(--ok); }
.show-summary .field-hint { margin: 8px 0 0; }
.show-section { margin-top: 30px; }
.show-section .section-title h2 { margin: 0; }
.show-section > .field-hint { max-width: 820px; margin: 6px 0 12px; }
/* «Ж / М» above the effects (src/sites/audience.js). */
.show-audience { margin: 0 0 12px; flex-wrap: wrap; }
.show-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--space-grid, 14px); }
.show-list > .muted { margin: 0; }
.show-row { display: grid; gap: 12px; min-width: 0; margin: 0; }
.show-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.show-name { min-width: 0; }
.show-name h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.show-name p { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.show-name .tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); font-size: 11px; font-weight: 700; }
.show-head .pill { flex: none; }
.show-tags { display: grid; justify-items: end; gap: 4px; flex: none; }
.show-open { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 650; color: var(--muted); }
.show-open::after { content: " ↗"; }
.show-summary-actions { display: grid; justify-items: start; gap: 10px; flex: 1 1 260px; max-width: 420px; }
.show-summary-actions .field-hint { margin: 0; }
.show-frame.is-dragging { border-color: var(--ok); border-style: solid; background: rgb(90 196 143 / .08); }
.show-skipped { margin: 0 0 8px; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.show-row .pill.ok { background: rgb(90 196 143 / .12); color: var(--ok); }
.show-row .pill.warn { background: rgb(228 174 79 / .12); color: var(--warn); }
.show-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.show-side { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; }
.show-frame { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.show-frame.is-empty { border-style: dashed; }
.show-media { width: 100%; height: 100%; object-fit: cover; }
.show-empty { font-size: 13px; color: var(--muted); }
.show-side figcaption { font-size: 12px; font-weight: 700; color: var(--muted); }
.show-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
/* «Загрузить» is a <label> around the file input: without the form labels' margins it stands level with «Убрать». */
.show-actions .file-button, .show-summary-actions .file-button { margin: 0; }
/* A phone: a side is too narrow for both buttons in a row, so each takes the column's width. */
@media (max-width: 560px) { .show-actions > .button, .show-actions > button { flex: 1 1 100%; } }
.show-busy { font-size: 13px; }
.show-idea-actions { gap: 6px; }
.show-idea-danger { display: flex; justify-content: flex-end; margin-top: 4px; }
.show-idea-danger .text-button { min-height: 44px; }
.show-code { padding: 1px 6px; border-radius: 6px; background: var(--panel-2); font-size: 12px; color: var(--text-2); }
/* A drag is for a computer: a phone does not hear about it. */
@media (pointer: coarse) { .show-drag-hint { display: none; } }
.show-add { grid-column: 1 / -1; }
/* «Скрыть» of a scene: its state and the one button, under the card's generate block. */
.show-hide { gap: 8px; align-items: center; }
.show-hide .pill.warn { background: rgb(228 174 79 / .12); color: var(--warn); }
/* «Сгенерировать» in the card (web/admin-showcase-generate.js): its small form, where its draft is, the draft beside the
   card's example with «Сохранить» / «Отменить». Several cards run at once, each says its own state. */
.show-gen { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.show-gen:empty { display: none; }
.show-gen-actions { gap: 6px; }
.show-gen-actions .file-button { margin: 0; }
.show-gen-note { margin: 0; font-size: 13px; }
.show-gen-status { margin: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.show-gen-status.is-busy { color: var(--muted); }
.show-gen-status.ok { color: var(--ok); }
.show-gen-form { display: grid; gap: 8px; }
.show-gen-field { display: grid; gap: 4px; margin: 0; font-size: 13px; font-weight: 650; }
.show-gen-field textarea, .show-gen-field select { width: 100%; }
.show-gen-who { margin: 0; padding: 0; border: 0; }
.show-gen-who legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.show-gen-choice { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.show-gen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.show-gen-side { margin: 0; min-width: 0; }
.show-gen-side img, .show-gen-side video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ok); border-radius: 12px; background: var(--bg-deep); }
.show-gen-side figcaption { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.show-gen-default { max-width: 160px; }
.show-gen-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.show-gen-summary { display: grid; gap: 6px; }
.show-gen-summary p { margin: 0; }
/* «Сравнить»: the draft's «after» over its «before», a curtain moved by the slider; the card's example now below. */
.show-curtain { position: relative; display: grid; max-height: 70vh; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--bg-deep); }
.show-curtain > img, .show-curtain > video { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.show-curtain-over { clip-path: inset(0 0 0 var(--cut, 50%)); }
.show-curtain input[type="range"] { position: absolute; right: 12px; bottom: 12px; left: 12px; width: calc(100% - 24px); }
.show-gen-now img, .show-gen-now video { display: block; width: min(240px, 100%); border-radius: 12px; }
/* «Экспорт» / «Импорт»: the whole showcase in one ZIP and back (web/admin-showcase-backup.js). */
.show-backup { gap: 6px; margin-top: 4px; }
.show-backup .file-button { margin: 0; }

/* «Подсказки к фото»: a caption form beside the picture. */
.show-tip-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.show-tip-form label { display: grid; gap: 4px; flex: 1 1 160px; }
.show-tip-form .form-error { flex-basis: 100%; margin: 0; }
/* «Витрина для»: the shared showcase or a template's own. In a template, the shared example shows dimmed until one of its own goes up. */
.show-scope { display: grid; gap: 6px; max-width: 520px; margin-bottom: 12px; }
.show-scope label { font-weight: 700; }
.show-scope select { max-width: 360px; }
.show-scope p { margin: 0; }
.show-side.is-shared .show-frame { opacity: .55; filter: saturate(.6); }
.show-side.is-shared figcaption { font-style: italic; }
/* «Бесплатная проба»: the effect a free-try card runs. */
.show-free { display: grid; gap: 8px; margin-bottom: var(--space-grid, 14px); }
.show-free h2 { margin: 0; }
.show-free p { margin: 0; }
.show-free select { max-width: 520px; }
/* «Идеи для «Свой сценарий»» (web/admin-prompt-ideas.js): one list per mode, a line per idea with its buttons. */
.show-prompt-modes { margin: 0 0 12px; flex-wrap: wrap; }
.show-prompts { grid-column: 1 / -1; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); counter-reset: prompt; }
.show-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; border-top: 1px solid var(--line); counter-increment: prompt; }
.show-prompt:first-child { border-top: 0; }
.show-prompt-words { flex: 1 1 320px; min-width: 0; display: grid; grid-template-columns: 2.2em 1fr; }
.show-prompt-words::before { content: counter(prompt) "."; grid-row: 1 / span 2; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.show-prompt-words p { margin: 0; overflow-wrap: anywhere; }
.show-prompt-words .tag { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.show-prompt-other { font-size: 12.5px; }
.show-prompt-actions { gap: 4px; flex: none; }
.show-prompt-actions .text-button { min-height: 36px; }
@media (max-width: 560px) { .show-prompt-actions { flex: 1 1 100%; justify-content: flex-end; } }
/* «👗 Гардероб» (web/admin-showcase-outfits.js): how many show an example and the batch's button; a costume with no
   example shows its flat garment, dimmed, in its empty frame. */
.show-wardrobe-lead { gap: 10px; align-items: center; margin: 0 0 12px; }
.show-wardrobe-lead p { margin: 0; font-size: 14px; }
.show-media.is-flat { object-fit: contain; opacity: .55; filter: saturate(.7); }