/* core/home/home_styles.css — стили SPA-shell главной (154-N → 178-2Н).
   ¬в @layer — нужен приоритет над viewer/style.css (anonymous layer) для override
   .cat-title display, .slide-toolbar grid и т.д. на главной.

   178-2Н: tablist + chip-row + ⌘K placeholder удалены.
   Header = одна строка: brand-SVG + text + search + 2 combobox (категория, раздел).
   Combobox styling — в core/components/combobox/combobox.css. */

/* ═══ Body / shell ═══ */
.home-body {
    background: var(--bg-color, #05020a);
    color: var(--text-main);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    /* 178-2.8Н: zero body padding на главной. core/viewer/style.css задаёт
       `body { padding: var(--safe-margin) }` (≈45px) для слайдов — на home
       galery sticky-header должен прижиматься к viewport edge без
       лишнего зазора. .home-main даёт собственный compact padding. */
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    /* tokens.css задаёт `body { overflow: hidden }` для слайдов (No Scroll контракт R05).
       На главной с галереей контент длиннее viewport — нужен вертикальный скролл. */
    overflow-y: auto;
    overflow-x: hidden;
    /* 171-2Н: CSS-переменная для sticky-stack top-bar; 178-2Н: --chips-h удалён вместе с chip-row. */
    --topbar-h: 48px;
}

/* tokens.css рисует body::before/::after blob 60vw × 60vw без opacity-cap.
   На главной они перекрывают контент → приглушаем до фона-акцента. */
.home-body::before,
.home-body::after {
    opacity: 0.08;
}

/* 171-4Н: smooth-scroll + a11y reduced-motion fallback. */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ═══ Контейнер главной ═══ */
.home-main {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(8px, 1.5vh, 16px) clamp(16px, 2.5vw, 40px) clamp(40px, 5vh, 64px);
}

/* ═══ Top-bar sentinel (178-2.7Н) ═══
   1px-высоты маркер ПЕРЕД sticky-header'ом. IntersectionObserver
   слушает его: когда sentinel scrolled past viewport top
   (¬isIntersecting) → header получает .is-stuck → square top corners
   + усиленная тень для visual integration с viewport edge. */
.home-topbar-sentinel {
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* ═══ Top-bar (178-2Н v3: единый rhythm + optical compensation) ═══
   `--topbar-rhythm` — единый token horizontal spacing (gap + padding-inline
   + margin-bottom). Vertical padding меньше — optical compensation за
   font line-height whitespace («1T SLIDE DESIGN» caps-height ≈ 12px при
   line-height 16.8px → numerical 16px vertical padding выглядит больше
   16px horizontal). R07 § «Оптическое исключение» (OPTICAL-комментарий ниже). */
.home-topbar {
    --topbar-rhythm: var(--space-md, 16px);

    position: sticky;
    top: 0;
    z-index: var(--z-header, 50);
    display: flex;
    align-items: center;
    gap: var(--topbar-rhythm);
    /* OPTICAL: padding-inline компенсирует разницу высот brand text (~17px)
       vs topbar (search 32px + padding-block) → visible-left brand = visible-top
       brand. Numerical 12 / 20 = visual ~20 / ~20 равенство 178-2.17Н.
       (Старая логика «vertical < horizontal» описывала только numerical
       padding, игнорируя что brand-text меньше search-height в flex center). */
    padding: var(--space-ms, 12px) 20px;
    /* 178-2.16Н: margin-bottom = section→section gap (`.slides-grid.has-sections`)
       — единый vertical rhythm: topbar→first-cards = section→section. ¬связан
       с horizontal --topbar-rhythm (16px), который остаётся для inline gap. */
    margin: 0 0 clamp(20px, 3vh, 28px);
    /* 190-10Н: Surface tokens — single source of truth (tokens.css). Изменить
       gradient/border/radius/shadow для всех card+panel surfaces одновременно через tokens. */
    background: var(--surface-raised-bg);
    -webkit-backdrop-filter: var(--blur-md);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--surface-card-radius);
    box-shadow: var(--surface-shadow-raised);
    /* 178-2.7Н: smooth corner+shadow transition при активации sticky-state.
       border-radius дискретно меняется через .is-stuck modifier. */
    transition: border-radius 0.2s ease, box-shadow 0.2s ease;
}

/* 178-2.7Н: stuck-state — header прижат к viewport top.
   Square top corners ∴ интегрирация с viewport edge (¬"карточка в воздухе"
   с воздухом сверху). Усиленная тень для дополнительного separation
   от scrolled cards под header'ом. */
.home-topbar.is-stuck {
    border-radius: 0 0 var(--surface-card-radius) var(--surface-card-radius);
    box-shadow:
        0 16px 40px -8px rgba(var(--black-rgb), 0.7),
        0 4px 12px rgba(var(--black-rgb), 0.4);
}

/* ═══ Brand: SVG-logo + text (178-2Н v3) ═══
   Solid white — консистентно с текстом combobox triggers (var(--text-main)).
   Логотип через CSS mask наследует тот же color. */
.home-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    font-size: 1.05rem; /* baseline для logo height: 1em */
    color: var(--text-main);
}

