/* Budtello header frame + lockup — THE single definition (dashboard-first
   consistency pass, 2026-08-06). Every shell links this file (navShell inlines
   it at require time). RULES: identical lockup markup fragment everywhere;
   frame geometry (height, container, control positions) is FROZEN — page nav
   CONTENT may differ, the frame may not. */
@media (max-width:720px){.bt-nav-inner{padding:0 20px}}
/* CANONICAL LOCKUP — DESIGN-GUIDE §8, re-derived 2026-08-08.
   Ratios are measured on VISIBLE INK against the tight 1:1 asset:
   mark box = 1.77 x cap · gap = 1.06 x cap · mark bottom sits 0.38 x cap
   BELOW the wordmark baseline. Outfit 600 cap height = 0.703em of set size.
   Derivation at 18px: cap = 18 x 0.703 = 12.654px -> mark 22.4px,
   gap 13.41px, drop 4.81px. If the set size changes, recompute all three
   from the ratios — never eyeball. (The previous 1.39/0.46/0.27 were measured
   on the PADDED asset box, which rendered the mark at only 1.06 x cap.) */

/* §9 IDENTITY CHROME — THE canonical control (DESIGN-GUIDE §9). One definition;
   navShell (dashboard) and the public shells both use it, so the pill is
   pixel-identical everywhere. Avatar = the user's Clerk image when set, else
   their FIRST initial only (§9 amendment 2026-08-06 — never two letters). */

/* §10 ACCOUNT MENU — shared by the authed frame and the public shells. The
   pill is a BUTTON that opens this menu; it never navigates. */

/* Header primary action (DECISIONS 2026-08-07): "Sign in" is the ONE primary
   action in the signed-out header — filled accent, --accent-edge hairline
   (collapses to the accent in dark), hover = opacity, never a second peach.
   Geometry matches the retired Join Market button (.btn-small) exactly.
   Defined here so every public shell renders it identically. */
.nav-login{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:14px;line-height:1;
  padding:8px 16px;border-radius:var(--radius-md);white-space:nowrap;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent-edge);
  text-decoration:none;cursor:pointer;transition:opacity .15s ease}
.nav-login:hover{opacity:.88;color:var(--on-accent)}
.nav-login:focus-visible{outline:2px solid var(--border-strong);outline-offset:2px}

/* ── Theme toggle ─────────────────────────────────────────────────────────
   THE canonical control, here because lockup.css is the one header stylesheet
   every consumer already loads: public/index.html, public/404.html,
   src/routes/legal.js, shared/partials/budtello-header.html and
   src/views/navShell.js (which inlines this file).

   It lives here because it did NOT live anywhere navShell could see it. The
   phase-2 swap (ADR-0342) copied the toggle MARKUP into the authed header but
   not these rules, so on /app all three glyphs painted at once — sun, moon and
   the system half-circle side by side inside one button, read as "two toggles".
   The button ships three <svg>s and exactly one is revealed by preference;

   Icon shown reflects the PREFERENCE: no stored preference = the system glyph,
   because the default on every surface is the OS scheme. */
