/* Site header: a sticky bar with the goose, "zwigoose" and a breadcrumb back up the site.
   Added to every page at build time by site.js. Uses its own zg- names and tokens so it
   looks the same on every page whatever that page's own styles are. */
/* Reserve the scrollbar's space on every page, so short pages (no scrollbar) and long
   ones don't shift the bar sideways on desktop. */
html { scrollbar-gutter: stable; }
/* The bar's height, for full-screen apps that size themselves below it. */
:root { --zg-bar-h: calc(57px + env(safe-area-inset-top, 0px)); }

.zg-bar {
  --zg-bg: rgba(255, 255, 255, 0.86);
  --zg-fg: #1a1a1a;
  --zg-muted: #6b6b6b;
  --zg-line: rgba(0, 0, 0, 0.09);
  --zg-mark: #0b1733;
  --zg-hover: #2563eb;
  /* Above page content, below app overlays (dialogs, scrims) so those still cover it. */
  position: sticky; top: 0; z-index: 15;
  display: block; margin: 0; padding-bottom: 0; box-sizing: content-box;
  background: var(--zg-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--zg-line);
  padding-top: env(safe-area-inset-top, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.2;
  /* Same size and position on every page, whatever the page's own layout or zoom. */
  font-size: 16px;
}
.zg-bar *, .zg-bar *::before, .zg-bar *::after { box-sizing: border-box; }
.zg-bar a, .zg-bar span, .zg-bar nav { margin: 0; }
@media (prefers-color-scheme: dark) {
  .zg-bar {
    --zg-bg: rgba(17, 18, 19, 0.84);
    --zg-fg: #ededed;
    --zg-muted: #9a9a9a;
    --zg-line: rgba(255, 255, 255, 0.09);
    --zg-mark: #ededed;
    --zg-hover: #5b9dff;
  }
}
.zg-inner {
  max-width: 1160px; margin: 0 auto; height: 56px;
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.zg-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--zg-fg); text-decoration: none; }
.zg-brand:focus-visible { outline: 2px solid var(--zg-hover); outline-offset: 3px; border-radius: 6px; }
.zg-mark { width: 36px; height: 36px; flex: none; color: var(--zg-mark); transition: transform 0.35s ease; }
.zg-brand:hover .zg-mark { transform: rotate(-4deg); }
.zg-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.zg-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--zg-muted); }
.zg-crumbs a { color: var(--zg-muted); text-decoration: none; white-space: nowrap; }
.zg-crumbs a:hover { color: var(--zg-hover); text-decoration: underline; }
.zg-crumbs [aria-current] { color: var(--zg-fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zg-sep { color: var(--zg-line); color: color-mix(in srgb, var(--zg-muted) 55%, transparent); }
@media (max-width: 520px) {
  .zg-name { display: none; }
  .zg-crumbs .zg-mid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zg-mark { transition: none; }
  .zg-brand:hover .zg-mark { transform: none; }
}