.home-brand-logo {
    display: inline-block;
    flex-shrink: 0;
    height: 1em;
    /* SVG aspect 120:100 = 1.2 */
    width: calc(1em * 1.2);
    background: currentColor;
    -webkit-mask: url('../assets/logo.svg?v=178-2') no-repeat center / contain;
    mask: url('../assets/logo.svg?v=178-2') no-repeat center / contain;
}

.home-brand-text {
    font-family: 'Play', sans-serif;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: inherit;
    white-space: nowrap;
}

/* 178-2Н: search input — без ⌘K shortcut, просто placeholder */
.home-topbar-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-md, 14px);
    background: rgba(var(--text-main-rgb, 255 255 255), 0.04);
    border: 1px solid rgba(var(--text-main-rgb, 255 255 255), 0.1);
    border-radius: var(--radius-xs, 8px);
    color: var(--text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    outline: none;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.home-topbar-search::placeholder {
    color: rgba(var(--text-main-rgb, 255 255 255), 0.5);
}

.home-topbar-search:hover {
    background: rgba(var(--text-main-rgb, 255 255 255), 0.06);
}

.home-topbar-search:focus {
    background: rgba(var(--text-main-rgb, 255 255 255), 0.08);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.15);
}

/* ═══ Category + Section combobox containers ═══
   Combobox styling — в combobox.css. Здесь — только positioning. */
.home-category-select,
.home-section-select {
    flex-shrink: 0;
}

.home-category-select[hidden] {
    display: none;
}

/* 207-4Н: home topbar combobox popup — расширение под content + viewport-aware anchor.
   Корень: 201-5Н сделал canonical .slide-combobox__listbox width=trigger
   (overflow guard для side-menu icon-buttons), но gallery topbar категории
   («Радиальные»/«Интерактив», 10 chars) ¬помещаются в trigger=86px.
   Scoped override:
   — Desktop (≥601px): right-anchored (trigger в правом верхнем углу, растёт влево).
   — Mobile (≤600px): left-anchored (.home-topbar flex-wrap → trigger переезжает
     в левую часть 2-го ряда; right-anchor дал бы popup.left<0, viewport clip). */
.home-category-select .slide-combobox__listbox,
.home-section-select .slide-combobox__listbox {
    width: max-content;
    min-width: 100%;
    max-width: min(280px, 90vw);
    left: auto;
    right: 0;
}
@media (max-width: 600px) {
    .home-category-select .slide-combobox__listbox,
    .home-section-select .slide-combobox__listbox {
        left: 0;
        right: auto;
    }
}

/* ═══ Action button slot (178-4Н → 178-2.9Н redesign) ═══
   Peer-level navigation surface — same visual tier как search/combobox.
   Glass-фон + thin contour + tonal hover-accent (Material 3 Tonal /
   Fluent Subtle pattern). ¬filled CTA: action происходит ВНУТРИ panel
   «Мои презентации», ¬над ней; topbar = navigation, ¬action emphasis. */
