/* One bar for the site and for every tool: 52 px, 11 px uppercase with 2 px
   tracking, the grid outline below it. The site links it, build.js inlines it
   into a tool, so the two cannot drift. Tokens fall back from the tool's
   names to the site's. */
[data-nav] {
  --nav-line: var(--line, var(--border));
  --nav-text: var(--text);
  --nav-dim: var(--muted-2, var(--dim));
  --nav-faint: var(--muted, var(--faint));
  --nav-surface: var(--surface);
  --nav-hover: var(--surface-2, var(--elevated));
  --nav-font: var(--font-ui, var(--sans));
  --nav-accent: var(--accent);
  --nav-height: 52px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: var(--nav-height);
  padding: 8px 12px;
  box-sizing: border-box;
  background: color-mix(in oklab, var(--nav-surface) 70%, transparent);
  border-block-end: 1px solid var(--nav-line);
  font: 400 11px/1 var(--nav-font);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-nav][data-sticky] { position: sticky; top: 0; z-index: 50; }

[data-nav] [data-home] {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 36px;
  color: var(--nav-text); text-decoration: none;
}
[data-nav] [data-home]:hover, [data-nav] [data-home]:focus-visible { color: var(--nav-accent); text-decoration: none; }
[data-nav] [data-mark] {
  inline-size: 16px; block-size: 16px;
  color: var(--nav-accent); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: color 160ms ease;
}
[data-nav] h1 { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--nav-accent); margin: 0; }

/* A section is a link back and a disclosure beside it: hover opens the list
   for a pointer, the chevron button opens it for a keyboard, and the link
   keeps working as a link. The current section of a tool is its name. */
[data-nav] [data-menu] { position: relative; display: inline-flex; align-items: center; gap: 2px; border-radius: 6px; }
[data-nav] [data-menu]::before { content: "/"; color: var(--nav-faint); opacity: .6; margin-inline-end: 10px; }
[data-nav] [data-menu] > a, [data-nav] [data-menu] > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; min-block-size: 36px; margin: 0;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--nav-dim); font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: none; cursor: pointer;
}
/* The chevron beside a section takes no room until the pointer or the focus
   is on the section: then it opens up, what follows moves to the right, and
   the list appears. On a phone it is always there, nothing hovers. */
[data-nav] [data-menu] > button[data-menu-toggle] { width: 0; min-inline-size: 0; padding: 4px 0; margin: 0; overflow: hidden; justify-content: center; transition: width .16s ease, padding .16s ease; }
[data-nav] [data-menu]:hover > button[data-menu-toggle], [data-nav] [data-menu]:focus-within > button[data-menu-toggle], [data-nav] [data-menu] > button[data-menu-toggle][aria-expanded="true"] { width: 28px; padding: 4px; }
@media (prefers-reduced-motion: reduce) { [data-nav] [data-menu] > button[data-menu-toggle] { transition: none; } }
[data-nav] [data-menu][data-current] > a, [data-nav] [data-menu][data-current] > button { color: var(--nav-accent); }
[data-nav] [data-menu] > a:hover, [data-nav] [data-menu] > a:focus-visible,
[data-nav] [data-menu] > button:hover, [data-nav] [data-menu] > button:focus-visible { background: var(--nav-hover); color: var(--nav-text); text-decoration: none; }
[data-nav] [data-menu][data-current] > a:hover, [data-nav] [data-menu][data-current] > button:hover { color: var(--nav-accent); }
[data-nav] [data-chevron] {
  width: 13px; height: 13px; color: var(--nav-faint);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateY(-1px);
  transition: opacity .14s ease, transform .14s ease;
}
[data-nav] [data-menu]:hover [data-chevron],
[data-nav] [data-menu] > button:focus-visible [data-chevron],
[data-nav] [data-menu] > button[aria-expanded="true"] [data-chevron] { opacity: 1; transform: none; }
[data-nav] [data-menu] > button[aria-expanded="true"] [data-chevron] { transform: rotate(180deg); }

[data-nav] [data-menu-list] {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 220px; margin: 0; padding: 4px; list-style: none;
  background: var(--nav-surface); border: 1px solid var(--nav-line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  font: 400 12px/1.2 var(--nav-font); letter-spacing: 0; text-transform: none; white-space: normal;
  display: none;
}
[data-nav] [data-menu] > button[aria-expanded="true"] ~ [data-menu-list] { display: block; }
/* the pointer crosses the gap between the section and its list without
   leaving the menu: an invisible bridge fills it */
[data-nav] [data-menu-list]::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
[data-nav] [data-menu-list] a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px; text-decoration: none;
  color: var(--nav-text);
}
[data-nav] [data-menu-list] a:hover, [data-nav] [data-menu-list] a:focus-visible { background: var(--nav-hover); text-decoration: none; }
[data-nav] [data-menu-list] a[aria-current="page"] { color: var(--nav-accent); }
[data-nav] [data-menu-list] a[aria-current="page"]::after { content: "current"; font: 400 10px/1 var(--nav-font); letter-spacing: .06em; text-transform: uppercase; color: var(--nav-faint); }
[data-nav] [data-menu-list] li + li { border-top: 1px solid var(--nav-line); margin-top: 2px; padding-top: 2px; }
[data-nav] [data-menu-list] li[data-sub] { border-top: 0; margin-top: 0; padding-top: 0; }
[data-nav] [data-menu-list] li[data-sub] a { padding-inline-start: 24px; color: var(--nav-dim); }
[data-nav] [data-menu-list] li[data-sub] a[aria-current="page"] { color: var(--nav-accent); }

[data-nav] [data-nav-actions] { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
[data-nav] [data-nav-actions] a { display: inline-flex; align-items: center; min-block-size: 36px; color: var(--nav-dim); text-decoration: none; transition: color 120ms; }
[data-nav] [data-nav-actions] a:hover, [data-nav] [data-nav-actions] a:focus-visible { color: var(--nav-text); text-decoration: none; }
[data-nav] [data-nav-actions] a[aria-current="page"] { color: var(--nav-accent); }
[data-nav] [data-nav-user] { display: inline-flex; align-items: center; gap: 6px; color: var(--nav-dim); }
[data-nav] [data-nav-user] img { border-radius: 50%; }

/* Narrow: the wordmark goes and the section stays, so the bar says where you
   are. A thumb needs 36 px at least, e2e/site-mobile.e2e.js measures it; the
   chevron is always shown, there is no hover on a phone to reveal it with. */
@media (max-width: 34rem) {
  [data-nav] { gap: 8px; padding: 8px; }
  [data-nav] [data-wordmark] { display: none; }
  [data-nav] [data-menu]::before { margin-inline-end: 6px; }
  [data-nav] [data-chevron] { opacity: 1; transform: none; }
  [data-nav] [data-menu] > button[data-menu-toggle] { width: 28px; padding: 4px; opacity: 1; }
  [data-nav] [data-home], [data-nav] button, [data-nav] button[data-icon-only], [data-nav] [data-menu] > a, [data-nav] [data-nav-actions] a { min-block-size: 40px; }
}