/* masthead.css — the ONE shared site masthead (frozen top nav), used by every
   page that doesn't already carry the app trio's inline nav (SSR address /
   fairshare / plotbase-area pages, legal pages, share/invite/takeover).
   Class names + IDs + metrics are a faithful clone of the root app's
   .welcome-nav so the bar is pixel-identical everywhere. Self-sufficient
   tokens (pl-nav- prefixed) so host-page CSS can't skew it. */

.welcome-nav {
  --pl-nav-bg: #fdfcfa;   /* warm-white band — distinct from every page bg, "nice separation" */
  --pl-forest-deep: #1a3a2a;
  --pl-forest: #2d5a3d;
  --pl-sage: #8ab89a;
  --pl-gold: #b8965a;
  --pl-canvas-max: 1200px;
  --pl-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0; right: 0;
  max-width: var(--pl-canvas-max);
  margin: 0 auto;
  padding: 12px 20px;
  z-index: 50;
  background: var(--pl-nav-bg);
  border-bottom: 2px solid var(--pl-forest);   /* brand-green rule separating bar from page */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-family: var(--pl-sans);
}
@media (min-width: 1216px) {
  .welcome-nav { border-left: 1px solid rgba(26, 58, 42, 0.25); border-right: 1px solid rgba(26, 58, 42, 0.25); }
}
.pl-nav-spacer { height: 66px; }
@media (max-width: 600px) { .pl-nav-spacer { height: 60px; } }

.welcome-nav .brand-switch { display: flex; align-items: stretch; gap: 16px; min-width: 0; }
.welcome-nav .brand-lock {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  text-decoration: none; padding-bottom: 6px;
  border-bottom: 3px solid transparent;
}
.welcome-nav .brand-lock svg { display: block; flex: 0 0 auto; }
.welcome-nav .brand-lock.is-active { border-bottom-color: var(--pl-forest); }
.welcome-nav .brand-lock:hover:not(.is-active) { opacity: 0.72; }
.welcome-nav .brand-lock:focus-visible { outline: 2px solid var(--pl-sage); outline-offset: 3px; border-radius: 2px; }
.welcome-nav .brand-lock-text[hidden] { display: none; }
.welcome-nav .lk-wordmark {
  font-family: var(--pl-sans); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; color: var(--pl-forest-deep); line-height: 1.1;
}
.welcome-nav .pb-base { color: var(--pl-gold); }
.welcome-nav .nav-todo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c0392b; flex-shrink: 0; margin-left: 6px; }
.welcome-nav .nav-todo-dot[hidden] { display: none; }

.welcome-nav .nav-actions { display: flex; align-items: center; gap: 20px; }
.welcome-nav .nav-why {
  display: inline-block; background: none; border: none; padding: 0;
  font-family: var(--pl-sans); font-size: 14.5px; font-weight: 600;
  color: var(--pl-forest); cursor: pointer; text-decoration: none;
}
.welcome-nav .nav-why:hover { text-decoration: underline; }
.welcome-nav .nav-why:focus-visible { outline: 2px solid var(--pl-sage); outline-offset: 3px; border-radius: 2px; }
.welcome-nav .nav-why[hidden] { display: none; }

.welcome-nav .signin-btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--pl-sans); font-weight: 500; font-size: 15px; line-height: 1;
  color: var(--pl-forest-deep); padding: 8px 12px;
  border: 1px solid rgba(138, 184, 154, 0.55); border-radius: 6px;
  background: transparent; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.welcome-nav .signin-btn:hover { background: rgba(26, 58, 42, 0.06); }
.welcome-nav .signin-btn:focus-visible { outline: 3px solid var(--pl-sage); outline-offset: 2px; }
.welcome-nav .signin-btn[hidden] { display: none; }
/* Join free — same door as Sign In, gold-framed (2px border with 1px-less
   padding keeps the outer height identical to the 1px-bordered chips). */
.welcome-nav .join-btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--pl-sans); font-weight: 600; font-size: 15px; line-height: 1;
  color: var(--pl-forest-deep); padding: 7px 11px;
  border: 2px solid var(--pl-gold); border-radius: 6px;
  background: transparent; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease;
}
.welcome-nav .join-btn:hover { background: rgba(184, 150, 90, 0.12); }
.welcome-nav .join-btn:focus-visible { outline: 3px solid var(--pl-sage); outline-offset: 2px; }
.welcome-nav .join-btn[hidden] { display: none; }

.welcome-nav .user-chip { display: flex; align-items: center; gap: 8px; }
.welcome-nav .user-chip[hidden] { display: none; }
.welcome-nav .user-chip .name,
.welcome-nav .user-chip .signout-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px;
  border: 1px solid rgba(138, 184, 154, 0.55); border-radius: 6px;
  background: transparent; color: var(--pl-forest);
  font-family: var(--pl-sans); font-weight: 500; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.welcome-nav .user-chip .chip-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.welcome-nav .user-chip .signout-btn { border-color: var(--pl-forest-deep); color: var(--pl-forest-deep); }
.welcome-nav .user-chip .name:hover { background: rgba(26, 58, 42, 0.06); }
.welcome-nav .user-chip .signout-btn:hover { background: rgba(26, 58, 42, 0.06); border-color: var(--pl-forest-deep); }

/* Canonical mobile spec — IDENTICAL breakpoint (600px) and metrics on every
   page (root, plotbase, dashboard, and this component), so the bar never
   changes height/size when navigating between pages on a phone. */
@media (max-width: 600px) {
  .welcome-nav { padding: 12px 14px; }
  .welcome-nav .nav-why { display: none; }
  .welcome-nav .nav-actions { gap: 12px; }
  .welcome-nav .brand-switch { gap: 10px; min-width: 0; }
  .welcome-nav .brand-lock { gap: 6px; }
  .welcome-nav .brand-lock svg { width: 28px; height: 25px; }
  .welcome-nav .brand-lock .lk-wordmark { font-size: 16px; }
  .welcome-nav .signin-btn { padding: 7px 12px; font-size: 14px; }
  .welcome-nav .join-btn { padding: 6px 11px; font-size: 14px; }
  .welcome-nav .user-chip .chip-label { display: none; }
  .welcome-nav .user-chip .name, .welcome-nav .user-chip .signout-btn { padding: 8px 10px; }
  .welcome-nav .user-chip { gap: 6px; }
}