/* bb-chrome.css — the Birdbrain nav, one stylesheet for the whole door.
   Served as a space asset at /assets/bb-chrome.css. Source of truth:
   birdbrain/chrome/bb-chrome.css — see birdbrain/chrome/README.md to publish.

   These rules are the apex's nav RESOLVED: home.html grew a base block and
   then a later block that overrode most of it, so reading the two together
   was the only way to know what the nav actually looked like. Written out
   once, here, and home.html links this file rather than restating it.

   The one rule that is new: the nav takes its frosted background once the
   page has scrolled. The apex never needed it, because its hero does not
   pass under the nav; a docs page and a journal are nothing but passing
   under the nav, and a transparent bar over moving prose is unreadable. */

:root{
  --void:#ffffff; --pearl:#fafafa; --ice:#f4f6f8; --ghost:#e8eaed;
  --ink:#0a0a0a; --graphite:#2c3033; --slate:#5b6169; --silver:#8e9298; --dust:#c7cbd1;
  --red:#ef4444; --orange:#f97316; --amber:#f59e0b; --emerald:#10b981;
  --cyan:#06b6d4; --blue:#3b82f6; --violet:#8b5cf6;
  --spectrum:linear-gradient(90deg,var(--red) 0%,var(--orange) 17%,var(--amber) 33%,var(--emerald) 50%,var(--cyan) 67%,var(--blue) 83%,var(--violet) 100%);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── the bar ──────────────────────────────────────────────────────── */
nav.bbx{
  flex:none; position:sticky; top:0; z-index:60;
  background:transparent; border:0;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
nav.bbx.scrolled{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ghost);
}
nav.bbx .nav-in{max-width:none;margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ── the mark ─────────────────────────────────────────────────────── */
nav.bbx .mark{font-family:'Inter Tight',system-ui,sans-serif;font-weight:400;font-size:21px;letter-spacing:-.03em;text-decoration:none;border-bottom:0;color:var(--ink);flex:none;display:inline-flex;align-items:center;gap:12px}
nav.bbx .mark:hover{border-bottom:0}
nav.bbx .mark svg{width:29px;overflow:visible}
nav.bbx .mark .f{transition:fill .5s var(--ease),stroke .5s var(--ease)}
nav.bbx .mark:hover .f1{stroke:var(--red);fill:rgba(239,68,68,.10)}
nav.bbx .mark:hover .f2{stroke:var(--cyan);fill:rgba(6,182,212,.10)}
nav.bbx .mark:hover .f3{stroke:var(--violet);fill:rgba(139,92,246,.12)}
nav.bbx .experiment{font:10px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;color:#747980;border:1px solid var(--ghost);padding:4px 7px;border-radius:5px;margin-left:3px}

/* ── the right-hand end ───────────────────────────────────────────── */
nav.bbx .nav-actions{display:flex;align-items:center;gap:22px}
nav.bbx .more-btn,nav.bbx .quiet-button{font:13px Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--slate);border:0;background:none;cursor:pointer;padding:9px 0;transition:color .18s var(--ease)}
nav.bbx .more-btn:hover,nav.bbx .quiet-button:hover{color:var(--ink)}
nav.bbx .quiet-button{display:flex;align-items:center;gap:7px}
nav.bbx .more{position:relative}

/* The Explore menu is the scene palette's little sibling and is drawn in the
   same hand: a white card on a soft shadow, rows of 12px radius that take the
   ice on hover, a name in Inter and the machine's own word for the place in
   mono underneath. The two are the only lists this door has, and a person
   opening one after the other should not feel they have changed building. */
nav.bbx .menu{position:absolute;top:calc(100% + 12px);right:0;background:#fff;border:1px solid var(--ghost);border-radius:19px;box-shadow:0 26px 70px -28px rgba(15,23,42,.36),0 3px 10px -4px rgba(15,23,42,.1);padding:7px;min-width:236px;display:none;flex-direction:column;z-index:70}
nav.bbx .menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
nav.bbx .more.on .menu{display:flex}
nav.bbx .menu a{display:block;padding:8px 10px;border-radius:12px;color:var(--graphite);text-decoration:none;border-bottom:0;transition:background .14s var(--ease)}
nav.bbx .menu a:hover{background:var(--ice);border-bottom:0}
nav.bbx .menu a[aria-current="page"]{background:var(--ice)}
nav.bbx .menu .row{display:flex;align-items:center;gap:8px}
nav.bbx .menu .mk{flex:none;width:17px;height:17px;color:var(--slate)}
nav.bbx .menu .mk path,nav.bbx .menu .mk rect{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
/* About Birdbrain wears the collective's own mark, the same path the scene
   palette draws, so the prism in the composer and the prism in this menu are
   one drawing rather than two that resemble each other. It carries the
   interior facets, so it is drawn a hair lighter than its neighbours. */
nav.bbx .menu .mk.prism path{stroke-width:1.1}
nav.bbx .menu .nm{font-size:13.5px;color:var(--ink);white-space:nowrap}
/* Aligned to the name rather than the glyph — 17px of icon plus the 8px gap —
   exactly as the scene list aligns an id under a collective. */
nav.bbx .menu .id{display:block;margin-top:1px;padding-left:25px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.01em;color:var(--silver)}
/* The door, and only on a phone. The Sign in button is hidden under 620px, so
   without this row a phone has no way in. It is not one of the four places to
   go, so it is kept below the rule rather than in the list. */
nav.bbx .menu-door{display:none!important;margin-top:7px;padding-top:11px!important;border-top:1px solid #f2f3f5;border-radius:0 0 12px 12px!important;font-size:13px;color:var(--graphite)}
@media(max-width:620px){nav.bbx .menu-door.show{display:block!important}}

/* ── the account slot ─────────────────────────────────────────────── */
nav.bbx .btn{font:13px Inter,system-ui,sans-serif;text-transform:none;letter-spacing:0;padding:8px 15px;border-radius:30px;text-decoration:none;border-bottom:0;white-space:nowrap;border:1px solid var(--ghost);color:var(--ink);background:#fff;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
nav.bbx .btn:hover{border-color:var(--ink);border-bottom-color:var(--ink)}
nav.bbx .me-slot{display:flex;align-items:center}
nav.bbx .me-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--ghost);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;overflow:hidden;font:500 12.5px 'Inter',sans-serif;color:#41474e;text-decoration:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
nav.bbx .me-btn:hover,nav.bbx .me-btn:focus-visible{border-color:#c2c7ce;box-shadow:0 2px 12px -4px rgba(36,52,82,.3)}
nav.bbx .me-mark{width:100%;height:100%;display:block;border-radius:50%;transition:transform .5s var(--ease)}
nav.bbx .me-btn.has-seed{border-color:rgba(36,52,82,.13);box-shadow:0 1px 6px -2px rgba(36,52,82,.22)}
nav.bbx .me-btn.has-seed:hover,nav.bbx .me-btn.has-seed:focus-visible{transform:scale(1.06)}
nav.bbx .me-btn.has-seed:hover .me-mark,nav.bbx .me-btn.has-seed:focus-visible .me-mark{transform:rotate(11deg)}
@keyframes meMarkIn{from{opacity:0;transform:scale(.72) rotate(-14deg)}to{opacity:1;transform:none}}
nav.bbx .me-mark.fresh{animation:meMarkIn .52s var(--ease) both}

@media(max-width:620px){
  nav.bbx .nav-in{padding:16px 18px}
  nav.bbx .nav-actions{gap:15px}
  nav.bbx .experiment{display:none}
  nav.bbx .mark{font-size:19px}
  nav.bbx .quiet-button .new-label{display:none}
  nav.bbx .me-slot>.btn{display:none}
}

/* ── the closing line ─────────────────────────────────────────────── */
/* The same row of destinations the apex prints under its composer, so a page
   that ends still ends in the same place. */
.bbx-foot{position:relative;z-index:2;border-top:1px solid var(--ghost);margin-top:72px;background:transparent}
.bbx-foot-in{max-width:1180px;margin:0 auto;padding:30px clamp(18px,5vw,32px) 44px;text-align:center;font:11px 'Inter',system-ui,sans-serif;line-height:1.6;color:var(--dust)}
/* Doubled up on purpose. A host page may carry a blanket `a{border-bottom}`
   rule of its own — the editorial does, the docs page does — and at equal
   specificity whichever sheet loads last would win, which is not a thing to
   leave to load order. */
.bbx-foot .bbx-foot-in a{color:var(--silver);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.bbx-foot .bbx-foot-in a:hover{color:var(--ink);border-bottom-color:var(--dust)}
.bbx-foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
.bbx-foot-in .sep{padding:0 9px;opacity:.6}
.bbx-sign{margin-bottom:16px}
.bbx-sign .wm{display:block;font-family:'Inter Tight',system-ui,sans-serif;font-weight:300;font-size:22px;letter-spacing:-.03em;color:var(--ink)}
.bbx-sign .tag{display:block;margin-top:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);line-height:1.7}

@media(prefers-reduced-motion:reduce){
  nav.bbx *,nav.bbx *::before,nav.bbx *::after{animation:none!important;transition:none!important}
}