/* Pixlane shared chrome for the standalone video pages: topbar + footer.
   Mirrors the SPA chrome (base.css) so switching between an SPA tab and a video
   tab is seamless: same size, font, links. The dark/color/space design tokens
   (plus the light-theme overrides) come from tokens.css, already loaded.
   NOTE: base.css relies on a global a-tag text-decoration:none that standalone
   pages do not have, so text-decoration:none is re-declared on every chrome link.
   z-index is 40 (base.css uses 20) to clear the sticky video preview, and the
   container width rule is scoped to topbar/footer so it never touches vx-wrap. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 8px; left: 50%; transform: translate(-50%); z-index: 10000; width: auto; height: auto; margin: 0; padding: 10px 24px; clip: auto; overflow: visible; background: var(--color-accent); color: #fff; font-size: .95rem; font-weight: 600; border-radius: var(--radius-sm,8px); text-decoration: none; }

/* ── topbar ─────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: #0a0a0ad1; border-bottom: 1px solid var(--dark-border-sub); }
.topbar .container { width: min(1280px, calc(100% - 32px)); margin-inline: auto; }
.topbar__inner { min-height: 56px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; letter-spacing: -.02em; color: var(--dark-text); text-decoration: none; }
.brand__mark { width: 26px; height: 26px; border-radius: 7px; background: var(--dark-accent); display: grid; place-items: center; flex-shrink: 0; }
.brand__mark svg { display: block; }
.brand__text { font-family: var(--font-display); font-size: 1.02rem; color: var(--dark-text); }
/* one line, never wrap; compact enough that all 9 tabs fit common laptop widths,
   with a hidden-scrollbar fallback if a viewport is still too narrow before the
   ≤860 mobile collapse takes over. min-width:0 lets the grid column shrink. */
.topbar__nav { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar__nav::-webkit-scrollbar { display: none; }
.nav-link { padding: 6px 9px; border-radius: 7px; color: var(--dark-muted); border: 1px solid transparent; font-size: 13px; white-space: nowrap; flex-shrink: 0; text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; position: relative; }
.nav-link:hover { color: var(--dark-text); background: #ffffff0a; }
.nav-link--active { color: var(--dark-text); background: #ffffff12; border-color: var(--dark-border); }
.nav-link--active:after { content: ""; position: absolute; bottom: 0; left: 25%; right: 25%; height: 2px; background: var(--dark-accent); border-radius: 2px; }
.topbar__utility { display: flex; gap: var(--space-3); justify-content: flex-end; align-items: center; }
.locale-switcher-wrap { display: inline-flex; align-items: center; }
.locale-switcher { min-height: 32px; min-width: 136px; border-radius: 7px; border: 1px solid var(--dark-border); background: #ffffff0f; color: var(--dark-muted); padding: 0 8px; font-size: var(--text-small); }
[dir=rtl] .locale-switcher { direction: ltr; }

/* ── theme toggle ───────────────────────────────────────────────────── */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-line); background: transparent; color: var(--color-text-soft); cursor: pointer; flex-shrink: 0; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.theme-toggle:hover { background: #ffffff0f; color: var(--color-text); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .tt-sun { display: block; }
.theme-toggle .tt-moon { display: none; }

/* ── light theme ────────────────────────────────────────────────────── */
[data-theme="light"] .topbar { background: #ffffffe0; border-bottom: 1px solid #e3e5e9; }
[data-theme="light"] .nav-link:hover { background: #0a0a0a08; }
[data-theme="light"] .nav-link--active { background: #0a0a0a0d; }
[data-theme="light"] .locale-switcher { background: #0a0a0a06; }
[data-theme="light"] .theme-toggle:hover { background: #0a0a0a08; }
[data-theme="light"] .theme-toggle .tt-sun { display: none; }
[data-theme="light"] .theme-toggle .tt-moon { display: block; }

/* ── footer ─────────────────────────────────────────────────────────── */
.footer { margin-top: var(--space-9); border-top: 1px solid var(--dark-border-sub); background: var(--dark-bg); position: relative; }
.footer .container { width: min(1280px, calc(100% - 32px)); margin-inline: auto; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-7); padding: var(--space-8) 0 var(--space-6); }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__brand-tagline { margin: 0; color: #555; font-size: var(--text-small); line-height: 1.6; max-width: 280px; }
.footer__note { margin: 0; color: #444; font-size: var(--text-small); }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__heading { margin: 0 0 var(--space-2) 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); color: #555; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer__list a { color: #555; font-size: 13px; text-decoration: none; transition: color .15s ease; }
.footer__list a:hover { color: var(--dark-text); }
[data-theme="light"] .footer { background: #f7f8fa; }
[data-theme="light"] .footer__brand-tagline, [data-theme="light"] .footer__heading, [data-theme="light"] .footer__list a { color: #5a6475; }

/* ── responsive (mirrors base.css ≤860 collapse) ────────────────────── */
@media (max-width: 860px) {
  .topbar__inner { grid-template-columns: auto 1fr; min-height: auto; padding-block: var(--space-3); }
  .topbar__nav { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient(90deg,#000 90%,transparent); -webkit-mask-image: linear-gradient(90deg,#000 90%,transparent); }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__nav .nav-link { white-space: nowrap; flex-shrink: 0; }
  .topbar__utility { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: var(--space-2); }
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}