/* zen-chrome.css — combined cosmos-bar + cosmos-footer + bb-palette (Phase 16 P6).
   These 3 always load together on every non-guided page; serving them as one file
   saves 2 render-blocking HTTP requests per page-load. Sources remain in repo for
   debugging but are no longer linked from baseof.html. Edit the sources individually,
   then re-run scripts/perf-audit.mjs which is supposed to regenerate this combined file.
   For now the combination is manual — bump cache_version after edits. */


/* ===== cosmos-bar.css ===== */
/* cosmos-bar.css — vendored placeholder. Do not edit here.
   Source: cosmos-atlas/src/cosmos-bar/styles.css (PLACEHOLDER block).
   Regenerated by scripts/emit-cosmos-bar.mjs. */
:root { --cosmos-bar-h: 36px; }
@media (max-width: 640px) { :root { --cosmos-bar-h: 32px; } }

cosmos-bar,
.cosmos-bar-placeholder {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--cosmos-bar-h);
  width: 100%;
  background: #02030E;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: #F2EDE3;
  /* layout containment is fine, but paint containment would trap fixed-positioned
     descendants (mobile sheet) inside the 36px bar. Don't use `contain: paint`. */
  contain: layout;
  /* Cosmos chrome stays cosmos chrome — never inherits page theme. */
  color-scheme: dark;
}
cosmos-bar:not(:defined),
.cosmos-bar-placeholder {
  /* Pre-JS state: a black strip with ✦ on the left telling visitors what this is. */
  background:
    linear-gradient(to right, rgba(255, 179, 71, 0.06) 0%, transparent 8%, transparent 100%)
    , #02030E;
  position: sticky;
  top: 0;
}
cosmos-bar:not(:defined)::after,
.cosmos-bar-placeholder::after {
  content: "✦ cosmos";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #FFD89A;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  cosmos-bar, .cosmos-bar-placeholder { transition: none !important; }
}

/* ===== cosmos-footer.css ===== */
/* Cosmos Footer — shared CSS, vendored to every sibling planet
   ════════════════════════════════════════════════════════════════════════════
   BEM scope: .cosmos-footer{,__inner,__feedback,__kofi,__links,__disclaimer,
              __legal,__copy}. No collisions with planet-specific footer classes.

   Self-contained — uses only standard CSS, no design tokens (so it renders
   consistently regardless of host planet's theme system). Colours mirror
   Earth's footer using neutral mid-grey + accent indigo.

   Touched: 9 May 2026 EVE — initial unification.
*/

.cosmos-footer {
  width: 100%;
  margin-top: 4rem;
  padding: 2rem 1rem 2.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #6b7280;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .cosmos-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
  }
}

[data-theme="dark"] .cosmos-footer,
.dark .cosmos-footer {
  background: rgba(255, 255, 255, 0.02);
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
}

.cosmos-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.cosmos-footer a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.cosmos-footer a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Phase 18 round 3: links inside prose paragraphs need underline to be
   distinguishable by colour-blind users (Lighthouse 'link-in-text-block'). */
.cosmos-footer__disclaimer a,
.cosmos-footer__legal a,
.cosmos-footer__copy a,
.cosmos-footer__feedback a {
  text-decoration: underline;
}

[data-theme="dark"] .cosmos-footer a,
.dark .cosmos-footer a { color: var(--accent); }
[data-theme="dark"] .cosmos-footer a:hover,
.dark .cosmos-footer a:hover { color: var(--accent-hover); }

.cosmos-footer__feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 1.25rem;
}
.cosmos-footer__feedback svg { vertical-align: -2px; }

.cosmos-footer__kofi {
  margin: 0 0 1.5rem;
}

.cosmos-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin: 0 0 1.5rem;
}
.cosmos-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cosmos-footer__disclaimer {
  max-width: 760px;
  margin: 0 auto 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.85;
}

.cosmos-footer__legal {
  margin: 0 auto 1rem;
  font-size: 0.78rem;
  opacity: 0.85;
}

.cosmos-footer__copy {
  margin: 0;
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .cosmos-footer { padding: 1.5rem 0.75rem 2rem; }
  .cosmos-footer__links { gap: 0.75rem 1rem; font-size: 0.85rem; }
  .cosmos-footer__disclaimer,
  .cosmos-footer__legal { font-size: 0.72rem; }
}

/* ===== bb-palette.css ===== */
/* ════════════════════════════════════════════════════════════════════════
   🪐 Brain Bar Command Palette — Earth's portal to the planet
   ────────────────────────────────────────────────────────────────────────
   Two parts:
     1. The .bb-launch-btn — subtle $_ icon in the navbar
     2. The .bb-palette — modal overlay activated by click or "/"
   Atmosphere: phosphor green on deep ink (Brain Bar's signature).
   The icon lives quietly inside Earth's nav. The modal carries Brain Bar's
   atmosphere — the only place that visual identity bleeds into Earth.
   ════════════════════════════════════════════════════════════════════════ */

