/* Shared navigation. Only the drawer adds rows. */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--nav-layer);
  background: var(--card);
  border-bottom: var(--nav-line) solid var(--hairline);
}
.nav-inner {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto var(--nav-touch);
  align-items: center;
  gap: var(--nav-pad);
  width: min(var(--column), 100%);
  min-height: var(--nav-height);
  margin-inline: auto;
  padding: var(--nav-space) var(--nav-pad);
}
.nav .brand { min-height: var(--nav-touch); gap: var(--nav-space); }
.nav .brand img { width: var(--nav-mark); height: var(--nav-mark); }
.nav-links { display: flex; align-items: center; gap: var(--nav-space); }
.nav-links > *, .nav-action, .nav-current, .drawer a, .drawer [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nav-touch);
  min-width: var(--nav-touch);
  padding-inline: var(--nav-space);
  font: 500 var(--size-mono)/var(--nav-leading) var(--font);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav [aria-current="page"] { color: var(--accent-text); text-decoration: underline; }
.nav-destination { display: flex; }
.nav-action {
  background: var(--page);
  border-radius: var(--r-pill);
  padding-inline: var(--nav-pad);
}
.nav-status {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--nav-space);
  min-width: 0;
  max-width: 100%;
  min-height: var(--nav-touch);
  padding-inline: var(--nav-space);
  border-radius: var(--r-pill);
  background: var(--haze-light);
  font: 400 var(--size-mono)/var(--nav-leading) var(--mono);
  white-space: nowrap;
}
#navPool { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-pool-compact { display: none; }
.nav #navCa {
  flex: 0 0 auto;
  min-height: var(--nav-touch);
  min-width: var(--nav-touch);
  padding: 0 var(--nav-space);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  white-space: nowrap;
}
.nav #navCa:disabled { display: none; }
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nav-space);
  width: var(--nav-touch);
  height: var(--nav-touch);
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--page);
}
.burger span { width: var(--nav-bar); height: var(--nav-stroke); background: var(--ink); }
.drawer {
  position: absolute;
  top: 100%;
  right: max(var(--nav-space), calc((100% - var(--column)) / 2));
  left: max(var(--nav-space), calc((100% - var(--column)) / 2));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nav-pad);
  max-height: calc(100dvh - var(--nav-height) - var(--nav-pad) * 2);
  overflow: auto;
  padding: var(--nav-pad);
  background: var(--card);
  border: var(--nav-line) solid var(--hairline);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.drawer nav { display: flex; flex-direction: column; min-width: 0; }
.drawer a, .drawer [aria-current] { justify-content: flex-start; }
.drawer strong { padding: var(--nav-space); font: 500 var(--size-mono)/var(--nav-leading) var(--font); }
.drawer .drawer-action { display: none; }
.nav a, .nav button { transition: color var(--nav-speed) var(--nav-ease), background-color var(--nav-speed) var(--nav-ease); }
.nav a:hover, .nav button:not(:disabled):hover { color: var(--accent-text); background-color: var(--haze-light); }
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto minmax(0, 1fr) auto var(--nav-touch); }
}
@media (max-width: 767px) {
  .nav-inner { grid-template-columns: auto minmax(0, 1fr) var(--nav-touch); gap: var(--nav-space); padding-inline: var(--nav-space); }
  .nav-destination { display: none; }
  .nav-pool-compact { display: inline; }
  #navPool { position: absolute; width: var(--nav-line); height: var(--nav-line); clip-path: inset(50%); overflow: hidden; }
  .drawer .drawer-action { display: inline-flex; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a, .nav button { transition: none; }
}