/* Flock docs — coordination palette (teal/amber on charcoal) */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ── Brand tokens ─────────────────────────────────────────────────── */

:root {
  /* Coordination / stigmergy */
  --flock-coordination: #0d9488;
  --flock-coordination-bright: #14b8a6;
  /* Evolution / pressure */
  --flock-evolve: #d97706;
  --flock-evolve-bright: #f59e0b;
  /* DOC_STYLE_GUIDE roles */
  --flock-runtime: #0969da;
  --flock-substrate: #8250df;
  --flock-gate: #1a7f37;

  --flock-bg: #fafbfc;
  --flock-surface: #f0f3f6;
  --flock-surface-raised: #ffffff;
  --flock-code-bg: #eef2f6;
  --flock-text: #1a2332;
  --flock-muted: #5c6b7a;
  --flock-border: #d4dce6;
  --flock-link: #0d9488;
  --flock-link-hover: #0f766e;
  --flock-hero-bg: linear-gradient(160deg, #f0fdfa 0%, #fafbfc 55%, #fff7ed 100%);

  --flock-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Inter", "Helvetica Neue", Arial, sans-serif;
  --flock-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;
  --flock-line-height: 1.7;
  --flock-body-size: 1.0625rem; /* 17px */

  --flock-admonition-note: var(--flock-coordination);
  --flock-admonition-warning: #b45309;
  --flock-admonition-honest: var(--flock-evolve);
}

@media (prefers-color-scheme: dark) {
  :root {
    --flock-coordination: #2dd4bf;
    --flock-coordination-bright: #5eead4;
    --flock-evolve: #fbbf24;
    --flock-evolve-bright: #fcd34d;
    --flock-runtime: #58a6ff;
    --flock-substrate: #a371f7;
    --flock-gate: #3fb950;

    --flock-bg: #0f1218;
    --flock-surface: #161b24;
    --flock-surface-raised: #1c2330;
    --flock-code-bg: #121820;
    --flock-text: #e8edf4;
    --flock-muted: #94a3b8;
    --flock-border: #2a3344;
    --flock-link: #2dd4bf;
    --flock-link-hover: #5eead4;
    --flock-hero-bg: linear-gradient(
      155deg,
      #0f1a1a 0%,
      #0f1218 50%,
      #1a1510 100%
    );
  }
}

/* mdbook variable bridge */
:root {
  --bg: var(--flock-bg);
  --fg: var(--flock-text);
  --sidebar-bg: var(--flock-surface);
  --sidebar-fg: var(--flock-muted);
  --sidebar-active: var(--flock-coordination);
  --links: var(--flock-link);
  --inline-code-color: var(--flock-evolve-bright);
  --searchbar-border-color: var(--flock-border);
  --table-border-color: var(--flock-border);
  --theme-popup-border: var(--flock-border);
  --icons: var(--flock-muted);
  --icons-hover: var(--flock-text);
  --mono-font: var(--flock-font-mono);

  /* Layout — fluid content, readable sidebar */
  --sidebar-target-width: 19rem;
  --content-max-width: min(72rem, calc(100vw - var(--sidebar-width) - 4.5rem));
  --copy-button-filter: none;
  --copy-button-filter-hover: none;
}

/* ── Base typography ──────────────────────────────────────────────── */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--flock-font-sans);
  font-size: var(--flock-body-size);
  line-height: var(--flock-line-height);
  color: var(--flock-text);
  background: var(--flock-bg);
  letter-spacing: -0.011em;
}

/* Do NOT constrain page-wrapper — only main content column */
.content {
  padding-left: 0;
  padding-right: 0;
}

.content main {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: 0 2rem 4rem;
}

.content h1 {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1.1rem;
}

.content h2 {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.022em;
  border-bottom: 1px solid var(--flock-border);
  padding-bottom: 0.4em;
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}

.content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 2rem;
}

.content h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

.content p,
.content li {
  color: var(--flock-text);
}

.content a {
  color: var(--flock-link);
  text-decoration: none;
  font-weight: 500;
}

