/* ─────────────────────────────────────────────────────────────
   API ו‑MCP documentation tab — visual language inspired by
   over.org.il/api. Every rule scoped under #tab-api so nothing
   leaks into the rest of the app (same discipline as gov.css).
   ───────────────────────────────────────────────────────────── */

#tab-api {
  --api-bg: #f6f6f6;
  --api-ink: #111827;
  --api-muted: #6b7280;
  --api-card: #ffffff;
  --api-border: #e5e7eb;
  --api-get: #dcfce7;
  --api-get-ink: #166534;
  --api-post: #dbeafe;
  --api-post-ink: #1e40af;
  --api-mcp-border: #fde68a;   /* amber — MCP cards */
  --api-callout: #ecfeff;      /* teal callout bg  */
  --api-callout-border: #a5d8e6;
  --api-code-bg: #f3f4f6;
  --api-accent: #0f2027;
  background: var(--api-bg);
  color: var(--api-ink);
  font-family: "Rubik", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  direction: rtl;
  padding-bottom: 4rem;
}

#tab-api .api-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── Hero ── */
#tab-api .api-hero {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 55%, #2c5364 100%);
  color: #fff;
  padding: 2.6rem 0 2.2rem;
  margin-bottom: 1.8rem;
}
#tab-api .api-hero .api-wrap { padding-top: 0; }
#tab-api .api-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  color: #fff;
}
#tab-api .api-hero p {
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
  color: #e8eef2;
  max-width: 720px;
}
#tab-api .api-hero .api-badge-beta {
  display: inline-block;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 999px;
  margin-inline-start: .5rem;
  vertical-align: middle;
}

/* ── Sections ── */
#tab-api section { margin-bottom: 2.2rem; }
#tab-api h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--api-border);
}
#tab-api h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
#tab-api p { line-height: 1.7; }
#tab-api a { color: #1668a8; }

/* ── Intro callout ── */
#tab-api .api-callout {
  background: var(--api-callout);
  border: 1px solid var(--api-callout-border);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  line-height: 1.7;
}
#tab-api .api-callout strong { color: var(--api-accent); }

/* ── MCP server cards ── */
#tab-api .api-mcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
#tab-api .api-mcp-card {
  background: var(--api-card);
  border: 1px solid var(--api-mcp-border);
  border-radius: 8px;
  padding: 1.15rem 1.2rem;
}
#tab-api .api-mcp-card h3 { display: flex; align-items: center; gap: .45rem; }
#tab-api .api-mcp-card p.api-mcp-desc {
  color: var(--api-muted);
  font-size: .9rem;
  margin: .35rem 0 .8rem;
}
#tab-api .api-host {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--api-code-bg);
  border: 1px solid var(--api-border);
  border-radius: 6px;
  padding: .4rem .55rem;
  margin-bottom: .8rem;
}
#tab-api .api-host code {
  flex: 1;
  font-size: .86rem;
  color: var(--api-ink);
  word-break: break-all;
  direction: ltr;
  text-align: left;
  background: none;
  padding: 0;
}
#tab-api .api-copy {
  border: 1px solid var(--api-border);
  background: #fff;
  border-radius: 6px;
  padding: .2rem .55rem;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--api-ink);
}
#tab-api .api-copy:hover { background: var(--api-code-bg); }
#tab-api .api-copy.copied { background: var(--api-get); color: var(--api-get-ink); border-color: var(--api-get); }
#tab-api .api-toollist {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
#tab-api .api-tool {
  font-size: .76rem;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  background: var(--api-code-bg);
  border: 1px solid var(--api-border);
  border-radius: 4px;
  padding: .1rem .4rem;
  direction: ltr;
}
#tab-api .api-mcp-note {
  margin-top: .85rem;
  font-size: .84rem;
  color: var(--api-muted);
}

/* ── How to connect steps ── */
#tab-api ol.api-steps {
  margin: 0;
  padding-inline-start: 1.3rem;
  line-height: 1.9;
}
#tab-api ol.api-steps code { direction: ltr; }

/* ── Endpoint groups ── */
#tab-api .api-group { margin-bottom: 1.6rem; }
#tab-api .api-group > h3 {
  font-size: 1.05rem;
  margin-bottom: .3rem;
}
#tab-api .api-group > p.api-group-sub {
  color: var(--api-muted);
  font-size: .9rem;
  margin: 0 0 .8rem;
}
#tab-api .api-endpoint {
  background: var(--api-card);
  border: 1px solid var(--api-border);
  border-radius: 8px;
  padding: .85rem 1rem;
  margin-bottom: .7rem;
}
#tab-api .api-ep-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
#tab-api .api-method {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .12rem .42rem;
  border-radius: 4px;
}
#tab-api .api-method.get  { background: var(--api-get);  color: var(--api-get-ink); }
#tab-api .api-method.post { background: var(--api-post); color: var(--api-post-ink); }
#tab-api .api-path {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: .87rem;
  direction: ltr;
  word-break: break-all;
  color: var(--api-ink);
}
#tab-api .api-ep-desc {
  margin: .5rem 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: #374151;
}
#tab-api .api-params {
  margin: .55rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .84rem;
}
#tab-api .api-params li { margin: .2rem 0; line-height: 1.5; }
#tab-api .api-params code {
  direction: ltr;
  background: var(--api-code-bg);
  border-radius: 3px;
  padding: 0 .25rem;
  font-size: .82rem;
}
#tab-api .api-example {
  margin-top: .55rem;
  background: var(--api-code-bg);
  border: 1px solid var(--api-border);
  border-radius: 6px;
  padding: .45rem .6rem;
  overflow-x: auto;
}
#tab-api .api-example code {
  direction: ltr;
  display: block;
  white-space: pre;
  font-size: .8rem;
  color: #1f2937;
  background: none;
  padding: 0;
}
#tab-api .api-example .api-example-label {
  color: var(--api-muted);
  font-size: .72rem;
  margin-bottom: .2rem;
}

@media (max-width: 640px) {
  #tab-api .api-hero h1 { font-size: 1.6rem; }
  #tab-api .api-mcp-grid { grid-template-columns: 1fr; }
}