/* =====================================================================
   YAZME 2026 · ПАБЛИКИ «ОБЛОЖКА»
   Главная страница выбора сообщества.

   Правила файла:
   — ни одного нового цвета: всё выведено из токенов yazme-theme.css;
   — ни одного !important;
   — ни одного хардкоженного hex, кроме белого текста поверх обложки
     (обложка всегда тёмная по построению, независимо от темы сайта);
   — глобальный ресет НЕ делаем: предыдущая версия начиналась с
     `* { margin:0 }`, что сбрасывало всё подключённое раньше.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Обёртка
   --------------------------------------------------------------------- */
.pub26 {
    --pub-gap: 16px;
    --pub-pad: 16px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--pub-pad) calc(120px + var(--safe-bottom, 0px));
    color: var(--yz-text);
    font-family: var(--yz-font-ui);
}

/* Метка только для скринридера: визуально скрыта, но остаётся в дереве
   доступности (display:none её бы оттуда убрал). */
.pub26 .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   Поиск
   --------------------------------------------------------------------- */
.pub26-search {
    position: sticky;
    top: calc(var(--safe-top, 0px) + 56px);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 18px;
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-pill);
    box-shadow: var(--yz-shadow-md);
    transition: border-color .2s var(--yz-ease);
}
.pub26-search:focus-within { border-color: var(--yz-accent); }
.pub26-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--yz-muted); }
.pub26-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    font-size: 15.5px;
    color: var(--yz-text);
}
.pub26-search input::placeholder { color: var(--yz-muted); }
.pub26-search__clear {
    border: 0; background: none; cursor: pointer; padding: 4px;
    color: var(--yz-muted); font-size: 17px; line-height: 1; display: none;
}
.pub26-search.is-filled .pub26-search__clear { display: block; }

/* ---------------------------------------------------------------------
   Чипы категорий
   --------------------------------------------------------------------- */
.pub26-cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pub26-cats::-webkit-scrollbar { display: none; }
.pub26-cat {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-pill);
    background: var(--yz-surface);
    color: var(--yz-dim);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s var(--yz-ease), color .18s var(--yz-ease), border-color .18s var(--yz-ease);
}
.pub26-cat[aria-pressed="true"] {
    background: var(--yz-accent);
    border-color: var(--yz-accent);
    color: var(--yz-bg);
}
@media (hover: hover) {
    .pub26-cat:hover { border-color: var(--yz-border-strong); color: var(--yz-text); }
    .pub26-cat[aria-pressed="true"]:hover { color: var(--yz-bg); }
}

/* ---------------------------------------------------------------------
   Заголовок секции — подпись, а не полка
   --------------------------------------------------------------------- */
.pub26-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 2px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--yz-muted);
}
.pub26-label a,
.pub26-label span {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}
.pub26-label a { color: var(--yz-accent); }
.pub26-label span { color: var(--yz-muted); }

/* ---------------------------------------------------------------------
   Обложка: картинка либо мешевый градиент по --h
   --------------------------------------------------------------------- */
.pub26-art { position: relative; overflow: hidden; background: var(--yz-surface-2); }
.pub26-art__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Градиент-заглушка. Тон --h приходит из social_publics.cover_hue.
   Три радиальных пятна вместо linear-gradient: линейный градиент
   мгновенно читается как «заглушка», мешевый — как обложка. */
.pub26-art__mesh {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 95% at 12% 8%,   hsl(var(--h, 20) 60% 56% / .95), transparent 62%),
        radial-gradient(105% 105% at 88% 2%,  hsl(calc(var(--h, 20) + 34) 64% 48% / .85), transparent 58%),
        radial-gradient(95% 125% at 72% 104%, hsl(calc(var(--h, 20) - 30) 52% 30% / .95), transparent 62%),
        hsl(var(--h, 20) 34% 21%);
}
/* Зерно: без него градиент выглядит как дешёвый CSS-фон. */
.pub26-art__grain {
    position: absolute; inset: 0;
    opacity: .16;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pub26-art__glyph {
    position: absolute;
    right: -6%;
    top: -4%;
    font-size: 190px;
    line-height: 1;
    transform: rotate(-6deg);
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35));
    transition: transform .6s var(--yz-ease);
    user-select: none;
}
.pub26-art__shade {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 34%, rgba(8, 7, 6, .3) 58%, rgba(8, 7, 6, .88));
}

