/* player.viewstream.co.il: the player pages' sub-menu and shared page parts (site.css is the main site's, synced). */
.subnav{border-top:1px solid var(--border-soft,var(--border))}
.subnav__in{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding-block:.35rem;-webkit-overflow-scrolling:touch}
.subnav__in::-webkit-scrollbar{display:none}
.subnav__in a{flex:none;font-size:.88rem;font-weight:600;color:var(--text-muted);text-decoration:none;padding:.4rem .8rem;border-radius:999px;white-space:nowrap}
.subnav__in a:hover{color:var(--text);background:var(--surface)}
.subnav__in a[aria-current="page"]{color:var(--brand-ink);background:var(--brand)}
.subnav__in a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav a[aria-current="page"]{color:var(--text)}

/* page heads and cards shared by /ads/, /skins/, /branded/ */
.pg-hero{padding-block:clamp(2.2rem,5vw,3.8rem) clamp(1.2rem,3vw,2rem)}
.pg-hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.1;margin:.4rem 0 .9rem}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.demo{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl,18px);padding:.75rem;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.demo h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.demo p{margin:0;color:var(--text-muted);font-size:.93rem;line-height:1.55}
.demo__txt{padding:0 .35rem .35rem;display:grid;gap:.4rem}
.demo__mount{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:1.4rem}
.pchips{display:flex;flex-wrap:wrap;gap:.4rem}
.pchip{font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.pchip:hover{border-color:var(--brand)}
.pchip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.pchip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.code{background:#0A0E14;color:#D6E2EE;border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;overflow:auto;
  font:500 .84rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:0;white-space:pre-wrap;word-break:break-word}
.note{color:var(--text-dim);font-size:.85rem}
.tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:6px;
  background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}

/* Hebrew pages (assets/js/i18n.js sets <html lang="he" dir="rtl">, 2026-10-06); the Heebo font is in i18n.css */
[dir="rtl"] .kicker,[dir="rtl"] .tag{text-transform:none;letter-spacing:.02em}
[dir="rtl"] h1 .hl{margin-right:0;margin-left:-.1em;padding:0 0 .18em .1em}
[dir="rtl"] .code{direction:ltr;text-align:left}
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .ftr__bot>span:first-child{direction:ltr;unicode-bidi:isolate}

/* tool pages (lab/config, lab/tiles, sdk/demo) carry the site header + footer (site-chrome.py TOOLS) */
html.vs-embedded .hdr,html.vs-embedded .ftr{display:none!important}
html.vs-tool #theme{display:none}                       /* the tool pages are dark-only */
html.vs-tool:not(.vs-embedded) header:not(.hdr) a.lang{display:none}   /* one language switch: the site header's */
html.vs-tool .hdr,html.vs-tool .ftr{font-family:inherit}
html.vs-tool .ftr{margin-top:3rem}
/* the tool pages style bare `header` (flex row, padding, max-width): undo that for the site header */
html.vs-tool header.hdr{display:block;padding:0;margin:0;gap:0;max-width:none;flex-wrap:nowrap;border-bottom:1px solid var(--border-soft,var(--border))}
html.vs-tool .subnav,html.vs-tool .subnav__in{min-width:0;max-width:100%}