/* ОКНО ПРОСМОТРА — вид домена viewer (20.10 макет v3; 21.10 макет viewer3 с поправкой владельца).
 *
 * Тёмный полный экран, картинка занимает всё место. Раскладка — как у карточки фрейма: слева сверху значок состояния
 * (тот же значок, цвет `--pub-*` из frames.css по data-pub-state и то же действие) и номер; справа сверху «Такую же»
 * (оранжевая, под ней пропорция и зерно) и «Вариация», разделитель, кнопки карточки, закрыть — в углу; слева снизу
 * цифры и автор, под ними миниатюры. Середина снимка свободна. У каждой кнопки своя плашка с размытием — читается на
 * любом снимке. Кнопки — не меньше пальца (`--tap`). */
.mf-v{--v-plate:rgba(14,16,15,.66);--v-line:rgba(220,244,236,.22);--v-fg:var(--on-dark);background:rgba(6,8,7,.96);padding:0;place-items:stretch}
.mf-v-stage{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:var(--space-4) calc(var(--tap) + var(--space-6))}
.mf-v-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--ui-radius);box-shadow:0 18px 60px rgba(0,0,0,.55)}

.mf-v-btn{backdrop-filter:blur(var(--blur-modal));-webkit-backdrop-filter:blur(var(--blur-modal));display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:var(--tap);height:var(--tap);padding:0 var(--space-3);border-radius:var(--tap);border:1px solid var(--v-line);background:var(--v-plate);color:var(--v-fg);cursor:pointer;transition:background var(--dur-3),border-color var(--dur-3)}
.mf-v-btn[hidden]{display:none}
.mf-v-btn:hover,.mf-v-btn:focus-visible{background:rgba(14,16,15,.86);border-color:rgba(220,244,236,.45)}
.mf-v-btn svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf-v-btn .mf-icon{color:currentColor}
.mf-v-btn[aria-disabled="true"]{cursor:default;opacity:.55}

.mf-v-close{position:absolute;top:var(--space-4);right:var(--space-4);padding:0}
.mf-v-nav{position:absolute;top:50%;transform:translateY(-50%);padding:0;width:var(--tap)}
.mf-v-nav--prev{left:var(--space-4)}
.mf-v-nav--next{right:var(--space-4)}


.mf-v-info{position:absolute;top:var(--space-4);left:var(--space-4);display:flex;align-items:center;gap:var(--space-2);color:var(--v-fg);font-size:var(--small)}
.mf-v-count{padding:var(--space-1) var(--space-3);border-radius:var(--tap);background:var(--v-plate);font-variant-numeric:tabular-nums;opacity:.85}
.mf-v-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--tap);min-width:var(--tap);padding:0 var(--space-3);border-radius:var(--tap);border:1px solid var(--v-line);background:var(--v-plate);color:var(--v-fg);font:inherit;white-space:nowrap;cursor:pointer}
.mf-v-chip[hidden],.mf-v-stat[hidden],.mf-v-author[hidden]{display:none}
.mf-v-chip[data-pub-state]{background:var(--pub-bg);color:var(--pub-fg);border-color:transparent;box-shadow:var(--shadow-pub)}
.mf-v-chip[data-pub-state] .mf-icon{color:var(--pub-fg)}
.mf-v-chip[data-pub-state] .mf-ic-knock{color:var(--pub-bg)}
.mf-v-chip[data-pub-state]:hover,.mf-v-chip[data-pub-state]:focus-visible{filter:brightness(1.08)}
.mf-v-chip[data-pub-state="review"]{animation:mf-review-breath 2.4s ease-in-out infinite}
.mf-v-chip:is([data-pub-state="private"],[data-pub-state="face"]){border-color:var(--v-line)}
.mf-v-chip .mf-status-word{max-width:none;opacity:1;margin:0;font-weight:var(--fw-title)}
.mf-v-chip[aria-disabled="true"],.mf-v-chip:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){.mf-v-chip[data-pub-state="review"]{animation:none}}