/* ---------------------------------------------------------------------
   ПОСТЕР
   --------------------------------------------------------------------- */
.pub26-stack { display: flex; flex-direction: column; gap: var(--pub-gap); }

.pub26-poster {
    position: relative;
    display: block;
    border-radius: var(--yz-r-xl);
    overflow: hidden;
    background: var(--yz-surface);
    box-shadow: var(--yz-shadow-lg);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform .35s var(--yz-ease);
}
@media (hover: hover) {
    .pub26-poster:hover { transform: translateY(-5px); }
    .pub26-poster:hover .pub26-art__glyph { transform: rotate(-2deg) scale(1.06); }
}
/* Ссылка-обёртка — контейнер позиционирования для плашек и заголовка.
   Без этого `bottom` отсчитывался бы от всей карточки вместе с нижней
   полосой, и описание налезало бы на аватар с кнопкой. */
.pub26-poster__link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}
.pub26-poster__link:focus-visible {
    outline: 2px solid var(--yz-accent);
    outline-offset: -4px;
}
.pub26-poster:focus-visible {
    outline: 2px solid var(--yz-accent);
    outline-offset: 3px;
}
.pub26-poster .pub26-art { aspect-ratio: 4 / 5; }

.pub26-poster__pills {
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.pub26-pill {
    padding: 5px 11px;
    border-radius: var(--yz-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(10, 10, 10, .36);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pub26-pill--live { background: var(--yz-success); border-color: transparent; }
.pub26-pill--gold { background: var(--yz-gold); border-color: transparent; color: var(--yz-bg-deep); }

.pub26-poster__text {
    position: absolute;
    left: 20px; right: 20px; bottom: 18px;
    z-index: 3;
    color: #fff;
}
.pub26-poster__cat {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .82;
}
.pub26-poster__name {
    margin: 8px 0 0;
    font-size: clamp(28px, 8.6vw, 44px);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: .99;
    text-wrap: balance;
}
.pub26-poster__desc {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.45;
    opacity: .86;
    max-width: 34ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Нижняя полоса карточки */
.pub26-poster__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--yz-surface);
    border-top: 1px solid var(--yz-border);
}
.pub26-avatar {
    position: relative;
    width: 42px; height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--yz-border);
    display: grid;
    place-items: center;
    font-size: 20px;
}
.pub26-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub26-avatar span { position: relative; z-index: 2; }

.pub26-poster__meta { flex: 1; min-width: 0; font-size: 12.5px; color: var(--yz-muted); line-height: 1.4; }
.pub26-poster__meta b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--yz-text);
}
.pub26-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.pub26-dot--live { background: var(--yz-success); }
.pub26-dot--warm { background: var(--yz-gold); }
.pub26-dot--cold,
.pub26-dot--empty { background: var(--yz-border-strong); }

/* На узком экране кнопка «Подписаться» съедает ширину и метаданные
   переносятся в три строки. Число записей — наименее важное из них. */
@media (max-width: 430px) {
    .pub26-poster__posts { display: none; }
    .pub26-sub { padding: 11px 16px; }
}

/* Кнопка подписки */
.pub26-sub {
    flex: 0 0 auto;
    padding: 11px 20px;
    border-radius: var(--yz-r-pill);
    border: 1px solid var(--yz-accent);
    background: transparent;
    color: var(--yz-accent);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s var(--yz-ease), color .18s var(--yz-ease), border-color .18s var(--yz-ease);
}
.pub26-sub[aria-pressed="true"] { border-color: var(--yz-border); color: var(--yz-muted); }
.pub26-sub[disabled] { opacity: .55; cursor: default; }
@media (hover: hover) {
    .pub26-sub:hover { background: var(--yz-accent); color: var(--yz-bg); }
    .pub26-sub[aria-pressed="true"]:hover { background: transparent; color: var(--yz-dim); }
}

/* ---------------------------------------------------------------------
   Мини-карточки «Вы состоите»
   --------------------------------------------------------------------- */
