/* docs.css — the gated API + MCP docs surface. Brand-agnostic, so it wears the
   same friendly violet accent as the account surfaces. Depends on tokens.css. */
.docs {
  --accent: #8b5cf6;
  --accent-ink: #ffffff;
  --accent-line: color-mix(in srgb, #8b5cf6 45%, transparent);
  --accent-wash: color-mix(in srgb, #8b5cf6 15%, transparent);
  padding-top: var(--s-12);
  padding-bottom: var(--s-20);
  display: grid;
  /* minmax(0,1fr) lets the column shrink below its content's min-content, so
     long code lines scroll inside their own block instead of widening the
     page on narrow screens. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
  max-width: 920px;
}

.doc-hero { display: grid; gap: var(--s-3); }
.doc-title {
  font-family: var(--font-ui);
  font-size: var(--t-display);
  font-weight: var(--w-semi);
  letter-spacing: -0.04em;
  line-height: 1;
}
.doc-title .wm-brand { color: var(--ink); }
.doc-title .wm-curl {
  background: linear-gradient(92deg, #8b5cf6, #ec4899 55%, #22d3ee);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.doc-lead { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-body); line-height: 1.6; max-width: 60ch; }

.doc-section { display: grid; gap: var(--s-4); }
.doc-h2 {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-ui); font-size: 22px; font-weight: var(--w-semi); letter-spacing: -0.02em;
}
.doc-emoji { font-size: 20px; line-height: 1; }
.doc-h3 { font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; margin-top: var(--s-2); }
.doc-block { display: grid; gap: var(--s-3); }
.doc-p { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.65; }
.doc-p code, .doc-note code { font-family: var(--font-mono); font-size: 0.92em; color: var(--accent); background: var(--accent-wash); padding: 1px 5px; border-radius: var(--r-sm); }
.doc-note { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.7; }

.doc-btn {
  display: inline; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* code blocks */
.doc-code-wrap { position: relative; }
.doc-code {
  overflow-x: auto;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--t-data);
  line-height: 1.6;
  color: var(--ink);
}
.doc-copy {
  position: absolute; top: var(--s-2); right: var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-3);
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em;
  padding: 3px var(--s-2); cursor: copy;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.doc-copy:hover { color: var(--ink); border-color: var(--accent); }

/* endpoints */
.doc-endpoints { display: grid; gap: var(--s-3); }
.doc-endpoint {
  display: grid; gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface);
}
.doc-ep-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.doc-method {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: 0.06em;
  padding: 3px var(--s-2); border-radius: var(--r-sm); color: var(--accent-ink);
}
.doc-method.m-get { background: #22c55e; }
.doc-method.m-post { background: #8b5cf6; }
.doc-path { font-family: var(--font-mono); font-size: var(--t-data); color: var(--ink); overflow-wrap: anywhere; }
.doc-ep-desc { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.55; }

/* agent files + mapping */
.doc-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.doc-file {
  display: grid; gap: 3px; padding: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.doc-file:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.doc-file-name { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); }
.doc-file-desc { font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-3); }

.doc-map { display: grid; gap: 1px; border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; }
.doc-map-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); background: var(--surface);
}
.doc-map-tool { font-family: var(--font-ui); font-size: var(--t-sm); color: var(--ink); }
.doc-map-file { font-family: var(--font-mono); font-size: var(--t-label); color: var(--accent); overflow-wrap: anywhere; }