/* public.css — shared stylesheet for the bot-host SSR pages (/score/, /rating/).
   channel-pages-v2: light theme per the approved mockups
   (designs/design_channel_card.png, designs/design_rating.png). Mobile-first,
   ~720px breakpoint; the rating table collapses to stacked rows on narrow
   screens. Deployed with the static site; pages reference it absolutely. */

:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --ink:#0f172a;
  --ink-strong:#0b1220;
  --muted:#64748b;
  --hair:#e6eaf2;
  --accent:#2f6bff;
  --accent-soft:rgba(47,107,255,.10);
  --tg:#2AABEE;
  --page-pad:clamp(18px,4vw,32px);
  --container:1180px;
  --radius-sm:12px;
  --radius-md:16px;
  /* Dashboard redesign: larger card radius + a hairline border + softer
     shadow, and a structured very-light gray-blue band below the hero. */
  --radius-lg:26px;
  --hair-soft:rgba(15,23,42,.06);
  --shadow-soft:0 1px 2px rgba(15,23,42,.03),0 12px 32px rgba(15,23,42,.05);
  --content-bg:#eef2f9;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:relative;
}
/* Landing-inherited hero backdrop (public-pages-design-parity): the beach
   photo from the landing top, washed white and fading into --bg before the
   first content card. Sits behind the header + H1/intro region. */
body::before{
  content:"";position:absolute;top:0;left:0;right:0;height:min(70vh,620px);
  z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(246,248,252,.6) 58%,var(--bg) 96%),
    url("https://tgscore.ru/assets/hero-beach.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
}
@supports (background-image:image-set(url("https://tgscore.ru/assets/hero-beach.webp") type("image/webp"))){
  body::before{
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(246,248,252,.6) 58%,var(--bg) 96%),
      image-set(url("https://tgscore.ru/assets/hero-beach.webp") type("image/webp"),
                url("https://tgscore.ru/assets/hero-beach.jpg") type("image/jpeg"));
  }
}
a{color:var(--accent)}
img{max-width:100%;border-radius:var(--radius-sm)}

/* --- site chrome (landing parity) --- */
/* Header reproduces the landing header (index.css `header`): a flat
   transparent bar over the hero backdrop — Onest brand, uppercase
   letter-spaced nav, EN on the right. Single source: page_chrome.site_header. */