.home-action-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-md, 14px);
    /* Match .home-topbar-search base — same surface tier */
    background: rgba(var(--text-main-rgb, 255 255 255), 0.04);
    color: var(--text-main);
    border: 1px solid rgba(var(--text-main-rgb, 255 255 255), 0.1);
    border-radius: var(--radius-xs, 8px);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.home-action-btn:hover {
    background: rgba(var(--text-main-rgb, 255 255 255), 0.06);
}
.home-action-btn:focus-visible,
.home-action-btn:focus {
    outline: none;
    background: rgba(var(--text-main-rgb, 255 255 255), 0.08);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.15);
}
.home-action-btn[hidden] {
    display: none;
}

/* ═══ Panels ═══ */
[role="region"][hidden] { display: none; }

/* ═══ Section gap (171-3Н). Anchors data-cat сохраняются для smooth-scroll. ═══ */
.home-panel--types .slides-grid.has-sections {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 28px);
}

.home-panel--types .cat-section { margin-bottom: 0; }

/* 178-2Н: scroll-margin-top — только top-bar (chip-row удалён). */
.home-panel--types .cat-section {
    scroll-margin-top: calc(var(--topbar-h, 48px) + 12px);
}

/* ═══ Сетка карточек (171-3Н: densification 260→220, 5→7 cols on 1920w) ═══ */
.home-panel--types .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(12px, 1.5vw, 18px);
    padding: 0;
}

/* ═══ Карточка слайда — переопределение для главной (171-3Н: compact) ═══ */
.home-panel--types .slide-card {
    display: flex;
    flex-direction: column;
    /* 178-2.15Н: landscape aspect (¬квадрат). min-height нижняя защита от
       degenerate высоты при коротком content, ¬форсирует квадрат. Контент
       (h3 + clamp-3 p) обычно даёт ~140-150px при ширине ~220-240px →
       aspect ratio ~1.5-1.7 (rectangular). */
    min-height: 120px;
    padding: clamp(16px, 2vh, 20px);
    /* 190-10Н: tokens — единый source of truth для card surface visual language */
    background: var(--surface-card-bg);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--surface-card-radius);
    box-shadow: var(--surface-shadow);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s, box-shadow 0.25s, background 0.25s;
    overflow: hidden;
    text-decoration: none;
}

.home-panel--types .slide-card:hover {
    transform: translateY(-4px);
    /* 190-10Н: hover-state tokens — blue-glow rim + raised bg gradient. */
    border-color: var(--surface-border-accent);
    box-shadow: var(--surface-shadow-hover);
    background: var(--surface-card-bg-hover);
}

/* Override base ::before stripe из viewer/style.css — на главной gallery
   hover-state читается через blue-glow border, top-stripe избыточен. */
.home-panel--types .slide-card::before,
.home-panel--types .slide-card:hover::before {
    content: none;
}

/* Заголовок карточки — компактный, читаемый (171-3Н: 1.05→0.95rem, margin 12→8px) */
.home-panel--types .slide-card h3 {
    font-family: 'Play', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-main);
    margin: 0 0 8px;
    line-height: 1.25;
}

/* Описание — clamp-3 (171-3Н: 0.85→0.78rem, line-clamp 4→3) */
.home-panel--types .slide-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(var(--text-main-rgb, 255 255 255), 0.6);
    font-weight: 400;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card hidden by filter */
.home-panel--types .slide-card.is-hidden,
.home-panel--types .cat-section.is-hidden { display: none; }

/* cat-title скрыт (171-3Н) — категория видна через активный chip ∨ combobox value */
.home-panel--types .cat-title { display: none; }

/* ═══ Список презентаций (178-4Н: визуальный паритет с .home-panel--types) ═══
   Header (heading + createBtn) убран в 178-4Н — section combobox в topbar показывает
   «Мои презентации», а Create button перенесён в topbar action-slot
   (.home-action-btn). Карточки унифицированы по высоте с .slide-card в типах
   (R09 reservation pattern: min-height + clamp-2 на title для предсказуемого ritual). */
.home-pres-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}

