/* chrome.css — the shared site shell: ONE nav and ONE footer for every page
   (store, instant quote, part builder). Loaded AFTER the page stylesheet so
   its shell rules win any legacy nav definitions. Markup contract:

   <header class="nav">
     <a class="nav__brand" href="/">STRATOS <span>LASER</span></a>
     <div class="nav__spacer"></div>
     <a class="nav__link" href="/store">Store</a>
     <a class="nav__link" href="/#quote">Instant Quote</a>
     <a class="nav__link" href="/builder/">Part Builder</a>
     <span id="navAcct">[hardcoded Sign in — the no-JS default]</span>
   </header>
   <script>[inline: inject localStorage "stratosNavAcctHtml" into #navAcct —
            paints the cached account cluster WITH the header, so the nav
            never shifts when account-nav.js arrives over the network]</script>
   <script src="/store/account-nav.js"></script>
   ...
   <footer class="sfoot"> (see any page) </footer>

   The nav must be pixel-identical on every page (operator, 2026-07-31: it
   "flinched" between pages). Page-specific links (admin's Accounts<->Orders)
   belong in the page BODY, never in the shell. */

/* every page reserves the scrollbar gutter — otherwise navigating between a
   scrollable page and a short one (empty cart) rewidens the viewport and the
   right-aligned nav cluster jumps by the scrollbar width */
html { scrollbar-gutter: stable; }

/* ---- nav (store idiom, verbatim) ---- */
.nav {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 32px; background: rgba(6,7,8,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease,
              backdrop-filter .35s ease;
}
/* ZOOMED PAGES (home's data-iq-handoff, catalog's is-zoom110 — both render
   at 110%, styles.css:778 / store.css) scale the nav with them, which broke
   the pixel-identical contract: the logo and links sat ~3px off and 10%
   larger there, visibly jumping on navigation (operator 2026-09-03: "it
   moves in position"). Dividing the zoom back out on the nav keeps the
   chrome identical everywhere while the page content keeps its 110%.
   0.909091 = 1/1.1 — retune BOTH if the page zoom ever changes. */
body[data-iq-handoff] .nav, body.is-zoom110 .nav { zoom: 0.909091; }

/* at the very top of the page the nav dissolves into the section behind it
   (operator, 2026-07-30: "i love how the nav blends — do that more often");
   account-nav.js toggles the class on scroll */
.nav.nav--top { background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; }
.nav__brand { font-weight: 700; letter-spacing: .2em; font-size: 13.5px;
  text-transform: uppercase; color: var(--fg); text-decoration: none; }
.nav__brand span { color: var(--fg-3); font-weight: 400; letter-spacing: .14em; }
.nav__spacer { flex: 1; }
.nav__link { position: relative; color: var(--fg-2); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; transition: color var(--dur); }
.nav__link:hover, .nav__link.is-active { color: var(--fg); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--accent-line); box-shadow: 0 0 8px var(--accent-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
#navAcct { display: inline-flex; align-items: center; gap: 20px; }
.nav__name { color: var(--fg); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.nav__sep { width: 1px; height: 13px; background: var(--line-2); }
/* Unpaid-checkout flag, sat against the customer's own name (operator
   2026-09-01). Loud on purpose: a started-but-unpaid checkout is NOT an order,
   nothing is cut or shipped against it, and someone who assumes otherwise
   finds out when their parts never turn up. */
.nav__unpaid {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 9px; border-radius: 50%;
  background: #c0392b; color: #fff;
  font: 700 12px/1 var(--font, system-ui, sans-serif);
  text-decoration: none; flex: none;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .22);
  animation: navUnpaidPulse 2.4s ease-in-out infinite;
}
.nav__unpaid:hover { background: #d8493a; color: #fff; }
@keyframes navUnpaidPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(192, 57, 43, .22); }
  50%      { box-shadow: 0 0 0 5px rgba(192, 57, 43, .10); }
}
@media (prefers-reduced-motion: reduce) { .nav__unpaid { animation: none; } }
/* nav-scale buttons (Sign in / + New Product) — scoped so page CTAs keep their own scale */
.nav .btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line-2); background: transparent; color: var(--fg);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-sm); text-decoration: none; font-family: inherit; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur), border-color var(--dur);
}
.nav .btn:hover { background: rgba(255,255,255,.05); border-color: var(--line-3); }
.nav .btn--accent, .nav .btn--solid { border-color: transparent; background: var(--fg); color: #000; font-weight: 700; }
.nav .btn--accent:hover, .nav .btn--solid:hover { background: #fff; color: #000; }

/* ---- accent helper (hero display type) ---- */
/* the halo is the laser read: bright core, soft blue spill. Keep it faint —
   at .32 alpha it reads as energy, much past that it reads as neon signage */
.accent { color: var(--accent); text-shadow: 0 0 22px var(--accent-glow); }

/* ---- footer — same on every page ---- */
.sfoot { margin-top: 90px; border-top: 1px solid var(--line); background: var(--bg);
  font-family: var(--font); }
.sfoot__grid { max-width: 1460px; margin: 0 auto; padding: 44px 32px 38px;
  display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 28px; }
.sfoot__logo { font-weight: 700; letter-spacing: .2em; font-size: 13px;
  text-transform: uppercase; color: var(--fg); }
.sfoot__logo span { color: var(--fg-3); font-weight: 400; letter-spacing: .14em; }
.sfoot__brand p { margin: 12px 0 0; color: var(--fg-3); font-size: 12.5px;
  font-weight: 300; max-width: 340px; line-height: 1.6; }
.sfoot__col { display: flex; flex-direction: column; gap: 9px; }
.sfoot__h { font: 600 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 3px; }
.sfoot__col a, .sfoot__col span { color: var(--fg-2); font-size: 12.5px; text-decoration: none;
  transition: color var(--dur); }
.sfoot__col a:hover { color: var(--fg); }
.sfoot__bar { border-top: 1px solid var(--line); }
.sfoot__bar > div { max-width: 1460px; margin: 0 auto; padding: 14px 32px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--fg-3); font-size: 11px; letter-spacing: .04em; }
@media (max-width: 780px) { .sfoot__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- footer pinned to the bottom ----
   Short pages (an empty cart, a "not found", a filtered-to-nothing table) used
   to leave the footer floating mid-screen with dead space under it. Body is a
   flex column and the footer takes the slack, so it sits ON the bottom edge
   when content is short and simply follows the content when it isn't. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.sfoot { margin-top: auto; flex-shrink: 0; }
.sfoot__grid { padding-top: 64px; }
/* Flex items with `margin: 0 auto` (every .wrap) would otherwise absorb the
   cross-axis free space INSTEAD of stretching — the page then shrink-wraps to
   its content and reads narrow. Full width restores the block-layout behaviour
   the max-width + auto-margin centring was written for. */
body > header, body > main, body > section, body > footer { width: 100%; }