/* base.css — shared reset, CSS variables (3 themes), layout, typography */

@font-face {
  font-family: "Geist Pixel Square";
  src: url("/fonts/GeistPixel-Square.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Geist Mono UltraLight";
  src: url("/fonts/GeistMono-UltraLight.woff2") format("woff2");
  font-display: swap;
  font-weight: 200;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1720;
  --bg-gradient-top: #0c141d;
  --bg-gradient-bottom: #121c28;
  --bg-deep: #0b1219;
  --bg-panel: #16202e;
  --bg-panel-strong: #1c2a3b;
  --bg-panel-hover: #23314a;
  --surface-strong: rgba(22, 32, 46, 0.95);
  --text: #e5edf6;
  --text-dim: #9bb0c8;
  --text-muted: #677a92;
  --accent: #58a6ff;
  --accent-soft: rgba(88, 166, 255, 0.10);
  --accent-border: rgba(88, 166, 255, 0.36);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.13);
  --mermaid-neutral-fill: #151d29;
  --mermaid-neutral-border: #46556c;
  --mermaid-neutral-text: #e5edf6;
  --mermaid-blue-fill: #22364c;
  --mermaid-blue-border: #67aefc;
  --mermaid-blue-text: #edf6ff;
  --mermaid-green-fill: #233d32;
  --mermaid-green-border: #6dc08d;
  --mermaid-green-text: #effdf4;
  --mermaid-amber-fill: #493523;
  --mermaid-amber-border: #ffbf63;
  --mermaid-amber-text: #fff8eb;
  --mermaid-red-fill: #4a2b31;
  --mermaid-red-border: #f18f9e;
  --mermaid-red-text: #fff1f4;
  --mermaid-violet-fill: #393048;
  --mermaid-violet-border: #bc9af6;
  --mermaid-violet-text: #f7f1ff;
  --mermaid-line: #7fc0ff;
  --mermaid-line-muted: rgba(127, 192, 255, 0.42);
  --mermaid-label-fill: #0f1721;
  --mermaid-label-text: #eef5fd;
  --grid-size-primary: 31px 31px;
  --grid-size-secondary: 23px 23px;
  --grid-mask-top: rgba(0, 0, 0, 1);
  --grid-mask-bottom: rgba(0, 0, 0, 0.82);
  --dust-dot: rgba(103,122,146,0.26);
  --dust-accent-dot: rgba(88,166,255,0.18);
  --search-focus-shadow: 0 0 12px rgba(88, 166, 255, 0.14), 0 0 4px rgba(88, 166, 255, 0.1);
  --callout-info-ring: inset 0 0 0 1px rgba(88, 166, 255, 0.12);
  --section-card-focus-shadow: 0 0 0 1px rgba(88, 166, 255, 0.16), 0 0 24px rgba(88, 166, 255, 0.12);
  --section-header-focus-bg: linear-gradient(180deg, rgba(88, 166, 255, 0.14), rgba(88, 166, 255, 0.06));
  --section-header-focus-shadow: inset 0 0 0 1px var(--accent-border), inset 0 0 18px rgba(88, 166, 255, 0.08);
  --section-title-focus-shadow: 0 0 12px rgba(88, 166, 255, 0.16);
  --section-count-focus-bg: rgba(88, 166, 255, 0.08);
  --row-divider: rgba(255,255,255,0.04);
  --osc-text: #7dd3fc;
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #f87171;
  --shell-width: min(1400px, 92vw);
  --radius: 14px;
  --transition: 160ms cubic-bezier(0.2, 0.65, 0.2, 1);
  --font-display: "Geist Pixel Square", ui-sans-serif, sans-serif;
  --font-body: "Geist Mono UltraLight", ui-monospace, monospace;
}

[data-theme="light"] {
  --bg: #f4f7fb;
  --bg-gradient-top: #eef3f8;
  --bg-gradient-bottom: #fbfdff;
  --bg-deep: #e9eef5;
  --bg-panel: #ffffff;
  --bg-panel-strong: #f6f9fd;
  --bg-panel-hover: #eef4fb;
  --surface-strong: rgba(248, 251, 255, 0.94);
  --text: #122033;
  --text-dim: #4c5f78;
  --text-muted: #7d8da3;
  --accent: #006adc;
  --accent-soft: rgba(0, 106, 220, 0.08);
  --accent-border: rgba(0, 106, 220, 0.24);
  --border: rgba(10, 21, 39, 0.08);
  --border-strong: rgba(10, 21, 39, 0.14);
  --mermaid-neutral-fill: #ffffff;
  --mermaid-neutral-border: #cbd6e3;
  --mermaid-neutral-text: #122033;
  --mermaid-blue-fill: #dcebff;
  --mermaid-blue-border: #4f88d7;
  --mermaid-blue-text: #16304f;
  --mermaid-green-fill: #def4e7;
  --mermaid-green-border: #59a173;
  --mermaid-green-text: #183727;
  --mermaid-amber-fill: #f8ead3;
  --mermaid-amber-border: #d09a3b;
  --mermaid-amber-text: #47311a;
  --mermaid-red-fill: #f8dfe3;
  --mermaid-red-border: #d27082;
  --mermaid-red-text: #532330;
  --mermaid-violet-fill: #ebe2fb;
  --mermaid-violet-border: #8f74d1;
  --mermaid-violet-text: #36234f;
  --mermaid-line: #0057b8;
  --mermaid-line-muted: rgba(0, 87, 184, 0.32);
  --mermaid-label-fill: #ffffff;
  --mermaid-label-text: #122033;
  color-scheme: light;
}

