/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-body: "Source Serif 4", "Georgia", serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-ui: "Inter", system-ui, sans-serif;

  --text-base: 1.0625rem; /* 17px — comfortable serif reading */
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --line-height-body: 1.7;
  --line-height-tight: 1.3;

  /* Layout */
  --content-width: 40rem; /* ~640px — paper-like column */
  --table-width: 48rem; /* slightly wider for tables */
  --wide-table-width: 64rem; /* for the per-task table */
  --section-gap: 3.5rem; /* tighter than before */
  --block-gap: 1.5rem;
  --px: 1.5rem;

  /* Colors — near-monochrome */
  --c-bg: #ffffff;
  --c-bg-alt: #f8f8f7; /* warm off-white for alternating sections */
  --c-text: #1a1a1a;
  --c-text-secondary: #555;
  --c-text-tertiary: #888;
  --c-border: #d4d4d4;
  --c-border-light: #e8e8e8;
  --c-rule: #222; /* strong horizontal rules (booktabs-style) */
  --c-rule-light: #e0e0e0;
  --c-accent: #1a1a1a; /* primary accent — just black */
  --c-highlight: #1a5fb4; /* stronger blue for key data */
  --c-code-bg: #f5f5f4;
  --c-code-border: #e0dfdd;
  --c-link: #1a1a1a;
  --c-link-hover: #555;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

code,
pre,
.mono {
  font-family: var(--font-mono);
}

a {
  color: var(--c-link);
}
a:hover {
  color: var(--c-link-hover);
}

strong {
  font-weight: 600;
}

/* ── Section rhythm ───────────────────────────────────────────── */
.section {
  padding: var(--section-gap) var(--px);
}
.section-alt {
  background: var(--c-bg-alt);
}

.col {
  max-width: var(--content-width);
  margin: 0 auto;
}
.col-wide {
  max-width: var(--table-width);
  margin: 0 auto;
}
.col-extra-wide {
  max-width: var(--wide-table-width);
  margin: 0 auto;
}

/* ── Headings ─────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
h2 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: var(--block-gap);
}
.section-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--c-text-tertiary);
  margin-right: 0.5rem;
}
h3 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-tertiary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-top: 2rem;
}
h4:first-child {
  margin-top: 0;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  padding: 5rem var(--px) 3rem;
  border-bottom: 3px solid var(--c-rule);
}
.hero .col {
  text-align: left;
}
.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--c-text-secondary);
  margin-bottom: 2rem;
}
.hero-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .hero-charts {
    grid-template-columns: 1fr;
  }
}
.hero-chart-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-tertiary);
  margin-bottom: 0.75rem;
}
.hero-chart-rows {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.hero-chart-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-chart-label {
  flex-shrink: 0;
  width: 7rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
}
.hero-chart-bar-track {
  flex: 1;
  height: 1.25rem;
  background: var(--c-border-light);
  position: relative;
}
.hero-chart-bar {
  height: 100%;
  background: var(--c-text-tertiary);
}
.hero-chart-bar.bar-highlight {
  background: var(--c-highlight);
}
.hero-chart-value {
  flex-shrink: 0;
  width: 3.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
  text-align: right;
}
.hero-chart-value.value-highlight {
  color: var(--c-highlight);
  font-weight: 600;
}
.hero-install {
  margin-bottom: 2rem;
}
.hero-agents-md {
  margin-bottom: 2rem;
}
/* ── Copyable code block (reusable) ──────────────────────────── */
.copyable {
  display: inline-flex;
  align-items: stretch;
  background: var(--c-code-bg);
  border: 1px solid var(--c-code-border);
}
.copyable code,
.copyable pre {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--c-text);
  white-space: pre;
}
.copyable .btn-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.625rem;
  border: none;
  border-left: 1px solid var(--c-code-border);
  background: transparent;
  color: var(--c-text-tertiary);
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
  align-self: stretch;
}
.copyable .btn-copy:hover {
  color: var(--c-text);
}
.copyable .btn-copy svg {
  width: 1rem;
  height: 1rem;
}
.hero-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}
.hero-links a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 2px;
}
.hero-links a:hover {
  border-color: var(--c-text);
}

/* ── Abstract ─────────────────────────────────────────────────── */
.abstract {
  border-left: 3px solid var(--c-rule);
  padding-left: 1.5rem;
}

/* ── Prose ─────────────────────────────────────────────────────── */
.prose p + p {
  margin-top: 1.25rem;
}
.prose strong {
  color: var(--c-text);
}
.prose ul,
.prose ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.prose li {
  margin-bottom: 0.5rem;
}
.prose li + li {
  margin-top: 0.25rem;
}

