/*
  The site chrome — ONE top bar and ONE footer, pixel-identical everywhere.

  Loaded by the React apps (index.html) AND by every static page (guides,
  codex, spec guides, boss pages…), so there is exactly one source of truth
  for how the menus look. The markup contract lives in two places that must
  stay in lock-step:
    - src/components/AppSwitcher.tsx + SiteFooter.tsx   (the apps)
    - scripts/lib/chrome.mjs                            (the static pages)
*/

/* ── Top bar ─────────────────────────────────────────────────────────── */
.app-switcher {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 40px;
  padding: 0 16px;
  background: #0b0b10;
  border-bottom: 1px solid #24202a;
  position: sticky;
  top: 0;
  z-index: 60;
  font-size: 13px;
  user-select: none;
  font-family: 'Inter', system-ui, sans-serif;
}
.app-switcher-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.app-switcher-mark {
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #f4f2ee;
}
.app-switcher-mark-accent { color: #e8b93d; }
.app-switcher-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
}
.app-switcher-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  color: #a7a2ad;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  cursor: pointer;
}
.app-switcher-tab:hover { color: #f4f2ee; background: rgba(255, 255, 255, 0.03); }
.app-switcher-tab.is-active {
  color: #e8b93d;
  border-bottom-color: #e8b93d;
  cursor: default;
}
.app-switcher-ico { font-size: 13px; line-height: 1; }

@media (max-width: 520px) {
  .app-switcher { gap: 10px; padding: 0 10px; }
  .app-switcher-tab { padding: 0 8px; }
  .app-switcher-brand { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid #2a3147;
  background: rgba(0, 0, 0, 0.25);
  padding: 30px 24px 20px;
  font-family: 'Inter', system-ui, sans-serif;
}
.sf-cols {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) repeat(4, minmax(120px, 1fr));
  gap: 26px;
}
.sf-col { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.sf-brand {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #e8e2d4;
}
.sf-brand-accent { color: #f0c845; }
.sf-blurb {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #8a8f98;
  max-width: 34ch;
}
.sf-head {
  margin: 0 0 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c9b071;
}
.sf-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  color: #9aa0ab;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.sf-link:hover { color: #f0c845; text-decoration: underline; }
.sf-premium {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f5c542;
  text-decoration: none;
}
.sf-premium-btn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.sf-premium-btn:hover, a.sf-premium:hover { text-decoration: underline; }
.sf-bottom {
  max-width: 1100px;
  margin: 22px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  line-height: 1.5;
  color: #70747d;
}
@media (max-width: 760px) {
  .sf-cols { grid-template-columns: 1fr 1fr; }
  .sf-col-brand { grid-column: 1 / -1; }
}