/* CloakAPI top bar, phone widths (E8, 2026-09-29). Loaded AFTER nav-footer.css.
   Before: brand, .menu-toggle and .right were laid out in DOM order and flex-wrap pushed .right to a
   second row below ~450px, so the bar was two rows tall (131px at 360) and the hamburger sat next to
   the logo. After: one row (61px at 360): brand on the left; theme toggle, Sign in, Start free and the
   hamburger on the right. Same links, same words, same colours; only order, gaps and padding change.
   Tap targets stay >= 44px tall (Sign in / Start free 52-69px wide, theme toggle and hamburger 44px).
   Robust to the font: pages without a self-hosted Inter (blog, enterprise, for/*, ...) fall back to a
   wider system font, so with the menu closed the bar never wraps; the wordmark is the one item that may
   shrink. Below 350px the wordmark is dropped visually (kept for screen readers): four controls + mark. */
@media (max-width:760px) {
  nav.top .brand { order:0; min-width:0; }
  nav.top .right { order:1; margin-left:auto; }
  nav.top .menu-toggle { order:2; }
  nav.top .links { order:3; }
}
@media (max-width:460px) {
  nav.top { padding:8px; gap:4px; }
  nav.top:not([data-menu-open="true"]) { flex-wrap:nowrap; }
  nav.top .brand { gap:6px; font-size:14px; flex:0 1 auto; overflow:hidden; }
  nav.top .brand .brand-mark { flex:0 0 auto; width:28px; height:28px; }
  nav.top .brand .brand-name { min-width:0; overflow:hidden; white-space:nowrap; }
  nav.top .right { flex:0 0 auto; gap:4px; }
  nav.top .menu-toggle { flex:0 0 auto; }
  nav.top .btn { padding:10px 6px; font-size:12px; white-space:nowrap; }
}
@media (max-width:349px) {
  nav.top .brand { gap:0; }
  nav.top .brand .brand-name { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}