/* ============================================================
   data2md — API Reference (/api)
   Reuses tokens from landing.css. Loaded after it.
   ============================================================ */

/* Safety net: ensure [hidden] always wins */
[hidden]{display:none !important}

/* ── Layout ─────────────────────────────────────────────── */
.docs-main{padding:3.5rem 0 4rem}
.docs{max-width:820px;margin:0 auto}

/* ── Hero ───────────────────────────────────────────────── */
.docs-hero{margin-bottom:3rem}
.docs-eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:.85rem;
}
.docs-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem,4.5vw,3.2rem);
  letter-spacing:-.025em;
  line-height:1.05;
  color:var(--ink);
  margin-bottom:1rem;
}
.docs-title em{font-style:italic;color:var(--accent);font-weight:400}
.docs-sub{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.65;
  max-width:620px;
}
.docs-sub code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--accent-soft);
  color:var(--accent-h);
  padding:.1rem .4rem;
  border-radius:4px;
}

/* ── Section ────────────────────────────────────────────── */
.docs-section{margin-bottom:3rem}
.docs-section h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.55rem;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
}
.docs-section h3{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--accent);
  margin:1.5rem 0 .65rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.docs-section h3::before{
  content:'//';
  color:var(--faint);
  font-weight:400;
}
.docs-section p{
  color:var(--ink-2);
  line-height:1.65;
  margin-bottom:.5rem;
}
.docs-section p code,
.docs-section td code{
  font-family:var(--mono);
  font-size:.84em;
  background:var(--accent-soft);
  color:var(--accent-h);
  padding:.12rem .4rem;
  border-radius:4px;
  letter-spacing:.01em;
}

/* ── Endpoint pill ──────────────────────────────────────── */
.endpoint-pill{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.45rem .9rem .45rem .45rem;
  margin-bottom:.85rem;
  box-shadow:var(--shadow-sm);
}
.method{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:800;
  padding:.4rem .65rem;
  border-radius:7px;
  letter-spacing:.1em;
  line-height:1;
}
.endpoint-url{
  font-family:var(--mono);
  font-size:.86rem;
  color:var(--ink);
  letter-spacing:-.01em;
}

/* ── Status tag (e.g. "201 Created") ────────────────────── */
.code-tag{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:.7rem;
  background:var(--accent-soft);
  color:var(--accent-h);
  padding:.22rem .6rem;
  border-radius:999px;
  letter-spacing:.06em;
  font-weight:700;
  border:1px solid rgba(234,88,12,.25);
}
.code-tag--err{
  background:rgba(220,38,38,.06);
  color:#b91c1c;
  border-color:rgba(220,38,38,.22);
}

/* ── Table ──────────────────────────────────────────────── */
.docs-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.docs-table th{
  text-align:left;
  padding:.7rem 1rem;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.docs-table td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
  vertical-align:top;
  line-height:1.5;
}
.docs-table tr:last-child td{border-bottom:none}
.docs-table td:first-child code{
  background:transparent;
  color:var(--ink);
  font-weight:600;
  padding:0;
}

/* ── Code block (dark, matches converter preview) ───────── */
.code-block-wrap{
  position:relative;
  margin-bottom:.5rem;
}
.code-block{
  background:var(--code-bg);
  border-radius:var(--r);
  padding:1.25rem 1.5rem;
  font-family:var(--mono);
  font-size:.82rem;
  line-height:1.75;
  overflow-x:auto;
  white-space:pre;
  color:var(--code-ink);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:var(--shadow-sm);
}
.code-block .ck{color:var(--code-key)}
.code-block .cs{color:var(--code-str)}
.code-block .cm{color:var(--code-mute)}
.code-block .cn{color:#9bc1bc}
.code-copy{
  position:absolute;
  top:.6rem;
  right:.6rem;
  background:rgba(245,239,226,.08);
  color:var(--code-mute);
  border:1px solid rgba(245,239,226,.12);
  padding:.32rem .65rem;
  border-radius:6px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  cursor:pointer;
  transition:all .15s;
  text-transform:uppercase;
  font-weight:600;
}
.code-copy:hover{
  background:rgba(245,239,226,.15);
  color:var(--code-ink);
  border-color:rgba(245,239,226,.25);
}
.code-copy.is-copied{
  color:var(--code-key);
  border-color:var(--code-key);
}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:680px){
  .docs-main{padding:2rem 0 3rem}
  .docs-section{margin-bottom:2.25rem}
  .docs-section h2{font-size:1.3rem}
  .docs-table{font-size:.82rem}
  .docs-table th,.docs-table td{padding:.55rem .7rem}
  .code-block{padding:1rem;font-size:.74rem}
  .code-copy{top:.4rem;right:.4rem;padding:.28rem .55rem;font-size:.65rem}
}