/* ============================================================================
 * The Passion Table — the one top navigation (pt-nav).
 *
 * Every page used to carry its own header. home.html had the full menu plus a
 * sign-in button; why.html had five of the ten links and no auth control;
 * reserve.html had a logo and a chip; consumer/joint/admin had an operator bar;
 * experience.html had no header at all. Navigating between them changed the
 * furniture underfoot.
 *
 * One bar now, rendered by pt-nav.js so the markup cannot drift page to page,
 * and it shows a sign-in button or the signed-in person's tile depending on
 * session state.
 * ========================================================================== */

.pt-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pt-border);
}

/* The dark operator consoles keep their own ground so the bar does not glare. */
.pt-nav.on-dark {
  background: rgba(15, 23, 42, 0.94);
  border-bottom-color: #1e293b;
}
.pt-nav.on-dark .pt-nav-link { color: #e2e8f0; }
.pt-nav.on-dark .pt-nav-link:hover { color: #fff; }
.pt-nav.on-dark .pt-nav-brand { color: #fff; }
.pt-nav.on-dark .pt-nav-tile { border-color: #334155; color: #e2e8f0; }
.pt-nav.on-dark .pt-nav-menu { background: #0f172a; border-color: #1e293b; }
.pt-nav.on-dark .pt-nav-menu a,
.pt-nav.on-dark .pt-nav-menu button { color: #e2e8f0; }
.pt-nav.on-dark .pt-nav-menu a:hover,
.pt-nav.on-dark .pt-nav-menu button:hover { background: #1e293b; }

.pt-nav-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--pt-ink);
  white-space: nowrap;
}
.pt-nav-brand img { border-radius: 6px; }
.pt-nav-brand .accent { color: var(--pt-green); }

.pt-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.pt-nav-link {
  color: var(--pt-ink);
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
}
.pt-nav-link:hover { color: var(--pt-green); }
.pt-nav-link.on { color: var(--pt-green); }

.pt-nav-right { display: flex; align-items: center; gap: 10px; }

/* Signed-in tile: initials, name, and a disclosure caret. */
.pt-nav-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--pt-border);
  border-radius: 999px;
  background: var(--pt-card);
  color: var(--pt-ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 210px;
}
.pt-nav-tile:hover { border-color: var(--pt-green); }
.pt-nav-avatar {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--pt-green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
  overflow: hidden;
}
.pt-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-nav-account { position: relative; }
.pt-nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  box-shadow: var(--pt-shadow-lg);
  padding: 6px;
  display: none;
  z-index: 70;
}
.pt-nav-menu.open { display: block; }
.pt-nav-menu a,
.pt-nav-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--pt-ink);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.pt-nav-menu a:hover,
.pt-nav-menu button:hover { background: var(--pt-paper-2); }
.pt-nav-menu .sep { height: 1px; margin: 5px 4px; background: var(--pt-border); }
.pt-nav-menu .who { padding: 8px 11px 4px; font-size: .8rem; color: var(--pt-muted); }

/* Mobile: the link row collapses, the account control and CTA stay. */
.pt-nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
@media (max-width: 940px) {
  .pt-nav-links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--pt-card);
    border-bottom: 1px solid var(--pt-border);
    padding: 8px 18px 14px;
    display: none;
  }
  .pt-nav-links.open { display: flex; }
  .pt-nav-links .pt-nav-link { padding: 9px 0; width: 100%; }
  .pt-nav-burger { display: block; }
  .pt-nav { position: relative; }
  .pt-nav-tile { max-width: 130px; }
  /* "Sign up / Sign in" wrapped to five lines in a 59px-wide box at 390px,
     which is how the primary way into the product looked on a phone. Keep the
     nav actions on one line each and let them shrink instead of wrapping. */
  .pt-nav-right { gap: 8px; }
  /* Both nav CTAs were 30-32px tall, under the 44px touch minimum, on the two
     controls a phone visitor is most likely to reach for. */
  .pt-nav-right .pt-btn {
    white-space: nowrap;
    flex: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Narrow phones cannot fit "Sign up / Sign in" beside "Order now" at all, so
   the control says "Sign in" there -- the page it opens offers both, and its
   aria-label still spells the pair out. */
@media (max-width: 460px) {
  #nav-auth .pt-auth-long { display: none; }
}
@media (min-width: 461px) {
  #nav-auth .pt-auth-short { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-nav, .pt-nav-menu, .pt-nav-links { transition: none; }
}