/* Sacred Command Center · Design, the making tabs (Image, Video, Edit, Swap, Voice, Music). Semantic tokens only: no hex, no rgba
   (tests/static.mjs S-a2). Builds on design.css (.ds-make, .ds-panel, .ds-block, .ds-slot, .ds-go, .ds-group ...); prefix ds-mk-.
   The Generate button is the one crimson fill on the screen; a status is a word; a problem's mark is the crimson icon beside words. */

/* ── Composer ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) { .ds-mk { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); } }
.ds-mk-model .btn { flex: none; }
.ds-mk-under { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); min-height: 1.2em; }
.ds-mk-count { flex: none; color: var(--text-3); font-size: var(--fs-caption); }
.ds-mk-count.is-over { color: var(--text); font-weight: 700; }
.ds-mk-warn { display: inline-flex; align-items: flex-start; gap: var(--s-1); color: var(--text); font-size: var(--fs-caption); font-weight: 600; line-height: 1.45; }
.ds-mk-warn .i, .ds-mk-err .i { flex: none; color: var(--accent-mark); margin-top: 1px; }

.ds-mk-fields { display: flex; flex-wrap: wrap; gap: var(--s-4); min-width: 0; }
.ds-mk-f { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ds-mk-f.is-wide { flex-basis: 100%; }
.ds-mk-fixed { flex: 0 1 auto; }
.ds-mk-fixed .ds-val { min-height: var(--tap); display: flex; align-items: center; font-size: var(--fs-cell); font-weight: 600; }

.ds-mk-chips .chip { min-height: 32px; height: auto; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; padding-block: var(--s-1); }
.ds-mk-chips .chip[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ds-mk-chips .chip:disabled { cursor: not-allowed; color: var(--text-3); }
.ds-mk-chip-off[aria-pressed="false"] { color: var(--text-3); }

/* A file slot: the picked files as thumbs with a remove button, then the slot that adds one. */
.ds-mk-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.ds-mk-files.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-mk-file { position: relative; min-width: 0; }
.ds-mk-file .st-thumb { aspect-ratio: 16 / 9; }
.ds-mk-files.is-many .ds-mk-file .st-thumb { aspect-ratio: 1 / 1; }
.ds-mk-rm {
  position: absolute; top: var(--s-1); right: var(--s-1); display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-button); cursor: pointer;
}
.ds-mk-rm::after { content: ""; position: absolute; inset: -8px; }
.ds-mk-add { min-height: 96px; }
.ds-mk-files.is-many .ds-mk-add { min-height: 0; aspect-ratio: 1 / 1; flex-direction: column; padding: var(--s-2); font-size: var(--fs-caption); }
.ds-mk-files:not(.is-many) .ds-mk-add.is-more { min-height: var(--tap); }
@media (hover: hover) { .ds-mk-add:hover { color: var(--text); border-color: var(--text-3); } }

.ds-mk-go { padding-top: var(--s-2); }
.ds-mk-go .btn--primary { min-height: 48px; }
/* The tab's one action stays in view: while the composer is taller than the window, the Generate button, its price and the
   reason it is off sit at the bottom of the window on the panel's own surface, a hairline above them (design.css does the same
   for Write's Draft and Polish). On a phone the bar keeps clear of the home indicator. */
.ds-mk-composer .ds-mk-go {
  position: sticky; bottom: 0; z-index: 2;
  margin-inline: calc(var(--s-4) * -1); padding: var(--s-3) var(--s-4);
  background: var(--surface); border-top: 1px solid var(--line);
}
@media (max-width: 767px) { .ds-mk-composer .ds-mk-go { margin-inline: calc(var(--s-3) * -1); padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); } }
/* Nothing on this tab can be made now (every model it offers is on the cloud GPU, which is off): one line at the top. */
.ds-mk-off { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); color: var(--text); font-size: var(--fs-cell); font-weight: 600; line-height: 1.45; background: var(--surface-2); border-radius: var(--r-button); }
.ds-mk-off .i { flex: none; color: var(--accent-mark); margin-top: 2px; }
.ds-mk-held { margin: 0; }
.ds-mk-price { color: var(--text-2); }
.ds-mk-err { display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s-1); color: var(--text); }
.ds-mk-rules { padding-top: var(--s-3); border-top: 1px solid var(--line); }

/* ── Results ──────────────────────────────────────────────────────────────────────────── */
.ds-mk-results { min-height: 320px; }
.ds-mk-group .ds-group-t { font-size: var(--fs-body); line-height: 1.35; }
.ds-mk-tiles { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-3); }
@media (max-width: 767px) { .ds-mk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } }
.ds-mk-tile { min-width: 0; }
.ds-mk-tile .st-thumb { aspect-ratio: 1 / 1; }

/* A request still being made, or one that failed: words in the tile's place. */
.ds-mk-pend {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-2); min-width: 0; aspect-ratio: 1 / 1; padding: var(--s-3);
  background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-button);
}
.ds-mk-pend.is-row { aspect-ratio: auto; flex-direction: row; align-items: center; flex-wrap: wrap; min-height: var(--tap); padding: var(--s-2) var(--s-3); }
.ds-mk-pend.is-bad { border-style: solid; }
.ds-mk-pend-w { display: inline-flex; align-items: flex-start; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.ds-mk-pend.is-bad .ds-mk-pend-w { color: var(--text); }
.ds-mk-pend-w .i { flex: none; color: var(--accent-mark); margin-top: 1px; }
.ds-mk-pend .btn { margin-left: calc(var(--s-2) * -1); }
.ds-mk-prog { width: 100%; height: 4px; appearance: none; border: 0; border-radius: var(--r-button); background: var(--line); overflow: hidden; }
.ds-mk-prog::-webkit-progress-bar { background: var(--line); }
.ds-mk-prog::-webkit-progress-value { background: var(--text-2); }
.ds-mk-prog::-moz-progress-bar { background: var(--text-2); }
.ds-mk-pend.is-row .ds-mk-prog { width: 120px; }

/* Sound: one row per file, the player then its actions. */
.ds-mk-sounds { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-mk-sound { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); min-width: 0; padding: var(--s-2); background: var(--surface-2); border-radius: var(--r-card); }
.ds-mk-audio { flex: 1 1 260px; min-width: 0; height: var(--tap); }
.ds-mk-sound-a { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }