/* ── Папка Библиотеки: лицо из обложек треков и виды ☰ ▦ ▣ ───────────────
   lib_folder_view.js, владелец 18.10. Файл грузится сразу после vault.css и
   вне @layer: перебивает слоёные правила шапки (в том числе `.detail-hero img
   { 140px }` телефона) и плиток. Цвета — только токены темы и полупрозрачные
   чёрный/белый поверх обложек: светлая и тёмная схемы берут своё. */

/* Мозаика: сетка 2×2 — та же, что у лейбла без картинки (.label-mosaic,
   vault.css); 3 обложки — большая слева и две справа, 2 — две половины. */
.detail-hero .cover-art.label-mosaic.fm-2,
.dl-card .cover > .label-mosaic.fm-2 { grid-template-rows: 1fr; }
.detail-hero .cover-art.label-mosaic.fm-3 > img:first-child,
.dl-card .cover > .label-mosaic.fm-3 > img:first-child { grid-row: 1 / span 2; }

/* Шапка папки: корень — .cover-art (200 / 140 / 96 точек задают прежние
   правила шапки), картинки — на всю его площадь. */
.detail-hero .cover-art.fv-face { position: relative; overflow: hidden; }
.detail-hero .cover-art.fv-face > img {
    display: block;
    width: 100%; height: 100%; object-fit: cover;
    min-width: 0; min-height: 0;
    border-radius: 0; box-shadow: none;
}
/* Треков с обложкой нет — прежний значок папки. */
.detail-hero .cover-art.fv-face.fv-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 54px; line-height: 1; color: var(--accent);
}
@media (max-width: 767px) {
    .detail-hero .cover-art.fv-face.fv-empty { font-size: 40px; }
}

/* Карточка папки в списке Библиотеки: мозаика на всю обложку, значок
   «папка» и × остаются поверх (они позже в разметке). Размер — явный:
   с одним inset WebKit (Safari, iPad, iPhone) не считал высоту сетки
   определённой, и картинка брала 100% высоты всей карточки — в клетке
   была увеличенная обрезка (ревью 18.10). */
.dl-card .cover > .label-mosaic {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 0; overflow: hidden;
}
.dl-card .cover > .label-mosaic > img {
    display: block;
    width: 100%; height: 100%; object-fit: cover;
    min-width: 0; min-height: 0;
}

/* Плитки папки: без своей обложки (или пока она грузится) — спокойная ♪ под
   картинкой; не загрузилась — картинка прячется, ♪ видна. Для диктора у ♪
   пустой текст (второй content; движок без этой записи берёт первый) —
   иначе имя плитки начиналось с «♪» (ревью 18.10). */
.fv-tiles .lib-tile-cover { isolation: isolate; }
.fv-tiles .lib-tile-cover::before {
    content: '♪';
    content: '♪' / '';
    position: absolute; inset: 0; z-index: -1;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; line-height: 1;
    color: var(--accent-text, var(--accent));
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.04));
}
.fv-tiles.lib-tiles-large .lib-tile-cover::before { font-size: 56px; }
/* Без наведения ▶ поверх обложки виден всегда и стоит на месте ♪ — там
   заглушка без знака, один спокойный фон. */
@media (hover: none) {
    .fv-tiles .lib-tile-cover::before { content: ''; }
}

/* ✕ «Убрать из папки» — рядом с плиткой, а не внутри role=button (диктор
   склеивал их имена, ревью 18.10): обёртка .fv-tile, ✕ — в её правом
   верхнем углу, т. е. в углу обложки, над ▶ (+1 — рамка плитки). С мышью —
   под курсором и с клавиатуры (Tab на ✕), на сенсорном экране — всегда.
   Наведение на ✕ — наведение на плитку: она не опускается, ▶ не гаснет. */
.fv-tile { position: relative; min-width: 0; display: flex; flex-direction: column; }
.fv-tile > .lib-tile { flex: 1 1 auto; }
.fv-tile:hover > .lib-tile { transform: translateY(-2px); border-color: var(--accent); }
.fv-tile:hover > .lib-tile .lib-tile-play { opacity: 1; }
.fv-tile:hover > .lib-tile-del { transform: translateY(-2px); }
.lib-tile-del {
    position: absolute; top: 7px; right: 7px; z-index: 1;
    width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); color: white;
    font: inherit; font-size: 14px; line-height: 1;
    cursor: pointer;
    opacity: 0; transition: opacity 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}
.fv-tile:hover .lib-tile-del,
.fv-tile:focus-within .lib-tile-del { opacity: 1; }
.lib-tile-del:hover { background: rgba(var(--danger-rgb, 220, 70, 70), 0.9); }
.lib-tile-del:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) {
    .lib-tile-del { opacity: 1; }
}
@media (hover: hover) {
    .fv-tile:not(:hover):not(:focus-within) .lib-tile-del { pointer-events: none; }
}
@media (pointer: coarse) {
    .lib-tile-del { top: 5px; right: 5px; width: 44px; height: 44px; font-size: 16px; }
    /* Переключатель вида папки — 44 × 44 под пальцем (в шапке папки кнопок
       меньше, чем у альбома, — ряд не ломается). */
    #folder-detail-hero .view-switch .view-btn,
    #folder-detail-viewbar .view-switch .view-btn { min-width: 44px; min-height: 44px; }
}

/* Телефон: крупные — одна колонка, иконки — две (у альбома 2 и 3: у плитки
   папки ещё ✕ и артист). Название — две строки, как у альбома. */
@media (max-width: 767px) {
    #folder-detail-files .lib-tiles-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #folder-detail-files .lib-tiles-large { grid-template-columns: minmax(0, 1fr); }
    #folder-detail-files .lib-tiles-compact .lib-tile-title { font-size: 13px; padding: 8px 10px 2px; }
    #folder-detail-files .lib-tiles-compact .lib-tile-meta { padding: 0 10px 10px; }
}

/* iPad вертикально: переключатель — над списком (#folder-detail-viewbar),
   копия в шапке спрятана, как у альбома (vault.css, .lib-view-bar). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #folder-detail-hero .view-switch { display: none; }
}