/*
  The site bar — the only chrome the owner-facing app carries, and the only
  thing in it that navigates. components/SiteHeader.tsx (the public nav) has
  its own stylesheet and is untouched; this file is new, and only the owner
  bar reads it.

  Four text tabs on the walnut ground under a hairline, the current one
  marked by a 2px accent rule under the word — the bar sits directly above
  the dark ".head-band" every one of these pages already opens with (and,
  on the Desk, above its light "desk-head" band exactly the way the PUBLIC
  header already transitioned into that same light band before this
  change), so a dark bar is the seam this app already has, not a new one.
  No pills, no chips, no shadow, no hamburger — a standard product top bar,
  because a crew member or Bryan opening this behind the bar should not have
  to learn where the destinations went.

  It is linked from public/ rather than imported beside the component
  because /wiki has to link the same file: that route is a @spine/core route
  handler, and a route handler cannot import CSS through the bundler. Both
  worlds link the same URL, so the bar cannot drift between them
  (lib/wiki-chrome.tsx links this one line into the wiki's own head).

  Every colour, size and face here is a token out of app/theme.css. On /wiki
  those token names arrive instead from
  `content/clients/bowmans-tavern/tokens.css` (core's `readWikiBrand` seam,
  already wired) — the exact values differ slightly between the two files
  today (app/theme.css is a not-yet-folded-back design proposal), which is
  harmless because the NAMES agree.

  For colour, type and `--max` they agree. For the SPACE SCALE they do not:
  the wiki's brand file defines only `--space-8` and `--radius`, and nothing
  else on that document defines the rest (@spine/core's wiki shell declares
  its own `--w-*` scale and no `--space-*` at all). A var() naming an
  undefined custom property with no fallback is invalid at computed-value
  time, so on /wiki every gap and padding below would have collapsed to 0 —
  the mark against the wordmark, the four tabs run together, the email
  against "Sign out". The four names missing there are therefore aliased once
  on `.site-bar`, with their app/theme.css values as the fallback, and the
  aliases are what the rules use. On an App Router page the real token still
  wins; on /wiki the fallback fills the hole, and the same pixels come out of
  both renderers.
*/

/*
  The bar's height, declared once at the root so a page that must sit BELOW it
  reads the same number the bar lays itself out with — `.site-bar-in` sets its
  own height from this, so the two cannot drift. It is on :root rather than on
  .site-bar deliberately: the pages that need to clear the bar are its SIBLINGS
  under <body>, and a custom property only inherits downward.

  It is meaningful ONLY where the bar is a single row. Below 48rem the bar wraps
  and its height is `auto`, which no custom property can honestly stand in for,
  so it is left undeclared there and a page that sticks to it must stop being
  sticky at that width rather than assert a number that will drift.
*/
:root {
  --site-bar-h: 56px;
}

.site-bar {
  --bar-space-2: var(--space-2, clamp(0.75rem, 1.2vw, 1rem));
  --bar-space-3: var(--space-3, clamp(1rem, 1.6vw, 1.4rem));
  --bar-space-4: var(--space-4, clamp(1.4rem, 2.4vw, 2rem));
  --bar-radius-sm: var(--radius-sm, 5px);

  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/*
  The measure every page of this app already uses: app/site.css's `.shell` is
  `width: min(100% - clamp(32px, 8vw, 48px), var(--max))`, so copying that
  formula — rather than the `max-width` + `padding` container the bar was
  lifted from — puts the wordmark on the same left edge as the page title
  directly under it. With `max-width: var(--max)` plus a `--space-4` inset
  the two sat 32px apart at 1440, on the same dark field, the bar being
  directly above `.head-band`.
*/
.site-bar-in {
  display: flex;
  align-items: center;
  gap: var(--bar-space-4);
  width: min(100% - clamp(32px, 8vw, 48px), var(--max));
  height: var(--site-bar-h);
  margin-inline: auto;
}

.site-bar-in,
.site-bar-in * {
  box-sizing: border-box;
}

/* — left: the mark and the wordmark — */

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bar-space-2);
  flex: none;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.site-mark {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--bar-radius-sm);
}

