/* ============================================================================
   BUDTELLO HEADER - the ONE source of ALL header geometry (ADR-0345).
   ----------------------------------------------------------------------------
   CANONICAL: dispensary-ai/shared/partials/header.css.
   SYNCED COPY (byte-identical, hash-checked by ops/ui-check.sh):
     askbud-marketplace/app/header.css  (@import-ed by globals.css)
   Edit the canonical file, then re-sync. Never edit the copy.

   RECONCILED 2026-09-10 (ADR-0463): ADR-0441 (type tokens) and ADR-0449 (the
   marketplace wordmark became artwork) were applied to the marketplace copy
   only, so ops/ui-check.sh [9] went red. Fixed FORWARD - this canonical now
   carries both ADRs' token work - with one pin: the budtello.com/docs
   wordmark rule (.bt-lockup below) keeps its pre-token literal values per
   order-david-143747, and .bt-lockup-text restores the tokenised basis for
   the marketplace's artwork sizing and suffix text, which would otherwise
   inherit the pinned literal through .bt-lockup and shrink. See both rules'
   own comments below for the detail.

   WHY THIS FILE EXISTS: header geometry used to live in SEVEN places -
   lockup.css, the partial inline <style>, style.css, shared.css, legal.css,
   navShell NAV_CSS, and a hand-copied fork inside the marketplace globals.css.
   Each host header shape was decided by whichever loaded last, so bar height,
   logo, wordmark, nav spacing, pill and toggle all differed across the four
   hosts. One file ends that. ops/ui-check.sh fails the build if any OTHER file
   defines a header rule.

   NAV CONTENT is per host and is NOT geometry: Docs/Ops/Customers on the docs
   host, product links on budtello.com, Market/Inventory/Routes on the market.
   Which links appear is a product decision; how they are shaped is this file.
   ========================================================================== */

/* -- Bar ------------------------------------------------------------------ */
.bt-nav {
  position: sticky; top: 0; z-index: 1000;
  display: block; padding: 0;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  color: var(--text); box-shadow: none;
}

/* WWW ONLY - the bar rides OVER the hero video (David, 10 Sept 2026; brief
   docs/pending/brief-www-hero-header.md, ADR-0477). budtello.com's hero is a
   full-screen video feed, and openai.com - the reference David named, measured
   in the browser pane the same day - runs a FULLY TRANSPARENT bar over it: no
   background, no blur, no bottom rule, still sticky. The .bt-nav rule above is
   UNCHANGED, so the docs host, /ops and the marketplace headers are untouched;
   only public/hero-preview.html adds this class. This is header geometry, so it
   lives HERE and nowhere else (ui-check [10]) - a www-only override in
   public/style.css would fail that check, which is why the brief's mention of
   that file is not what shipped.

   The border keeps its 1px and only loses its COLOUR: the bar's total height is
   52px of inner box plus that rule, and zeroing it would shift every sticky
   offset on the page by a pixel for no visual gain.

   Legibility over moving footage comes from the CONTROLS, not from the bar: the
   Sign in button is filled (.btn--primary), and the theme toggle and the account
   circle each already wear their own 1px border (see below). Nothing here paints
   a scrim, and the wordmark gets no shadow - David's brief allows one only if a
   real clip proves it needs one, and no clip exists yet (ADR-0405). */
