:root {
  --blue: #1a3a5c;
  --midblue: #2e75b6;
  --lightblue: #e8f0f8;
  --accent: #c8a84b;
  --text: #2c2c2c;
  --light: #f8f9fa;
  --border: #dde3ea;
  --radius: 8px;
  --max-width: 1100px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  line-height: 1.7;
  background: #fff;
}

/* NAV */
header { background: var(--blue); padding: 0 2rem; }
nav {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 60px;
}
.logo { color: #fff; font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.tagline { color: #8ab4d4; font-size: 0.85rem; flex: 1; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { color: #c8dcea; text-decoration: none; font-size: 0.9rem; }
.nav-links a:hover { color: #fff; }

/* MAIN */
main { max-width: var(--max-width); margin: 0 auto; padding: 2rem; }

/* HERO */
.hero {
  background: var(--lightblue);
  border-left: 4px solid var(--midblue);
  padding: 2.5rem;
  border-radius: var(--radius);
  margin-bottom: 3rem;
}
.hero h1 { font-size: 2rem; color: var(--blue); margin-bottom: 1rem; }
.hero p { color: #444; margin-bottom: 0.75rem; max-width: 680px; }

/* BUTTONS */
.btn-primary {
  display: inline-block;
  margin-top: 1rem;
  background: var(--midblue);
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.btn-primary:hover { background: var(--blue); }

/* SECTIONS */
.grid-section { margin-bottom: 3rem; }
.grid-section h2 { font-size: 1.4rem; color: var(--blue); margin-bottom: 0.5rem; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; }
.grid-section > p { color: #666; margin-bottom: 1.5rem; }

/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: var(--midblue); box-shadow: 0 2px 12px rgba(46,117,182,0.12); }
.card h3 { font-size: 1rem; color: var(--blue); margin-bottom: 0.5rem; }
.card p { font-size: 0.88rem; color: #555; }

/* CONTENT PAGES */
.content-page { max-width: 760px; }
.breadcrumb { font-size: 0.85rem; color: #888; margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--midblue); text-decoration: none; }
.content-page h1 { font-size: 2rem; color: var(--blue); margin-bottom: 0.75rem; }
.content-page .meta { margin-bottom: 1.5rem; }
.content-page .summary { font-size: 1.1rem; color: #444; margin-bottom: 2rem; line-height: 1.8; }
.content-page section { margin-bottom: 2rem; }
.content-page h2 { font-size: 1.2rem; color: var(--blue); margin-bottom: 0.75rem; }
.content-page p { margin-bottom: 1rem; }
.content-page ul { padding-left: 1.5rem; }
.content-page li { margin-bottom: 0.4rem; }

/* INSIGHT BOX */
.insight {
  background: var(--lightblue);
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* TAGS */
.tag {
  display: inline-block;
  background: var(--lightblue);
  color: var(--midblue);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  margin-right: 0.4rem;
}
.tag-link {
  display: inline-block;
  background: var(--lightblue);
  color: var(--midblue);
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  text-decoration: none;
  margin: 0.2rem;
}
.tag-link:hover { background: var(--midblue); color: #fff; }
.tag-muted {
  color: #667;
  opacity: 0.72;
  cursor: default;
}
.tag-muted:hover {
  background: var(--lightblue);
  color: #667;
}

/* CODE */
code { background: #f0f4f8; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.92em; }
.formula { display: block; font-size: 1.1rem; padding: 1rem; background: #f0f4f8; border-radius: var(--radius); margin: 0.5rem 0; }
.symbol { color: var(--midblue); font-size: 1.4rem; margin-left: 0.5rem; }

/* SHARED PRIMITIVE TABLES */
.shared-primitive { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.shared-primitive h3 { margin-bottom: 0.75rem; }
.shared-primitive table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.shared-primitive td { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.shared-primitive td:first-child { font-weight: 600; color: var(--blue); width: 140px; }
.insight-inline { font-size: 0.9rem; color: #555; font-style: italic; }

/* FOOTER */
footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 2rem;
  text-align: center;
  color: #888;
  font-size: 0.85rem;
}
footer a { color: var(--midblue); }

/* PRINCIPLE PAGE */
.principle-page .principle-header {
  border-left: 4px solid var(--accent);
  padding-left: 2rem;
  margin-bottom: 3rem;
}
.principle-page .subtitle {
  color: #666;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.principle-quote {
  background: var(--blue);
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  font-size: 1.1rem;
  line-height: 1.8;
  white-space: pre-line;
}
.principle-quote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #8ab4d4;
  font-style: normal;
}
.principle-page section {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}
.principle-page section p {
  margin-bottom: 1rem;
}

/* ============================================================
   Font stack applied to site elements
   ============================================================ */

/* Override any system fonts — use Noto everywhere */
* {
  font-family: var(--font-ui);
}

/* Math expressions in content */
.formula, .equation, .math-block {
  font-family: var(--font-math);
  font-size: 1.05em;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* Inline math within prose */
.math-inline {
  font-family: var(--font-math);
  font-size: 0.95em;
}

/* RTF-output preview on site */
.study-note-preview {
  font-family: var(--font-ui);
  line-height: 1.7;
}

.study-note-preview .note-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.2em;
}

.study-note-preview .note-math {
  font-family: var(--font-math);
}

.study-note-preview .note-quote {
  font-family: var(--font-serif);
  font-style: italic;
  border-left: 3px solid var(--accent, #c8a84b);
  padding-left: 1rem;
}

/* ============================================================
   Under-the-hood dashboard
   ============================================================ */

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--border, #ddd);
  flex-wrap: wrap;
}
.site-logo {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--blue, #1a3a5c);
  text-decoration: none;
}
.site-tagline {
  font-size: 0.85rem;
  color: #666;
  flex: 1;
}
.nav-links { display: flex; gap: 1rem; }
.nav-links a { font-size: 0.9rem; color: var(--blue, #1a3a5c); text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }

/* Reveal button */
.under-hood-btn {
  font-size: 0.8rem;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid #c8a84b;
  border-radius: 20px;
  color: #c8a84b;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  transition: background 0.2s, color 0.2s;
}
.under-hood-btn:hover { background: #c8a84b; color: #fff; }

/* Dashboard panel */
.under-hood-panel {
  background: #0d1117;
  color: #c9d1d9;
  padding: 1.25rem 2rem;
  border-bottom: 2px solid #c8a84b;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
}
.under-hood-panel.hidden { display: none; }
.under-hood-panel.visible { display: block; }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.dash-block { margin-bottom: 1rem; }
.dash-block-full { grid-column: 1 / -1; }
.dash-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c8a84b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

/* Gauge grid */
.gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.gauge-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
.gauge-label { display: block; font-size: 0.65rem; color: #8b949e; }
.gauge-value { display: block; font-size: 1rem; font-weight: 600; color: #e6edf3; }

/* Agent strip */
.agent-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.agent-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  min-width: 90px;
}
.agent-card.status-running { border-color: #3fb950; }
.agent-card.status-idle    { border-color: #30363d; }
.agent-card.status-ready   { border-color: #58a6ff; }
.agent-card.status-waiting { border-color: #d29922; }
.agent-id     { font-size: 1rem; font-weight: 700; color: #e6edf3; }
.agent-role   { font-size: 0.65rem; color: #8b949e; }
.agent-model  { font-size: 0.65rem; color: #58a6ff; }
.agent-status { font-size: 0.65rem; color: #3fb950; }

/* Pipeline ribbon */
.pipeline-ribbon {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.pipe-step {
  padding: 3px 10px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #8b949e;
}
.pipe-step.active {
  background: #1f3a1f;
  border-color: #3fb950;
  color: #3fb950;
  font-weight: 600;
}
.pipe-arrow { color: #30363d; font-size: 0.75rem; }

/* Recent events */
.recent-events {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recent-events li {
  padding: 2px 0;
  color: #8b949e;
  border-bottom: 1px solid #21262d;
  font-size: 0.75rem;
}
.recent-events li:last-child { border-bottom: none; }
.dash-ts { font-size: 0.65rem; color: #484f58; display: block; margin-top: 0.5rem; }

@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .gauge-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Dashboard layout fix ──────────────────────────────────────── */

/* Header must not expand to fill viewport */
.site-header {
  position: relative;
  z-index: 100;
}

/* Panel must not push content off screen — scroll within panel */
.under-hood-panel {
  max-height: 420px;
  overflow-y: auto;
}

/* Main content must always be visible below header */
.site-main {
  position: relative;
  z-index: 1;
  padding: 2rem;
}

/* Nav layout fix — keep items on one line */
.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.5rem;
  background: var(--light, #f8f9fa);
  border-bottom: 1px solid var(--border, #ddd);
  flex-wrap: nowrap;
}

.site-tagline {
  flex: 1;
  font-size: 0.8rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Agent strip fix — horizontal scroll on small screens */
.agent-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

/* Gauge grid fix — 4 columns max */
.gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

@media (max-width: 768px) {
  .gauge-grid { grid-template-columns: repeat(2, 1fr); }
  .site-nav { flex-wrap: wrap; }
}

/* Content pages */
.content-page { max-width: 760px; }
.breadcrumb { font-size: 0.8rem; color: #888; margin-bottom: 1rem; }
.breadcrumb a { color: #1a3a5c; text-decoration: none; }
.tagline { font-size: 1.1rem; color: #444; font-style: italic; margin-bottom: 1rem; }
.meta-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.tag { font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.tag-floor  { background: #dbeafe; color: #1e40af; }
.tag-cat    { background: #dcfce7; color: #166534; }
.tag-domain { background: #fef3c7; color: #92400e; }
.content-page section { margin: 1.5rem 0; }
.content-page h2 { font-size: 1.05rem; color: #1a3a5c; border-bottom: 1px solid #eee; padding-bottom: 0.3rem; margin-bottom: 0.75rem; }
.content-page ul { padding-left: 1.5rem; }
.content-page li { margin-bottom: 0.4rem; line-height: 1.6; }
.formula-block { background: #f8f9fa; border-left: 3px solid #1a3a5c; padding: 0.75rem 1rem; margin: 0.75rem 0; border-radius: 0 6px 6px 0; }
.formula { font-family: var(--font-math); font-size: 1.05rem; }
.formula-label { font-size: 0.8rem; color: #666; display: block; margin-bottom: 0.25rem; }
.symbol { font-family: var(--font-math); font-size: 1.1rem; color: #666; }
.insight { background: #fffbeb; border-left: 3px solid #c8a84b; padding: 1rem; border-radius: 0 6px 6px 0; }
.insight h2 { color: #92400e; border-bottom: none; }
.related-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-link { padding: 4px 12px; background: #f0f4f8; border: 1px solid #dde; border-radius: 20px; font-size: 0.82rem; color: #1a3a5c; text-decoration: none; }
.tag-link:hover { background: #dbeafe; }