/* The site header, one implementation for every page. The Layout pages link this file directly;
   the chat workspace at `/` gets the same rules through app.css, which esbuild inlines, so the
   home page pays no extra request for them. */
.site-header { display:flex; align-items:center; gap:32px; min-height:64px; padding:12px 32px; border-bottom:1px solid var(--line); background:var(--surface-page); }
.site-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:18px; }
/* The mark is a block that exactly contains its SVG, so `align-items:center` above centres the
   artwork and not a box the artwork hangs out of. `display:block` also keeps the SVG off the text
   baseline, which would otherwise shift it by the line box's descender. */
.site-brand .mark { display:block; flex:none; width:28px; height:28px; }
.site-brand .mark svg { display:block; width:100%; height:100%; }
.site-nav { display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.site-nav a { padding:7px 1px 5px; border-bottom:2px solid transparent; text-decoration:none; color:var(--text-muted); font-size:15px; }
.site-nav a[aria-current="page"] { color:var(--text-primary); border-bottom-color:var(--signal-receive); }
.site-nav a:hover { color:var(--text-primary); }
.skip-link { position:absolute; left:-9999px; top:0; z-index:20; padding:10px 16px; background:var(--surface-raised); border:1px solid var(--line); border-radius:0 0 6px 0; text-decoration:none; font-weight:600; }
.skip-link:focus { left:0; }
/* The menu button belongs to phones only; on a desktop row the six items are simply the row. */
.site-menu-btn { display:none; }

/* Below the tablet breakpoint six items cannot sit beside the wordmark, and wrapping them cost
   four rows and a quarter of a phone screen. The header becomes one 56px row instead — wordmark,
   then a single menu button — and the destinations move behind it.
   The `.js` guard is the whole point of the arrangement: `/pricing`, `/security` and `/company`
   load no bundle, so if a script never runs the button stays hidden and the nav stays the plain
   wrapped row, which needs nothing to be navigable. */
@media (max-width:860px) {
  .site-header { gap:10px; padding:0 16px; min-height:56px; box-sizing:border-box; position:relative; }
  .site-nav { gap:2px; }
  .site-nav a { padding:5px 7px; font-size:14px; white-space:nowrap; }
  .js .site-menu-btn {
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:40px; height:40px; padding:0; font-size:20px; line-height:1;
    border:1px solid var(--control-line); border-radius:6px; background:var(--surface-inset);
    color:inherit; cursor:pointer;
  }
  /* Out of sight but still in the document: the crawler reads the destinations either way, and on
     `/` the workspace drawer is what actually shows them. */
  .js .site-nav { display:none; }
  /* The `site` mode drawer: the header's own nav, dropped under the row it belongs to. */
  .js .site-nav[data-open="true"] {
    display:flex; flex-direction:column; gap:2px; position:absolute; z-index:30;
    top:100%; right:8px; min-width:184px; padding:8px;
    border:1px solid var(--line); border-top:0; border-radius:0 0 6px 6px;
    background:var(--surface-raised); box-shadow:0 12px 32px #17252226;
  }
  .js .site-nav[data-open="true"] a { padding:9px 10px; border:0; font-size:15px; }
  .js .site-nav[data-open="true"] a[aria-current="page"] { background:var(--surface-inset); }
}