.pub-header{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--page-pad) 0;
  color:#16244f;
  font-family:"Onest",ui-sans-serif,system-ui,sans-serif;
}
.pub-brand{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:-.01em;color:#16244f;text-decoration:none}
.pub-brand-mark{width:40px;height:40px;flex:none;background:url("https://tgscore.ru/assets/tgscore-logo-128.png") center/contain no-repeat;filter:drop-shadow(0 0 14px rgba(91,109,255,.45))}
.pub-nav{display:flex;gap:42px;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,30,70,.72)}
.pub-nav a{color:inherit;text-decoration:none;padding:6px 0;transition:color .25s ease}
.pub-nav a:hover{color:#1b2bd6}
.pub-lang{font-size:12px;color:rgba(20,30,70,.6);cursor:pointer;text-decoration:none}
.pub-lang:hover{color:#16244f}
/* The switcher is a direct header child (left of the toggle on mobile). On
   desktop push it to the far right so the inline nav order is unchanged. */
.pub-header>.pub-lang{order:1}
/* Zero-JS hamburger (responsive-public-chrome): the checkbox + label toggle is
   inert on desktop — `.pub-menu` is display:contents so nav + EN behave exactly
   as the original direct flex children. The mobile breakpoint (≤768px below)
   reveals the toggle and turns `.pub-menu` into a real drop panel. */
.pub-menu{display:contents}
.pub-nav-toggle-cb,.pub-nav-toggle{display:none}

/* Footer reproduces the landing's dark multi-column footer (index.css
   `.footer`). Single source: page_chrome.site_footer. */
.pub-footer{position:relative;z-index:5;background:#06060b;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.08);margin-top:72px;padding:72px var(--page-pad) 32px;font-family:"Onest",ui-sans-serif,system-ui,sans-serif}
.pub-footer-inner{max-width:var(--container);margin:0 auto}
.pub-footer-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.pub-footer-brand{display:flex;flex-direction:column;gap:16px;max-width:320px}
.pub-footer-brand .pub-brand{font-size:1.12rem;color:#fff}
.pub-footer-brand .pub-brand-mark{width:28px;height:28px;filter:none}
.pub-footer-tag{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.5);margin:0}
.pub-footer-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin:0 0 18px}
.pub-footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.pub-footer-col a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;gap:6px;transition:color .2s ease}
.pub-footer-col a:hover{color:#fff}
.pub-ext{font-size:10px;opacity:.6}
.pub-footer-bottom{padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.9rem;color:rgba(255,255,255,.45)}
.pub-footer-bottom .pub-lang{color:rgba(255,255,255,.45)}
.pub-footer-bottom .pub-lang:hover{color:#fff}
@media (max-width:980px){
  .pub-footer-cols{grid-template-columns:1fr 1fr;gap:36px 28px}
  .pub-footer-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .pub-footer{padding:56px var(--page-pad) 28px}
  .pub-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px;padding-bottom:36px}
  .pub-footer-brand{grid-column:1 / -1}
  .pub-footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

main.pub-main{max-width:880px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--page-pad)}
.pub-breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px;overflow-wrap:anywhere}
.pub-breadcrumbs a{color:var(--accent);text-decoration:none}
h1{font-size:clamp(1.45rem,3.4vw,2rem);line-height:1.25;margin:0 0 .6em;color:var(--ink-strong);letter-spacing:-.01em}
h2{font-size:clamp(1.15rem,2.4vw,1.4rem);margin:2.2em 0 .6em;color:var(--ink-strong)}
.pub-card h2{margin-top:0}
.pub-muted{color:var(--muted)}
.pub-intro{max-width:680px}

/* --- shared components --- */
.pub-card{
  background:var(--card);border:1px solid var(--hair-soft);border-radius:var(--radius-lg);
  padding:26px 28px;margin:22px 0;box-shadow:var(--shadow-soft);
}
/* Landing-style violet-gradient pill button (index.css search button). */
a.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  color:#fff;text-decoration:none;padding:.8rem 1.6rem;border-radius:999px;
  font-weight:600;margin-top:1rem;line-height:1.3;text-align:center;
  background:
    radial-gradient(120% 180% at 50% 120%, rgba(60,180,255,.55) 0%, rgba(91,109,255,.35) 35%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(140deg, #5b46d8 0%, #4759e6 38%, #3b6fea 72%, #2f8be8 100%);
  box-shadow:0 10px 24px rgba(71,89,230,.32), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
a.cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 30px rgba(71,89,230,.4)}
a.cta.cta-sm{padding:.6rem 1.25rem;font-size:.95rem;margin-top:0}
.cta-ico{width:18px;height:18px;flex:none}
p.fine{color:var(--muted);font-size:.85rem;margin-top:2.2rem}

/* --- channel page (dashboard redesign 2026-06-12) --- */
/* The SEO H1 stays in the DOM but is de-emphasized so the hero card name is
   the visual focal title (typography spec). */
.pub-seo-head h1{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:600;color:var(--muted);letter-spacing:0;line-height:1.35;margin:0 0 16px}
.pub-stale{margin:.5rem 0 0;font-size:.9rem}
/* Eyebrow/overline label shared by the dynamics + final cards. */
.pub-eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}

.pub-chips{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.pub-chip{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-sm);
  padding:10px 16px;min-width:130px;box-shadow:var(--shadow);
}
.pub-chip-label{display:block;font-size:.78rem;color:var(--muted)}
.pub-chip-value{display:block;font-size:1.15rem;font-weight:700;color:var(--ink-strong)}

/* Hero summary card (dashboard redesign): logo + name·glyph·handle·desc on the
   left, the primary CTA on the right, facts row below — the page head folded
   into one premium card. */
.pub-hero-card{display:flex;gap:24px;align-items:flex-start;padding:30px 32px}
.pub-hero-logo{width:96px;height:96px;border-radius:24px;flex:none;object-fit:cover;border:1px solid var(--hair)}
.pub-hero-logo.pub-logo-fallback{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:2rem}
.pub-hero-main{min-width:0;flex:1}
.pub-hero-top{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.pub-hero-id{min-width:0;flex:1}
.pub-hero-namerow{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.pub-hero-name{font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:700;line-height:1.15;color:var(--ink-strong);letter-spacing:-.01em;overflow-wrap:anywhere}
.pub-tg-link{display:inline-flex;align-items:center;color:var(--tg);flex:none;text-decoration:none}
.pub-tg-link:hover{filter:brightness(1.08)}
.pub-tg-ico{display:block}
.pub-hero-handle{display:inline-block;margin-top:4px;color:var(--accent);font-weight:600;font-size:.95rem;text-decoration:none;overflow-wrap:anywhere}
.pub-hero-handle:hover{text-decoration:underline}
.pub-hero-desc{margin:.7rem 0 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pub-hero-cta{flex:none;margin-top:2px}
.pub-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 22px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hair-soft)}
.pub-fact-label{display:block;font-size:.8rem;color:var(--muted)}
.pub-fact-value{display:block;font-size:1.35rem;font-weight:700;color:var(--ink-strong);margin-top:2px}
/* Stale-row re-check affordance: small refresh button next to a rating row's
   check date when the last check isn't today. */
.pub-refresh{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;border-radius:7px;border:1px solid var(--hair);background:var(--accent-soft);color:var(--accent);vertical-align:middle;text-decoration:none;transition:background .2s ease,color .2s ease}
.pub-refresh:hover{background:var(--accent);color:#fff}

/* Zero-JS disclosures: «О канале» full bio + «Показать ещё посты». The native
   marker is hidden; a quiet accent cue carries the affordance. */
.pub-disclosure{margin:0}
.pub-disclosure-sum{list-style:none;cursor:pointer;display:block}
.pub-disclosure-sum::-webkit-details-marker{display:none}
.pub-disclosure-cue{display:inline-block;margin-top:.5rem;color:var(--accent);font-weight:600;font-size:.92rem}
.pub-disclosure-cue::after{content:" ↓";font-size:.85em}
details[open] > .pub-disclosure-sum .pub-disclosure-cue::after{content:" ↑"}
.pub-about-preview{display:block;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
details[open] > .pub-disclosure-sum .pub-about-preview{display:none}
.pub-about-details > .pub-about-text{margin-top:.4rem}
.pub-posts-more{margin-top:14px}
.pub-about-text{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.pub-logo{width:72px;height:72px;border-radius:18px;flex:none;object-fit:cover;border:1px solid var(--hair)}
.pub-logo-fallback{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:1.4rem}

/* --- Advertiser-context blocks (channel-page-advertiser-context) --- */
/* Category chips: light-blue pills under the handle on the hero and inside the
   «О канале» card. The row wraps so a many-category channel never overflows. */
.pub-cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:.7rem 0 0}
.pub-cat-chip{
  display:inline-flex;align-items:center;min-height:30px;padding:0 13px;
  border-radius:999px;background:#eef4ff;color:#2f4d8a;
  font-size:.85rem;font-weight:600;line-height:1;text-decoration:none;
  border:1px solid rgba(47,107,255,.12);white-space:normal;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;
  transition:background .2s ease,color .2s ease;
}
a.pub-cat-chip:hover{background:#e1ebff;color:var(--accent)}
.pub-cat-more{color:#5b6b8c;cursor:default}

/* «О канале» advertiser-context card — lighter than the hero, same radius. */
.pub-about-card{padding:24px 28px}
.pub-about-h2{font-size:1.15rem;font-weight:700;color:var(--ink-strong);margin:0 0 .5rem}
.pub-about-card .pub-about-text{color:var(--ink)}
.pub-about-adfit{margin-top:.9rem}
.pub-about-adfit-label{display:block;font-size:.85rem;font-weight:600;color:var(--muted)}
.pub-about-adfit .pub-cat-chips{margin-top:.4rem}

/* «Похожие каналы» — compact neighbour cards: avatar + two-line meta + arrow. */
.pub-related-h2{font-size:1.15rem;font-weight:700;color:var(--ink-strong);margin:0 0 .25rem}
.pub-related-sub{font-size:.9rem;margin:0 0 1rem}
.pub-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pub-related-card{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:12px 14px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:var(--card);text-decoration:none;color:inherit;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.pub-related-card:hover{border-color:rgba(47,107,255,.35);box-shadow:var(--shadow-soft);transform:translateY(-1px)}
.pub-related-logo{width:44px;height:44px;border-radius:12px;flex:none;object-fit:cover;border:1px solid var(--hair)}
.pub-related-logo.pub-logo-fallback{font-size:1.15rem}
.pub-related-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.pub-related-title{font-weight:600;color:var(--ink-strong);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-related-handle{color:var(--accent);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-related-tags{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:.78rem;color:var(--muted);overflow:hidden}
.pub-related-cats{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pub-related-subs{white-space:nowrap;flex:none}
.pub-related-arrow{flex:none;color:#9aa3b2;display:inline-flex;align-items:center}
.pub-related-card:hover .pub-related-arrow{color:var(--accent)}

/* minmax(0,1fr) + min-width:0: grid items must shrink below their content's
   min-content (the 640px-attribute post images) or mobile overflows. */
.pub-posts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:14px 0}
.pub-post{border:1px solid var(--hair);border-radius:var(--radius-md);padding:18px 20px;background:var(--card);box-shadow:var(--shadow);min-width:0;max-width:100%}
/* Card head: linked channel name · relative date, views badge right;
   image as a small side thumbnail on desktop. */
.pub-post-head{display:flex;align-items:center;gap:12px;margin-bottom:.6rem}
.pub-post-name{font-weight:600;color:var(--ink-strong);font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
a.pub-post-name:hover{text-decoration:underline}
.pub-post-meta{font-size:.88rem;color:var(--muted);font-weight:600;flex:none}
/* Telegram glyph by the post date, linking to the t.me post (replaced the
   «Открыть пост» foot link 2026-06-13). */
.pub-post-tg{display:inline-flex;align-items:center;color:var(--tg);flex:none;text-decoration:none;transition:filter .2s ease}
.pub-post-tg:hover{filter:brightness(1.12)}
.pub-views-badge{flex:none;margin-left:auto;background:var(--accent-soft);color:var(--accent);border-radius:.5rem;padding:.25rem .6rem;font-size:.82rem;font-weight:600}
.pub-post-body{min-width:0}
.pub-post-body.has-image{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start}
.pub-post-text{white-space:pre-line;overflow-wrap:anywhere}
.pub-post-image{margin:0;width:100%;object-fit:cover;aspect-ratio:1;border-radius:10px}
.pub-post-foot{margin:.7rem 0 0}
.pub-post a.pub-post-link{font-size:.9rem;text-decoration:none}
.pub-post a.pub-post-link:hover{text-decoration:underline}
/* legacy post-head rules — keep until proxy-cached pre-parity pages expire */
.pub-post-avatar{width:36px;height:36px;border-radius:10px;flex:none;object-fit:cover}
span.pub-post-avatar{display:inline-flex;font-size:1rem}
.pub-post-source{display:flex;flex-direction:column;min-width:0;flex:1}

/* Public-data summary block («Публичная сводка канала»). */
.pub-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 22px;margin:.4rem 0 0}
.pub-summary-label{display:block;font-size:.8rem;color:var(--muted)}
.pub-summary-value{display:block;font-size:1.4rem;font-weight:700;color:var(--ink-strong);margin-top:2px}
.pub-summary-note{margin:1.1rem 0 0;font-size:.9rem}

/* Combined «Динамика канала» card with a zero-JS (CSS radio) segmented control:
   one chart shown at a time. Both SVGs stay in the DOM for crawlers. */
.pub-dynamics .pub-dyn-h2{font-size:clamp(1.15rem,2.3vw,1.35rem);margin:.4rem 0 .2rem}
.pub-dyn-count{margin:0 0 1rem;color:var(--ink)}
.pub-dyn-note{margin:.9rem 0 0;font-size:.88rem}
.pub-chart{width:100%;height:auto;display:block}
/* Charts render two crisp variants (charts.py); desktop shows the wide one,
   mobile the tall one. Both stay in the DOM (zero-JS), toggled below. */
.pub-chart--tall{display:none}
.pub-chart-caption{font-size:.85rem;margin:.6rem 0 0}
/* Radios drive the tabs/panels via general-sibling selectors; kept focusable
   but visually removed (no JavaScript). */
.pub-dyn-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pub-dyn-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--content-bg);margin:4px 0 18px}
.pub-dyn-tab{padding:.42rem 1.15rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--muted);cursor:pointer;transition:background .2s ease,color .2s ease}
.pub-dyn-panel{display:none}
.pub-dyn-single .pub-dyn-panel{display:block}
.pub-dyn-radio-subs:checked ~ .pub-dyn-panels .pub-dyn-panel-subs{display:block}
.pub-dyn-radio-views:checked ~ .pub-dyn-panels .pub-dyn-panel-views{display:block}
.pub-dyn-radio-subs:checked ~ .pub-dyn-tabs .pub-dyn-tab-subs,
.pub-dyn-radio-views:checked ~ .pub-dyn-tabs .pub-dyn-tab-views{background:var(--card);color:var(--accent);box-shadow:var(--shadow-soft)}
.pub-dyn-radio:focus-visible ~ .pub-dyn-tabs .pub-dyn-tab{outline:2px solid var(--accent);outline-offset:2px}

/* Premium closing conversion block: a soft blue gradient card with a single
   primary button. */
.pub-final{background:linear-gradient(135deg,#eaf1ff 0%,#eef0ff 55%,#e8f3ff 100%);border-color:rgba(47,107,255,.18);text-align:center}
.pub-final-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.pub-final-title{font-size:clamp(1.3rem,2.8vw,1.7rem);font-weight:700;color:var(--ink-strong);margin:.5rem 0 0;line-height:1.25}
.pub-final-note{margin:.85rem auto 0;max-width:560px;color:var(--ink)}
.pub-final-cta{display:flex;justify-content:center;margin-top:1.2rem}
.pub-final-cta .cta{margin-top:0}

/* --- rating pages --- */
/* Tab names share one row with the bot CTA on desktop (button at the opposite
   end); on mobile the row wraps and the button drops below the tabs. */
.pub-rating-tabbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:22px 0 14px}
/* Sort tabs keep their intrinsic width and never wrap internally, so an active
   category's wider trigger pushes shrink onto the search field, not a second row. */
.pub-rating-tabbar .pub-tabs{margin:0;flex:none;flex-wrap:nowrap}
.pub-rating-tabbar .pub-tabbar-cta{margin-top:0;flex:none}
/* Tabs as rounded pills sitting on the hero backdrop (post-mockup feature,
   restyled to fit the design language). */
.pub-tabs{display:flex;gap:8px;margin:22px 0 14px;flex-wrap:wrap}
.pub-tab{
  display:inline-block;padding:.5rem 1.2rem;border-radius:999px;
  border:1px solid var(--hair);background:rgba(255,255,255,.55);
  color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:600;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.pub-tab.is-active{background:var(--card);color:var(--ink-strong);border-color:transparent;box-shadow:var(--shadow)}
a.pub-tab:hover{color:var(--accent);background:rgba(255,255,255,.85)}
/* Premium ranking list: the data table is restyled to read as a calm,
   spacious Apple-style curated list — floating glass panel, soft separators,
   badge ranks, channel cell as the focus, tabular numerics. */
.pub-table-card{
  margin-top:0;padding:8px 12px;border-radius:24px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(210,220,235,.7);
  box-shadow:0 24px 60px rgba(35,72,130,.08);
}
.pub-rating{width:100%;border-collapse:collapse;margin:0}
.pub-rating thead th{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#8a94a6;text-align:left;padding:16px 14px 11px;border:none;
}
.pub-rating thead th.num{text-align:right}
.pub-rating tbody td{
  padding:15px 14px;vertical-align:middle;border:none;
  border-top:1px solid rgba(214,222,236,.42);
}
.pub-rating tbody tr:first-child td{border-top:none}
/* Soft hover lift — no strong color, just a calm wash. */
.pub-rating tbody tr{transition:background .18s ease}
.pub-rating tbody tr:hover td{background:rgba(245,248,255,.9)}
.pub-rating tbody tr:hover td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.pub-rating tbody tr:hover td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
/* Calm rank badges — only #1 carries the soft-blue accent; #2/#3 neutral;
   the rest are quiet muted numerals. */
.pub-rating .pub-rank{width:3rem}
.pub-rank-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:27px;height:27px;padding:0 7px;border-radius:9px;
  font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:#8a94a6;background:transparent;
}
.pub-rank-badge.pub-rank-1{background:var(--accent-soft);color:var(--accent)}
.pub-rank-badge.pub-rank-2,.pub-rank-badge.pub-rank-3{background:#eef1f6;color:#5b6577}
/* Channel cell is the visual center: larger avatar, bold name, muted handle. */
.pub-rating .chan{display:flex;align-items:center;gap:13px;min-width:0}
.pub-rating .chan img,.pub-rating .chan .logo-fallback{
  width:44px;height:44px;border-radius:12px;flex:none;object-fit:cover;
  border:1px solid rgba(210,220,235,.7);box-shadow:0 2px 8px rgba(35,72,130,.06);
}
.pub-rating .chan .logo-fallback{
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);
}
.chan-meta{display:flex;flex-direction:column;min-width:0;gap:1px}
/* Clamp long titles to 2 lines (wrapping lets the auto-table column shrink, so
   a long name like "… | Data Science, Machine learning, …" can't blow out the
   whole table); overflow-wrap guards a single unbreakable token. */
.chan-name{color:var(--ink-strong);text-decoration:none;font-weight:600;font-size:.97rem;letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow-wrap:anywhere}
.chan-name:hover{color:var(--accent)}
.chan-handle{color:#8a94a6;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Subscribers: right-aligned tabular, darker than the quieter date column. */
.pub-rating td.num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.pub-rank-subs,.pub-rating td.views{color:var(--ink-strong);font-weight:600}
.pub-rank-checked{color:var(--muted);font-weight:500;font-size:.9rem}
.pub-pagenav{display:flex;justify-content:space-between;gap:12px;margin:26px 0;flex-wrap:wrap}
/* Closing CTA banner: kept quiet so it doesn't compete with the primary
   tab-row button above — soft tint + a secondary (outline) button. */
.pub-cta-banner{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;
  background:linear-gradient(135deg,#f4f6ff 0%,#faf9ff 55%,#f4f8ff 100%);
  border-color:#e7eaff;box-shadow:0 10px 30px rgba(35,72,130,.05);
}
.pub-banner-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:12px;
  background:rgba(91,109,255,.10);color:#6675ea;
}
.pub-banner-ico svg{width:20px;height:20px}
.pub-cta-banner p{margin:0;max-width:560px;flex:1 1 260px;color:var(--muted);font-size:.95rem}
/* Secondary button: white, accent text + hairline, no gradient/heavy shadow. */
.pub-cta-banner .cta{
  margin-top:0;flex:none;
  background:#fff;color:var(--accent);border:1px solid #d8ddff;
  box-shadow:none;padding:.55rem 1.15rem;font-size:.92rem;
}
.pub-cta-banner .cta:hover{background:var(--accent-soft)}
.pub-cta-banner .cta .cta-ico{color:var(--accent)}

/* --- chrome breakpoint (768px): hamburger header + compact footer --- */
/* Below 768px the inline nav collapses behind the zero-JS hamburger and the
   dark footer folds to one compact column. Above 768px everything is the
   unchanged desktop chrome (responsive-public-chrome spec). */
@media (max-width:768px){
  /* On mobile the beach-photo backdrop reads as a hard light-blue rectangle
     behind the hero card. Replace it with a soft white→bg gradient only — no
     image, no rectangular edge. */
  body::before{
    background-image:linear-gradient(180deg,#eef3fb 0%,rgba(238,243,251,.5) 42%,var(--bg) 78%);
    height:min(46vh,360px);
  }
  .pub-header{padding:12px var(--page-pad);gap:12px;flex-wrap:nowrap;align-items:center}
  /* reveal the toggle; brand stays left, burger pinned right */
  .pub-nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;margin-left:10px;flex:none;
    border-radius:12px;border:1px solid var(--hair);
    background:rgba(255,255,255,.7);color:#16244f;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .pub-nav-toggle:active{background:var(--accent-soft)}
  /* visually-hidden but focusable checkbox; mirror its focus ring on the label */
  .pub-nav-toggle-cb{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;display:block;
  }
  .pub-nav-toggle-cb:focus-visible + .pub-nav-toggle{outline:2px solid var(--accent);outline-offset:2px}
  /* the menu becomes a real drop sheet, hidden until :checked */
  .pub-menu{
    display:block;position:absolute;top:100%;left:0;right:0;z-index:30;
    background:#fff;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair);
    box-shadow:0 18px 40px rgba(35,72,130,.14);
    padding:4px var(--page-pad) 12px;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .28s ease,opacity .2s ease,visibility .28s ease;
  }
  .pub-nav-toggle-cb:checked ~ .pub-menu{max-height:80vh;opacity:1;visibility:visible}
  .pub-nav{flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;font-size:12px;letter-spacing:.12em}
  .pub-nav a{padding:14px 2px;border-top:1px solid var(--hair-soft)}
  .pub-nav a:first-child{border-top:none}
  /* Switcher stays in the header bar, left of the hamburger (it is a direct
     header child now, not inside the collapsed menu). `margin-left:auto`
     pushes the lang+toggle group to the right; brand stays left. */
  .pub-header>.pub-lang{
    order:0;margin-left:auto;flex:none;display:inline-flex;align-items:center;
    padding:8px 12px;border:1px solid var(--hair);border-radius:999px;
    background:rgba(255,255,255,.7);color:#16244f;font-size:.82rem;line-height:1;
  }

  /* Light one-column footer: brand+tag first, then tight link groups with
     small gaps and reduced padding — not a desktop footer squeezed onto a
     phone. EN reads as a real language switcher chip, not a lonely word. */
  .pub-footer{margin-top:40px;padding:28px var(--page-pad) 20px}
  .pub-footer-cols{grid-template-columns:1fr;gap:18px;padding-bottom:20px}
  .pub-footer-brand{gap:8px}
  .pub-footer-tag{font-size:.82rem;line-height:1.45}
  .pub-footer-col h4{margin-bottom:9px}
  .pub-footer-col ul{gap:7px}
  .pub-footer-col a{font-size:.9rem}
  .pub-footer-bottom{padding-top:16px;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .pub-footer-bottom span:first-child{font-size:.82rem}
  .pub-footer-bottom .pub-lang{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    padding:5px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
    font-size:.8rem;color:rgba(255,255,255,.7);
  }
  .pub-footer-bottom .pub-lang::before{content:"🌐";font-size:.85em}
}

/* --- content breakpoint (≥360px supported; ~720px) --- */
@media (max-width:720px){
  .pub-chip{flex:1 1 calc(50% - 12px);min-width:0}

  /* hero card: title-led hierarchy, full-width CTA, 2-col metrics */
  .pub-hero-card{gap:16px;padding:20px}
  .pub-hero-logo{width:60px;height:60px;border-radius:16px}
  .pub-hero-top{flex-direction:column;align-items:stretch}
  .pub-hero-name{font-size:1.35rem}
  .pub-hero-cta{width:100%;text-align:center}
  .pub-hero-desc{-webkit-line-clamp:3}
  /* Metrics as clean label-left / value-right rows so the date value can't
     break mid-phrase ("Дата проверки16 днейназад"). One column, soft dividers. */
  .pub-facts{grid-template-columns:1fr;gap:0;margin-top:18px;padding-top:14px}
  .pub-fact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--hair-soft)}
  .pub-fact:first-child{border-top:none}
  .pub-fact-label{font-size:.92rem;color:var(--muted)}
  .pub-fact-value{font-size:1.05rem;margin-top:0;white-space:nowrap;text-align:right}
  .pub-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}

  /* advertiser-context (channel-page-advertiser-context): chip rows already
     wrap; the «О канале» card tightens and related cards stack full-width so
     nothing overflows at 360px. */
  .pub-about-card{padding:20px}
  .pub-related{padding:22px 18px}
  .pub-related-grid{grid-template-columns:1fr}
  .pub-related-card{padding:12px}

  /* dynamics: full-width segmented tabs, taller readable chart, calm spacing */
  .pub-dynamics{padding:24px 18px}
  .pub-dyn-tabs{display:flex;width:100%;gap:6px;margin-bottom:22px}
  .pub-dyn-tab{flex:1;text-align:center;padding:.6rem .4rem}
  /* Swap to the tall, correctly-proportioned mobile chart variant — uniform
     scaling (height:auto) keeps the line and labels crisp, no squash. */
  .pub-chart--wide{display:none}
  .pub-chart--tall{display:block}
  .pub-chart-caption{margin-top:.8rem}

  /* posts: roomy thumbnail-beside-text, clamped excerpt, badge on its own row */
  .pub-post{padding:18px}
  .pub-post-body.has-image{grid-template-columns:104px minmax(0,1fr);gap:16px}
  .pub-post-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  /* Views badge drops to its own row below the name·date line (never squeezes
     the title); name+date share the first line, badge wraps full-width under. */
  .pub-post-head{flex-wrap:wrap;gap:8px 10px}
  .pub-post-name{flex:1 1 auto}
  .pub-views-badge{margin-left:0;order:3;flex-basis:100%}

  /* closing CTAs read as a premium next action with a full-width button */
  .pub-cta-banner{text-align:center}
  .pub-cta-banner p{flex:1 1 100%}
  .pub-cta-banner .cta{width:100%;text-align:center}
  .pub-final{padding:26px 22px}
  .pub-final-cta .cta{width:100%}

  /* breadcrumb: ellipsise the long channel crumb on a single line */
  .pub-breadcrumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}

  /* Premium ranking cards: fixed 24px rank badge, 44px avatar, name clamped
     to 2 lines, handle ellipsised, compact metadata lines under the channel,
     soft separators, no edge-touching text. */
  .pub-table-card{padding:6px 10px;border-radius:20px}
  .pub-rating thead{display:none}
  .pub-rating tbody tr{
    display:grid;grid-template-columns:24px minmax(0,1fr);
    column-gap:14px;row-gap:6px;align-items:center;
    padding:14px 12px;border-top:1px solid rgba(214,222,236,.5);
  }
  .pub-rating tbody tr:first-child{border-top:none}
  .pub-rating tbody td{display:block;border:none;padding:0;background:none;min-width:0}
  .pub-rating .pub-rank{grid-column:1;grid-row:1;align-self:center;width:auto}
  .pub-rank-badge{min-width:24px;width:24px;height:24px;padding:0;border-radius:8px;font-size:.8rem}
  .pub-rating .pub-rank-chan{grid-column:2;grid-row:1}
  .pub-rating .chan{gap:12px}
  .pub-rating .chan img,.pub-rating .chan .logo-fallback{width:44px;height:44px}
  .chan-meta{min-width:0}
  .chan-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .chan-handle{overflow-wrap:normal}
  .pub-rating td.num{
    grid-column:2;text-align:left;white-space:normal;
    font-size:.84rem;display:flex;gap:6px;align-items:baseline;overflow-wrap:anywhere;
  }
  .pub-rating td.num::before{content:attr(data-label);color:var(--muted);font-weight:500;font-size:.8rem}
}

/* --- post cards flip to vertical (image-on-top) below ~390px --- */
@media (max-width:390px){
  .pub-post-body.has-image{grid-template-columns:minmax(0,1fr);gap:12px}
  .pub-post-image{aspect-ratio:16/10;width:100%}
}

/* === Rating channel search + autocomplete (rating-search-autocomplete) === */
/* Hero header: H1 + description on the left, the page-level «Добавить канал»
   CTA pinned top-right at the content/table edge — a page action, NOT a table
   control (so it never wraps into the search/filters row). */
.pub-rating-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 6px}
.pub-rating-hero-text{flex:1 1 auto;min-width:0}
.pub-rating-hero-text h1{margin-top:0}
.pub-rating-hero-cta{flex:none;white-space:nowrap}
/* Controls row now holds only table controls: the search field + sort chips. */
.pub-rating-tabbar{justify-content:flex-start}
/* flex-basis:0 keeps the search out of the wrap calculation (which uses basis,
   not shrunk, sizes) — it only consumes leftover space after the category pill
   and the sort tabs claim their intrinsic widths, so all three hold one desktop
   row; min-width keeps the field usable, max-width keeps it from dominating. */
.pub-rating-search{position:relative;flex:1 1 0;min-width:150px;max-width:340px}

/* Calm pill field — sized so it never outweighs the blue CTA. */
.pub-search-field{
  display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;
  border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.pub-search-field:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px var(--accent-soft)}
.pub-search-ico{color:#8a94a6;flex:none}
.pub-search-field:focus-within .pub-search-ico{color:var(--accent)}
.pub-search-input{flex:1 1 auto;min-width:0;border:none;background:transparent;outline:none;font:inherit;font-size:.95rem;color:var(--ink-strong)}
.pub-search-input::placeholder{color:#9aa3b2}
.pub-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pub-search-clear{flex:none;border:none;background:transparent;cursor:pointer;color:#9aa3b2;font-size:1.2rem;line-height:1;padding:0 2px;border-radius:50%;transition:color .2s ease}
.pub-search-clear:hover{color:var(--ink-strong)}

/* Autocomplete dropdown */
.pub-search-dropdown{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;right:0;
  background:var(--card);border:1px solid var(--hair);border-radius:16px;
  box-shadow:var(--shadow-soft);padding:6px;max-height:60vh;overflow:auto;
}
.pub-search-dropdown[hidden]{display:none}
.pub-search-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;text-decoration:none;color:var(--ink-strong)}
.pub-search-row:hover,.pub-search-row.is-active{background:rgba(245,248,255,.95)}
.pub-search-av,.pub-search-av img{width:36px;height:36px;border-radius:9px;flex:none;object-fit:cover}
.pub-search-av{border:1px solid rgba(210,220,235,.7);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pub-search-av-fallback{background:var(--accent-soft);color:var(--accent);font-weight:700}
.pub-search-meta{display:flex;flex-direction:column;min-width:0;gap:1px}
.pub-search-name{font-weight:600;font-size:.93rem;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-search-handle{color:#8a94a6;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-search-name mark,.pub-search-handle mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 1px}

/* Loading + empty states */
.pub-search-loading{display:flex;align-items:center;gap:10px;padding:14px 12px;color:var(--muted);font-size:.9rem}
.pub-search-spinner{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid var(--hair);border-top-color:var(--accent);animation:pub-search-spin .7s linear infinite}
@keyframes pub-search-spin{to{transform:rotate(360deg)}}
.pub-search-empty{padding:14px}
.pub-search-empty-add{margin:0;color:var(--ink)}
.pub-search-empty-title{margin:0 0 3px;font-weight:600;color:var(--ink-strong)}
.pub-search-empty-hint{margin:0;color:var(--muted);font-size:.84rem}
.pub-search-add{color:var(--accent);font-weight:600;text-decoration:none}
.pub-search-add:hover{text-decoration:underline}

/* Category filter — a calm Apple-style pill built on a native <details> so the
   popover and its <a href> options work with no JS (rating-views-categories).
   Sized to match the search pill (42px); JS only adds type-to-filter. */
.pub-cat-wrap{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px}
.pub-cat{position:relative}
.pub-cat-trigger{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;
  border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--ink-strong);font-size:.92rem;font-weight:600;cursor:pointer;
  list-style:none;white-space:nowrap;user-select:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.pub-cat-trigger::-webkit-details-marker{display:none}
.pub-cat-trigger::marker{content:""}
.pub-cat-trigger:hover{background:var(--card)}
.pub-cat[open] .pub-cat-trigger{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px var(--accent-soft)}
.pub-cat-trigger-label{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.pub-cat-chev{color:#8a94a6;flex:none;transition:transform .2s ease}
.pub-cat[open] .pub-cat-chev{transform:rotate(180deg)}
.pub-cat-clear{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;border:1px solid var(--hair);background:var(--card);
  color:#9aa3b2;font-size:1.2rem;line-height:1;text-decoration:none;
  transition:color .2s ease,background .2s ease;
}
.pub-cat-clear:hover{color:var(--ink-strong);background:var(--accent-soft)}
/* Right-anchored so a mid-row trigger opens the wide popover leftward, never
   off the viewport edge. */
.pub-cat-pop{
  position:absolute;z-index:30;top:calc(100% + 8px);right:0;left:auto;
  width:min(560px,92vw);
  background:var(--card);border:1px solid var(--hair);border-radius:16px;
  box-shadow:var(--shadow-soft);padding:8px;
}
.pub-cat-filter{
  width:100%;height:38px;padding:0 12px;margin-bottom:6px;box-sizing:border-box;
  border:1px solid var(--hair);border-radius:10px;background:rgba(255,255,255,.7);
  font:inherit;font-size:.92rem;color:var(--ink-strong);outline:none;
}
.pub-cat-filter:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pub-cat-filter::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* 3 columns, minmax(0,1fr) so columns shrink below content and labels ellipsis
   instead of forcing a horizontal scrollbar. */
.pub-cat-list{
  list-style:none;margin:0;padding:0;max-height:48vh;overflow-y:auto;overflow-x:hidden;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 4px;
}
.pub-cat-list > li{min-width:0}
.pub-cat-list > li[hidden]{display:none}
.pub-cat-opt{
  display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;
  padding:7px 9px;border-radius:9px;text-decoration:none;color:var(--ink-strong);font-size:.88rem;
}
.pub-cat-opt:hover{background:rgba(245,248,255,.95)}
.pub-cat-opt.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.pub-cat-opt.is-empty{color:var(--muted)}
.pub-cat-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-cat-count{flex:none;color:var(--muted);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.pub-cat-opt.is-active .pub-cat-count{color:var(--accent)}

/* Mobile: hero stacks (title, description, then a full-width CTA); the controls
   row stacks below it — search full-width, then the sort chips. */
@media (max-width:720px){
  .pub-rating-hero{flex-direction:column;align-items:stretch;gap:10px}
  .pub-rating-hero-cta{width:100%}
  .pub-rating-tabbar{flex-wrap:wrap}
  .pub-rating-search{flex:1 1 100%;min-width:0;max-width:none}
  .pub-search-dropdown{left:0;right:0}
  .pub-cat-wrap{flex:1 1 100%}
  .pub-cat{flex:1 1 auto;min-width:0}
  .pub-cat-trigger{width:100%;justify-content:space-between}
  .pub-cat-pop{width:100%;left:0;right:auto}
  .pub-cat-list{grid-template-columns:1fr 1fr}
}