/* Hashtag discovery page — современная media/discovery-поверхность ВНУТРИ canonical Layout 2.0.
   Заголовок «#Тег» + «Назад» даёт Context Bar шелла; Sidebar/.pnav/фон/скролл — общий Layout.
   Здесь ТОЛЬКО контент: sticky discovery-header (счётчик + фильтры + separator) + сетка превью.
   Адаптив desktop-first: phone 2 / tablet 3 / desktop 5. Theme-aware через КАНОНИЧЕСКИЕ DS-токены
   (ds-panel/ds-ink/ds-muted/ds-panel-bd/ds-shadow-2, флипаются по [data-theme]) — без своей
   theme-системы; акцент = бренд-оранжевый. Скролл-контейнер = #dcShellMain. */

/* Токены поверхности хэштега. Акцент = КАНОНИЧЕСКИЙ бренд-оранжевый Clike (--dc-color-brand,
   стабилен в обеих темах). Поверхности/текст/границы берём из общей DS theme-системы (--ds-*),
   поэтому hashtag discovery адаптируется к dark/light как остальной Clike — без своей theme-системы. */
.dc-tag-surface{ --tag-accent:#ff7a1f; }   /* фирменный бренд-оранжевый; АКЦЕНТ (не theme-surface) — стабилен в обеих темах */

/* Контент хэштега занимает всю canonical content-area: боковой padding владеет .dc-shell-content;
   у pub-main на этой поверхности его гасим. На ТЕЛЕФОНЕ сужаем gutter content-column до 8px —
   discovery-grid идёт почти на всю ширину (не «узкий desktop-контейнер внутри телефона»). */
.pub-main[data-pub-feed-source="hashtag"]{max-width:none;width:100%;margin:0;padding:0}
@media (max-width:767px){
  /* Discovery-grid почти на всю ширину телефона. На mobile СТАРЫЙ shell навешивает свой
     горизонтальный padding на .wrap И #dcShellMain (по 12px) ПОВЕРХ .dc-shell-content — суммарно
     ~32px, сетка «узкая». Нейтрализуем те же два источника ровно для tag (тем же приёмом, что
     §6.3 layout2-shell.css для legal/feed), делая .dc-shell-content единственным владельцем
     gutter'а (8px). Трогаем ТОЛЬКО padding-left/right — низ (#dcShellMain padding-bottom под .pnav)
     не затрагиваем. */
  /* §6.3-паттерн layout2-shell.css (как contests_public/stickers): единственный владелец
     горизонтального gutter'а = .dc-shell-content; .wrap/#dcShellMain по горизонтали = 0. Цепочка
     html/body + :not() даёт спецификацию (0,7,2) и симметрично бьёт mobile-shell .wrap-правило
     (0,6,1) с ОБЕИХ сторон. Вертикаль (низ #dcShellMain под .pnav) НЕ трогаем. */
  html body.user-mode.dc-has-sidebar.dc-tag-surface:not(.admin-mode):not(.auth-mode):not(.feed-v2-surface) .wrap,
  body.user-mode.dc-has-sidebar.dc-tag-surface #dcShellMain{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Единственный владелец горизонтального gutter'а на tag-mobile — .dc-shell-content (8px). */
  body.dc-tag-surface.dc-has-sidebar .dc-shell-content{ padding-left:8px; padding-right:8px; }
}

/* ── sticky discovery-header (info-block + tabs + separator): остаётся сверху скролл-контейнера
   (top:0 = верх #dcShellMain, сразу под Context Bar шелла), media уезжает под него. Бэкдроп
   прячет плитки. ПОЛНАЯ ширина рабочей области (max-width:none) → separator идёт от края до края,
   как единая панель навигации, а не блок по контенту. ── */
.tag-head{
  position:sticky; top:0; z-index:20;
  max-width:none; margin:0; padding:12px 0 0;
  /* Фон шапки = ПРОДОЛЖЕНИЕ canonical workspace-canvas Clike, а НЕ отдельный лист-подложка.
     Тот же градиент, что у .wrap/body (--l2-canvas; гость — тот же в public-feed-base), но с
     background-attachment:fixed → он заякорён к ВЬЮПОРТУ, ровно как canvas у .wrap (правый-верх .wrap
     = правый-верх вьюпорта). Поэтому В ПОКОЕ шапка бесшовно сливается с фоном (нет чёрного
     прямоугольника, тёплый glow канваса продолжается), А при скролле непрозрачно и ПОЛНОСТЬЮ
     перекрывает уезжающие плитки (media не просвечивает — проверено). Живёт только на высоту
     закреплённой шапки, вниз к grid НЕ тянется (grid прозрачен). */
  background:radial-gradient(circle at top right, #2b1600 0, #070707 36%, #050505 100%);   /* fallback = гость/dark canvas */
  background:var(--l2-canvas, radial-gradient(circle at top right, #2b1600 0, #070707 36%, #050505 100%));
  background-attachment:fixed;
}
@media (max-width:767px){ .tag-head{ padding-top:8px; } }

/* ── HASHTAG INFO CARD (эталон): отдельная премиальная тёмная карточка [# icon] · #Тег · N.
   Не плоский #111 — тёмный градиент + очень тонкая полупрозрачная граница + мягкая глубина
   (тень + inner highlight) + деликатный orange glow у иконки + еле заметный circuit-паттерн
   справа. Табы — ВНЕ карточки, ниже (см. .tag-tabs). ── */
.tag-id{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; gap:16px; min-width:0;
  margin:0 0 14px; padding:15px 18px; border-radius:18px;
  /* Базовая поверхность = КАНОНИЧЕСКИЙ DS-surface (--ds-panel: тёмный на dark, белый на light) —
     как СПЛОШНОЙ background-color (надёжно в обеих темах), а деликатный orange-glow — отдельным
     background-image. НЕ используем --ds-panel-grad в multilayer: он градиент на dark и СОЛИД на
     light, из-за чего `grad, #fff` делал весь shorthand невалидным → фон пропадал на light.
     Border/shadow — тоже DS-токены (theme-aware). */
  background-color:var(--ds-panel, #141416);
  background-image:radial-gradient(150% 120% at 7% 10%, color-mix(in srgb, var(--tag-accent) 13%, transparent), transparent 44%);
  border:1px solid var(--ds-panel-bd, rgba(255,255,255,.065));
  box-shadow:var(--ds-shadow-2, 0 12px 32px rgba(0,0,0,.44));
}
/* деликатный технологичный circuit/network-паттерн справа: только CSS/SVG, очень низкая
   opacity, слева замаскирован (не мешает тексту), pointer-events нет, за контентом. */
.tag-id::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120' viewBox='0 0 260 120' fill='none' stroke='%23ff7a1f' stroke-width='1.1'%3E%3Ccircle cx='60' cy='30' r='2.6'/%3E%3Ccircle cx='150' cy='20' r='2.6'/%3E%3Ccircle cx='232' cy='56' r='2.6'/%3E%3Ccircle cx='104' cy='86' r='2.6'/%3E%3Ccircle cx='196' cy='100' r='2.6'/%3E%3Cpath d='M60 30H150V20'/%3E%3Cpath d='M150 20H232V56'/%3E%3Cpath d='M60 30V86H104'/%3E%3Cpath d='M104 86H196V100'/%3E%3Cpath d='M232 56V100H196'/%3E%3C/svg%3E") no-repeat right center;
  opacity:.26;
  -webkit-mask-image:linear-gradient(90deg, transparent 40%, #000 92%);
          mask-image:linear-gradient(90deg, transparent 40%, #000 92%);
}
/* на LIGHT тот же рисунок, но приглушённее — не грязный техно-блок (тот же SVG, только opacity) */
html[data-theme="light"] .tag-id::after{ opacity:.14; }
.tag-id__mark, .tag-id__meta{position:relative; z-index:1}
/* иконка: плитка ПОД ТЕМУ (--ds-panel-2 с оранжевым подмесом) + оранжевая border/glow + КРУПНЫЙ
   ОРАНЖЕВЫЙ # с glow. На dark — тёмная плитка, на light — светлая; # и glow остаются фирменными. */
.tag-id__mark{
  flex:0 0 auto; width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; font-size:30px; font-weight:800; line-height:1;
  color:var(--tag-accent);
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tag-accent) 20%, var(--ds-panel-2, #12151c)), var(--ds-panel-2, #0d0f14) 82%);
  border:1.5px solid color-mix(in srgb, var(--tag-accent) 55%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--tag-accent) 26%, transparent),
             inset 0 0 14px color-mix(in srgb, var(--tag-accent) 12%, transparent);
  text-shadow:0 0 10px color-mix(in srgb, var(--tag-accent) 55%, transparent);
}
.tag-id__meta{min-width:0}
.tag-id__name{
  margin:0; font-size:clamp(19px,2.2vw,23px); font-weight:800; line-height:1.12;
  letter-spacing:-.01em; color:var(--ds-ink, #fff);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag-id__count{margin:5px 0 0; font-size:13px; line-height:1.2; color:var(--ds-muted, #8a94a6)}
@media (max-width:767px){
  .tag-id{gap:13px; padding:14px 15px; border-radius:16px; margin-bottom:12px}
  .tag-id__mark{width:52px; height:52px; border-radius:15px; font-size:28px}
  .tag-id__name{font-size:19px}
}

/* ── табы Популярное / Новое: ВНЕ карточки. Текстовые (без pill/background/border/рамки).
   Полноширинная muted baseline; поверх неё — оранжевый active-индикатор с лёгким glow. ── */
/* padding-left сдвигает ТАБЫ вправо (по линии внутреннего контента карточки, ~18px), а baseline
   (::after, left:0) остаётся на всю ширину content area. Не margin-костыль — inner padding контейнера. */
.tag-tabs{display:flex; gap:26px; align-items:stretch; padding:0 0 0 18px; margin:0; position:relative}
@media (max-width:767px){ .tag-tabs{ padding-left:15px; } }
.tag-tabs::after{   /* muted baseline (DS divider) на всю ширину content area */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ds-panel-bd, #2a3446)}
.tag-tab{
  appearance:none; border:0; background:transparent; cursor:pointer; text-decoration:none;
  padding:8px 1px 12px; min-height:42px; display:inline-flex; align-items:center;
  color:var(--ds-muted, #8a94a6); font-size:15px; font-weight:600; line-height:1;
  position:relative; z-index:1; transition:color .18s ease}
.tag-tab::after{   /* оранжевый active-индикатор с glow — поверх baseline (бренд, обе темы) */
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; border-radius:3px 3px 0 0;
  background:var(--tag-accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--tag-accent) 60%, transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.tag-tab.is-active{color:var(--ds-ink, #fff)}
.tag-tab.is-active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .tag-tab:hover{color:var(--ds-ink, #e8ecf3)} }
/* Keyboard focus — ДЕЛИКАТНО: без прямоугольной рамки. Текст ярче + приглушённый индикатор. */
.tag-tab:focus-visible{outline:none; color:var(--ds-ink, #fff)}
.tag-tab:focus-visible::after{transform:scaleX(1); opacity:.5}
.tag-tab.is-active:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){ .tag-tab::after{transition:none} }

/* ── сетка: phone 2 / tablet 3 / desktop 5. ЛЕВОЕ выравнивание (без центрирования) — плитки от
   левого края content-area, 1 публикация = первая ячейка. Потолок ширины держит плитку разумной
   на очень широких экранах, но заметно шире прежнего (сетка заполняет рабочую область). ── */
.tag-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));      /* desktop */
  gap:clamp(3px, 0.4vw, 5px);
  padding:14px 0 24px;
  max-width:none; margin:0; width:100%}   /* full-width: заполняет рабочую область, выровнен с separator */
@media (max-width:1100px){ .tag-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }  /* tablet */
@media (max-width:767px){  .tag-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px} }  /* phone */

/* ── плитка ── */
.tag-tile{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:10px;background:var(--ds-panel-2, #12151c);
  text-decoration:none;color:inherit}
.tag-tile__img{
  width:100%;height:100%;object-fit:cover;display:block;background:var(--ds-panel-2, #12151c)}
.tag-tile:focus-visible{outline:2px solid var(--tag-accent,#ff7a1f);outline-offset:2px}

/* лёгкий desktop-hover (указатель, не touch): едва заметный подъём яркости + subtle overlay */
@media (hover:hover) and (pointer:fine){
  .tag-tile{transition:transform .16s ease, filter .16s ease}
  .tag-tile:hover{transform:scale(1.012);filter:brightness(1.05)}
  .tag-tile:hover::after{opacity:1}
  .tag-tile::after{
    content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
    background:linear-gradient(0deg, rgba(0,0,0,.20), rgba(0,0,0,0) 42%);opacity:0;transition:opacity .16s}
}
/* press-feedback на телефоне (нет hover): короткий тактильный отклик нажатия */
@media (hover:none){ .tag-tile{transition:transform .1s ease} .tag-tile:active{transform:scale(.97)} }
@media (prefers-reduced-motion:reduce){ .tag-tile,.tag-tile:hover,.tag-tile:active{transition:none;transform:none;filter:none} }

/* индикатор видео / карусели — правый ВЕРХНИЙ угол */
.tag-tile__badge{
  position:absolute;top:6px;right:6px;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(0,0,0,.5);color:#fff;pointer-events:none}
.tag-tile__badge svg{width:14px;height:14px}

/* счётчик реакций — ЛЕВЫЙ НИЖНИЙ угол (не конфликтует с video/carousel badge справа сверху).
   Реальное число из DTO counters.likes; фирменное оранжевое сердце + число на тёмной капсуле. */
.tag-tile__react{
  position:absolute;left:6px;bottom:6px;z-index:1;pointer-events:none;
  display:inline-flex;align-items:center;gap:4px;
  height:22px;padding:0 8px 0 6px;border-radius:999px;
  background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:600;line-height:1;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tag-tile__react svg{width:13px;height:13px;color:var(--tag-accent,#ff7a1f);flex:0 0 auto}
@media (max-width:767px){ .tag-tile__react{height:24px;font-size:12.5px} .tag-tile__react svg{width:14px;height:14px} }

/* пустое состояние — канонический вид (иконка+заголовок+текст). Размеры задаём ЗДЕСЬ (pub-tag.css
   всегда загружен на /tag), НЕ полагаясь на pub-feed.css: иначе inline-SVG без width раздувается
   на всю content-area. Иконка компактная, блок по центру content-area. */
.tag-empty{
  padding:40px 16px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  max-width:420px;margin:8px auto 0}
/* уважать атрибут [hidden]: display:flex выше по каскаду, чем UA [hidden]{display:none},
   иначе пустое состояние показывалось бы ПОД сеткой при наличии публикаций. */
.tag-empty[hidden]{display:none}
.tag-empty .pub-empty__icon{width:56px;height:56px;color:var(--ds-muted, #8a94a6);flex:0 0 auto}
.tag-empty .pub-empty__icon svg{width:100%;height:100%;display:block}
.tag-empty .pub-empty__title{margin:0;font-size:18px;line-height:1.25;color:var(--ds-ink, #e8ecf3)}
.tag-empty .pub-empty__text,
.tag-empty__text{color:var(--ds-muted, #8a94a6);font-size:15px;margin:0}
.tag-error{padding:16px;text-align:center;color:var(--ds-muted, #8a94a6)}
.tag-error__retry{
  margin-left:8px;border:1px solid var(--ds-panel-bd, #2a3446);border-radius:999px;
  padding:6px 14px;background:transparent;color:var(--ds-ink, #e8ecf3);cursor:pointer;min-height:34px}

/* скелет догрузки — квадраты в той же сетке */
.tag-skeleton{
  display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:clamp(3px,0.4vw,5px);
  padding:0 0 12px;max-width:1600px;margin:0}
.tag-skeleton[hidden]{display:none}  /* display:grid иначе перебивает UA [hidden]{display:none} */
@media (max-width:1100px){ .tag-skeleton{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:767px){  .tag-skeleton{grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px} }