.content a:hover {
  color: var(--flock-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content .header {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.content h1:hover .header,
.content h2:hover .header,
.content h3:hover .header,
.content h4:hover .header {
  opacity: 0.5;
}

/* ── Sidebar navigation ─────────────────────────────────────────── */

.sidebar {
  border-right: 1px solid var(--flock-border);
  background: var(--flock-surface);
}

.sidebar-scrollbox {
  padding: 1rem 0.65rem 2.5rem;
}

.sidebar .sidebar-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--flock-text);
  padding: 0.35rem 0.85rem 1rem;
}

.chapter li.chapter-item {
  margin: 0.1rem 0;
}

.chapter li.chapter-item a {
  display: block;
  padding: 0.45rem 0.85rem;
  font-size: 0.9375rem; /* 15px */
  font-weight: 450;
  line-height: 1.5;
  color: var(--flock-muted);
  border-radius: 8px;
  border-left: none;
  transition: color 0.12s ease, background 0.12s ease;
}

.chapter li.chapter-item a:hover {
  color: var(--flock-text);
  background: color-mix(in srgb, var(--flock-text) 6%, transparent);
}

.chapter li.chapter-item a.active {
  color: var(--flock-coordination);
  background: color-mix(in srgb, var(--flock-coordination) 14%, transparent);
  font-weight: 600;
}

.chapter li.chapter-item .section {
  margin-left: 0.65rem;
}

.chapter li.chapter-item .section a {
  font-size: 0.9rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.chapter li.part-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flock-muted);
  padding: 1.35rem 0.85rem 0.4rem;
  opacity: 0.9;
}

/* ── Code & copy button ─────────────────────────────────────────── */

.content code {
  font-family: var(--flock-font-mono);
  font-size: 0.88em;
  background: var(--flock-code-bg);
  border: 1px solid var(--flock-border);
  border-radius: 6px;
  padding: 0.18em 0.45em;
  color: var(--flock-evolve-bright);
}

.content pre {
  position: relative;
  background: var(--flock-code-bg);
  border: 1px solid var(--flock-border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  line-height: 1.6;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--flock-text) 4%, transparent);
}

.content pre > code {
  display: block;
  background: transparent;
  border: none;
  padding: 1.15rem 1.25rem;
  font-size: 0.9rem;
  color: var(--flock-text);
  overflow-x: auto;
}

pre > .buttons {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
}

pre > .buttons button {
  margin: 0;
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--flock-border);
  border-radius: 8px;
  background: var(--flock-surface-raised);
  color: var(--flock-muted);
  opacity: 0.92;
  transition: border-color 0.15s ease, background 0.15s ease,
    color 0.15s ease, transform 0.1s ease;
}

pre > .buttons button:hover {
  opacity: 1;
  border-color: var(--flock-coordination);
  background: color-mix(in srgb, var(--flock-coordination) 10%, var(--flock-surface-raised));
  transform: translateY(-1px);
}

pre > .buttons button.clip-button {
  padding: 0;
}

pre > .buttons button.clip-button::before {
  content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%2394a3b8"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
  filter: none;
  line-height: 0;
}

pre > .buttons button.clip-button:hover::before {
  content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%232dd4bf"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
  filter: none;
}

@media (prefers-color-scheme: light) {
  pre > .buttons button.clip-button::before {
    content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%235c6b7a"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
  }

  pre > .buttons button.clip-button:hover::before {
    content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%230d9488"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
  }
}

/* ── Tables ─────────────────────────────────────────────────────── */

.content table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

.content table tr:nth-child(even) {
  background: var(--flock-surface);
}

.content table th,
.content table td {
  border: 1px solid var(--flock-border);
  padding: 0.65em 1em;
}

.content table th {
  background: var(--flock-surface);
  font-weight: 600;
  font-size: 0.88rem;
}

/* ── Hero (introduction) ─────────────────────────────────────────── */

.flock-hero {
  background: var(--flock-hero-bg);
  border: 1px solid var(--flock-border);
  border-radius: 16px;
  padding: 3.25rem 2.5rem 2.75rem;
  margin-bottom: 3rem;
  text-align: center;
}