.mf-v-top{position:absolute;top:var(--space-4);right:calc(var(--tap) + var(--space-4) + var(--space-2));display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--space-2);max-width:calc(100% - 320px)}
.mf-v-cta{backdrop-filter:blur(var(--blur-modal));-webkit-backdrop-filter:blur(var(--blur-modal));display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--tap);min-width:112px;padding:0 var(--space-4);border-radius:var(--ui-radius);border:1px solid var(--v-line);background:var(--v-plate);color:var(--v-fg);cursor:pointer;font:inherit;line-height:1.2}
.mf-v-cta[hidden]{display:none}
.mf-v-cta b{font-weight:var(--fw-title)}
.mf-v-cta small{white-space:nowrap;color:inherit;font-size:var(--small);opacity:.85;font-variant-numeric:tabular-nums}
.mf-v-cta:hover{border-color:rgba(220,244,236,.45)}
.mf-v-cta--main{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-gold)}
.mf-v-cta--main small{opacity:1;font-weight:var(--fw-title)}
.mf-v-cta--main:hover{background:color-mix(in srgb,var(--accent-strong) 86%,#000);border-color:color-mix(in srgb,var(--accent-strong) 86%,#000)}
.mf-v-sep{width:1px;height:28px;margin:0 var(--space-1);background:var(--v-line)}
.mf-v-danger:hover svg,.mf-v-danger:focus-visible svg{color:var(--icon-danger)}

.mf-v-ribbon{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;padding:0 var(--space-5) var(--space-5);max-width:100%;pointer-events:none}
.mf-v-ribbon>*{pointer-events:auto}
.mf-v-left{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.mf-v-stats{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0;max-width:100%;color:var(--v-fg);font-size:var(--small)}
.mf-v-stat{display:inline-flex;align-items:center;gap:var(--space-1);min-height:28px;padding:0 var(--space-3);border-radius:var(--tap);border:1px solid var(--v-line);background:var(--v-plate);color:var(--v-fg);font:inherit;white-space:nowrap}
.mf-v-stat svg{width:16px;height:16px}
.mf-v-like{color:var(--like);cursor:pointer}
.mf-v-like[aria-disabled="true"]{cursor:default}
.mf-v-author{min-height:28px;display:inline-flex;align-items:center;padding:0 var(--space-3);border-radius:var(--tap);background:var(--v-plate);color:var(--v-fg);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mf-v-author:hover{text-decoration:underline}
.mf-v-thumbs{display:flex;gap:var(--space-2);min-width:0}

.mf-v-similar{display:flex;flex-direction:column;gap:var(--space-1)}
.mf-v-similar[hidden]{display:none}
.mf-v-similar-title{margin:0;color:var(--v-fg);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase;opacity:.75}
.mf-v-similar-row{display:flex;gap:var(--space-2)}
.mf-v-sim{display:flex;flex-direction:column;gap:var(--space-1);width:calc(var(--tap) * 1.5);color:var(--v-fg);text-decoration:none;font-size:var(--micro)}
.mf-v-sim img{width:100%;height:calc(var(--tap) * 1.5);object-fit:cover;border-radius:var(--ui-radius);border:2px solid rgba(220,244,236,.3);box-shadow:var(--shadow-pub)}
.mf-v-sim span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}
.mf-v-sim:hover img{border-color:rgba(220,244,236,.6)}
.mf-v-thumbs[hidden]{display:none}
.mf-v-thumb{width:calc(var(--tap) * 1.5);height:calc(var(--tap) * 1.5);padding:0;border:2px solid rgba(220,244,236,.3);border-radius:var(--ui-radius);background:var(--v-plate);overflow:hidden;cursor:pointer;opacity:.75;box-shadow:var(--shadow-pub);transition:opacity var(--dur-3),border-color var(--dur-3)}
.mf-v-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mf-v-thumb:hover{opacity:.9}
.mf-v-thumb.is-active{opacity:1;border-color:var(--accent)}

@media(max-width:640px){
  .mf-v-stage{padding:calc(var(--tap) * 2 + var(--space-5) + var(--space-2)) 0 calc(var(--tap) * 2 + var(--space-4))}
  .mf-v-nav{top:calc(50% - var(--tap))}
  .mf-v-nav--prev{left:var(--space-2)}
  .mf-v-nav--next{right:var(--space-2)}
  .mf-v-close{top:var(--space-2);right:var(--space-2)}
  .mf-v-info{top:var(--space-2);left:var(--space-2)}
  /* Вторая строка сверху: «Такую же» и «Вариация» пополам, под ними кнопки карточки. */
  .mf-v-top{top:calc(var(--tap) + var(--space-3));left:var(--space-2);right:var(--space-2);max-width:none;justify-content:center}
  .mf-v-cta{flex:1 1 calc(50% - var(--space-2));min-width:0}
  .mf-v-top>.mf-v-sep:first-of-type{flex-basis:100%;height:0;margin:0;background:none}
  .mf-v-like,.mf-v-author{min-height:var(--tap);min-width:var(--tap);justify-content:center}
  .mf-v-ribbon{right:0;padding:0 var(--space-2) var(--space-2)}
  .mf-v-thumbs{justify-content:flex-start}
  .mf-v-thumb{width:var(--tap);height:var(--tap)}
  /* Похожее у других — только на широком: на телефоне место отдано снимку. */
  .mf-v-similar:not([hidden]){display:none}
}

/* КОЛОДА ПРЕСЕТА ЗА СНИМКОМ (владелец 21.10 19:00): остальные кадры запуска — картами под снимком; положение ставит
 * shared/deck (раскладка «колода»), здесь — вид. Верхняя карта — сам снимок. */
.mf-v-deck{position:absolute;z-index:0;pointer-events:none}
.mf-v-deck[hidden]{display:none}
.mf-v-deck-card{position:absolute;top:0;left:50%;width:100%;height:100%;border-radius:var(--ui-radius);background-size:cover;background-position:center;box-shadow:0 18px 50px rgba(0,0,0,.55);filter:brightness(.45) saturate(.8);transition:transform .35s ease}
.mf-v-deck-card.is-front{visibility:hidden}
.mf-v.is-deck .mf-v-stage{z-index:0}
.mf-v.is-deck .mf-v-img{position:relative;z-index:1}