/*
  The site bar. One thin rule under a cream ground, a wordmark, three text
  links, and who is signed in — the whole of the chrome.

  FORM ANCHORS: Linear's docs bar and Stripe Docs — a single hairline instead of
  a shadow, text links instead of buttons, and the current page marked by a rule
  under the word rather than a filled chip. Every colour and face is a brand
  token; nothing here re-types a brand value.

  It shares the wiki header's geometry on purpose — same 1580px measure, same
  clamped side padding, same sticky top — so crossing between an app page and
  the engine-rendered wiki does not move the wordmark.
*/

:root {
  --site-bar-h: 52px;
  --site-rule: color-mix(in srgb, var(--ink) 12%, transparent);
}

.site-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--site-rule);
  background: var(--paper);
}

.site-bar-in {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 1580px;
  height: var(--site-bar-h);
  margin: 0 auto;
  padding: 0 clamp(0.875rem, 2.5vw, 1.75rem);
}

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

/* — left: the mark, the wordmark, and what this is — */

.site-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-mark {
  flex: 0 0 auto;
  align-self: center;
  display: block;
}

.site-wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

/* The bar names the site, so no page under it needs an eyebrow that repeats it. */
.site-tag {
  color: color-mix(in srgb, var(--ink) 52%, var(--paper));
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  line-height: 1;
}

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

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
}

.site-nav a,
.site-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-signin:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/*
  Where you are is a state, not a destination: a rule under the word in the one
  accent this brand spends, and no other change. Kept off :hover's own underline
  so the current item does not thin out when the pointer crosses it.
*/
.site-nav a[aria-current="page"],
.site-nav a[aria-current="page"]:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* — far right: who is signed in — */

.site-account {
  display: flex;
  align-items: center;
}

/* Overrides the foyer chrome's generic button, which is a bordered control. */
.site-out {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.site-initial {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1;
}

.site-out-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.site-out:hover .site-out-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/*
  A phone keeps the three links inline — they fit, and a hamburger for three
  words is a menu built to hide nothing. What goes is the subtitle and the word
  "Sign out": the initial is the control there, and it is labelled.
*/
@media (max-width: 47.99rem) {
  .site-tag,
  .site-out-label {
    display: none;
  }
}

@media (min-width: 48rem) {
  :root {
    --site-bar-h: 56px;
  }

  .site-bar-in {
    gap: 1.5rem;
  }

  .site-nav {
    gap: 1.5rem;
  }
}

/* — 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
  BEFORE its own <style> block. So core's shell rules are later in the cascade
  and win every tie: its `a:hover { text-decoration: underline }` would underline
  the wordmark and the sign-out control, which nothing else on this site does.
  Both rules below are two class selectors deep for exactly that reason — they
  outrank a tie rather than rely on order. Inert on every App Router page, where
  no such rule exists.
*/
.site-brand:hover,
.site-out:hover {
  text-decoration: none;
}

/*
  Sign-out is an anchor on the wiki and a form button everywhere else (see
  app/site-bar-view.tsx): a route handler has no React tree to bind a server
  action to. The anchor inherits `a`'s colour from core's shell, so it is put
  back on the bar's own ink here — the two must be the same pixels.
*/
a.site-out {
  color: var(--ink);
  text-decoration: none;
}

/*
  Core moves its header's search form to the top of `main` when a host supplies
  its own header, and widens it to the full column on the way. Under our bar
  that reads as the loudest thing on the page: a full-bleed box above the
  heading, and on the wiki's own front page a second one sitting a screen below
  it in the page's own content ("Search all 38 records").

  This is core's search, unchanged — same field, same button, same type. Only
  the width goes back to the 26rem the same form wears in core's own header, so
  it sits under the bar rather than announcing itself. Four class selectors deep
  because this stylesheet is linked from `headHtml`, which core inserts BEFORE
  its own <style> block: an equal-specificity rule here would lose the tie.

  The duplicate on the front page is core's to resolve, not ours — noted for the
  engine issue rather than patched over from here.
*/
.w-frame .w-main > .w-search.w-search--inline {
  width: min(26rem, 100%);
}