.bt-nav--over-video {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* SLIM + FLUSH (David walk, todo 130, 2026-09-05): the bar was too tall and
   the content was indented off both edges. Height 64 -> 52 with the text
   vertically centred; the lockup sits FLUSH LEFT and the nav/identity/theme
   cluster FLUSH RIGHT (16px breathing room, AWS/Cloudflare console
   pattern - the 1180px centring is gone). */
.bt-nav-inner {
  max-width: none; margin: 0; padding: 0 16px;
  height: 52px; display: flex; align-items: center;
}
@media (max-width: 720px) { .bt-nav-inner { padding: 0 12px; } }

/* A page wrapper that DIRECTLY holds the bar must not constrain or pad it:
   the bar runs edge to edge (its own 16px inner padding applies) and no
   wrap padding may open a dead band under the header (todo 130). Geometry, so
   it lives HERE (ui-check [10]), not in any host stylesheet. */
.wrap:has(> .bt-nav) { max-width: none; margin: 0; padding: 0; }

/* -- Lockup ---------------------------------------------------------------
   CANONICAL SPEC at the 18px set size - computed px, do not eyeball.
   The mark sits 4.81px BELOW the wordmark baseline via position:relative,
   which layout cannot see, so the box keeps phantom space above the ink and
   centring it leaves the ink low in the 64px bar. Reserving the SAME value as
   padding-bottom puts the dropped ink back inside the box, so align-items
   centres what you actually see. This correction existed on the docs host
   ONLY; it now applies on all four.

   pinned — order-david-143747: wordmark typeface and size stay until David
   looks at it. Live text on budtello.com + docs; artwork on the marketplace
   (ADR-0449), where this rule matches nothing. */
.bt-lockup {
  display: inline-flex; align-items: baseline; gap: 13.41px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em; line-height: 1;
  color: var(--text); text-decoration: none; border: none;
  padding-bottom: 4.81px;
}
.bt-lockup img { width: 22.40px; height: 22.40px; display: block; position: relative; top: 4.81px; }
.bt-lockup:hover { opacity: .85; }
.bt-lockup-product { color: var(--accent); }

/* MARKETPLACE ONLY (David, 10 Sept 2026): the lockup is TWO links there - the
   salmon mark goes to budtello.com, the wordmark and its suffix go to the
   marketplace root - so .bt-lockup is a plain box on that host and the two
   anchors are its children. On budtello.com and the docs host .bt-lockup is
   still the anchor itself and both rules below match nothing. The children
   inherit the lockup's colour and carry no underline, so the lockup looks
   exactly as it did when it was one link. */
.bt-lockup-mark { display: block; color: inherit; text-decoration: none; border: none; }
a.bt-lockup-text { color: inherit; text-decoration: none; border: none; }

/* MARKETPLACE ONLY (matches nothing on budtello.com/docs - their markup has
   no .bt-lockup-text span, ADR-0463): re-applies ADR-0441's type tokens on
   top of the pinned .bt-lockup literal above. Without this, the marketplace's
   artwork wordmark and its live suffix text would inherit the pinned 18px
   Outfit values and the SVG below - sized in em, off font-size - would shrink
   about 10% from its shipped ADR-0441/0449 size. This restores the exact
   pre-reconciliation marketplace rendering. */
.bt-lockup-text {
  font-family: var(--sans);
  font-weight: 600; font-size: var(--font-h2); letter-spacing: var(--tracking-tight); line-height: var(--lh-1);
}

/* The wordmark is ARTWORK, not text (ADR-0449) - outlines of Outfit 600 with
   this header's -0.01em tracking already baked in, so no second webfont
   loads and the letterforms are frozen for good (order-david-143747). The
   suffix beside it stays live text, because it is a prop.
   EVERY NUMBER BELOW IS THE FONT'S OWN ARITHMETIC AT 1000 units/em - do not
   eyeball it, and do not "round" it. The viewBox IS the ink box (measured:
   x 0->3560, y -10->723), so:
     width  3.560em   the ink, exactly
     height 0.733em   ditto
     margin-left  0.070em   the B's left side bearing - where ink starts
                            relative to the text origin it replaces
     margin-right 0.204em   what is left of the string advance (3648 units)
                            after the bearing and the ink (3648-70-3560=18),
                            PLUS the 186-unit word space before the suffix.
                            MEASURED, not assumed: the line box does NOT add a
                            tracking step after an atomic inline, so the markup
                            carries no literal space - this margin IS it.
     vertical-align -0.010em  the round letters overshoot 10 units below the
                              baseline, and an inline-block sits ON it.
   Verified against live Outfit text at 200px: ink 1424 device px vs 1425. */
.bt-lockup-wordmark {
  display: inline-block;
  width: 3.560em; height: 0.733em;
  margin-left: 0.070em; margin-right: 0.204em;
  vertical-align: -0.010em;
  fill: currentColor;
}

/* -- Right cluster -------------------------------------------------------- */
.bt-nav-right {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  font-family: var(--sans);
  font-size: var(--font-body); color: var(--text-secondary);
}

/* -- Nav items (shape only; WHICH links appear is per host) ---------------- */
.bt-nav-links { display: flex; align-items: center; gap: 26px; }
.bt-nav-link {
  color: var(--text-secondary); text-decoration: none; line-height: var(--lh-1);
  padding: 18px 0; border-bottom: 2px solid transparent;
}
.bt-nav-link:hover { color: var(--text); text-decoration: none; }
.bt-nav-link--active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* -- More dropdown -------------------------------------------------------- */
.bt-more { position: relative; display: inline-flex; align-items: center; }
.bt-more-btn {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  font: inherit; color: var(--text-secondary); cursor: pointer;
  padding: 18px 0; border-bottom: 2px solid transparent;
}
.bt-more-btn:hover { color: var(--text); }
.bt-more-btn--active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.bt-more-chev { width: 9px; height: 6px; fill: currentColor; transition: transform .15s ease; }
.bt-more-btn[aria-expanded="true"] .bt-more-chev { transform: rotate(180deg); }
.bt-more-menu {
  position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 188px; z-index: 1200;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-container); padding: 6px; box-shadow: var(--elevation);
}
.bt-more-menu[hidden] { display: none; }
.bt-more-item {
  display: block; padding: 9px 12px; border-radius: var(--radius-control); text-decoration: none;
  color: var(--text-secondary); font-size: var(--font-body);
}
.bt-more-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.bt-more-item--active { color: var(--text); font-weight: 600; }

