/*
 * @generated — do not edit by hand
 * @command npm run sync:tokens
 * @sources src/styles/site-header.css
 * @generated-at 2026-09-29T08:15:29.145Z
 */

/*
 * Shared site header — B4 "Bold Hook".
 * design/inbox/2026-09-17-desktop-header-navigation.md
 *
 * Loaded by the SPA barrel (src/styles.css) and, as a synced copy, by the
 * static pages in public/ (npm run sync:tokens writes public/styles/site-header.css).
 */

/*
 * Published so surfaces that overlay the bar can clear it without measuring:
 * a 44px control in 0.5rem of block padding, plus the 2px accent rule.
 */
:root {
  --site-header-height: 3.875rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  /* viewport-fit=cover: the bar's own background fills the notch, not the page's. */
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-bg);
  border-bottom: var(--rule-width) solid var(--color-rule);
}

/*
 * #app is a shrink-to-fit flex item of a centered body, so a header inside it
 * stops at the widest section and the accent border reads as a divider
 * floating mid-page. Break out to the viewport edges without touching the
 * page's own layout (see the #app note in site.css).
 *
 * Keyed on the header being in #app rather than on a page class, so a surface
 * added later gets a full-width bar rather than the pinched one the account
 * page shipped with on 2026-09-18.
 */
body:has(#app .site-header) .site-header {
  margin-inline: calc(50% - 50vw);
}

/*
 * The bar uses the viewport: brand at the start edge, CTA and hamburger at the
 * end edge, the way the B4 mockups draw it. It deliberately does not follow the
 * 36rem prose measure — a header pinched into a narrow centred column under a
 * full-width accent border reads as a mistake, and the width is the one thing a
 * desktop header has that a mobile one does not.
 *
 * The 90rem cap keeps the two ends from drifting apart on very wide monitors.
 */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0.5rem max(1.5rem, env(safe-area-inset-left, 0px)) 0.5rem
    max(1.5rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

@media (max-width: 30rem) {
  .site-header-inner {
    padding-inline: max(1rem, env(safe-area-inset-left, 0px))
      max(1rem, env(safe-area-inset-right, 0px));
  }
}

.site-header-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-end: auto;
  min-width: 0;
}

.site-header-brand {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  /* 44px tap target without inflating the bar. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-header-sep {
  color: var(--color-text-muted);
}

.site-header-page {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/*
 * The player's `A·02`, in the slot the other surfaces give the page name:
 * where you are in a chapter is the answer to the same question.
 */
.site-header-mark .deck-ref {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.site-header-how {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.25em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
}

@media (hover: hover) {
  .site-header-how:hover {
    color: var(--color-text);
  }
}

/*
 * Outlined, not filled: the orange fill is kept for the one hero call to
 * action, so the header's action is the secondary style (issue #303). Accent
 * text on the page background measures 7.9:1 light (indigo on cream) and
 * 13.5:1 dark (yellow on ink).
 */
.site-header-cta {
  /*
   * The static pages load no global reset; without this the padding and
   * border stack on min-height and the bar outgrows --site-header-height.
   */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  border: 2px solid var(--color-primary);
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-speed);
}

@media (hover: hover) {
  .site-header-cta:hover {
    background: color-mix(in srgb, var(--color-wash) 10%, var(--color-bg));
    text-decoration: none;
  }
}

.site-header-cta-short {
  display: none;
}

.site-header-menu {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.site-header-menu-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.site-header-brand:focus-visible,
.site-header-how:focus-visible,
.site-header-cta:focus-visible,
.site-header-menu:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/*
 * Every in-page jump on a page with the bar (the hook link, the FAQ's section
 * links, /terms.html#feedback, scrollIntoView) lands below it, not under it.
 * Set on the scroller rather than per target, so a new anchor needs nothing.
 */
html:has(.site-header) {
  scroll-padding-top: calc(var(--site-header-height) + env(safe-area-inset-top, 0px) + 1rem);
}

/*
 * Mobile: the hero tagline sits immediately below and says what the hook link
 * says, so the link goes rather than wrapping the bar onto two lines.
 */
@media (max-width: 30rem) {
  .site-header-how {
    display: none;
  }

  .site-header-inner {
    gap: 0.5rem;
  }

  .site-header-brand {
    font-size: 0.9375rem;
  }

  .site-header-page {
    font-size: 0.875rem;
  }

  .site-header-cta {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
  }

  /* "Play Early Access" does not fit beside the brand on a small phone. */
  .site-header-cta-long {
    display: none;
  }

  .site-header-cta-short {
    display: inline;
  }

  /* The page's own h1 names it; the bar keeps the brand and the way in. */
  .site-header-page,
  .site-header-sep {
    display: none;
  }
}

/*
 * The account mark (src/lib/auth/account-control.ts): a person icon for a
 * signed-out visitor, swapped for their initial after mount once someone is
 * signed in. Both sit in the same outlined ring, so the swap moves nothing.
 * Outlined like the CTA rather than filled, for the contrast reason in the
 * note above it.
 */
.site-header-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.site-header-account-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1;
}

/*
 * The player gives its story links a top margin (`.slide-player a`), which
 * outranks the rule above and would push the mark 4px down and the bar 4px
 * taller than it is on the landing page. The mark is chrome, not a story link.
 */
.site-header .site-header-account {
  margin: 0;
}

.site-header-account-icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) {
  .site-header-account:hover .site-header-account-initial {
    background: color-mix(in srgb, var(--color-wash) 10%, var(--color-bg));
  }
}

.site-header-account:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/*
 * Player surface. Everything above already places the brand and the hamburger;
 * these are the slots only the player fills. The deck ref stays visible at
 * every width — unlike the page name it replaces, it is how a playtester cites
 * a slide, and the player's bar carries no CTA to compete with it.
 */
.site-header[data-site-header="player"] .site-header-inner {
  gap: 0.5rem;
}

/* Debug controls yield before the hamburger does. */
.site-header[data-site-header="player"] .player-debug-actions {
  flex: 0 1 auto;
  min-width: 0;
}