/* ==========================================================================
   Sibyl Labs menu (lab-menu) · v1 · 2026-09-23
   Design: Fable design seat (direction A "expanding header" with a filter row),
   build: SIBYL. Brief + spec: memory/research/lab-menu-design-2026-09-23.md.

   The header IS the menu: one surface that grows downward into a grouped panel
   (On this page / Products / Build / Lab), filterable by typing, keyboard first.
   Reads the host page's nav-inverse tokens (--nav-bg, --nav-surface, --nav-ink,
   --nav-ink-mute, --nav-rule, --nav-accent, --nav-h, --ease, --font-display,
   --font-mono), so it works on the dark header (light mode) and the creme
   header (html.dark) without its own palette.

   Measured constraints (keep their exact shape):
   - no backdrop-filter on the full-viewport scrim (44.2ms vs 16.7ms p50, 2026-09-14);
   - nothing animates while closed: the panel is [hidden] and rows transition
     only as part of the one-shot open;
   - only clip-path, opacity and transform animate on large surfaces.
   ========================================================================== */

:root {
  /* "where you are" = the brand ochre (nav accent); teal is reserved for Sibyl Sovereign (visual-identity 3c) */
  --lm-here:       var(--nav-accent);
  --lm-here-faint: rgba(205, 168, 95, 0.12);   /* #cda85f on the dark header */
  --lm-sov:        #36d8ca;
  --lm-scrim:      rgba(10, 8, 4, 0.55);
  --lm-dur-open:   520ms;
  --lm-dur-close:  220ms;
  --lm-stagger:    22ms;
  --lm-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
               0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%,
               1.015 55%, 1.017 63.9%, 1.001);
}
html.dark {
  /* creme header: nav accent #6f5316 = 5.9:1 on #f5f1e6; Sovereign deep teal 4.9:1 */
  --lm-here-faint: rgba(111, 83, 22, 0.10);
  --lm-sov:        #2d6e6a;
}

.lm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header: primary text links (desktop) ---------- */
.lm-top {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2rem;
}
.lm-top a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-ink-mute);
  padding: 0.75rem 0;
  transition: color 0.2s var(--ease);
}
.lm-top a:hover, .lm-top a[aria-current] { color: var(--nav-ink); }
.lm-top a[aria-current]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--lm-here); border-radius: 2px;
}
.lm-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

/* host theme toggle placed in .lm-right (site-wide rollout): same geometry as the old icon links */
.lm-right .nav-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  color: var(--nav-ink-mute); background: transparent;
  border: 1px solid var(--nav-rule); border-radius: 999px; cursor: pointer;
}
.lm-right .nav-theme-toggle:hover { color: var(--nav-ink); border-color: var(--nav-accent); }
.lm-right .nav-theme-toggle svg { width: 16px; height: 16px; }

