/* Site header (plan 31, §1.2). Source: www/partials/header.html, copied into pages by www-lab/partials.py.
   Modes (measured in Р1, docs/active/31-audit.md §5): ≥ 1280 px everything in one row; 1000–1279 px the
   links stay and the tools fold into search + settings; < 1000 px the phone bar (mark, search, menu) and a
   typographic menu under it. Flat field, no glass, nothing cast by the bar.
   The modes are container queries in rem, not media queries in px: text enlarged to 200 % doubles the
   thresholds, so the bar folds into the phone layout instead of running off the screen (§2.1 п. 8). At the
   default 16 px they are the measured 1280 / 1000 px. The header is the query container; panels and the
   phone menu are positioned against it (containment makes it their containing block). */
.nav {
  --nav-h: 76px;
  position: fixed;
  top: var(--hellobar-h, 0px);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--c-field);
  color: var(--c-text);
  container: nav / inline-size;
}

/* Clear over the home hero (Paul, 23.10: the black strip stopped the planet on its way to the mark). No field, no
   blur: the planet passes under the bar to the mark. While clear, the bar keeps the dark roles of the hero in both
   themes (tokens.css). partials.py marks the home header data-clear; main.js sets data-solid once the hero text
   reaches the bar (and after the hero has gone), so links never sit on the headline, and data-panel-open while a panel or
   the phone menu is open — then the bar is solid in the page's theme at once (no fade: "/" opens search instantly),
   and fades back when it closes. Without JS the bar stays solid. */
.js .nav[data-clear]:not([data-solid]):not([data-panel-open]) { background-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .js .nav[data-clear]:not([data-panel-open]) { transition: background-color 160ms var(--ease-out-expo); }
}

.nav__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: var(--sp-5);
  min-height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--ff-display);
  font-size: var(--fs-400);
  font-variation-settings: "opsz" 60, "SOFT" 50, "wght" 500;
  letter-spacing: var(--ls-display);
  color: var(--c-text);
  white-space: nowrap;
}
.nav__brand-mark { width: 36px; height: 36px; flex-shrink: 0; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text-2);
  white-space: nowrap;
}
.nav__menu a[aria-current] { color: var(--c-text); }
/* The current item: a 6 px planet dot under the word. */
.nav__menu a[aria-current]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-mark);
}
.nav__words { display: none; }

.nav__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: end;
}
.nav__anchor { position: relative; display: inline-flex; }

.nav__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--c-text-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 140ms var(--ease-out-expo);
}
.nav__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav__icon[aria-expanded="true"] { color: var(--c-text); background: var(--c-surface); }
.nav__icon--lang {
  display: inline-flex;
  gap: 6px;
  width: auto;
  padding-inline: 12px;
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 500;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  margin-left: var(--sp-2);
  border: 1px solid var(--c-control-line); /* taste-skill-ignore: the pill outline is the site's one control shape (audit §0.3 DNA) */
  border-radius: var(--radius-pill);
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 140ms var(--ease-out-expo);
}
.nav__icon:active,
.nav__cta:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .nav__menu a:hover,
  .nav__icon:hover { color: var(--c-text); }
  .nav__cta:hover { border-color: var(--c-text); }
}

.nav__toggle,
.nav__compact { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open,
.nav__toggle[aria-expanded="false"] .nav__toggle-close { display: none; }

/* Panels: a flat surface one step off the field, opening from its button. */
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  padding: var(--sp-5);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line); /* taste-skill-ignore: surface is only 1.10:1 off the light field; the edge separates it */
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18); /* taste-skill-ignore: a panel floats over the page — a real overlay */
  transform-origin: top right;
  transition: opacity 200ms var(--ease-out-expo), transform 200ms var(--ease-out-expo);
}
.nav__panel[hidden] {
  /* reset.css hides [hidden] with !important; a closed panel stays rendered (invisible) so it can fade. */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 140ms var(--ease-out-expo), transform 140ms var(--ease-out-expo), visibility 0s 140ms;
}
.nav__panel h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--ff-body);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--c-text);
}
.nav__panel section + section { margin-top: var(--sp-5); }
.nav__panel p { margin: 0; font-size: var(--fs-200); line-height: 1.5; color: var(--c-text-3); }
.nav__panel a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list button,
.nav__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-300);
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.nav__list--links { margin-top: var(--sp-3); }
.nav__list--links a { font-size: var(--fs-200); color: var(--c-accent); }
.nav__list [aria-current="true"] { font-weight: 600; }
.nav__list [aria-current="true"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-mark);
}
.nav__list [aria-disabled="true"],
.nav__words [aria-disabled="true"] { color: var(--c-muted); cursor: default; }
.nav__soon { margin-left: auto; font-size: var(--fs-100); color: var(--c-muted); }
.nav__panel .nav__note,
.nav__note { margin-top: var(--sp-2); }

.nav__seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--c-field);
}
.nav__seg button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: var(--fs-200);
  color: var(--c-text-2);
  cursor: pointer;
}
.nav__seg [aria-pressed="true"] { background: var(--c-surface); color: var(--c-text); font-weight: 600; }
.nav__list button,
.nav__seg button,
.nav__words button,
.nav__cta {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.nav__panel--search { width: min(560px, calc(100vw - 2 * var(--container-pad))); }
.nav__panel--search input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--c-control-line);
  border-radius: var(--radius-pill);
  background: var(--c-field);
  color: var(--c-text);
  font: inherit;
  font-size: 16px;
}
.nav__panel--search input::placeholder { color: var(--c-muted); }
.nav__panel--search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* the browser's blue × */
/* Suggestions (plan 31, §1.5): they change on every keystroke, so they never animate. The panel scrolls inside
   itself when eight of them outgrow a phone screen. */