/* The trigger button (next to the logo on the left) */

.bb-launch-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 6px 10px;
  margin-left: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: #34D399;
  letter-spacing: -0.02em;
  transition: background 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out;
}
.bb-launch-btn:hover {
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.30);
  color: #6EE7B7;
}
.bb-launch-btn:focus-visible {
  outline: 2px solid #34D399;
  outline-offset: 2px;
}

.bb-launch-prompt { color: inherit; }
.bb-launch-cursor {
  display: inline-block;
  color: inherit;
  animation: bb-launch-blink 1.05s step-end infinite;
  margin-left: 1px;
}
@keyframes bb-launch-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-launch-cursor { animation: none; }
}

/* ── The palette overlay ─────────────────────────────────────────────── */

.bb-palette {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, Menlo, Consolas, monospace;
}
.bb-palette[hidden] { display: none; }

.bb-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 20, 0.85);
  /* Zen guardrail: backdrop-filter banned (10 May 2026 audit). Solid darker bg replaces blur. */
  animation: bb-fade-in 120ms ease-out;
}

@keyframes bb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bb-palette-modal {
  position: relative;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: #0F1218;
  border: 1px solid #30363D;
  border-radius: 8px;
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(52, 211, 153, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: bb-pop-in 140ms ease-out;
  color: #E6EDF3;
}

@keyframes bb-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search row */
.bb-palette-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #21262D;
}
.bb-palette-prompt {
  color: #34D399;
  font-weight: 700;
  font-size: 18px;
  user-select: none;
}
.bb-palette-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #E6EDF3;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  caret-color: #34D399;
}
.bb-palette-input::placeholder { color: #545D68; font-weight: 400; }
.bb-palette-input::selection { background: #34D399; color: #0F1218; }

.bb-palette-kbd-esc,
.bb-palette kbd {
  font-family: inherit;
  font-size: 11px;
  color: #7D8590;
  background: #181C24;
  border: 1px solid #30363D;
  border-radius: 4px;
  padding: 2px 6px;
  user-select: none;
}

/* Results list */
.bb-palette-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.bb-palette-results:empty { display: none; }
.bb-palette-results::-webkit-scrollbar { width: 6px; }
.bb-palette-results::-webkit-scrollbar-thumb {
  background: #30363D;
  border-radius: 3px;
}

.bb-palette-result {
  border-radius: 6px;
  margin-bottom: 1px;
  cursor: pointer;
}
.bb-palette-result.is-selected {
  background: rgba(52, 211, 153, 0.12);
  outline: 1px solid rgba(52, 211, 153, 0.30);
}
.bb-palette-result-link {
  display: grid;
  grid-template-columns: 16px 200px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  text-decoration: none;
  color: #B1BAC4;
  font-size: 13px;
}
.bb-palette-result-link:hover { color: #E6EDF3; }

.bb-palette-tier {
  color: #34D399;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
}
.bb-palette-slug {
  color: #34D399;
  font-weight: 600;
}
.bb-palette-slug em {
  color: #545D68;
  font-style: normal;
  font-weight: 400;
  margin-left: 4px;
}
.bb-palette-name { color: #E6EDF3; font-weight: 400; }
.bb-palette-meta {
  color: #545D68;
  font-size: 11px;
  white-space: nowrap;
}
.bb-palette-hint {
  grid-column: 2 / -1;
  font-size: 11px;
  color: #7D8590;
  margin-top: 2px;
}

/* Empty / hello / footer */
.bb-palette-empty,
.bb-palette-hello,
.bb-palette-footer {
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  color: #7D8590;
  border-top: 1px solid #21262D;
}
.bb-palette-empty code {
  color: #34D399;
  background: rgba(52, 211, 153, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
  margin: 0 4px;
}
.bb-palette-empty a {
  color: #34D399;
  text-decoration: none;
  margin-left: 8px;
}
.bb-palette-empty a:hover { text-decoration: underline; }
.bb-palette-footer { padding: 8px 16px; font-size: 11px; }
.bb-palette-footer a { color: #B1BAC4; text-decoration: none; }
.bb-palette-footer a:hover { color: #34D399; }

.bb-palette .bb-dim { color: #545D68; }

/* Mobile */
@media (max-width: 720px) {
  .bb-palette { padding-top: 6vh; }
  .bb-palette-modal { width: 96vw; max-height: 85vh; }
  .bb-palette-result-link {
    grid-template-columns: 16px 1fr;
    grid-template-rows: auto auto;
  }
  .bb-palette-name, .bb-palette-meta { grid-column: 2 / -1; }
}

/* Theme toggle margin tweak — give the $_ button breathing room */
.nav-right .bb-launch-btn + .theme-toggle { margin-left: 0; }