/* ============================================================
   Shared chrome: brand / topbar / footer (no Shadow DOM)
   SOURCE OF TRUTH for header geometry. Load this stylesheet
   AFTER page <style> blocks so home / team / whitepapers / papers
   cannot drift the logo + wordmark position.
   ============================================================ */

html {
  /* Stop Home/Team/Whitepapers jumping when one page has a scrollbar */
  scrollbar-gutter: stable;
}

:root {
  --chrome-maxw: 64rem;
  --chrome-pad-x: 1.25rem;
  --chrome-pad-y: 0.85rem;
  --chrome-brand-gap: 0.7rem;
  --chrome-logo: 36px;
  --chrome-brand-text-w: 9.75rem; /* fits "Pathway brief" / "Whitepapers" */
  --chrome-topbar-h: calc(var(--chrome-logo) + (var(--chrome-pad-y) * 2));
  --chrome-leds-h: 2.1rem;
  --chrome-burger: 2.1rem;
  --chrome-menu-w: min(20.5rem, calc(100vw - 2.5rem));
  --chrome-menu-z: 40;
}

a.brand,
a.brand:hover,
a.brand:focus,
a.brand:focus-visible {
  display: inline-flex;
  align-items: center;
  gap: var(--chrome-brand-gap);
  text-decoration: none;
  color: var(--fg-primary, #e8eaef);
  opacity: 1;
  /* Fixed brand box - subtitle length must not reflow the mark */
  min-height: var(--chrome-logo);
}
a.brand img {
  width: var(--chrome-logo);
  height: var(--chrome-logo);
  display: block;
  flex-shrink: 0;
}
a.brand .brand-text {
  display: block;
  box-sizing: border-box;
  width: var(--chrome-brand-text-w);
  min-height: 2.05em;
  font-family: var(--font-display, "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-primary, #e8eaef);
  line-height: 1.2;
}
a.brand .brand-text small {
  display: block;
  margin-top: 0.15rem;
  color: var(--fg-muted, rgba(232, 234, 239, 0.40));
  letter-spacing: 0.14em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.topbar,
.topbar {
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.05));
  background: rgba(11, 11, 18, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 20;
}
.topbar-inner {
  max-width: var(--chrome-maxw);
  margin: 0 auto;
  padding: var(--chrome-pad-y) var(--chrome-pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: calc(var(--chrome-logo) + (var(--chrome-pad-y) * 2));
  box-sizing: border-box;
}
.top-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-family: var(--font-display, "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.top-links a {
  color: var(--fg-muted, rgba(232, 234, 239, 0.40));
  text-decoration: none;
  transition: color 0.15s ease;
}
.top-links a:hover { color: var(--teal, #2ee6d6); opacity: 1; }
.top-links a.nav-team { color: rgba(46, 230, 214, 0.82); }
.top-links a.nav-papers { color: rgba(232, 168, 120, 0.88); }
.top-links a.nav-team:hover { color: var(--teal, #2ee6d6); }
.top-links a.nav-papers:hover { color: #f0b892; }

/* ---- Burger + slide-over menu (locked geometry) ---- */
.chrome-burger {
  box-sizing: border-box;
  width: var(--chrome-burger);
  height: var(--chrome-burger);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-primary, #e8eaef);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chrome-burger:hover {
  border-color: rgba(46, 230, 214, 0.45);
  color: var(--teal, #2ee6d6);
  background: rgba(46, 230, 214, 0.06);
}
.chrome-burger:focus-visible {
  outline: 1px solid rgba(46, 230, 214, 0.7);
  outline-offset: 2px;
}
.chrome-burger-box {
  position: relative;
  display: block;
  width: 1rem;
  height: 0.72rem;
}
.chrome-burger-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
}
.chrome-burger-line:nth-child(1) { top: 0; }
.chrome-burger-line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.chrome-burger-line:nth-child(3) { bottom: 0; top: auto; }
html.chrome-menu-open .chrome-burger-line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
html.chrome-menu-open .chrome-burger-line:nth-child(2) {
  opacity: 0;
}
html.chrome-menu-open .chrome-burger-line:nth-child(3) {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(-45deg);
}

.chrome-menu {
  position: fixed;
  inset: 0;
  z-index: var(--chrome-menu-z);
}
.chrome-menu[hidden] { display: none !important; }
.chrome-menu-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(5, 5, 8, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chrome-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--chrome-menu-w);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: rgba(11, 11, 18, 0.97);
  border-left: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  padding: 0;
  overflow: hidden;
}
.chrome-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--chrome-topbar-h);
  padding: var(--chrome-pad-y) var(--chrome-pad-x);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.05));
  box-sizing: border-box;
}
.chrome-menu-title {
  font-family: var(--font-display, "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted, rgba(232, 234, 239, 0.40));
}
.chrome-menu-close {
  box-sizing: border-box;
  width: var(--chrome-burger);
  height: var(--chrome-burger);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-primary, #e8eaef);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chrome-menu-close:hover {
  border-color: rgba(46, 230, 214, 0.45);
  color: var(--teal, #2ee6d6);
}
.chrome-menu-close:focus-visible {
  outline: 1px solid rgba(46, 230, 214, 0.7);
  outline-offset: 2px;
}
.chrome-menu-body {
  flex: 1;
  overflow: auto;
  padding: 1rem var(--chrome-pad-x) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.chrome-menu[data-empty="true"] .chrome-menu-body {
  /* Empty registry: keep panel shell, no placeholder copy */
  min-height: 4rem;
}
.chrome-menu-section { margin: 0; padding: 0; }
.chrome-menu-section-label {
  margin: 0 0 0.55rem;
  font-family: var(--font-display, "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted, rgba(232, 234, 239, 0.40));
}
.chrome-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.chrome-menu-list a {
  display: block;
  padding: 0.55rem 0.15rem;
  font-family: var(--font-display, "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--fg-primary, #e8eaef);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: color 0.15s ease;
}
.chrome-menu-list a:hover { color: var(--teal, #2ee6d6); }
html.chrome-menu-open {
  overflow: hidden;
}

.doc-footer {
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.05));
  background: rgba(11, 11, 18, 0.85);
  padding: 1.4rem 1.25rem 2rem;
  position: relative;
  z-index: 1;
}
.doc-footer-inner {
  max-width: var(--chrome-maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-display, "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fg-muted, rgba(232, 234, 239, 0.40));
}
.doc-footer a { color: var(--fg-muted, rgba(232, 234, 239, 0.40)); text-decoration: none; }
.doc-footer a:hover { color: var(--teal, #2ee6d6); }
.doc-footer .factory-credit {
  letter-spacing: 0.06em;
  text-transform: none;
}

/* LED meter - floats under the sticky topbar on every page */
.chrome-leds {
  position: sticky;
  top: var(--chrome-topbar-h);
  z-index: 19;
  pointer-events: none;
  height: var(--chrome-leds-h);
  margin-top: 0;
}
.chrome-leds-inner {
  max-width: var(--chrome-maxw);
  margin: 0 auto;
  padding: 0.35rem var(--chrome-pad-x) 0.45rem;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.nav-leds {
  pointer-events: auto;
  display: flex;
  gap: 5px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 6px 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #222 0%, #111 48%, #0a0a0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 4px 18px rgba(0, 0, 0, 0.35);
}
.nav-leds li { display: flex; margin: 0; padding: 0; }
.nav-leds a {
  position: relative;
  display: block;
  width: 16px;
  height: 5px;
  padding: 10px 3px;
  margin: -10px -3px;
  box-sizing: content-box;
  text-decoration: none;
  border-radius: 0;
}
.nav-leds a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 5px;
  border-radius: 1px;
  background: #081208;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.95), inset 0 0 1px rgba(0, 0, 0, 0.8);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.nav-leds a:hover::before,
.nav-leds a:focus-visible::before { background: #0f1f0f; }
.nav-leds a.active::before {
  background: linear-gradient(180deg, #9eff9e 0%, #43e843 35%, #1faa2a 70%, #15781c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 40, 0, 0.5),
    0 0 3px rgba(67, 232, 67, 0.85),
    0 0 7px rgba(67, 232, 67, 0.45);
}
.nav-leds a.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -72%);
  width: 11px;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.nav-leds a:focus-visible {
  outline: 1px solid rgba(67, 232, 67, 0.6);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .top-links .hide-sm { display: none; }
  :root { --chrome-brand-text-w: 7.5rem; }
}