.nav__panel--search {
  max-height: calc(100dvh - var(--hellobar-h, 0px) - var(--nav-h) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__panel .nav__status { margin-top: var(--sp-3); overflow-wrap: anywhere; }
.nav__status:empty { display: none; }
.nav__results { list-style: none; margin: var(--sp-2) calc(-1 * var(--sp-3)) 0; padding: 0; }
.nav__panel .nav__result {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.nav__result-title { font-size: var(--fs-300); font-weight: 600; line-height: 1.35; }
.nav__result-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* one line: eight suggestions and "All N results" fit a 900 px screen */
  line-clamp: 1;
  overflow: hidden;
  font-size: var(--fs-200);
  line-height: 1.45;
  color: var(--c-text-3);
}
.nav__panel .nav__result--all { align-content: center; font-size: var(--fs-200); font-weight: 600; color: var(--c-accent); }
.nav__panel .nav__result:focus-visible { background: var(--c-raise); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .nav__panel .nav__result:hover { background: var(--c-raise); }
}

/* 1000–1279: the links stay, the tools fold into search + settings. */
@container nav (width < 80rem) {
  .nav__full { display: none; }
  .nav__compact { display: inline-flex; }
}

/* < 1000: the phone bar and the typographic menu under it. */
@container nav (width < 62.5rem) {
  .nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__brand { min-width: 44px; }
  .nav__brand-text { white-space: normal; line-height: 1; }
  .nav__cta,
  .nav__compact { display: none; }
  .nav__toggle { display: inline-grid; }
  .nav__anchor { position: static; }
  .nav__panel--search {
    top: 100%;
    left: var(--container-pad);
    right: var(--container-pad);
    width: auto;
    /* ends above the consent chip in the bottom corner (12 px + ~40 px), which would cover the last suggestion */
    max-height: calc(100dvh - var(--hellobar-h, 0px) - var(--nav-h) - 64px);
  }

  .nav__menu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--hellobar-h, 0px) - var(--nav-h));
    z-index: var(--z-nav);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-6) var(--container-pad) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
    background: var(--c-field);
    transition: opacity 240ms var(--ease-out-expo), transform 240ms var(--ease-out-expo);
  }
  .nav__menu-wrap:not([data-open]) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 140ms var(--ease-out-expo), transform 140ms var(--ease-out-expo), visibility 0s 140ms;
  }
  .nav__menu { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav__menu a {
    display: block;
    min-height: 0;
    padding-block: 6px;
    font-family: var(--ff-display);
    /* 12vw: "Capabilities" still fits the narrowest phone when text is enlarged to 200 %. */
    font-size: min(clamp(2rem, 1.4rem + 3vw, 2.75rem), 12vw);
    font-weight: 400;
    font-variation-settings: "opsz" 96, "SOFT" 50, "wght" 500;
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    color: var(--c-text);
    white-space: normal;
  }
  .nav__menu a[aria-current] { font-style: italic; color: var(--c-accent); }
  .nav__menu a[aria-current]::after { content: none; }

  .nav__words {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
    font-size: var(--fs-400);
    color: var(--c-text-2);
  }
  .nav__words-row { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__words button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--c-text-2);
    cursor: pointer;
    touch-action: manipulation;
  }
  .nav__words [aria-pressed="true"],
  .nav__words [aria-current="true"] {
    color: var(--c-text);
    text-decoration: underline;
    text-decoration-color: var(--c-mark);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .nav__words .nav__soon { margin-left: 4px; font-size: inherit; }
  .nav__sep { padding-inline: 6px; color: var(--c-muted); }
  .nav__words .nav__note { font-size: var(--fs-300); line-height: 1.5; color: var(--c-text-3); max-width: 40ch; }
  .nav__words .nav__note a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
}
/* Very narrow (320 px at 200 % text): the mark alone; the link keeps its name in aria-label. */
@container nav (width < 20rem) {
  .nav__brand-text { display: none; }
}

/* Reduced motion: opacity only, no travel (§1.7). */
@media (prefers-reduced-motion: reduce) {
  /* Opening shows at once: visibility is not transitioned — on the panel, nor on what is inside it (base.css
     gives every element .01ms with the default "all", so each child would carry the inherited "hidden" through
     the first frame and focus() into the field or the menu fails). Closing stays visible until the fade ends. */
  .nav__panel,
  .nav__menu-wrap {
    transform: none;
    transition-property: opacity;
    transition-duration: 120ms;
  }
  .nav__panel *,
  .nav__menu-wrap * { transition-property: none; }
  .nav__panel[hidden],
  .nav__menu-wrap:not([data-open]) {
    transform: none;
    transition-property: opacity, visibility;
    transition-duration: 120ms, 0s;
    transition-delay: 0s, 120ms;
  }
  .nav__icon,
  .nav__cta { transition: none; }
  .nav__icon:active,
  .nav__cta:active { transform: none; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-overlay);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--pm-purple-700); /* fill, same in both themes; white on it 9.2:1 */
  color: var(--pm-white);
}
.skip-link:focus { top: var(--sp-4); }