[data-theme="ember"] {
  --bg: #3e2e1e;
  --bg-gradient-top: #3a2a1b;
  --bg-gradient-bottom: #423222;
  --bg-deep: rgba(56, 44, 32, 0.93);
  --bg-panel: rgba(84, 64, 48, 0.95);
  --bg-panel-strong: rgba(118, 92, 66, 0.95);
  --bg-panel-hover: rgba(148, 118, 86, 0.95);
  --surface-strong: rgba(84, 64, 48, 0.95);
  --text: #FFFDF9;
  --text-dim: #F8EDDE;
  --text-muted: #E0CAAA;
  --accent: #FFB800;
  --accent-soft: rgba(255, 192, 32, 0.26);
  --accent-border: rgba(224, 170, 80, 0.75);
  --border: rgba(218, 168, 100, 0.46);
  --border-strong: rgba(224, 170, 80, 0.75);
  --mermaid-neutral-fill: #5a4433;
  --mermaid-neutral-border: #d0a26c;
  --mermaid-neutral-text: #fff8ef;
  --mermaid-blue-fill: #3d5470;
  --mermaid-blue-border: #91b8e5;
  --mermaid-blue-text: #fffaf4;
  --mermaid-green-fill: #465947;
  --mermaid-green-border: #8fc59a;
  --mermaid-green-text: #fffaf1;
  --mermaid-amber-fill: #70543b;
  --mermaid-amber-border: #f0bf6a;
  --mermaid-amber-text: #fffaf3;
  --mermaid-red-fill: #70464a;
  --mermaid-red-border: #e8a4ab;
  --mermaid-red-text: #fff7f3;
  --mermaid-violet-fill: #5a4b68;
  --mermaid-violet-border: #bea3dc;
  --mermaid-violet-text: #fff9f7;
  --mermaid-line: #ffd36b;
  --mermaid-line-muted: rgba(255, 211, 107, 0.42);
  --mermaid-label-fill: #594434;
  --mermaid-label-text: #fffaf2;
  --dust-dot: rgba(232, 206, 171, 0.24);
  --dust-accent-dot: rgba(255, 184, 0, 0.22);
  --search-focus-shadow: 0 0 12px rgba(255, 184, 0, 0.26), 0 0 4px rgba(255, 107, 53, 0.22);
  --callout-info-ring: inset 0 0 0 1px rgba(224, 170, 80, 0.34);
  --section-card-focus-shadow: 0 0 0 1px rgba(224, 170, 80, 0.42), 0 0 24px rgba(255, 107, 53, 0.18);
  --section-header-focus-bg: linear-gradient(180deg, rgba(255, 184, 0, 0.20), rgba(255, 107, 53, 0.14));
  --section-header-focus-shadow: inset 0 0 0 1px var(--accent-border), inset 0 0 18px rgba(255, 107, 53, 0.18);
  --section-title-focus-shadow: 0 0 12px rgba(255, 107, 53, 0.24);
  --section-count-focus-bg: rgba(255, 184, 0, 0.16);
  --row-divider: rgba(210, 160, 105, 0.18);
  --osc-text: #FF6B35;
  color-scheme: dark;
}

html, body { min-height: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-gradient-top), var(--bg-gradient-bottom));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Dust grid is now canvas-based — see /shared/dust.js */

body > * { position: relative; z-index: 1; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-strong);
  backdrop-filter: blur(14px);
}

.site-header__inner,
main,
footer .inner {
  width: var(--shell-width);
  margin: 0 auto;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 38px;
  text-decoration: none;
}

.brand__title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
}

main {
  padding: 22px 0 42px;
  display: grid;
  gap: 16px;
  flex: 1 0 auto;
  align-content: start;
}

.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hero {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
  max-width: 72ch;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-left: 4px;
}

.hero p {
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 4px;
}

.hero-meta {
  display: grid;
  gap: 8px;
  justify-items: end;
  align-content: start;
  flex: 0 1 540px;
  min-width: 0;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
}

.meta-chip__label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.meta-chip__value {
  color: var(--text-dim);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.surface-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}

.surface-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.callout-grid {
  display: grid;
  gap: 12px;
}

.callout {
  padding: 16px 18px;
  display: grid;
  gap: 8px;
}

.callout h2 {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.callout p {
  color: var(--text-dim);
  font-size: 11px;
  white-space: pre-wrap;
}

.callout--info {
  box-shadow: var(--callout-info-ring);
}

.callout--warning {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.16);
}

.callout--success {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.16);
}

.empty-state {
  padding: 22px 20px;
  display: grid;
  gap: 8px;
}

.empty-state h2 {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.empty-state p {
  color: var(--text-dim);
  max-width: 70ch;
}

footer {
  border-top: 1px solid var(--border-strong);
  background: var(--surface-strong);
  backdrop-filter: blur(14px);
  padding: 12px 0 14px;
}

footer .inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-muted);
  font-size: 11px;
}

.footer-notes {
  width: var(--shell-width);
  margin: 10px auto 0;
  display: grid;
  gap: 6px;
  color: var(--text-dim);
  font-size: 11px;
}

.footer-notes a {
  color: var(--accent);
}

.footer-notes code {
  font-family: var(--font-body);
}

@media (max-width: 900px) {
  .hero-row {
    flex-direction: column;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .hero-meta {
    width: 100%;
    justify-items: start;
    display: none;
  }

  main,
  .site-header__inner,
  .footer-notes,
  footer .inner {
    width: 96vw;
  }

  footer .inner {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 20px;
  }
}