.pub26-mine {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pub26-mine::-webkit-scrollbar { display: none; }
.pub26-mini {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    border-radius: var(--yz-r-lg);
    overflow: hidden;
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    text-decoration: none;
    color: inherit;
    transition: transform .24s var(--yz-ease), border-color .24s var(--yz-ease);
}
@media (hover: hover) {
    .pub26-mini:hover { transform: translateY(-3px); border-color: var(--yz-border-strong); }
}
.pub26-mini .pub26-art { height: 82px; display: grid; place-items: center; }
.pub26-mini__emoji { position: relative; z-index: 2; font-size: 30px; }
.pub26-mini__body { padding: 10px 12px 12px; }
.pub26-mini__name {
    font-size: 13.5px; font-weight: 700; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub26-mini__sub { margin-top: 3px; font-size: 11.5px; color: var(--yz-muted); }
.pub26-mini__badge {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: var(--yz-r-pill);
    background: var(--yz-accent);
    color: var(--yz-bg);
    font-size: 11.5px; font-weight: 800;
    display: grid; place-items: center;
}

/* ---------------------------------------------------------------------
   Пустые состояния и «создать»
   --------------------------------------------------------------------- */
.pub26-empty {
    padding: 26px 22px;
    text-align: center;
    border: 1px dashed var(--yz-border-strong);
    border-radius: var(--yz-r-xl);
    color: var(--yz-dim);
}
.pub26-empty__emoji { font-size: 32px; }
.pub26-empty__title { margin-top: 10px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--yz-text); }
.pub26-empty__text { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--yz-muted); }
.pub26-empty .pub26-btn { margin-top: 15px; }

.pub26-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: var(--yz-r-pill);
    background: var(--yz-accent);
    color: var(--yz-bg);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s var(--yz-ease);
}
.pub26-btn:hover { background: var(--yz-accent-hi); }
/* У .pub26-btn стоит display:inline-flex, который сильнее встроенного
   [hidden]{display:none}. Без этой строки скрытая кнопка остаётся видимой. */
.pub26-btn[hidden] { display: none; }

.pub26-btn--ghost {
    background: transparent;
    border-color: var(--yz-border-strong);
    color: var(--yz-text);
}
.pub26-btn--ghost:hover { background: var(--yz-surface); }

/* ---------------------------------------------------------------------
   Скелетоны загрузки
   --------------------------------------------------------------------- */
.pub26-skel {
    height: 320px;
    border-radius: var(--yz-r-xl);
    background: var(--yz-surface-2);
    animation: yzSkel 1.3s var(--yz-ease) infinite;
}
@keyframes yzSkel { 0%, 100% { opacity: .55 } 50% { opacity: .85 } }

/* ---------------------------------------------------------------------
   Модалка создания клуба
   --------------------------------------------------------------------- */
.pub26-sheet {
    position: fixed; inset: 0;
    /* Выше дока: у .bottom-global-nav стоит z-index 999999, и при 9999
       нижняя кнопка шторки на телефоне уходила под панель навигации. */
    z-index: 1000000;
    display: flex; align-items: flex-end; justify-content: center;
    background: var(--yz-overlay);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s var(--yz-ease);
}
.pub26-sheet[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.pub26-sheet__card {
    width: 100%;
    max-width: 560px;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 22px 20px calc(28px + var(--safe-bottom, 0px));
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-xl) var(--yz-r-xl) 0 0;
    transform: translateY(100%);
    transition: transform .34s var(--yz-ease);
}
.pub26-sheet[aria-hidden="false"] .pub26-sheet__card { transform: translateY(0); }
.pub26-sheet__grip {
    width: 40px; height: 4px; margin: 0 auto 18px;
    border-radius: var(--yz-r-pill);
    background: var(--yz-border-strong);
}
.pub26-sheet__title { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.pub26-sheet__hint { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--yz-muted); }
.pub26-field { margin-bottom: 14px; }
.pub26-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--yz-muted);
}
.pub26-field input,
.pub26-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-md);
    background: var(--yz-surface-2);
    color: var(--yz-text);
    font: inherit;
    /* 16px — не меньше: на iOS поле с более мелким шрифтом заставляет
       Safari зумить страницу при фокусе. */
    font-size: 16px;
    outline: none;
    transition: border-color .18s var(--yz-ease);
}
.pub26-field textarea { min-height: 84px; resize: vertical; }
.pub26-field input:focus,
.pub26-field textarea:focus { border-color: var(--yz-accent); }
.pub26-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.pub26-sheet__actions { display: flex; gap: 10px; margin-top: 20px; }
.pub26-sheet__actions .pub26-btn { flex: 1; }

