/* Site chrome: navigation, footer, feedback, and admin status. */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* Matches the hero/landing-card box width (40rem reading column minus
     .moss-line's own 1.1rem side padding), not the full 40rem column -- so the nav's
     border/background left and right edges line up with the hero and card borders
     below it on landing/signup/confirmation. Applied unconditionally (not just on
     those pages) so the header is the same width everywhere, not just on the pages
     that happen to have a box to align to. */
  max-width: calc(40rem - 2.2rem);
  margin: 0 auto;
  padding: 0.9rem 1rem 0.7rem;
  /* Fixed baseline so the bar is the same height everywhere, comfortably fitting the
     wordmark and the (now-smaller, see .nav-guest-links .btn-ghost below) Log In
     button -- min-height, not height, so the logged-in mobile menu can still grow
     the bar taller when it expands below the top row instead of being clipped. */
  min-height: 4rem;
  border-bottom: 2px solid var(--text);
  /* Lighter than the body's --bg so the header reads as its own surface, carried the
     same way on every page (not just landing) -- see the "lighter header, brand
     consistency" finding. */
  background: var(--panel);
}

.nav a {
  font-weight: 600;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  justify-content: center;
}

/* Logged-out nav has no hamburger toggle balancing the right-hand links (logged-in nav
   does), so centering "Backroad ADV" in the *remaining* space after nav-guest-links --
   not the true center of the bar -- read as an unbalanced, off-center wordmark. Left-
   align it instead, the standard logo-left/links-right layout, only when there's
   nothing on the left to balance against. */
.brand-group-left {
  justify-content: flex-start;
}

/* Guest nav is just the wordmark (left) and the Log In button (right) -- stretch both
   top-level flex children to the row's full height (the button's, since its padding
   makes it taller than the plain brand text) instead of the default vertical
   centering, so "BACKROAD ADV" occupies the same height as the button beside it
   rather than sitting shorter in the middle of the row. .brand-group/.nav-guest-links
   already center their own content, so this only changes the outer box each sizes
   into. Scoped to the logged-out nav via .brand-group-left (only added then) so the
   authenticated nav's hamburger/avatar/link layout is untouched. */
.nav:has(.brand-group-left) {
  align-items: stretch;
}

.nav .brand {
  color: var(--text);
  /* Stretching the container (above) matched the box height to the Log In button,
     but the glyphs themselves still read small next to it -- sized up so the wordmark
     itself, not just its invisible box, looks as tall as the button. */
  font-size: 1.7rem;
  line-height: 1;
  /* 700 is the heaviest self-hosted Rajdhani weight. */
  font-weight: 700;
  font-family: 'Rajdhani', 'Work Sans', sans-serif;
  letter-spacing: 0.02em;
}

.nav .brand:hover, .nav .brand:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.nav-account-menu {
  position: relative;
}

.nav-account-menu-items {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  /* No padding and no gap: every row runs edge to edge inside the panel, so its hover
     highlight is the whole row (how a menu behaves) rather than a floating pill. */
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  /* Above the calendar's sticky header (z-index 100) and any in-page overlay, below the
     fixed feedback widget / unsaved-changes bar (400, interface.css). */
  z-index: 200;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--text) 28%, transparent);
  overflow: hidden;
}

.nav-account-menu-items form {
  margin: 0;
  /* The form is layout-invisible: its button becomes a direct row of the menu column,
     so link and button rows are sized and aligned by the same flex container instead of
     the button being centred inside a full-width form. */
  display: contents;
}

/* Both rows -- the Profile link and the Log Out submit button -- are one component, so
   every box property is set here rather than inherited from `button, .btn`
   (components.css). That rule is what kept breaking this menu: it makes a button an
   inline-flex box with `justify-content: center`, vertical margins and its own padding,
   so the button row sat lower and centred while the link row sat left -- the mismatch
   in the screenshots. `text-align: left` never fixed it, because text-align does
   nothing to a centred flex container's own content.

   Specificity, not stylesheet order, is what makes this stick: (0,2,0) here beats both
   `button, .btn` (0,0,1) and `button.secondary` (0,1,1) from components.css, which
   loads after this file. Any future row added to this menu needs the class too. */