.site-wordmark {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1;
}

/* — middle: where else you can go — */

.site-nav {
  display: flex;
  align-items: stretch;
  gap: var(--bar-space-4);
  min-width: 0;
  height: 100%;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  /*
    The current-marking rule is a border on the element itself rather than a
    text-decoration, so it spans the tab's whole box and sits on one line for
    every tab — an underline hangs off each word's own baseline and a
    two-word tab would have carried it at a different width.
  */
  border-bottom: 2px solid transparent;
  padding-top: 2px;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav a[aria-current="page"],
.site-nav a[aria-current="page"]:hover {
  border-bottom-color: var(--accent);
  color: var(--text);
}

/* — right: who is signed in, and the way out — */

.site-account {
  display: flex;
  align-items: center;
  gap: var(--bar-space-3);
  min-width: 0;
  margin-left: auto;
}

.site-who {
  overflow: hidden;
  max-width: 22ch;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-signout {
  display: flex;
  margin: 0;
}

/*
  Sign-out is a form <button> in the App Router and an <a> on /wiki (a route
  handler has no React tree to bind a server action to), so this is written
  to stand on its own rather than inherit from either element: same colour,
  same size, same underline-on-hover as every other link in the app.
*/
/*
  A 44x44 hit region (Apple HIG's floor) without growing the "Sign out"
  lettering: min-block-size/min-inline-size plus centering give the box the
  room, the font-size stays untouched.
*/
.site-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
}

.site-out:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
  One focus ring for everything in the bar. Stated here rather than shared
  with a global stylesheet because this file is also the wiki's, where no
  App Router stylesheet ever loads.
*/
.site-bar a:focus-visible,
.site-bar button:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
  A phone. The tabs move to their own scrollable row UNDER the wordmark
  rather than collapsing into a menu: four words is nothing to hide, and a
  hamburger costs a tap on a surface opened one-handed behind the bar. The
  row scrolls rather than wraps so the bar's height never changes under you.
*/
@media (max-width: 47.99rem) {
  /*
    The width formula above already supplies the phone's side gutter — and
    the same one the page under it uses — so only the vertical padding is
    stated here.
  */
  .site-bar-in {
    flex-wrap: wrap;
    height: auto;
    padding: var(--bar-space-2) 0;
    gap: var(--bar-space-2);
  }

  .site-brand,
  .site-account {
    min-block-size: 44px;
  }

  .site-nav {
    order: 3;
    width: 100%;
    height: 44px;
    gap: var(--bar-space-4);
    overflow-x: auto;
    /*
      No scrollbar UI on a 44px strip — it would cover the current tab's own
      rule. The row is short enough to be obviously swipeable, and every
      destination in it is also reachable from the page it names.
    */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-who {
    max-width: 14ch;
  }
}

/* — the wiki's document, where this stylesheet does not get the last word — */

/*
  On /wiki this file is linked from core's `headHtml` seam, which core
  inserts AFTER `brand.tokensCss` but the wiki shell's own base rules still
  land after this link in the document — so a shell rule of equal specificity
  can win the cascade on source order alone. The rules below are two class
  selectors deep for exactly that reason — they outrank a tie rather than
  relying on order. Inert on every App Router page, where no such rule
  exists.
*/
.site-brand:hover,
.site-bar .site-nav a:hover {
  text-decoration: none;
}

/*
  Same reason: an anchor inherits the wiki shell's own link colour, and the
  sign-out control has to be the same pixels as the App Router's <button>.
*/
a.site-out {
  color: var(--text-muted);
  text-decoration: none;
}

/*
  Print. The bar is chrome — a navigation header on a sheet of paper is four
  dead links and a wordmark the page already names in its own caption.
*/
@media print {
  .site-bar {
    display: none;
  }
}