/* site-shell.css
 * Shared, site-wide design system: tokens, base styles, and the ONE chrome
 * (topbar + bottom tab bar) used identically on desktop, mobile browser, and
 * standalone/PWA — no per-context branching. Link this on every page,
 * before the page's own stylesheet.
 *
 * Markup this expects on every page (see bnb.html for the reference copy):
 *   <header class="topbar"> ... </header>
 *   <nav class="tab-bar"> ... </nav>   (mobile only — CSS hides it on desktop)
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #16302B;
  --brand: #004d40;
  --brand-deep: #06211D;
  --brass: #C89B5C;
  --brass-deep: #9C7538;
  --ivory: #FBF8F3;
  --mist: #7C9990;
  --white: #FFFFFF;
  --border: #E6E1D6;
  --danger: #B3261E;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-card: 0 1px 2px rgba(6,33,29,0.06), 0 8px 24px -8px rgba(6,33,29,0.12);
  --shadow-lift: 0 20px 60px -20px rgba(6,33,29,0.35);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: 58px;
  --tabbar-h: 60px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--brand-deep);
  margin: 0 0 0.4em;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: inherit; }
.muted { color: var(--mist); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.button {
  border: none; border-radius: 999px; padding: 12px 22px; font-weight: 700;
  font-size: 0.92rem; cursor: pointer; font-family: inherit;
}
.button.primary { background: var(--brand); color: var(--white); }
.button.primary:hover { background: var(--brand-deep); }
.button.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.button.ghost:hover { background: var(--ivory); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Reserve space for the fixed chrome so page content never sits under it. */
body { padding-top: var(--topbar-h); padding-top: calc(var(--topbar-h) + var(--safe-top)); }
@media (max-width: 859px) {
  body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
}

/* ══════════════════════════════════════════════════════════════
   Topbar — the ONE top chrome, every context, responsive by width
   only (no standalone/browser branching).
   ══════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--topbar-h); height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; gap: 16px;
  padding-left: 20px; padding-right: 20px;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.topbar-logo { height: 26px; }
.topbar-title { font-family: 'Fraunces', serif; font-weight: 600; color: var(--brand-deep); font-size: 1.05rem; }

.topbar-nav { display: none; align-items: center; gap: 4px; }
.topbar-link {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.9rem;
  padding: 8px 14px; border-radius: 999px;
}
.topbar-link:hover { background: var(--ivory); }
.topbar-link.active { background: var(--brand); color: var(--white); }
.topbar-link.active:hover { background: var(--brand); }
.topbar-link.secondary { color: var(--brand); }

.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-action {
  display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--brand);
  font-size: 0.98rem; width: 36px; height: 36px; border-radius: 50%; background: var(--ivory);
  justify-content: center; flex-shrink: 0;
}
.topbar-action-label { display: none; font-size: 0.88rem; font-weight: 700; }

@media (min-width: 860px) {
  .topbar-nav { display: flex; }
  .topbar-action { width: auto; height: auto; padding: 9px 16px; border-radius: 999px; background: var(--brand); color: var(--white); }
  .topbar-action-label { display: inline; }
}

/* ══════════════════════════════════════════════════════════════
   Bottom tab bar — mobile only (any context: browser or standalone),
   hidden entirely on desktop widths.
   ══════════════════════════════════════════════════════════════ */
.tab-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--white); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + var(--safe-bottom));
  height: var(--tabbar-h); height: calc(var(--tabbar-h) + var(--safe-bottom));
}
@media (max-width: 859px) {
  .tab-bar { display: flex; }
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--mist); font-size: 0.66rem; font-weight: 600; padding: 6px 2px;
}
.tab-item i { font-size: 1.08rem; }
.tab-item.active { color: var(--brand); }

/* JS toggles this on <body> while a full-screen overlay (like a detail
   view) is open, so the tab bar doesn't compete with overlay content. */
body.overlay-open .tab-bar { display: none; }