:root {
  --ink: #17211c;
  --ledger: #f6f7f5;
  --folio: #fbfaf6;
  --verdigris: #0e6b5a;
  --gilt: #8a6d3b;
  --ink-muted: color-mix(in srgb, var(--ink) 62%, var(--ledger));
  --theme-color: var(--verdigris);
  --base-font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --sidebar-name-font-family: 'Literata', Georgia, serif;
  --heading-font-family: 'Literata', Georgia, serif;
  --code-font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

body {
  font-size: 16px;
  color: var(--ink);
  background: var(--ledger);
}

.sidebar {
  background: var(--folio);
  border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.sidebar .sidebar-nav > ul > li > a {
  font-weight: 600;
}

.sidebar-nav li.active > a {
  color: var(--verdigris);
  border-right: 2px solid var(--verdigris);
}

.sidebar > h1 a {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.markdown-section {
  max-width: 740px;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3 {
  font-family: var(--heading-font-family);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.markdown-section a {
  color: var(--verdigris);
}

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

.markdown-section pre {
  background: color-mix(in srgb, var(--ink) 4%, var(--folio));
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.tip,
.lean-callout {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--verdigris) 8%, var(--folio));
  border: 1px solid color-mix(in srgb, var(--verdigris) 22%, transparent);
}

.lean-callout strong:first-child {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--verdigris);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lean-warn {
  background: color-mix(in srgb, #a63a2e 6%, var(--folio));
  border-color: color-mix(in srgb, #a63a2e 22%, transparent);
}

.lean-warn strong:first-child {
  color: #a63a2e;
}

.app-name-link {
  font-family: var(--sidebar-name-font-family) !important;
}

.sidebar > h1.app-name,
.sidebar > h1 {
  margin: 0.6rem 0 0.4rem;
  padding: 0 0 0.25rem;
  line-height: 1;
}

.sidebar .app-name-link {
  display: inline-block;
  line-height: 0;
}

.sidebar .app-name-link img,
.sidebar .app-name img,
.sidebar > h1 img {
  display: block;
  width: auto;
  max-width: 160px;
  height: 36px;
  object-fit: contain;
}

.navbar {
  background: color-mix(in srgb, var(--ledger) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.search input {
  border-radius: 8px !important;
}

/* ---- explain trees (shared visual language with marketing) ---- */

:root {
  --raised: #ffffff;
  --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --ink-subtle: color-mix(in srgb, var(--ink) 46%, var(--ledger));
  --status-granted: #2e7d32;
  --status-denied: #c62828;
  --status-held: #f59f00;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 12px 40px color-mix(in srgb, var(--ink) 6%, transparent);
}

.explain-tree-panel.docs-tree {
  margin: 1.5rem 0 1.75rem;
  padding: 1.15rem 1.15rem 1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--raised) 92%, transparent);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  max-width: 100%;
}

.explain-tree-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1rem;
}

.explain-tree-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  font-family: var(--base-font-family);
}

.explain-tree-title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.explain-tree-asof {
  margin: 4px 0 0;
  font-family: var(--code-font-family);
  font-size: 12px;
  color: var(--ink-subtle);
  white-space: nowrap;
}

.status-word.denied {
  color: var(--status-denied);
}

.status-word.granted {
  color: var(--status-granted);
}

.explain-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline);
}

.explain-banner .chip,
.docs-tree .chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-family: var(--base-font-family);
}

.chip.granted {
  color: var(--status-granted);
  background: color-mix(in srgb, var(--status-granted) 12%, transparent);
}

.chip.denied {
  color: var(--status-denied);
  background: color-mix(in srgb, var(--status-denied) 12%, transparent);
}

.chip.held {
  color: color-mix(in srgb, var(--status-held) 70%, black);
  background: color-mix(in srgb, var(--status-held) 18%, transparent);
}

.explain-tree,
.explain-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.explain-tree {
  display: grid;
  gap: 2px;
}

.explain-tree ul {
  margin: 4px 0 6px;
  padding-left: 18px;
  border-left: 1px solid var(--hairline-strong);
  display: grid;
  gap: 2px;
}

.explain-tree > .explain-node > .explain-row {
  background: color-mix(in srgb, var(--folio) 70%, var(--raised));
}

.explain-node.open > .explain-row {
  background: color-mix(in srgb, var(--verdigris) 7%, var(--raised));
  border-color: color-mix(in srgb, var(--verdigris) 22%, var(--hairline));
}

.explain-node.denied > .explain-row {
  background: color-mix(in srgb, var(--status-denied) 6%, var(--raised));
  border-color: color-mix(in srgb, var(--status-denied) 18%, var(--hairline));
}

.explain-node.granted > .explain-row {
  background: color-mix(in srgb, var(--status-granted) 7%, var(--raised));
  border-color: color-mix(in srgb, var(--status-granted) 20%, var(--hairline));
}

.explain-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--base-font-family);
}

