/* ============================================================================
   MENSCH CHROME — COMPONENTS
   The nav pill, INFO button, INFO panel and footer, expressed as classes built
   only from tokens. No raw hex, no magic pixels, no inline styles.

   Three copies of this chrome exist in the wild — the injected one in
   web-chrome.js, and the hardcoded ones in about.html and ai.html (those two
   pages carry page-specific scroll wiring that can't be injected). All three
   use these same selectors, so a change here reaches all of them.

   Requires tokens.css.
   ============================================================================ */

/* ── NAV ──────────────────────────────────────────────────────────────────── */

#nav-overlay {
  position: fixed; inset: 0; z-index: 20;
  background: var(--scrim);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

[data-nav-wrap] {
  position: fixed; top: 28px; left: var(--chrome-inset); z-index: 100; width: 250px;
}

#nav-pill {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: var(--space-3) 0 0;
}

.mc-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4) var(--space-3) var(--space-2);
}
.mc-nav-brand { display: flex; align-items: center; gap: var(--space-2); }
#nav-home-link { display: block; line-height: 0; }
#nav-logo-img { height: 24px; width: auto; display: block; }

.nav-about-label {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-3xs); letter-spacing: .02em;
  color: var(--ink-strong); text-transform: uppercase;
  line-height: 20px; white-space: nowrap;
}

/* Shared appearance only. Geometry is NOT set here: about.html and ai.html use
   an 11x24 icon-sized button, so a rule that assumed the 44px tap target pulled
   their burger out past the head's padding and flush to the pill's edge. */
#nav-toggle {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--space-1); padding: 0; position: relative;
}
/* The injected chrome's 44px tap target. The negative margin cancels the extra
   hit-area so a comfortable touch target doesn't inflate the header. */
.mc-nav-toggle {
  width: 44px; height: 44px;
  margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1) calc(var(--space-3) * -1) 0;
}
.nav-icon-burger { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.nav-icon-burger i {
  width: 10px; height: 2px; background: var(--ink-strong); display: block;
}
.nav-icon-burger i + i { margin-top: -1px; }
.nav-icon-close { display: none; }
.nav-icon-close svg path { stroke: var(--ink-strong); }

#nav-body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-ui) var(--ease), opacity var(--dur-fast) var(--ease);
}
.mc-nav-links {
  display: flex; flex-direction: column;
  padding: 0 var(--space-4) var(--space-2) var(--space-2);
}
.mc-nav-rule { height: 1px; background: var(--ink-strong); }
.mc-nav-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4) var(--space-4) var(--space-2);
}
.mc-mark { width: 30px; height: 20px; display: block; }
.mc-social { display: flex; gap: var(--space-4); }
.mc-social a {
  font-family: var(--font-display); font-size: var(--text-xs);
  color: var(--ink-strong); text-decoration: underline;
}

.nav-link {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--ink-strong); text-decoration: none;
  padding: var(--space-1) 0; line-height: 20px;
  transition: color var(--dur-fast) var(--ease);
}

/* ── NAV / INFO STATES ────────────────────────────────────────────────────
   Base glass, the on-light stroke swap, and the shared hover/open
   treatment. Hover and open are one look by design. */
/* base glass for the header controls (moved out of inline styles so the open/hover
   state can override it without an !important fight) */
#nav-pill, #info-btn { background: var(--scrim-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), backdrop-filter var(--dur-fast) var(--ease); }
.nav-on-light#nav-pill, .nav-on-light#info-btn { border-color: var(--canvas-void) !important; }
/* hover AND open share one treatment: rich dark glass over a heavy blur. A white tint
   washed out over the light sky hero, so it's dark-on-blur instead. INFO matches the nav. */
#nav-pill:hover, #nav-pill.nav-open, #info-btn:hover, #info-btn.info-open {
  background-color: var(--scrim) !important;
  border-color: var(--edge-lit) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}