/* ---------------------------------------------------------------------
   Тост
   --------------------------------------------------------------------- */
.pub26-toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + var(--safe-bottom, 0px));
    transform: translate(-50%, 16px);
    z-index: 1000001;   /* поверх шторки */
    padding: 12px 20px;
    border-radius: var(--yz-r-pill);
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    box-shadow: var(--yz-shadow-lg);
    font-size: 14px;
    font-weight: 600;
    color: var(--yz-text);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--yz-ease), transform .22s var(--yz-ease);
}
.pub26-toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Планшет и ПК
   --------------------------------------------------------------------- */
@media (min-width: 760px) {
    .pub26 { --pub-pad: 28px; --pub-gap: 20px; }
    .pub26-label { padding: 32px 2px 14px; }
    .pub26-stack { display: grid; grid-template-columns: 1fr 1fr; }
    .pub26-poster .pub26-art { aspect-ratio: 16 / 11; }
    .pub26-poster--hero { grid-column: 1 / -1; }
    .pub26-poster--hero .pub26-art { aspect-ratio: 21 / 9; }
    .pub26-poster--hero .pub26-poster__name { font-size: clamp(40px, 5vw, 62px); }
    .pub26-poster--hero .pub26-poster__desc { font-size: 16px; max-width: 52ch; }
    .pub26-poster__name { font-size: clamp(28px, 3.2vw, 40px); }
    .pub26-art__glyph { font-size: 240px; }
    .pub26-mini { width: 172px; }
    .pub26-mini .pub26-art { height: 100px; }
    .pub26-mini__emoji { font-size: 38px; }
    .pub26-sheet { align-items: center; }
    .pub26-sheet__card { border-radius: var(--yz-r-xl); max-height: 84vh; }
}

/* ---------------------------------------------------------------------
   Уважение к настройкам системы
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pub26-poster,
    .pub26-mini,
    .pub26-art__glyph,
    .pub26-sheet,
    .pub26-sheet__card,
    .pub26-toast { transition: none; }
    .pub26-skel { animation: none; }
    @media (hover: hover) {
        .pub26-poster:hover { transform: none; }
        .pub26-mini:hover { transform: none; }
    }
}

/* =====================================================================
   ОБЛОЖКА НА СТРАНИЦЕ ПАБЛИКА (includes/public_cover.php)
   ===================================================================== */
.pubcover { position: relative; margin-bottom: -40px; }
/* Высотой, а не aspect-ratio: при `aspect-ratio` + `max-height` браузер
   ужимает ШИРИНУ, и обложка перестаёт быть во всю страницу. */
.pubcover .pub26-art {
    height: min(56vw, 300px);
    border-radius: 0 0 var(--yz-r-xl) var(--yz-r-xl);
}
.pubcover .pub26-art__glyph { font-size: 200px; }
/* Растворяем низ обложки в фоне страницы, чтобы шапка клуба
   ложилась на неё внахлёст без жёсткой границы. */
.pubcover__fade {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 42%, var(--yz-bg));
}
.pubcover__cat {
    position: absolute;
    left: 16px; top: calc(16px + var(--safe-top, 0px));
    z-index: 4;
    padding: 6px 13px;
    border-radius: var(--yz-r-pill);
    background: rgba(10, 10, 10, .38);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.pubcover__edit {
    position: absolute;
    right: 16px; top: calc(16px + var(--safe-top, 0px));
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--yz-r-pill);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(10, 10, 10, .42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s var(--yz-ease);
}
.pubcover__edit:hover { background: rgba(10, 10, 10, .62); }

.pubcover__preview {
    aspect-ratio: 16 / 9;
    border-radius: var(--yz-r-lg);
    border: 1px solid var(--yz-border);
}
.pubcover__preview .pub26-art__glyph { font-size: 120px; }

@media (min-width: 760px) {
    .pubcover .pub26-art { height: 340px; }
    .pubcover__cat, .pubcover__edit { top: calc(20px + var(--safe-top, 0px)); }
    .pubcover__cat { left: 28px; }
    .pubcover__edit { right: 28px; }
}

/* =====================================================================
   ШАПКА ПАБЛИКА (includes/public_header_2026.php)
   ===================================================================== */
.pubhead { position: relative; z-index: 4; }

.pubhead__panel {
    margin: 0 16px;
    padding: 20px;
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-xl);
    box-shadow: var(--yz-shadow-lg);
}
.pubhead__top { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }

