/* shared/nav/bar.css -- the ONE top bar of every page (navunify1, 2026-10-28). The look of the home page's bar once the page is scrolled: paper glass, a hairline under it,
   ink text, the Ink "Make a reel" button. Stand-alone on purpose: its own tokens (--zb-*), its own classes (zb-*), px units only (the SEO pages set html to 17px), Geist from
   the page's own @font-face. It does not read .hp, .mk, page.css or tokens.css, so the bar looks the same on a dark SEO page, on a paper page and on the home.
   Markup: shared/nav/bar.js (the server pages) and web/src/marketing/SiteBar.jsx (React), compared tag by tag by web/src/marketing/sitebar.test.mjs.
   Linked from server pages as /seo/bar.css?v=<mtime>; imported by the app. Breakpoints are the home bar's: the three products leave the row under 860 px (they open the
   sheet, first and big), the text links and the finder leave under 1081 px (the burger takes over). The row is 68 px (60 on a phone) and the bar reserves it from the first paint. */
.zb-bar {
  --zb-canvas: #f1efea;
  --zb-s2: #ffffff;
  --zb-s3: #f3f1ec;
  --zb-t1: #17161a;
  --zb-t2: #4f4e57;
  --zb-t3: #6b6a73;
  --zb-line: rgba(23, 22, 26, 0.08);
  --zb-line2: rgba(23, 22, 26, 0.14);
  --zb-hover: rgba(23, 22, 26, 0.05);
  --zb-ink-hover: #2a292e;
  --zb-seal: #cc3b14;
  --zb-seg-thumb: #ffffff;
  --zb-pop-shadow: 0 24px 48px -20px rgba(23, 22, 26, 0.3), 0 0 0 1px var(--zb-line2);
  --zb-font: Geist, 'Geist Fallback', Inter, -apple-system, 'Segoe UI', system-ui, sans-serif;
  position: sticky;
  top: 0;
  z-index: 60;
  box-sizing: border-box;
  height: 69px;
  border-bottom: 1px solid var(--zb-line);
  /* solid paper: a dark page behind it must not tint it (the home's glass is below) */
  background: var(--zb-canvas);
  color: var(--zb-t1);
  color-scheme: light;
  font-family: var(--zb-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: start;
  transition: background 0.3s, border-color 0.3s;
}
/* Dark: warm ink glass, the Ink button inverts to paper, the seal brightens to the app vermilion. data-theme='dark'
   forces it; with no stored choice the OS decides (the same guard pattern as styles/tokens.css and server/seo/page.css). */
:root[data-theme='dark'] .zb-bar {
  --zb-canvas: #161310;
  --zb-s2: #221e1a;
  --zb-s3: #2c2723;
  --zb-t1: #f4f1ec;
  --zb-t2: #b9b4ab;
  --zb-t3: #8f8a81;
  --zb-line: rgba(255, 255, 255, 0.09);
  --zb-line2: rgba(255, 255, 255, 0.16);
  --zb-hover: rgba(255, 255, 255, 0.07);
  --zb-ink-hover: #ffffff;
  --zb-seal: #f4552b;
  --zb-seg-thumb: #39332d;
  --zb-pop-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--zb-line2);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .zb-bar {
    --zb-canvas: #161310;
    --zb-s2: #221e1a;
    --zb-s3: #2c2723;
    --zb-t1: #f4f1ec;
    --zb-t2: #b9b4ab;
    --zb-t3: #8f8a81;
    --zb-line: rgba(255, 255, 255, 0.09);
    --zb-line2: rgba(255, 255, 255, 0.16);
    --zb-hover: rgba(255, 255, 255, 0.07);
    --zb-ink-hover: #ffffff;
    --zb-seal: #f4552b;
    --zb-seg-thumb: #39332d;
    --zb-pop-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--zb-line2);
    color-scheme: dark;
  }
}
.zb-bar *,
.zb-bar *::before,
.zb-bar *::after {
  box-sizing: border-box;
}
/* the home page: the bar floats over the hero (the hero already leaves its 68 px), a touch clearer until the page scrolls */
.zb-bar--home {
  position: fixed;
  inset: 0 0 auto 0;
  width: auto;
  background: color-mix(in srgb, var(--zb-canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.zb-bar--home.is-solid,
.zb-bar--home.is-open {
  background: color-mix(in srgb, var(--zb-canvas) 94%, transparent);
}
/* an open sheet is a child of the bar: a backdrop filter would make the bar the containing block of the fixed scrim */
.zb-bar--home.is-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.zb-bar a,
.zb-bar button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.zb-bar a:hover {
  text-decoration: none;
}
.zb-bar :focus-visible {
  outline: 2px solid var(--zb-t1);
  outline-offset: 2px;
}
.zb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.zb-ic {
  display: block;
  flex: none;
}

/* ---------------------------------------------------------------- the row */
.zb-row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1200px, 100% - 80px);
  height: 68px;
  margin-inline: auto;
}
.zb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  border-radius: 8px;
  color: var(--zb-t1);
  text-decoration: none;
}
.zb-seal {
  display: block;
  flex: none;
}
/* the vermilion seal: the paper accent in light, the brighter app vermilion in dark (--zb-seal) */
.zb-seal rect {
  fill: var(--zb-seal);
}
.zb-word {
  display: block;
  color: var(--zb-t1);
  font: 700 18px/27px var(--zb-font);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* the three products: quiet text links with their icons */
.zb-feat {
  display: flex;
  align-items: center;
  flex: none;
  gap: 2px;
  margin-inline-start: 8px;
}
.zb-feat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--zb-t1);
  font: 500 15px/1 var(--zb-font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
}
.zb-feat-btn .zb-ic {
  width: 18px;
  height: 18px;
  color: var(--zb-t3);
}
.zb-feat-btn:hover,
.zb-feat-btn[aria-current='page'] {
  background: var(--zb-hover);
}
.zb-feat-btn:active {
  transform: scale(0.98);
}