/* the INFO dropdown itself — glass instead of solid black */
#info-panel { background: var(--scrim) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }
/* nav wordmark always links home */
#nav-home-link { display: block; line-height: 0; }
.nav-link { transition: color var(--dur-fast) var(--ease); }
.nav-link:hover { color: var(--accent) !important; }
.nav-link.current { color: var(--accent) !important; }


/* ── INFO ─────────────────────────────────────────────────────────────────── */

[data-info-wrap] {
  position: fixed; top: 28px; right: var(--chrome-inset); z-index: 460;
  display: flex; gap: var(--space-2);
}

#info-btn {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 48px; padding: var(--space-1) var(--space-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  cursor: pointer; box-sizing: border-box;
}
#info-btn span {
  font-family: var(--font-body); font-size: var(--text-3xs);
  line-height: 12px; color: var(--ink-strong);
}

#info-panel {
  position: fixed; bottom: var(--space-5); right: var(--chrome-inset); z-index: 100;
  width: 372px; max-width: calc(100vw - var(--space-5));
  border-radius: var(--radius-md);
  border: 1px solid var(--edge-lit);
  color: var(--ink-strong); overflow: hidden;
  opacity: 0; transform: translateY(120%); pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.mc-info-inner {
  display: flex; flex-direction: column;
  gap: var(--space-2); padding: var(--space-3) 0 var(--space-2);
}
.mc-info-block { padding: 0 var(--space-6) 0 var(--space-4); }
.mc-info-block + .mc-info-block,
.mc-info-row { border-top: 1px solid var(--edge-lit); padding-top: var(--space-2); }
.mc-info-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm); text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.mc-info-body {
  font-family: var(--font-body); font-size: var(--text-xs);
  line-height: 1.4; margin: 0;
}
.mc-info-list {
  font-family: var(--font-display); font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.mc-info-row {
  padding: var(--space-2) var(--space-6) 0 var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
}
.mc-info-row span {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
}
.mc-info-row a {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--ink-strong); text-decoration: underline;
}
.mc-build-link {
  color: var(--accent); font-family: var(--font-black); font-weight: 700;
  text-decoration: underline; display: inline-block; margin-top: var(--space-1);
}
.mc-marquee-clip { overflow: hidden; padding: 2px 0 var(--space-1); }
#client-marquee {
  display: inline-flex; align-items: center; gap: var(--space-6);
  white-space: nowrap; animation: lab-marquee 16s linear infinite;
  will-change: transform;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */

#site-footer {
  position: relative; z-index: 3; overflow: hidden; isolation: isolate;
  background: var(--canvas);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────────
   Fixed-chrome placement (top/left/right/bottom) is positional anchoring, not
   spacing rhythm, so it stays in literal px and off the 8-point scale. */

@media (max-width: 767px) {
  [data-nav-wrap]  { left: 12px; top: 20px; width: auto; max-width: calc(100vw - 130px); }
  [data-info-wrap] { right: 12px; top: 20px; }
  #info-btn  { height: 48px; }
  #info-panel { left: 12px; right: 12px; width: auto; max-width: none; bottom: 16px; }

  /* Footer: stack the definition and the links and centre both over the wordmark.
     On desktop they sit on one row, pushed to opposite gutters; at this width that
     row wraps and both halves end up ragged against the left edge.

     The `body` prefix is doing real work. about.html and ai.html declare their own
     `#site-footer .foot-top { align-items: flex-end; justify-content: space-between }`
     in an inline <style> that loads after this file — identical specificity, so
     theirs won and only flex-direction (which they don't set) got through. Adding
     body outranks them without reaching for !important, and one rule still covers
     all eleven pages instead of editing three files. */
  body #site-footer .foot-top {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  body #site-footer .foot-def   { text-align: center; }   /* keeps the one-line nowrap/ellipsis */
  body #site-footer .foot-links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  #client-marquee { animation: none; }
}