/* Аватар перекрывает низ обложки — за это отвечает отрицательный
   margin у .pubcover, а здесь только рамка, чтобы был отбит от фона. */
.pubhead__avatar {
    position: relative;
    width: 72px; height: 72px;
    flex: 0 0 auto;
    border-radius: 23px;
    overflow: hidden;
    border: 1px solid var(--yz-border);
    display: grid;
    place-items: center;
    font-size: 32px;
    background: var(--yz-surface-2);
}
.pubhead__avatar img,
.pubhead__avatar .avatar {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.pubhead__avatar .avatar-fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 0;
    background: none;
}
.pubhead__avatar .avatar-fallback span { position: relative; z-index: 2; font-size: 32px; }

.pubhead__ident { flex: 1; min-width: 180px; }
.pubhead__name {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.1;
    color: var(--yz-text);
}
.pubhead__link {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--yz-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.pubhead__tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--yz-accent-soft);
    color: var(--yz-accent);
}
.pubhead__tag--own {
    background: var(--yz-surface-2);
    color: var(--yz-gold);
    border: 1px solid var(--yz-border);
}

.pubhead__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.pubhead__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--yz-r-pill);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s var(--yz-ease), color .2s var(--yz-ease), border-color .2s var(--yz-ease);
}
/* Та же история, что и у .pub26-btn: display:inline-flex сильнее
   встроенного [hidden]{display:none}, и скрытая кнопка «Подписаться»
   оставалась видимой у владельца. */
.pubhead__btn[hidden] { display: none; }
.pubhead__btn--primary { background: var(--yz-accent); color: var(--yz-bg); }
.pubhead__btn--primary:hover { background: var(--yz-accent-hi); }
.pubhead__btn--ghost {
    background: transparent;
    border-color: var(--yz-border-strong);
    color: var(--yz-text);
}
.pubhead__btn--ghost:hover { background: var(--yz-surface-2); }
.pubhead__btn--icon { padding: 12px 15px; }

.pubhead__desc {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--yz-dim);
    max-width: 70ch;
}
.pubhead__desc:empty { display: none; }

.pubhead__stats { display: flex; gap: 24px; margin-top: 17px; flex-wrap: wrap; }
.pubhead__stat b {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--yz-text);
}
.pubhead__stat b.is-live { color: var(--yz-success); }
.pubhead__stat b.is-dim  { font-size: 14px; color: var(--yz-dim); }
.pubhead__stat span { font-size: 11.5px; color: var(--yz-muted); }

.pubhead__bento {
    display: flex;
    gap: 9px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.pubhead__bento::-webkit-scrollbar { display: none; }
.pubhead__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 13px;
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-pill);
    background: var(--yz-surface-2);
    color: var(--yz-text);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s var(--yz-ease);
}
.pubhead__chip:hover { border-color: var(--yz-accent); }
.pubhead__chip > i { font-size: 15px; color: var(--yz-accent); }
.pubhead__chip b { display: block; font-size: 13px; font-weight: 700; }
.pubhead__chip span > i { display: block; font-size: 11px; font-style: normal; color: var(--yz-muted); }