/* ── Table (booktabs-style) ────────────────────────────────────── */
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.results-table thead th {
  font-weight: 600;
  text-align: right;
  padding: 0.5rem 0.75rem;
  border-top: 2px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.results-table thead th:first-child {
  text-align: left;
}
.results-table tbody td {
  padding: 0.5rem 0.75rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--c-border-light);
}
.results-table tbody td:first-child {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--c-text);
}
.results-table tbody tr:last-child td {
  border-bottom: 2px solid var(--c-rule);
}
.results-table .row-highlight td:first-child {
  font-weight: 600;
}
.results-table .row-highlight .cell-key {
  color: var(--c-highlight);
  font-weight: 700;
}
.results-table-grouped .row-category td {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 500;
  color: var(--c-text-secondary);
  text-align: left;
  border-bottom: 1px solid var(--c-border-light);
  padding-top: 1rem;
  padding-bottom: 0.25rem;
}
.results-table .cell-fail {
  color: #b91c1c;
}
/* Condition group headers */
.results-table-grouped .condition-group {
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  border-right: 2px solid var(--c-rule);
  border-bottom: none;
  padding-bottom: 0.125rem;
}
.results-table-grouped thead tr:nth-child(2) th {
  border-top: none;
  padding-top: 0.125rem;
  text-align: center;
}
.results-table-grouped .condition-group-last {
  border-right: none;
}
.results-table-grouped .condition-group-highlight {
  font-weight: 700;
  color: var(--c-highlight);
}
/* Condition group separators: border-right after every 3rd data column, except last group */
.results-table-grouped td:nth-child(3n+1):not(:first-child):not(:last-child) {
  border-right: 2px solid var(--c-rule);
  padding-right: 0.75rem;
}
.results-table-grouped td:nth-child(3n+2):not(:nth-child(2)) {
  padding-left: 0.75rem;
}
/* Metric header row (no Task cell due to rowspan) — nth-child shifted by 1, except last group */
.results-table-grouped thead tr:nth-child(2) th:nth-child(3n):not(:last-child) {
  border-right: 2px solid var(--c-rule);
  padding-right: 0.75rem;
}
.results-table-grouped thead tr:nth-child(2) th:nth-child(3n+1) {
  padding-left: 0.75rem;
}
/* Category rows span all columns — override border */
.results-table-grouped .row-category td[colspan] {
  border-right: none;
}

/* ── Principles list ──────────────────────────────────────────── */
.principles {
  list-style: none;
  counter-reset: principle;
}
.principles li {
  counter-increment: principle;
  display: flex;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--c-border-light);
}
.principles li:last-child {
  border-bottom: none;
}
.principles li::before {
  content: counter(principle) ".";
  flex-shrink: 0;
  width: 2rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--c-text-tertiary);
  padding-top: 0.1em;
}
.principle-name {
  font-weight: 600;
}
.principle-desc {
  color: var(--c-text-secondary);
}

/* ── Principle detail blocks ───────────────────────────────────── */
.principle-detail {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border-light);
}
.principle-detail-header {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.principle-detail-header .principle-num {
  font-family: var(--font-mono);
  color: var(--c-text-tertiary);
  margin-right: 0.5rem;
}

/* ── Case study code blocks ───────────────────────────────────── */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .case-grid {
    grid-template-columns: 1fr;
  }
}
.case-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.case-block {
  border: 1px solid var(--c-code-border);
  overflow: hidden;
}
.case-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--c-code-border);
  background: var(--c-code-bg);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}
.case-block-header strong {
  font-weight: 600;
  color: var(--c-text);
}
.case-block-tag {
  font-family: var(--font-mono);
  color: var(--c-text-tertiary);
}
.case-block pre {
  padding: 1rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  overflow-x: auto;
  background: var(--c-bg);
  color: var(--c-text);
}
.case-annotation {
  color: var(--c-text-secondary);
  font-style: italic;
}

/* ── Code examples (side-by-side) ──────────────────────────────── */
.code-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: var(--wide-table-width);
  width: calc(100vw - 2 * var(--px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 1rem 0;
}
@media (max-width: 640px) {
  .code-compare {
    grid-template-columns: 1fr;
  }
}
.code-example {
  border: 1px solid var(--c-code-border);
  overflow: hidden;
}
.code-example-header {
  padding: 0.375rem 0.75rem;
  background: var(--c-code-bg);
  border-bottom: 1px solid var(--c-code-border);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-text-secondary);
}
.code-example pre {
  padding: 0.75rem;
  font-size: var(--text-xs);
  line-height: 1.6;
  overflow-x: auto;
  background: var(--c-bg);
  margin: 0;
}

/* ── Install block ────────────────────────────────────────────── */
.install-code {
  display: inline-block;
  background: var(--c-code-bg);
  border: 1px solid var(--c-code-border);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--c-text);
}

/* ── Finding blocks ────────────────────────────────────────────── */
.finding {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border-light);
}
.finding:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.finding-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ── ToolSearch comparison table ────────────────────────────────── */
.compact-table {
  width: auto;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  margin: 1rem 0;
}
.compact-table th,
.compact-table td {
  padding: 0.375rem 1rem;
  text-align: right;
  border-bottom: 1px solid var(--c-border-light);
}
.compact-table th:first-child,
.compact-table td:first-child {
  text-align: left;
}
.compact-table th {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 2px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.compact-table td {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.compact-table tbody tr:last-child td {
  border-bottom: 2px solid var(--c-rule);
}

/* ── Endmatter (install + links + footer combined) ────────────── */
.endmatter {
  border-top: 3px solid var(--c-rule);
  padding: var(--section-gap) var(--px) 2rem;
}
.endmatter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-gap);
  margin-bottom: var(--section-gap);
}
@media (max-width: 640px) {
  .endmatter-grid {
    grid-template-columns: 1fr;
  }
}
.endmatter h2 {
  font-size: var(--text-xl);
  margin-bottom: 0.75rem;
}
.endmatter p {
  color: var(--c-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: 0.75rem;
}
.endmatter-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.endmatter-links a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 2px;
}
.endmatter-links a:hover {
  border-color: var(--c-text);
}

/* ── References ────────────────────────────────────────────────── */
.references {
  list-style: none;
  counter-reset: ref;
}
.references li {
  counter-increment: ref;
  margin-bottom: 0.75rem;
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  padding-left: 2.5rem;
  text-indent: -2.5rem;
}
.references li::before {
  content: "[" counter(ref) "]";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-tertiary);
  margin-right: 0.75rem;
}
.references a {
  color: var(--c-text-secondary);
}

/* ── Footer ───────────────────────────────────────────────────── */
.endmatter footer {
  padding-top: 2rem;
  border-top: 1px solid var(--c-border-light);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--c-text-tertiary);
  text-align: center;
}