.explain-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.explain-hint {
  font-size: 12px;
  color: var(--ink-subtle);
  text-align: right;
  font-family: var(--code-font-family);
}

.explain-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--status-held) 55%, black);
  background: color-mix(in srgb, var(--status-held) 16%, transparent);
}

.explain-chip.ok {
  color: var(--status-granted);
  background: color-mix(in srgb, var(--status-granted) 12%, transparent);
}

.explain-chip.no {
  color: var(--status-denied);
  background: color-mix(in srgb, var(--status-denied) 12%, transparent);
}

.explain-node.muted .explain-label {
  color: var(--ink-muted);
}

.explain-node.muted .explain-row {
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}

.explain-tree-caption {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--heading-font-family);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .explain-tree-head {
    flex-direction: column;
  }

  .explain-tree-asof {
    white-space: normal;
  }
}

/* ---- API reference (Widdershins → Docsify) ---- */

.markdown-section:has(#lean-api),
.markdown-section:has(.api-hero) {
  max-width: 920px;
}

.api-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--verdigris) 14%, transparent), transparent 55%),
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--gilt) 12%, transparent), transparent 50%),
    var(--folio);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.api-hero-logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 180px;
  object-fit: contain;
}

.api-hero-kicker {
  margin: 0;
  font-family: var(--base-font-family);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verdigris);
}

.markdown-section:has(.api-hero) > h1:first-of-type,
.markdown-section #lean-api {
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  margin-top: 0.25rem;
}

/* Widdershins blockquotes: "Code samples", "Example responses", status lines */
.markdown-section:has(.api-hero) blockquote {
  margin: 1.1rem 0 0.65rem;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-left: 3px solid var(--verdigris);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--verdigris) 7%, var(--folio));
  color: var(--ink);
}

.markdown-section:has(.api-hero) blockquote p {
  margin: 0;
  font-family: var(--base-font-family);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--verdigris);
}

.markdown-section:has(.api-hero) blockquote + blockquote {
  margin-top: 0.35rem;
  border-left-color: var(--gilt);
  background: color-mix(in srgb, var(--gilt) 8%, var(--folio));
}

.markdown-section:has(.api-hero) blockquote + blockquote p {
  color: color-mix(in srgb, var(--gilt) 80%, var(--ink));
}

/* Verb + path lines Widdershins emits as bare code: `GET /api/...` */
.markdown-section:has(.api-hero) > p > code:only-child {
  display: inline-block;
  margin: 0.35rem 0 0.75rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, var(--folio));
  border: 1px solid var(--hairline);
}

.markdown-section:has(.api-hero) table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.markdown-section:has(.api-hero) th {
  font-family: var(--base-font-family);
  font-weight: 600;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--ink) 3%, var(--folio));
  border-bottom: 1px solid var(--hairline-strong);
}

.markdown-section:has(.api-hero) td,
.markdown-section:has(.api-hero) th {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.markdown-section:has(.api-hero) h1[id^='lean-api-'] {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
}

.markdown-section:has(.api-hero) h2 {
  margin-top: 1.75rem;
  font-size: 1.2rem;
}

.markdown-section:has(.api-hero) h3 {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  font-family: var(--base-font-family);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
}

/* Slate-style asides from Widdershins → Lean callouts */
.markdown-section aside.warning,
.markdown-section aside.notice,
.markdown-section aside.success {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-family: var(--base-font-family);
  font-size: 0.95rem;
  line-height: 1.45;
}

.markdown-section aside.warning {
  background: color-mix(in srgb, #a63a2e 6%, var(--folio));
  border: 1px solid color-mix(in srgb, #a63a2e 22%, transparent);
  color: var(--ink);
}

.markdown-section aside.notice,
.markdown-section aside.success {
  background: color-mix(in srgb, var(--verdigris) 8%, var(--folio));
  border: 1px solid color-mix(in srgb, var(--verdigris) 22%, transparent);
}

.api-overview-logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: 160px;
  margin: 0 0 1rem;
  object-fit: contain;
}