/* Tools (a menu) and Pricing */
.zb-links {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: 2px;
  min-width: 0;
}
.zb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--zb-t1);
  font: 500 15px/1 var(--zb-font);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.zb-menu-btn .zb-ic {
  color: var(--zb-t3);
}
.zb-link:hover,
.zb-link[aria-expanded='true'],
.zb-link[aria-current='page'] {
  background: var(--zb-hover);
}
.zb-menu {
  position: relative;
}
.zb-pop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 2;
  min-width: 220px;
  padding: 8px;
  flex-direction: column;
  border-radius: 16px;
  background: var(--zb-s2);
  box-shadow: var(--zb-pop-shadow);
  color: var(--zb-t2);
  font-size: 14px;
  line-height: 21px;
}
.zb-menu.is-open > .zb-pop {
  display: flex;
}
/* no script at all: the menu is open while focus is inside it (a click on its button focuses it) */
html:not(.zb-js) .zb-menu:focus-within > .zb-pop {
  display: flex;
}
.zb-pop--wide {
  min-width: 500px;
  padding: 10px;
  gap: 0 14px;
}
.zb-menu.is-open > .zb-pop--wide,
html:not(.zb-js) .zb-menu:focus-within > .zb-pop--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.zb-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.zb-pop a {
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--zb-t2);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  text-decoration: none;
}
.zb-pop a:hover {
  background: var(--zb-s3);
  color: var(--zb-t1);
}
.zb-col-h {
  margin: 8px 12px 4px;
  color: var(--zb-t3);
  font: 600 13px/1.2 var(--zb-font);
}
.zb-rule {
  height: 1px;
  margin: 6px 12px;
  background: var(--zb-line);
}
.zb-pop .zb-all {
  margin-top: 4px;
  border-top: 1px solid var(--zb-line);
  border-radius: 0 0 10px 10px;
  color: var(--zb-t1);
}

/* the right side: the finder (a magnifier), Log in or Account, "Make a reel", and on a phone the burger */
.zb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  font-size: 14px;
}
.zb-finder {
  display: none;
}
.zb-find-btn {
  padding: 0 12px;
}

/* the theme switch: an icon-only button in the row (sun shows in light, moon in dark; swapped by CSS on [data-theme]).
   40 px target like the finder. On a phone it leaves the row and becomes a labelled row in the sheet (.zb-sheet-theme). */
.zb-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--zb-t2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.zb-theme:hover {
  background: var(--zb-hover);
  color: var(--zb-t1);
}
.zb-theme .zb-ic {
  width: 18px;
  height: 18px;
}
.zb-theme-moon {
  display: none;
}
:root[data-theme='dark'] .zb-theme-sun {
  display: none;
}
:root[data-theme='dark'] .zb-theme-moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .zb-theme-sun {
    display: none;
  }
  :root:not([data-theme='light']) .zb-theme-moon {
    display: block;
  }
}
.zb-find-pop {
  inset-inline-start: auto;
  inset-inline-end: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 320px;
}
.zb-menu.is-open > .zb-find-pop,
html:not(.zb-js) .zb-menu:focus-within > .zb-find-pop {
  display: flex;
}
.zb-find-pop input,
.zb-sheet-find input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--zb-s3);
  box-shadow: inset 0 0 0 1px var(--zb-line2);
  color: var(--zb-t1);
  font: 400 14px var(--zb-font);
}
.zb-find-pop input::placeholder,
.zb-sheet-find input::placeholder {
  color: var(--zb-t3);
  opacity: 1;
}
.zb-go {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--zb-t1);
  color: var(--zb-canvas);
  font: 600 14px/1 var(--zb-font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
.zb-go:hover {
  background: var(--zb-ink-hover);
}
.zb-account {
  padding: 0 12px;
  color: var(--zb-t1);
  font: 500 15px/1 var(--zb-font);
  white-space: nowrap;
  text-decoration: none;
}
.zb-bar .zb-account:hover {
  text-decoration: underline;
  text-decoration-color: var(--zb-line2);
  text-underline-offset: 4px;
}
.zb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--zb-t1);
  color: var(--zb-canvas);
  font: 600 15px/1 var(--zb-font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s;
}
.zb-bar .zb-cta:hover {
  background: var(--zb-ink-hover);
}
.zb-bar .zb-cta:focus-visible {
  outline-offset: 3px;
}
.zb-burger {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--zb-t1);
  cursor: pointer;
}
.zb-burger:hover,
.zb-burger[aria-expanded='true'] {
  background: var(--zb-hover);
}
.zb-burger-close,
.zb-bar.is-open .zb-burger-open {
  display: none;
}
.zb-bar.is-open .zb-burger-close {
  display: block;
}

