/* Shared top bar and menu drawer, drawn by nav.js on every page.
   Colours come from each page's own tokens (--card, --text, --muted, --border). */

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.topnav .brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; text-decoration: none; }
.topnav .brand img { width: 26px; height: 26px; }

.menu-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--muted); }
.menu-btn svg { width: 20px; height: 20px; }

/* The drawer: full height, slides over the right edge of the screen. */
.site-menu {
  inset: 0 0 0 auto;
  margin: 0;
  width: min(300px, 85vw);
  height: 100dvh;
  max-height: none;
  padding: 16px 20px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.site-menu::backdrop { background: rgb(0 0 0 / 0.35); }

.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The page tree: each level is indented, with a guide line showing what it sits under. */
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu li { margin-left: calc(var(--depth) * 16px); }
.site-menu li.child { border-left: 2px solid var(--border); padding-left: 6px; }
.site-menu a,
.site-menu .soon {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.site-menu a:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.site-menu a[aria-current="page"] {
  background: color-mix(in srgb, #1872c9 15%, transparent);
  box-shadow: inset 3px 0 #1872c9;
}
.site-menu .soon { color: var(--muted); font-weight: 500; }
.site-menu .soon small {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
}