/* ======================================================================
   NAVBAR — the desktop shell is a sticky top bar, not a sidebar.

   app.css renders <nav class="nav"> as the phone's bottom tab bar and is left
   alone here. From 1024px the same element becomes a 64px steel bar across
   the top: brand on the left, the role's tabs beside it, the amber call to
   action and the mode switch on the right. Every rule below is scoped to the
   desktop query so the phone UI cannot drift.

   The mode switch (.topbar, emitted by modeSwitch() in shared.js) is a
   sibling of the nav, not a child - the phone needs it at the top of the
   screen while the nav sits at the bottom. On desktop it is pinned into the
   navbar's right-hand slot with position:fixed; both it and the sticky nav
   hold the top of the viewport, so they read as one bar. .nav-utils reserves
   the room it occupies.
   ====================================================================== */
:root { --nav-h: 64px; }

/* Desktop-only furniture stays out of the phone's bottom bar. */
.nav-utils { display: none; }

/* New-lead count on the owner's Requests tab, both layouts. */
.nav-link { position: relative; }
.nav-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand-500); color: var(--brand-ink);
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1;
  margin-left: 4px; vertical-align: middle;
}
@media (max-width: 1023px) {
  .nav-badge { position: absolute; top: -6px; right: calc(50% - 26px); margin: 0; }
}

@media (min-width: 1024px) {
  /* No sidebar offset any more: the content owns the full width. */
  .ph:has(> .nav) { padding-left: 0; }

  .nav {
    position: sticky; top: 0; inset: auto; z-index: 40;
    order: -2; width: 100%; height: var(--nav-h);
    display: flex; flex-direction: row; align-items: center; gap: 22px;
    margin: 0; padding: 0 var(--content-gutter); text-align: left;
    background: var(--steel-900); color: #fff;
    border: 0; border-bottom: 1px solid color-mix(in srgb, #fff 8%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, #000 30%, transparent);
  }
  .nav-aside { display: flex; }

  .nav-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0; border: 0; flex: none;
  }
  .nav-mark {
    width: 34px; height: 34px; font-size: 14px;
    background: var(--brand-500); color: var(--brand-ink);
  }
  .nav-wordmark { font-size: 16px; letter-spacing: .18em; }
  .nav-sub { font-size: 10px; max-width: 220px; }

  .nav-links {
    display: flex; flex-direction: row; align-items: center; gap: 2px;
    padding: 0; overflow: visible; height: 100%;
  }
  .nav-link {
    display: flex; align-items: center; gap: 8px; height: 100%;
    padding: 0 12px; font-size: 12.5px; letter-spacing: .1em;
    color: color-mix(in srgb, #fff 68%, transparent);
    border: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  .nav-link:hover { background: transparent; color: #fff; }
  .nav-link.on {
    background: transparent; color: #fff; box-shadow: none;
    border-bottom-color: var(--brand-500);
  }
  .nav-icon { width: 16px; height: 16px; }

  .nav-utils {
    display: flex; align-items: center; gap: 18px; margin-left: auto;
    /* Room for the pinned mode switch / sign-in beside these. */
    padding-right: 300px;
  }
  .ph:has(.topbar-signedout) .nav-utils { padding-right: 96px; }
  .ph:has(> .nav-aside) .nav-utils { padding-right: 0; }
  .nav-util {
    font-family: var(--font-heading); font-size: 12.5px; letter-spacing: .1em;
    text-transform: uppercase; color: color-mix(in srgb, #fff 68%, transparent);
  }
  .nav-util:hover { color: #fff; }
  .nav-cta { font-size: 13px; padding: 9px 16px; letter-spacing: .04em; }

  .nav-foot { display: none; }

  /* ---- The mode switch, pinned into the navbar's right slot ------------ */
  .topbar {
    position: fixed; top: 0; right: var(--content-gutter); left: auto; z-index: 41;
    width: auto; max-width: none; margin: 0; padding: 12px 0 0;
    background: transparent; border: 0;
  }
  .mode-switch { width: 280px; max-width: none; gap: 4px; }
  .mode-option {
    /* 44px: still a thumb target - a tablet in a site cabin is a desktop. */
    min-height: 44px; padding: 3px 10px; gap: 0;
    background: var(--steel-800); border-color: var(--steel-700);
    color: color-mix(in srgb, #fff 72%, transparent);
  }
  .mode-option .mode-label { font-size: 12px; letter-spacing: .08em; }
  .mode-option .mode-hint { font-size: 9.5px; opacity: .7; }
  .mode-option:not(.on):hover { background: var(--steel-700); border-color: var(--steel-700); color: #fff; }
  .mode-option.on { background: var(--brand-500); border-color: var(--brand-500); color: var(--brand-ink); }
  .mode-option.on .mode-hint { opacity: .8; }

  /* A visitor's top bar collapses to its Sign in button; the pitch moved
     into the search hero where it can be read. */
  .topbar-signedout { padding: 12px 0 0; gap: 0; }
  .topbar-signedout .topbar-note { display: none; }
  .topbar-signin { min-height: 40px; padding: 0 18px; font-size: 13px; }
}