/* -- Account pill - IDENTICAL on every host (David, 2026-08-20) ------------ */
.bt-identity { position: relative; display: inline-flex; }
/* GOOGLE-STYLE CIRCLE (David, todo 130, 2026-09-05): the pill chrome and the
   caret beside it are gone - the account trigger is the bare avatar circle
   (initial, or the photo once uploaded), exactly the Google pattern users
   already know. CSS-only so BOTH header worlds change identically; the
   caret markup stays inert in the partial and NavClient. */
.bt-pill {
  display: inline-flex; align-items: center; gap: 0;
  background: none; border: none; box-shadow: none; border-radius: var(--radius-circle);
  padding: 0; cursor: pointer; color: var(--text); text-decoration: none;
}
.bt-pill:hover .bt-pill-avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); border-color: var(--border-strong); }
.bt-pill-avatar {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--radius-circle); object-fit: cover; overflow: hidden;
  background: var(--surface-recessed); color: var(--text);
  border: 1px solid var(--border);
  font: 700 var(--font-base) var(--sans); text-transform: uppercase;
}
.bt-pill-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-pill-caret { display: none; } /* killed with the pill chrome (todo 130) */

/* -- Account menu --------------------------------------------------------- */
.bt-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 236px; z-index: 1200;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-container); padding: 6px; box-shadow: var(--elevation);
}
.bt-menu.open { display: block; }
.bt-menu-id { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.bt-menu-id strong { display: block; color: var(--text); font: 600 var(--font-body) var(--sans); }
.bt-menu-id small { color: var(--text-secondary); font: 400 var(--font-sm) var(--sans); word-break: break-all; }
.bt-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: var(--radius-control); padding: 9px 12px; font: inherit; font-size: var(--font-body);
  color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.bt-menu-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bt-menu-item[hidden] { display: none; }
.bt-menu-apart { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 11px; }
.bt-menu-signout { color: var(--text-secondary); }

/* -- Theme toggle - TWO STATES ONLY: light and dark -----------------------
   David, 2026-08-20: the third "follow the OS" state is DELETED. There is no
   half-circle glyph, and no rule anywhere keys off that preference value or its
   absence. The control cycles light and dark and nothing else, and the default
   with no stored preference is DARK.

   (Deliberately worded without quoting the removed selectors: a checker that
   greps for them must not be satisfied by prose describing their removal.) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  /* 32px - David, 10 Sept 2026: the toggle and the account circle are the
     SAME SIZE on every host. The marketplace additionally swaps their
     order (avatar last); that is markup, not geometry, and lives in
     NavClient.tsx. */
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text);
  box-shadow: none; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
.theme-toggle svg { display: none; width: 18px; height: 18px; fill: currentColor; }
:root[data-theme-pref="light"] .tt-light { display: block; }
:root[data-theme-pref="dark"]  .tt-dark  { display: block; }

/* -- Mobile burger -------------------------------------------------------- */
.bt-nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin: 0; }
.bt-nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: var(--radius-pill); }
/* MOBILE DRAWER REVEAL (ADR-0354, todo #98): the burger shows ONLY where a
   Material drawer exists to open - the docs host renders the #__drawer
   input, the other three hosts do not - and only at drawer widths
   (44.9375em matches the docs build's REWRITTEN drawer breakpoint - ADR-0319
   moves Material's 76.25em down to 45em at build time, so drawer mode only
   exists below 720px; the burger must not appear beside an inline sidebar).
   Everywhere else the burger stays display:none, so the shared header is
   byte-identical and visually unchanged on budtello.com, /app and the
   marketplace. */
@media (max-width: 44.9375em) {
  body:has(#__drawer) .bt-nav-burger { display: block; }
}