.flock-hero h1 {
  font-size: 2.75rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  margin: 0.25rem 0 0;
  border: none;
  padding: 0;
}

.flock-hero-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.25rem;
  color: var(--flock-coordination);
}

.flock-hero-tagline {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--flock-muted);
  margin: 0.85rem auto 1.75rem;
  max-width: 40rem;
  line-height: 1.6;
}

.flock-install {
  background: var(--flock-code-bg);
  border: 1px solid var(--flock-border);
  border-radius: 10px;
  padding: 1rem 1.35rem;
  margin: 0.75rem auto 0;
  max-width: 42rem;
  font-family: var(--flock-font-mono);
  font-size: 0.9rem;
  overflow-x: auto;
  text-align: left;
}

.flock-install-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flock-muted);
  margin-bottom: 0.55rem;
}

.flock-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.35rem 0 1.85rem;
}

.flock-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 550;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--flock-border);
  background: var(--flock-surface-raised);
  color: var(--flock-muted);
}

.flock-nav-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin-top: 1.85rem;
  font-size: 0.95rem;
}

.flock-nav-strip a {
  font-weight: 500;
  color: var(--flock-muted);
}

.flock-nav-strip a:hover {
  color: var(--flock-link);
}

/* ── Admonitions ─────────────────────────────────────────────────── */

.content blockquote {
  border-left: 4px solid var(--flock-admonition-note);
  background: var(--flock-surface);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  color: var(--flock-text);
}

/* ── Mermaid ─────────────────────────────────────────────────────── */

.mermaid {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
  padding: 1.75rem 1.25rem;
  background: var(--flock-surface);
  border: 1px solid var(--flock-border);
  border-radius: 12px;
  overflow-x: auto;
  max-width: 100%;
}

.mermaid svg {
  display: block;
  margin: 0 auto;
  max-width: none;
  min-width: min(100%, 560px);
  height: auto;
}

/* ── Prev/next navigation ────────────────────────────────────────── */

.nav-wide-wrapper {
  display: none !important;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--flock-border);
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

.mobile-nav-chapters {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 48%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--flock-border);
  border-radius: 10px;
  background: var(--flock-surface);
  color: var(--flock-muted);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.mobile-nav-chapters:hover {
  border-color: color-mix(in srgb, var(--flock-coordination) 45%, var(--flock-border));
  color: var(--flock-text);
  background: var(--flock-surface-raised);
  text-decoration: none;
}

.mobile-nav-chapters .fa-svg {
  display: none;
}

.flock-page-nav {
  display: flex;
  width: 100%;
}

.flock-page-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.flock-page-nav-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--flock-muted);
}

.flock-page-nav-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--flock-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flock-page-nav-prev {
  justify-content: flex-start;
  text-align: left;
}

.flock-page-nav-next {
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
}

.flock-page-nav-next .flock-page-nav-text {
  align-items: flex-end;
}

/* ── Top bar & search ────────────────────────────────────────────── */

.menu-title {
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.searchbar-outer {
  max-width: var(--content-max-width);
}

.searchbox input {
  border-radius: 8px;
  font-size: 0.9375rem;
  padding: 0.45rem 0.65rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  :root {
    --flock-body-size: 1.125rem; /* 18px on wide screens */
  }

  .content h1 {
    font-size: 2.35rem;
  }
}

@media (max-width: 768px) {
  .content main {
    padding: 0 1.15rem 3rem;
  }

  .flock-hero {
    padding: 2rem 1.25rem;
  }

  .flock-hero h1 {
    font-size: 2.1rem;
  }

  .content h1 {
    font-size: 1.75rem;
  }

  .chapter li.chapter-item a {
    font-size: 1rem;
    padding: 0.5rem 0.85rem;
  }

  .mermaid {
    padding: 1rem 0.5rem;
  }

  .nav-wrapper {
    flex-direction: column;
    padding-inline: 1.15rem;
  }

  .mobile-nav-chapters {
    max-width: 100%;
  }

  pre > .buttons button {
    width: 2.5rem;
    height: 2.5rem;
  }
}