/* the phone sheet */
.zb-sheet,
.zb-scrim {
  display: none;
}
.zb-sheet-feat {
  display: none;
}
.zb-sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--zb-line);
  color: var(--zb-t1);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}
.zb-sheet-h {
  margin: 18px 0 2px;
  color: var(--zb-t3);
  font: 600 13px/1.2 var(--zb-font);
}
.zb-sheet-find {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

/* the sheet's theme row: a label and a Light / Dark / Auto segmented control. The active option follows [data-theme]
   on <html> from the first paint (no script needed for the look); the script keeps aria-pressed in step. */
.zb-sheet-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--zb-line);
}
.zb-sheet-theme-h {
  color: var(--zb-t1);
  font: 500 16px/24px var(--zb-font);
}
.zb-seg {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--zb-s3);
  box-shadow: inset 0 0 0 1px var(--zb-line2);
}
.zb-seg-btn {
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--zb-t2);
  font: 500 14px/1 var(--zb-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.zb-seg-btn:hover {
  color: var(--zb-t1);
}
.zb-seg-btn:active {
  transform: scale(0.97);
}
:root[data-theme='light'] .zb-seg-btn[data-zb-theme-set='light'],
:root[data-theme='dark'] .zb-seg-btn[data-zb-theme-set='dark'],
:root:not([data-theme]) .zb-seg-btn[data-zb-theme-set='system'] {
  background: var(--zb-seg-thumb);
  color: var(--zb-t1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

@media (min-width: 1081px) {
  .zb-finder {
    display: block;
  }
}
/* a little tighter between the burger's width and a full desktop, so a long language (Spanish, German) never crowds the finder */
@media (max-width: 1180px) {
  .zb-row {
    gap: 12px;
  }
  .zb-feat-btn {
    gap: 7px;
    padding: 0 9px;
  }
  .zb-link {
    padding: 0 10px;
  }
}
/* the burger takes over: the text links, the finder and Log in move into the sheet */
@media (max-width: 1080px) {
  .zb-links,
  .zb-finder,
  .zb-account,
  .zb-theme {
    display: none;
  }
  .zb-burger {
    display: grid;
  }
  .zb-sheet {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    max-height: calc(100vh - 69px);
    max-height: calc(100dvh - 69px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 24px 24px;
    background: var(--zb-canvas);
    border-top: 1px solid var(--zb-line);
    box-shadow: 0 24px 48px -24px rgba(23, 22, 26, 0.25);
  }
  .zb-bar.is-open .zb-sheet {
    display: flex;
  }
  html:not(.zb-js) .zb-bar:focus-within .zb-sheet {
    display: flex;
  }
  .zb-bar.is-open .zb-scrim {
    display: block;
    position: fixed;
    inset: 69px 0 0;
    z-index: -1;
    padding: 0;
    border: 0;
    background: rgba(23, 22, 26, 0.32);
    cursor: default;
  }
}
/* under 860 px: the logo, "Make a reel" and the burger; the three products head the sheet, first and big */
@media (max-width: 860px) {
  .zb-bar {
    height: 61px;
  }
  .zb-row {
    gap: 10px;
    height: 60px;
  }
  .zb-row > .zb-feat {
    display: none;
  }
  .zb-cta {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14.5px;
  }
  .zb-sheet {
    max-height: calc(100vh - 61px);
    max-height: calc(100dvh - 61px);
  }
  .zb-bar.is-open .zb-scrim {
    inset: 61px 0 0;
  }
  .zb-sheet-feat {
    display: block;
    margin: 12px 0 6px;
  }
  .zb-sheet-h {
    margin-top: 14px;
  }
  .zb-sheet-feat .zb-feat {
    display: grid;
    gap: 6px;
    margin: 0;
  }
  .zb-sheet .zb-sheet-feat .zb-feat-btn {
    justify-content: flex-start;
    gap: 12px;
    height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--zb-s2);
    box-shadow: inset 0 0 0 1px var(--zb-line);
    font: 600 16px/1 var(--zb-font);
    letter-spacing: -0.005em;
  }
  .zb-sheet-feat .zb-feat-btn .zb-ic {
    color: var(--zb-t2);
  }
}
@media (max-width: 600px) {
  .zb-row {
    width: calc(100% - 32px);
  }
  .zb-sheet {
    padding-inline: 16px;
  }
  /* 16 px: a phone does not zoom the page when the finder takes focus */
  .zb-sheet-find input {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zb-bar,
  .zb-bar * {
    transition: none !important;
  }
}
@media print {
  .zb-bar {
    display: none;
  }
}