/* ---------- the Menu button ---------- */
.lm-btn { display: none; }
html.lm-js .lm-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  height: 40px; padding: 0 0.95rem 0 0.8rem;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nav-ink);
  background: transparent;
  border: 1px solid var(--nav-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lm-btn:hover, .lm-btn[aria-expanded="true"] { border-color: var(--nav-accent); background: var(--nav-surface); }
.lm-btn-ico { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.lm-btn-ico svg { position: absolute; inset: 0; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; transition: opacity 160ms var(--ease); }
.lm-btn-ico .lm-x { opacity: 0; }
.lm-btn[aria-expanded="true"] .lm-btn-ico .lm-bars { opacity: 0; }
.lm-btn[aria-expanded="true"] .lm-btn-ico .lm-x { opacity: 1; }
.lm-kbd {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: none;
  color: var(--nav-ink-mute);
  border: 1px solid var(--nav-rule); border-radius: 4px; padding: 1px 5px; line-height: 1.5;
}

/* ---------- scrim + panel ---------- */
.nav.lm-open { border-bottom-color: transparent; }
.lm-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: var(--lm-scrim);
  opacity: 0;
  transition: opacity var(--lm-dur-close) var(--ease);
}
.lm-scrim.is-on { opacity: 1; }
.lm-scrim[hidden], .lm-panel[hidden] { display: none; }

.lm-panel {
  position: fixed; top: var(--nav-h, 74px); left: 0; right: 0; z-index: 99;
  max-height: calc(100vh - var(--nav-h, 74px));
  max-height: calc(100dvh - var(--nav-h, 74px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-bottom: 1px solid var(--nav-rule);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--lm-dur-close) var(--ease);
}
.lm-panel.is-on {
  clip-path: inset(0 0 -80px 0);          /* negative bottom inset lets the drop shadow show */
  transition-duration: var(--lm-dur-open);
  transition-timing-function: var(--ease);
}
/* 9: the spring only where linear() exists; a var() fallback line would never fall back */
@supports (transition-timing-function: linear(0, 1)) {
  .lm-panel.is-on { transition-timing-function: var(--lm-spring); }
  .lm-panel.is-on .lm-row {
    transition: opacity 260ms var(--ease) var(--d, 0ms), transform 420ms var(--lm-spring) var(--d, 0ms), background-color 0.15s var(--ease);
  }
}

.lm-inner {
  max-width: var(--grid-max, 1180px);
  margin: 0 auto;
  padding: 24px var(--gutter, 2rem) 20px;
  display: flex; flex-direction: column; gap: 22px;
}
/* the listbox is the grid (no display:contents: roles on contents boxes are unreliable) */
.lm-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px; row-gap: 24px;
}
.lm-list.has-page { grid-template-columns: 0.8fr 1.2fr 1fr 1fr; }   /* Products carries the widest label + chip */
.lm-empty { grid-column: 1 / -1; }

/* filter row */
.lm-find { display: flex; align-items: center; gap: 0.75rem; }
.lm-q-wrap { position: relative; flex: 1; }
.lm-q-wrap svg {
  position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  stroke: var(--nav-ink-mute); fill: none; stroke-width: 1.8; stroke-linecap: round; pointer-events: none;
}
.lm-q {
  width: 100%; height: 44px;
  padding: 0 14px 0 40px;
  font-family: var(--font-mono); font-size: 14px; color: var(--nav-ink);
  background: var(--nav-surface);
  border: 1px solid var(--nav-rule);
  border-radius: 10px;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.lm-q::placeholder { color: var(--nav-ink-mute); opacity: 1; }
.lm-q::-webkit-search-cancel-button { display: none; }
.lm-q:focus-visible { border-color: var(--nav-accent); box-shadow: 0 0 0 1px var(--nav-accent); }
.lm-close {
  flex-shrink: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--nav-ink-mute); background: transparent;
  border: 1px solid var(--nav-rule); border-radius: 999px; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lm-close:hover { color: var(--nav-ink); border-color: var(--nav-accent); }
.lm-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* groups + rows */
.lm-group[hidden] { display: none; }
.lm-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 0 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nav-ink-mute);
  white-space: nowrap;
}
.lm-progress { display: inline-block; flex-shrink: 0; width: 40px; height: 2px; background: var(--nav-rule); border-radius: 2px; overflow: hidden; }
.lm-progress i { display: block; height: 100%; width: 100%; background: var(--lm-here); transform: scaleX(0); transform-origin: left; }
.lm-panel.is-on .lm-progress i { transition: transform 480ms var(--ease) 120ms; }
.lm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-rows > li[hidden] { display: none; }

.lm-row {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 3px 10px;
  min-height: 56px;
  padding: 11px 34px 11px 12px;
  border-radius: 8px;
  color: var(--nav-ink);
  text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 120ms var(--ease);   /* 11: rows fade with the panel on close instead of vanishing */
}
.lm-panel.is-on .lm-row {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease) var(--d, 0ms), transform 420ms var(--ease) var(--d, 0ms), background-color 0.15s var(--ease);
}
.lm-row--compact { min-height: 44px; padding-right: 12px; }
.lm-row-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.3;
  color: var(--nav-ink);
}
.lm-row-desc {
  flex-basis: 100%;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45;
  color: var(--nav-ink-mute);
}
.lm-ext { width: 12px; height: 12px; stroke: var(--nav-ink-mute); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lm-chip {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--nav-ink-mute);
  white-space: nowrap;
}
.lm-row:hover, .lm-row.is-cursor { background: var(--nav-surface); color: var(--nav-ink); }
/* the keyboard cursor must never look like the "you are here" state (panel 2, item 10) */
.lm-row.is-cursor { outline: 2px solid var(--nav-accent); outline-offset: -2px; }
/* direction cue: slides in on the row under the pointer or the keyboard cursor (one-shot, transform + opacity) */
.lm-row:not(.lm-row--compact)::after {
  content: ''; position: absolute; right: 14px; top: 20px; width: 7px; height: 7px;
  border-top: 1.5px solid var(--nav-accent); border-right: 1.5px solid var(--nav-accent);
  transform: translateX(-5px) rotate(45deg); opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.lm-row:not(.lm-row--compact):hover::after, .lm-row.is-cursor:not(.lm-row--compact)::after { transform: translateX(0) rotate(45deg); opacity: 1; }
.lm-row[target="_blank"]::after { display: none; }
.lm-row[aria-current] { background: var(--lm-here-faint); box-shadow: inset 2px 0 0 var(--lm-here); }
.lm-row[aria-current] .lm-chip { color: var(--lm-here); }
.lm-row[data-product="sovereign"] .lm-chip {
  color: var(--lm-sov); border: 1px solid currentColor; padding: 1px 7px; border-radius: 999px;
}
.lm-row:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -2px; }

