/* BurbzTech site bar: the header on every page of the site and on every app it hosts.
   One stylesheet for both. Site pages render the bar from src/components/Header.astro; the apps get it from
   /shared/site-bar.js, which the build (and the dev server) adds to each app's page under public/apps/.
   Colours come from the page's own design-system tokens, so the bar follows each page's theme. Class names are
   prefixed btsb- so they never collide with an app's own CSS. */

.btsb { position: relative; z-index: 20; font-family: var(--font-sans, "Barlow", system-ui, sans-serif); }
.btsb *, .btsb *::before, .btsb *::after { box-sizing: border-box; }
.btsb-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .btsb-wrap { padding: 0 32px; } }

.btsb-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 0; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.btsb-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.btsb-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; border-radius: 1px; }
.btsb-logo img { display: block; height: 34px; width: auto; max-width: none; }
.btsb-logo .btsb-lockup { display: none; }
@media (min-width: 560px) { .btsb-logo .btsb-badge { display: none; } .btsb-logo .btsb-lockup { display: block; height: 30px; } }

/* " / App name" after the logo, in apps only */
.btsb-crumb { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-condensed, sans-serif); font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: .02em; }
.btsb-crumb::before { content: "/"; color: var(--on-graphite-muted, #b7bec7); }
.btsb-crumb a { color: var(--on-graphite, #fff); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btsb-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

.btsb-nav { margin-left: auto; }
.btsb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.btsb-nav a {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  font-family: var(--font-condensed, sans-serif); font-weight: 600; font-size: 17px; letter-spacing: .02em;
  color: var(--on-graphite, #fff); text-decoration: none;
}
.btsb-nav a:hover { color: var(--on-graphite, #fff); text-decoration: underline; text-underline-offset: 4px; }
.btsb-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--copper, #b4541c); }
@media (max-width: 559px) { .btsb-nav a { padding: 0 8px; font-size: 16px; } .btsb-nav a[aria-current="page"]::after { left: 8px; right: 8px; } }

.btsb a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--panel, #2b323b), 0 0 0 4px var(--focus-inverse, #fff); }

/* Right-hand slot: the theme switch on site pages, an app's own controls in an app.
   On a narrow screen it drops to its own row under the logo and menu. */
.btsb-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.btsb-tools:empty { display: none; }
@media (max-width: 699px) { .btsb-app .btsb-tools { flex-basis: 100%; justify-content: flex-end; padding-bottom: 4px; } }

/* Livery band: graphite, paint and trim, 2px below the bar. Paint values hold in both themes, like real paint. */
.btsb-livery { position: relative; margin-top: 2px; height: var(--livery-height, 32px);
  background: linear-gradient(var(--graphite, #2b323b) 0 14px, transparent 14px 17px, var(--btsb-paint) 17px 25px, transparent 25px 28px, var(--btsb-trim) 28px 32px); }
.btsb-livery--worn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAgCAYAAAD9qabkAAADnElEQVR42u2dbUsVQRTH/8b9FkJQpJlQdilqUSMspEsqmgqXIMIHkL5Nby2opAIJKpMeMKQkeuAWhT2AlUm98oXfoRe9cC6c1nvX3Z3HnTk/kHPu3bszZ+fMnJmdnVlbrs7eAcNkZAPAAcdtfE30UxbtqMU+RwrTlU2rVop98QnAMa7fzvNLyDZL+cs0/lkAVzz0yTLR+1M2+DkhJ3LkpyKQRKVAGswzIc97cj1tDtlyj+jVFL831fhN9/r9Eue+IPpZk0bHAwD3/nr5AaDDYH7rRG/PmcZdol9iFyplwrYBoYwAXOn5Owzn124gj6qlsrwPYNwRv64KWS5awzARAOaJfpGDfuFwude/KeSUZTvKRXXuHq7fO9gUf4zbjHMRFGMEkLXXXyN6p4UyaeVqIc2aIf9NcVHLB4Db5PNlB2zqDNAPb4nek/HcV0Ke5uocLG+I3hs7dl3ImaQRQGvOYe+CkBfYB1L0eHY9PgbxTR9HiKUMvX79eW+V26tT1Hv+VeycjFIZoG0vPrKNyw2/N+HYjKo5gEYNn3t+OW4BmFSUVpn9o5SHAEYVpPNOyG7JdFaE7FM9AmCSsbZKyzFC6/lHHbOnT0eiOgOAis0Kpngp5JkGx3Q2+skMt1afARzVaMt7op+U8Hkdnb5/DuAcyU/lBhskXEP8+tLk352QT2S7PFt4NyDDhAsvBGIYDgAMw4RI1jmALPf1Ou/PosD89J3ohzSWsYxvGtnwm+j7PfSLjTq5BKCSwp5UNumeA/hI9OPYfrQCmJ9hfQxgyMMAUGeF6H1NAsQHoZ8waLdrAWAZcvv2vcO1ScB5qNsx+JPo6w4HgK8AjnBVZDTxFMBA6HMAQ1wPGEZ+DkA3zXr/L0J2ZUjrYEF8wL2/HZaErDhk0wOij+U4/xvRDws5UKQAUDT+ANjHxcBoqlsQ9WuDfK/0bcxFCQBdGtOOT1QyYVBx0KYxiXMXsT3pOuxjAMhLmseWf3OWQw3AFsJ+PMlkrzN56kqaXn+vzyOAvESKfqPyPCZcdNaZXO8l5JWADBMwHAAYJmCKcgug6/+rmbifqzlkc5wnQg5aLKcFovv8ApNFpJugM7qNvigBICqwTaHPFex2/bTR3xBy2pNrz/NWIaP1RVcA4DXX9siyNmGQi0sZj4g+IiRt/MMuGu3KCCDNQodmQ8lr+H+dwG4RtL5BxaXdaSqHfVuO33YkMd2kTGxtIsvCCLHb9Nuwcvv7Hz4ijYxQpIX3AAAAAElFTkSuQmCC") repeat-x left top / 256px 32px; }
.btsb-paint-copper    { --btsb-paint: #b4541c; --btsb-trim: #d9952b; }
.btsb-paint-berry     { --btsb-paint: #c0303c; --btsb-trim: #4a8c3c; }
.btsb-paint-blueprint { --btsb-paint: #2f4f9e; --btsb-trim: #2d7f9e; }
.btsb-paint-coolant   { --btsb-paint: #2d7f9e; --btsb-trim: #d9952b; }
.btsb-paint-brass     { --btsb-paint: #9a7a24; --btsb-trim: #8f98a3; }
.btsb-paint-steel     { --btsb-paint: #8f98a3; --btsb-trim: #2b323b; }

/* ---- App adapters: each app's own header gives way to the bar (its controls move into the bar's tools slot,
   see APP_ADAPTERS in src/pages/shared/site-bar.js.ts). One livery per page, so each app's own band is hidden. */
.btsb-app--generator-studio header.hdr { display: none; }
.btsb-app--generator-studio .btsb-tools .hdr__codes { display: flex; gap: 6px; }
.btsb-app--long-tail header.site-head,
.btsb-app--long-tail header.site-head + .bt-livery { display: none; }
.btsb-app--queens-quizzing .qq-head > .bt-livery { display: none; }

/* Site pages: the theme switch in the tools slot. */
.btsb-theme { min-width: 64px; }