.home-pres-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Симметрия с .home-panel--types .cat-grid: minmax 220px + same gap clamp.
       Card density консистентна между секциями. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(12px, 1.5vw, 18px);
}

.home-pres-empty {
    color: rgba(var(--text-main-rgb, 255 255 255), 0.5);
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-xl, 40px) var(--space-md, 16px);
}

.home-pres-item {
    /* 178-2.13Н: relative для абсолютного позиционирования delete-button
       поверх карточки. flex inherited для растяжения child-card на full width. */
    position: relative;
    display: flex;
}

.home-pres-card {
    /* R09 reservation pattern: фиксированный min-height + flex column для
       предсказуемого ritual'а высоты. 178-2.13Н: justify-content flex-start
       (top-anchored) — content ¬скачет вертикально между карточками с разной
       длиной title/meta. Symmetric с slide-card top-anchored layout.
       190-10Н: tokens — sync с .slide-card surface visual language. */
    width: 100%;
    min-height: 100px;
    text-align: left;
    background: var(--surface-card-bg);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--surface-card-radius);
    box-shadow: var(--surface-shadow);
    color: var(--text-main);
    /* 178-2.14Н: uniform padding на 4 стороны для визуальной симметрии.
       Delete-button — absolute поверх content (¬в потоке), резерв под него
       вынесен в `.home-pres-card-title { padding-right }` (только title
       пересекается с кнопкой по Y; meta лежит ниже delete-button bottom edge). */
    padding: clamp(16px, 2vh, 20px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    font-family: inherit;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

/* 178-2.13Н: delete-button per card — subtle icon top-right, появляется
   ярче при hover карточки. Click → ConfirmDialog (¬browser confirm). */
.home-pres-card-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--text-main-rgb, 255 255 255), 0.04);
    border: 1px solid rgba(var(--text-main-rgb, 255 255 255), 0.08);
    border-radius: var(--radius-xs, 8px);
    color: rgba(var(--text-main-rgb, 255 255 255), 0.5);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.15s, border-color 0.15s, color 0.15s;
    z-index: 1;
}

.home-pres-item:hover .home-pres-card-delete,
.home-pres-item:has(.is-delete-target) .home-pres-card-delete,
.home-pres-card-delete:focus-visible,
.home-pres-card-delete:focus {
    /* 208-1Н: delete-icon visible когда confirm активен (`:has()` Baseline 2024). */
    opacity: 1;
}

.home-pres-card-delete:hover {
    background: rgba(var(--accent-primary-rgb), 0.16);
    border-color: rgba(var(--accent-primary-rgb), 0.45);
    color: var(--accent-primary);
}

.home-pres-card-delete:focus-visible,
.home-pres-card-delete:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.25);
}

.home-pres-card-delete .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.home-pres-card:hover,
.home-pres-card.is-delete-target,
.home-pres-item:has(.home-pres-card-delete:hover) .home-pres-card {
    /* 208-1Н: .is-delete-target — persistent highlight пока confirm-dialog
       открыт (курсор уходит на modal → :hover теряется → пропадает контекст
       «какую карточку удаляешь»). Class добавляется/снимается в home_tabs.js
       вокруг ConfirmDialog.open().
       208-2Н: hover на trash-icon (sibling .home-pres-card-delete) тоже подсвечивает
       card. CSS не имеет backward-sibling combinator → :has() на parent (Baseline
       2024). Закрывает gap: trash-icon hover ≠ card hover, sibling lookup нужен. */
    transform: translateY(-4px);
    border-color: var(--surface-border-accent);
    box-shadow: var(--surface-shadow-hover);
    background: var(--surface-card-bg-hover);
}