.lm-empty {
  margin: 0; padding: 8px 12px;
  font-family: var(--font-mono); font-size: 13px; color: var(--nav-ink-mute);
}
.lm-empty[hidden] { display: none; }

/* footer strip */
.lm-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding: 14px 12px 0;
  border-top: 1px solid var(--nav-rule);
}
.lm-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--nav-ink-mute);
  border: 1px solid var(--nav-rule); border-radius: 999px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lm-ico:hover { color: var(--nav-ink); border-color: var(--nav-accent); }
.lm-ico svg { width: 15px; height: 15px; fill: currentColor; }
.lm-last {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 6px 12px 6px 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--nav-ink-mute);
  border: 1px solid var(--nav-rule); border-radius: 999px;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lm-last:hover { color: var(--nav-ink); border-color: var(--nav-accent); }
.lm-last[hidden] { display: none; }
.lm-last svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.lm-foot-kbd { margin-left: auto; }

.lm-btn:focus-visible, .lm-close:focus-visible, .lm-ico:focus-visible, .lm-last:focus-visible, .lm-top a:focus-visible {
  outline: 2px solid var(--nav-accent); outline-offset: 2px;
}

/* ---------- tablet 721-899 ---------- */
/* center links need ~1024px next to Menu + CTA (measured: the CTA wrapped and the header grew 73 -> 83px at 900-1000) */
@media (max-width: 1023px) { .lm-top { display: none; } }
@media (max-width: 899px) {
  .lm-list, .lm-list.has-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-group[data-group="page"] { grid-column: 1 / -1; }
  .lm-group[data-group="page"] .lm-rows { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0 12px; }
  .lm-group[data-group="page"] .lm-row {
    min-height: 36px; padding: 7px 14px; border: 1px solid var(--nav-rule); border-radius: 999px;
    display: inline-flex; align-items: center;
  }
  .lm-group[data-group="page"] .lm-row-label { font-size: 14px; }
  .lm-group[data-group="page"] .lm-row[aria-current] { box-shadow: none; border-color: var(--lm-here); }
}

/* ---------- phone <= 720 ---------- */
@media (max-width: 720px) {
  .lm-right .nav-cta-agent { display: none; }
  .lm-btn { height: 44px; }
  .lm-panel { height: calc(100vh - var(--nav-h, 74px)); height: calc(100dvh - var(--nav-h, 74px)); }
  .lm-inner { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); gap: 18px; }
  .lm-list, .lm-list.has-page { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .lm-q { font-size: 16px; }            /* 16px stops iOS zooming the page on focus */
  .lm-group[data-group="page"] .lm-rows { padding: 0; }
  .lm-ico { width: 44px; height: 44px; }
  .lm-last { min-height: 44px; }
}

@media (pointer: coarse) {
  .lm-kbd { display: none; }
  .lm-btn, .lm-close { min-height: 44px; }
  .lm-ico { width: 44px; height: 44px; }
  .lm-group[data-group="page"] .lm-row { min-height: 44px; }   /* section pills: full touch target */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lm-panel, .lm-panel.is-on { clip-path: none; opacity: 0; transition: opacity 120ms ease; }
  .lm-panel.is-on { opacity: 1; }
  .lm-scrim { transition: opacity 120ms ease; }
  .lm-row, .lm-panel.is-on .lm-row { opacity: 1; transform: none; transition: background-color 0.15s ease; }
  .lm-panel.is-on .lm-progress i { transition: none; }
  .lm-btn-ico svg { transition: none; }
  .lm-row:not(.lm-row--compact)::after { transition: none; }
}

/* no-JS: plain links in place of the Menu button */
/* Fallback links: real markup, shown when JS is off OR when lab-menu.js failed to start
   (html.lm-pending is cleared after 3s by an inline head script; html.lm-js is set by the component). */
html.lm-js .lm-noscript, html.lm-pending .lm-noscript { display: none; }
.lm-noscript { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 0.9rem; margin: 0; padding: 0; max-width: 60vw; }
@media (min-width: 900px) { .lm-noscript .lm-ns-top { display: none; } }
@media (min-width: 721px) { .lm-noscript .lm-ns-phone { display: none; } }
@media (max-width: 720px) {
  .lm-noscript { max-width: calc(100vw - 230px); gap: 0.2rem 0.7rem; }
  .lm-noscript a { font-size: 11px; }
}
.lm-noscript a { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nav-ink); }
/* The fallback is ONE row, never a stack: wrapped, it grew the fixed header to about 220px on phones and covered
   the top of the page (docs rollout, 2026-10-13). Links past the row's width scroll sideways inside it. */
.lm-noscript { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.lm-noscript > li:first-child { margin-left: auto; }   /* right-aligned while it fits; when it overflows the first link stays reachable */
.lm-noscript::-webkit-scrollbar { display: none; }
.lm-noscript li { flex-shrink: 0; white-space: nowrap; }