.nav-account-menu-items .nav-account-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  /* Comfortable thumb target on the phone widths this menu is mostly used at. */
  min-height: 2.75rem;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  /* Matches the sitewide link treatment (a:not(.btn), foundation.css). */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* A hairline between rows: two stacked uppercase labels with no separator read as one
   wrapped phrase, which is how "PROFILE / LOG OUT" looked.
   `display: contents` keeps the form out of the layout but not out of the DOM, so the
   button's row is reached through the form rather than by an adjacent-sibling match. */
.nav-account-menu-items .nav-account-menu-item + .nav-account-menu-item,
.nav-account-menu-items *:not(:first-child) > .nav-account-menu-item {
  border-top: 1px solid var(--divider);
}

/* Whole-row highlight, not an underline: the row is the target, and underlining moved
   the baseline around between the two items. */
.nav-account-menu-items .nav-account-menu-item:hover,
.nav-account-menu-items .nav-account-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent-hover);
  text-decoration: none;
}

.nav-account-menu-items .nav-account-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The full link list collapses behind the hamburger at every width, not just phones --
   .nav is capped at the same 40rem measure as the page body (see .nav above), so
   desktop never has more room than a phone does, and showing every link inline just
   wrapped messily once Closure Map and admin Feedback pushed the count up. */
.nav-links {
  display: none;
  order: 2;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--divider);
}

.nav-toggle-input:checked ~ .nav-links {
  display: flex;
}

/* Keep logged-out navigation grouped when it wraps. */
.nav-guest-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem 1rem;
}

.nav-links form {
  margin: 0;
}

/* Pin the header "Sign Up" text/icon to the hero's evergreen explicitly, rather than
   the indirected --action-contrast token -- reported as reading too light/lime on the
   orange fill here specifically (2026-09-22). */
.nav-guest-links .btn-primary {
  color: var(--panel-2);
}

/* Header Log In reads oversized next to the wordmark at the sitewide .btn-ghost
   size (built for the landing hero's bigger CTAs) -- smaller padding/font here only,
   scoped to the nav so the hero/auth-page Log In buttons stay full-size. */
.nav-guest-links .btn-ghost {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
}

/* Marks the nav link for the section the visitor is currently in. */
.nav-link-current {
  background: var(--bg-2);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin: -0.15rem -0.6rem;
}

.nav .btn,
.nav button {
  margin-top: 0;
  margin-bottom: 0;
}

.nav-toggle {
  position: relative;
  display: block;
  order: -2;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}

.nav-avatar {
  flex-shrink: 0;
}

/* Always-visible shortcut row for the handful of pages people actually want one tap
   away, at every width (originally phone-only -- see #66 and the .nav-links comment
   above for why it's now unified). */
.nav-quicklinks {
  display: flex;
  order: 3;
  flex-basis: 100%;
  /* space-between, not space-around: the three labels have very different widths, so
     space-around left the row's first and last item floating at arbitrary insets that
     matched nothing above them. This puts them on the bar's own content edges, under the
     hamburger and the avatar. .nav-link-current's negative side margins exactly cancel
     its padding, so the current page's pill doesn't shift the row either way. */
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--seam);
}

.nav-quicklinks a {
  font-size: 0.85rem;
}

/* Admin-only live site statistics (shown on the /admin dashboard, not the nav). */
.admin-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
}

.admin-stats-bar span {
  white-space: nowrap;
}

.admin-stats-bar strong {
  color: var(--text);
}

/* Presence line on each roster row -- a step quieter than the .muted email/joined line
   above it, sized to match the stats bar. */
.admin-member-seen {
  font-size: 0.75rem;
  color: var(--muted);
}

.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.nav-toggle-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.55rem;
  margin: 0;
}

@media (max-width: 640px) {
  .admin-stats-bar {
    gap: 0.15rem 0.9rem;
    font-size: 0.7rem;
  }
}

main {
  /* The product is intentionally mobile-first: desktop preserves the same focused
     reading measure rather than stretching one-column pages across a monitor. */
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3.5rem;
}