.pubhead__tabs {
    display: flex;
    gap: 2px;
    margin: 22px 16px 0;
    border-bottom: 1px solid var(--yz-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.pubhead__tabs::-webkit-scrollbar { display: none; }
.pubhead__tab {
    position: relative;
    padding: 13px 15px;
    border: 0;
    background: transparent;
    color: var(--yz-muted);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pubhead__tab.is-active { color: var(--yz-text); }
.pubhead__tab.is-active::after {
    content: '';
    position: absolute;
    left: 15px; right: 15px; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--yz-accent);
}

@media (min-width: 760px) {
    .pubhead__panel { margin: 0 auto; max-width: 1020px; padding: 26px; }
    .pubhead__avatar { width: 92px; height: 92px; border-radius: 28px; }
    .pubhead__avatar .avatar-fallback span { font-size: 42px; }
    .pubhead__name { font-size: 30px; }
    .pubhead__tabs { max-width: 1020px; margin-inline: auto; }
}

/* =====================================================================
   ПРОКРУТКА СТРАНИЦЫ /publics.php
   ---------------------------------------------------------------------
   Сайт живёт в режиме приложения: assets/css/style.css строка 99 держит
   body с height:100dvh и overflow:hidden, а прокручивается не документ,
   а внутренний контейнер — так сделаны лента, профиль и мессенджер.
   На десктопе страницы дополнительно открываются внутри оболочки
   /shell (iframe), и прокрутка самого документа там до вьюпорта не
   доходит. Поэтому идём тем же путём, что и остальной сайт.
   ===================================================================== */
body.pub26-body { height: 100%; height: 100dvh; overflow: hidden; }
.pub26-scroll {
    height: 100%;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Прокрутка не «протекает» на оболочку, когда список кончился */
    overscroll-behavior-y: contain;
}
/* Поиск липнет к верху контейнера, а не документа */
.pub26-scroll .pub26-search { top: 8px; }

/* ---------------------------------------------------------------------
   Длинное описание: три строки + «Читать полностью»
   --------------------------------------------------------------------- */
.pubhead__desc.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pubhead__more {
    margin-top: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--yz-accent);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.pubhead__more[hidden] { display: none; }

/* =====================================================================
   МОДАЛКИ НАСТРОЕК И ИИ-АГЕНТА
   ---------------------------------------------------------------------
   Класс .pubmodal вешает JS (includes/public_engine_2026.php), он же
   снимает инлайновые style у заголовков секций — иначе их размер и цвет
   из атрибута перебить нельзя, а плодить !important не хочется.
   ===================================================================== */
.pubmodal .modal-card {
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-xl);
    box-shadow: var(--yz-shadow-lg);
    padding: 22px;
    max-width: 520px;
    width: calc(100% - 32px);
}
.pubmodal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--yz-text);
}
.pubmodal .btn-close {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border: 1px solid var(--yz-border);
    border-radius: 50%;
    background: var(--yz-surface-2);
    color: var(--yz-dim);
    font-size: 14px;
    cursor: pointer;
    transition: color .18s var(--yz-ease), border-color .18s var(--yz-ease);
}
.pubmodal .btn-close:hover { color: var(--yz-text); border-color: var(--yz-border-strong); }

/* Заголовок секции — тот же язык, что и на главной */
.pubmodal h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--yz-muted);
}

.pubmodal .admin-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-md);
    background: var(--yz-surface-2);
    color: var(--yz-text);
    font-family: var(--yz-font-ui);
    /* 16px — меньше нельзя: iOS зумит страницу при фокусе в поле */
    font-size: 16px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s var(--yz-ease);
}
.pubmodal .admin-input:focus { border-color: var(--yz-accent); }
.pubmodal .admin-input::placeholder { color: var(--yz-muted); }

.pubmodal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--yz-r-pill);
    font-family: var(--yz-font-ui);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s var(--yz-ease), border-color .2s var(--yz-ease);
}
.pubmodal .btn-primary { background: var(--yz-accent); color: var(--yz-bg); border-color: var(--yz-accent); }
.pubmodal .btn-primary:hover { background: var(--yz-accent-hi); }
.pubmodal .btn-secondary {
    background: var(--yz-surface-2);
    color: var(--yz-text);
    border-color: var(--yz-border);
}
.pubmodal .btn-secondary:hover { border-color: var(--yz-border-strong); }
.pubmodal .btn[disabled] { opacity: .6; cursor: default; }

.pubmodal select.admin-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--yz-dim) 50%),
                      linear-gradient(135deg, var(--yz-dim) 50%, transparent 50%);
    background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

/* Описание в настройках: в разметке стоит инлайновый min-height:80px,
   и текст в него не помещается. Инлайн перебить нельзя, но height из CSS
   действует — он больше минимума, поэтому поле просто становится выше. */
.pubmodal textarea.admin-input { height: 120px; }

/* ---------------------------------------------------------------------
   Монограмма вместо эмодзи-заглушки
   Клубы без категории раньше получали «✳️», который система рисует
   ядовито-зелёной звёздочкой — все такие карточки выглядели одинаково.
   Первая буква названия читается как знак клуба и не спорит с обложкой.
   --------------------------------------------------------------------- */
