/* ПРЕСЕТЫ (владелец 21.10, макеты mock-presets2, deck-1/3, layouts): строка карточек слева от «Создать», окно-колода.
 * Обложка шага — тон акцента своей глубины, пока у пресета нет своих кадров. */
.site-generator-actions:has(>.mf-sets:not([hidden])){flex:1 1 100%}
.mf-sets{order:-1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.mf-sets[hidden]{display:none}
.mf-sets-all{align-self:flex-end;border:0;background:none;padding:0;color:var(--muted);font-size:var(--small);cursor:pointer}
.mf-sets-all:hover{color:var(--ink)}
.mf-sets-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
.mf-set{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--line);border-radius:var(--ui-radius);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s ease,transform .2s ease}
.mf-set[hidden]{display:none}
.mf-set:hover{border-color:var(--accent);transform:translateY(-2px)}
.mf-set-strip{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:2px;height:36px;border-radius:var(--ui-radius-sm);overflow:hidden}
.has-cover{background-size:cover;background-position:center}
/* ИНТРИГА (владелец 21.10 19:38: «больше интриги… изображения пресетов показывай сильно заблюренными»): обложки
 * пресета — только пятна цвета, и в строке, и в колоде окна; видно станет в своей работе. */
.mf-set-thumb.has-cover{filter:blur(6px) saturate(1.2);transform:scale(1.15)}
.mf-deck-card.has-cover{filter:blur(14px) brightness(.55) saturate(.9)}
.mf-deck-card.has-cover.is-front{filter:blur(10px) saturate(1.1)}
.mf-set-name{padding:0 var(--space-1);font-weight:600;font-size:var(--micro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-tone0{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 55%,var(--surface)),color-mix(in srgb,var(--accent) 15%,var(--surface)))}
.is-tone1{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 40%,var(--surface)),color-mix(in srgb,var(--accent) 10%,var(--surface)))}
.is-tone2{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 30%,var(--surface)),color-mix(in srgb,var(--accent) 6%,var(--surface)))}
.is-tone3{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 45%,var(--surface)),color-mix(in srgb,var(--accent) 12%,var(--surface)))}
.is-tone4{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),color-mix(in srgb,var(--accent) 8%,var(--surface)))}

/* Окно: колода. Карта — 3:4; положение ставит раскладка (photosets.js), здесь — вид и переход. */
.mf-sets-modal>.mf-sets-card{width:min(720px,100%);display:flex;flex-direction:column;gap:var(--space-2)}
.mf-sets-title{margin:0}
.mf-deck{position:relative;height:340px;display:flex;align-items:center}
.mf-deck-stage{position:relative;flex:1;height:100%;overflow:hidden}
.mf-deck-card{position:absolute;top:26px;left:50%;width:216px;height:288px;border-radius:var(--ui-radius);box-shadow:var(--shadow-card);filter:brightness(.5) saturate(.8);transition:transform .35s ease,filter .35s ease}
.mf-deck-card.is-front{filter:none;outline:2px solid var(--accent);outline-offset:2px}
.mf-deck-arrow{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.mf-deck-arrow:disabled{opacity:.3;cursor:default}
.mf-deck-arrow:not(:disabled):hover{border-color:var(--accent)}
.mf-deck-cap{margin:0;text-align:center;color:var(--ink-soft);font-size:var(--small)}
.mf-deck-cap b{color:var(--accent);margin-right:var(--space-2)}
.mf-deck-dots{display:flex;justify-content:center;gap:6px;margin:0}
.mf-deck-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.mf-deck-dots i.is-on{background:var(--accent)}
.mf-sets-text{margin:var(--space-2) 0 0;color:var(--ink-soft)}
.mf-sets-act{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-3)}
.mf-sets-card>.mf-sets-act>.site-button-primary{width:auto;margin-inline:0}

@media(max-width:640px){
  .mf-sets-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mf-sets-row:not(.is-open)>.mf-set:nth-child(n+4){display:none}
  .mf-deck{height:260px}
  .mf-deck-card{width:156px;height:208px}
  .mf-deck-arrow{width:36px;height:36px}
}

/* СТОПКА (владелец 22.10, макет stack-mock «огонь»; stacks.js): верхняя карта, под ней края двух; в уголке —
 * веер из 3 карт и число кадров, при работе «2 из 5». Волны хода — свои у кадра, не меняются (00:40). */
.mf-stack-badge{position:absolute;z-index:3;left:50%;top:var(--space-2);transform:translateX(-50%);max-width:calc(100% - 7rem);padding:2px var(--space-2);border:1px solid var(--accent);border-radius:999px;background:var(--veil);color:var(--accent);font-size:var(--micro);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
[data-stack-top]{box-shadow:4px -4px 0 -1px color-mix(in oklch,var(--accent) 50%,var(--surface)),8px -8px 0 -2px color-mix(in oklch,var(--accent) 30%,var(--surface)),var(--shadow-card)}
[data-stack-top] .mf-frame-status{width:auto;padding-inline:var(--space-1)}
[data-stack-top] .mf-frame-status>:not(.mf-stack-chip){display:none}
.mf-stack-chip{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-size:var(--micro);font-weight:600;white-space:nowrap}
.mf-stack-fan{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.mf-stack-fan .is-front{fill:color-mix(in oklch,var(--accent) 14%,black)}