.home-pres-card-title {
    font-family: 'Play', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin: 0;
    /* 178-2.14Н: резерв под delete-button (28px + 10px right offset + 4px gap)
       — только на title, ∵ delete-button по Y перекрывает только первую строку. */
    padding-right: var(--space-xl, 40px);
    /* clamp-2 для одинаковой высоты карточек в grid (R09 reservation). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-pres-card-meta {
    color: rgba(var(--text-main-rgb, 255 255 255), 0.5);
    font-size: 0.78rem;
    line-height: 1.55;
    /* meta single-line — clip overflow через ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══ Витринный shell (один тип) ═══ */
.home-type-view {
    position: fixed;
    inset: 0;
    background: var(--bg-color, #05020a);
}

.home-type-view[hidden],
.home-main[hidden] { display: none; }

#homeTypeFrame {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-color, #05020a);
}

/* ═══ View Transitions (Baseline Oct 2025) ═══ */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 200ms;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ═══ Mobile adaptive (178-2Н: brand+section row1 / search+category row2 — 2 rows ≤ 130px) ═══ */
@media (max-width: 600px) {
    .home-body {
        --topbar-h-mobile: 130px;
    }
    .home-main { padding: 8px 12px clamp(40px, 5vh, 64px); }
    .home-topbar {
        /* Mobile: тот же rhythm token, переопределяем чтобы fit на 360w */
        --topbar-rhythm: var(--space-sm, 8px);
        flex-wrap: wrap;
    }
    .home-brand { font-size: 0.95rem; }
    .home-brand {
        order: 1;
    }
    .home-section-select {
        order: 2;
        margin-left: auto; /* row 1 right-aligned */
    }
    .home-topbar-search {
        flex: 1 1 auto;
        min-width: 0;
        order: 3;
    }
    .home-category-select {
        order: 4;
        flex-shrink: 0;
    }
    /* На mobile combobox возвращается к touch-min (≥48px) — a11y WCAG 2.5.8 */
    .home-section-select.is-compact,
    .home-category-select.is-compact {
        --combobox-h: var(--touch-min);
    }
    /* Compact-mode mobile chevron + label tightening — fit 2 combobox + search ≤ 360w */
    .home-section-select.is-compact .slide-combobox__trigger,
    .home-category-select.is-compact .slide-combobox__trigger {
        padding: 0 var(--space-sm);
        font-size: var(--fs-step--1);
    }
    /* Grid 2 cols на 360w. */
    .home-panel--types .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }
    .home-panel--types .slide-card {
        padding: 14px;
        min-height: 130px;
    }
    .home-panel--types .slide-card h3 { font-size: 0.88rem; margin: 0 0 6px; }
    .home-panel--types .slide-card p { font-size: 0.72rem; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Super-narrow fallback (<360w, для viewports типа 320×568 iPhone SE-1): 1 col. */
@media (max-width: 320px) {
    .home-panel--types .cat-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══ 197-1Н: Shell-side SideMenu push paradigm для gallery shell ═══
   Sym editor.css line 47-62 (193-1Н canon). ¬transition на viewport
   → GPU translateX panel + content snap (низкая нагрузка GPU).
   Reuse `--editor-panel-menu-width` token: panel_widths_persist.js
   устанавливает на root, ¬зависит от body-class. Tech-debt rename
   `--editor-panel-menu-width` → `--shell-panel-menu-width` deferred
   на 197-6Н cleanup ∨ отдельная micro-серия (todo_197.md § 3.1). */
body.home-body .side-menu {
    width: var(--editor-panel-menu-width);
}
body.menu-pinned .home-type-view {
    right: var(--editor-panel-menu-width);
}

/* 205-8Н: default-hidden burger + sideMenu в gallery state (без ?type=).
   `html.is-type-route` class устанавливается в home_route_state.js до first paint
   (URL ¬type → класс ¬ставится → CSS hides). На SPA route change home_init.js
   toggle'ит класс reactively (popstate + home-route-changed).

   !important нужен потому что .burger-menu-btn { display: flex } имеет higher
   specificity → стандартный display:none без !important перебивается. См. R13.1
   lesson 205-7Н: «destructive primitive (.remove) ломал SPA reversibility».
   Defense-in-depth: CSS гарантирует state ¬depends от JS execution timing. */
html:not(.is-type-route) #sideMenuBurgerBtn,
html:not(.is-type-route) #sideMenu {
    display: none !important; /* OPTICAL: 205-8Н gallery showcase ¬needs SideMenu affordance */
}