.pub26-art__glyph--letter {
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    font-family: var(--yz-font-display, var(--yz-font-ui));
    font-weight: 800;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
.pub26-poster:hover .pub26-art__glyph--letter { transform: translate(-50%, -50%) scale(1.05); }
.pub26-avatar span.is-letter,
.pub26-mini__emoji.is-letter,
.pubhead__avatar .avatar-fallback span.is-letter {
    font-weight: 800;
    color: rgba(255, 255, 255, .92);
    letter-spacing: -.02em;
}

/* =====================================================================
   ЗАКРЕПЛЁННЫЕ ЗАПИСИ
   ===================================================================== */
.pubpins { margin-top: 22px; }
.pubpins__label {
    padding: 0 16px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yz-muted);
}
.pubpins__rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pubpins__rail::-webkit-scrollbar { display: none; }
.pubpins__card {
    position: relative;
    flex: 0 0 auto;
    width: 168px;
    aspect-ratio: 4 / 5;
    border-radius: var(--yz-r-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 13px;
    text-decoration: none;
    border: 1px solid var(--yz-border);
    background: var(--yz-surface-2);
    transition: transform .24s var(--yz-ease);
}
@media (hover: hover) {
    .pubpins__card:hover { transform: translateY(-3px); }
}
.pubpins__shade {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 34%, rgba(8, 7, 6, .82));
}
.pubpins__title {
    position: relative;
    z-index: 2;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.32;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 760px) {
    .pubpins { max-width: 1020px; margin-inline: auto; }
    .pubpins__label, .pubpins__rail { padding-inline: 0; }
    .pubpins__card { width: 194px; }
}

/* --- Управление закреплёнными (видно только владельцу) --- */
.pubpins__item {
    position: relative;
    flex: 0 0 auto;
    transition: opacity .22s var(--yz-ease), transform .22s var(--yz-ease);
}
.pubpins__item.is-moved { transform: scale(1.04); }
.pubpins__item.is-going { opacity: .35; transform: scale(.94); }
.pubpins__tools {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    z-index: 3;
    /* На тач-экранах наводить нечем, поэтому кнопки видны всегда;
       на десктопе проявляются при наведении, чтобы не спорить с обложкой. */
    opacity: 1;
    transition: opacity .18s var(--yz-ease);
}
@media (hover: hover) {
    .pubpins__tools { opacity: 0; }
    .pubpins__item:hover .pubpins__tools,
    .pubpins__item:focus-within .pubpins__tools { opacity: 1; }
}
.pubpins__tools button {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(8, 7, 6, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s var(--yz-ease);
}
.pubpins__tools button:hover { background: rgba(8, 7, 6, .85); }
.pubpins__tools [data-pin-off]:hover { background: var(--yz-danger); }

/* Подсветка записи, если открыть модалку не удалось и мы просто
   доскроллили до неё в ленте. */
.is-flash { animation: yzFlash 1.6s var(--yz-ease); }
@keyframes yzFlash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    18%      { box-shadow: 0 0 0 3px var(--yz-accent); }
}

/* =====================================================================
   МОДЕРАЦИЯ
   ===================================================================== */
.pubblock {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 16px 16px;
    padding: 14px 16px;
    border: 1px solid var(--yz-danger);
    border-radius: var(--yz-r-lg);
    background: var(--yz-surface-2);
    font-size: 13.5px;
    line-height: 1.45;
}
.pubblock i { margin-top: 2px; color: var(--yz-danger); }
.pubblock b { display: block; margin-bottom: 3px; font-size: 14.5px; }
.pubblock span { display: block; color: var(--yz-dim); }
.pubblock__note { color: var(--yz-muted); }

.pubmod__state {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-md);
    background: var(--yz-surface-2);
    font-size: 13px;
    color: var(--yz-dim);
}
.pubmod__state.is-blocked { border-color: var(--yz-danger); color: var(--yz-text); }
.pubmod .pub26-btn { width: 100%; }
.pubmod__danger {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--yz-border);
}
.pubmod__danger-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--yz-danger);
}
.pubmod__danger-text {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--yz-muted);
}
.pub26-btn--danger {
    background: var(--yz-danger);
    color: #fff;
}
.pub26-btn--danger:hover { background: var(--yz-danger); filter: brightness(1.1); }
.pub26-btn:disabled { opacity: .45; cursor: not-allowed; }
.pub26-btn--danger:disabled:hover { filter: none; }

/* Шторка модерации длинная — на телефоне запас снизу, чтобы последняя
   кнопка не упиралась в док. */
.pubmod .pub26-sheet__card { padding-bottom: calc(36px + var(--safe-bottom, 0px)); }