/* Сгенерировано _brand/family/make-family.mjs. Семейство OKVideo: кнопка «Продукты», меню, подвал.
 * Читает токены канона (okvideo-tokens.css); если продукт их не подключает, задайте на
 * .okv-family и .okv-footer восемь переменных: --surface --surface-subtle --surface-accent
 * --text --muted --line --accent --brand-mint. */
.okv-family{position:relative;display:inline-block;font-family:inherit}
.okv-family__toggle{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .75rem;border:1px solid var(--line,#d5dae8);border-radius:999px;color:var(--text,#0b1020);background:var(--surface,#fff);text-decoration:none;font:inherit;font-size:.9rem;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.okv-family__toggle:hover,.okv-family__toggle:focus-visible,.okv-family__toggle[aria-expanded="true"]{border-color:var(--brand-mint,#43e0b2)}
.okv-family__toggle:focus-visible{outline:2px solid var(--focus,#1769e0);outline-offset:2px}
.okv-family__grid{width:14px;height:14px;fill:currentColor;flex:none}
.okv-family__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;box-sizing:border-box;width:320px;max-width:calc(100vw - 24px);padding:10px;border:1px solid var(--line,#d5dae8);border-radius:14px;background:var(--surface,#fff);color:var(--text,#0b1020);box-shadow:0 18px 48px rgba(11,16,32,.18);text-align:left}
.okv-family__menu[hidden]{display:none}
.okv-family__title{margin:4px 8px 8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#525a78)}
.okv-family__item{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px;border-radius:10px;color:var(--text,#0b1020);text-decoration:none}
.okv-family__item:hover,.okv-family__item:focus-visible{background:var(--surface-subtle,#eef1f8)}
.okv-family__item[aria-current="page"],
.okv-family[data-current="gfx"] .okv-family__item[data-slug="gfx"],
.okv-family[data-current="check"] .okv-family__item[data-slug="check"],
.okv-family[data-current="match"] .okv-family__item[data-slug="match"],
.okv-family[data-current="rundown"] .okv-family__item[data-slug="rundown"],
.okv-family[data-current="control"] .okv-family__item[data-slug="control"],
.okv-family[data-current="restream"] .okv-family__item[data-slug="restream"],
.okv-family[data-current="tube"] .okv-family__item[data-slug="tube"],
.okv-family[data-current="bonding"] .okv-family__item[data-slug="bonding"],
.okv-family[data-current="disk"] .okv-family__item[data-slug="disk"]{background:var(--surface-accent,#e2f7ef)}
.okv-family__mark{grid-row:1/span 2;width:24px;height:24px;border-radius:6px}
.okv-family__name{font-weight:700;font-size:.92rem;line-height:1.2}
.okv-family__tagline{font-size:.8rem;color:var(--muted,#525a78);line-height:1.3}
.okv-family__home{display:block;margin:8px 8px 4px;padding-top:10px;border-top:1px solid var(--line,#d5dae8);font-size:.85rem;font-weight:600;color:var(--accent,#0b6b52);text-decoration:none}
.okv-family__home:hover,.okv-family__home:focus-visible{text-decoration:underline}
/* Шапка публичной страницы — одна на всё семейство, чтобы кнопка «Продукты» стояла на одном
 * месте на любом сайте: колонка 1080 px с полями 16 px (на ≤620 px — 10 px), 24 px сверху
 * (внутренним отступом: внешний схлопнулся бы с body и открыл фон html над страницей),
 * первая строка ровно 48 px. Плашка слева, кнопка крайняя справа, размер кнопки продукт не
 * меняет. Своё (тема, ссылка) продукт кладёт между ними в .okv-topbar__extra; на телефоне
 * (≤620 px) оно уходит во вторую строку, и первая у всех одинакова: плашка и кнопка.
 * На 320 px они помещаются впритык; при более широком шрифте плашка ужимается. */
.okv-topbar{box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:48px;row-gap:12px;align-items:center;width:min(1080px,calc(100% - 32px));margin:0 auto;padding:24px 0 0}
.okv-topbar__brand{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;min-width:0}
.okv-topbar__brand img{display:block;width:auto;max-width:100%;height:28px;object-fit:contain;object-position:left center}
.okv-topbar__extra{grid-column:2;justify-self:end;display:flex;align-items:center;gap:12px;min-width:0;margin-left:20px}
.okv-topbar>.okv-family{grid-column:3;grid-row:1;justify-self:end;display:flex;margin-left:20px}
@media (max-width:620px){.okv-topbar{width:min(calc(100% - 20px),1080px)}.okv-topbar__extra{grid-row:2;grid-column:1/-1;justify-self:start;margin-left:0}}
@media (max-width:360px){.okv-topbar>.okv-family{margin-left:10px}}
.okv-footer{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;align-items:center;padding:1.2rem 0;font-size:.85rem;line-height:1.4;color:var(--muted,#525a78)}
.okv-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.okv-footer a:hover,.okv-footer a:focus-visible{color:var(--text,#0b1020)}
.okv-footer__links{display:flex;flex-wrap:wrap;gap:.35rem .9rem}