/* ===== API REFERENCE ===== */
/* Tokens from main.css: --bg, --bg2, --card, --bd, --bd2, --tx, --tx2,
   --dm, --ac, --ac2, --gn, --pp, --rd, --font, --mono */

/* ---------- shell layout (single centered column) ---------- */
.api-shell{
  max-width:1000px;
  margin:0 auto;
  padding-top:64px;
}
.api-main{
  padding:2rem clamp(1.2rem,3vw,3rem) 4rem;
}

/* ---------- method badges ---------- */
.m{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.04em;padding:2px 6px;border-radius:4px;
  min-width:38px;text-align:center;
}
.m-get{color:var(--ac);background:rgba(74,158,255,0.1);border:1px solid rgba(74,158,255,0.22)}
.m-post{color:var(--gn);background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.22)}
.m-del{color:var(--rd);background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.22)}
.m-put{color:var(--pp);background:rgba(124,92,252,0.08);border:1px solid rgba(124,92,252,0.22)}

/* ---------- main content ---------- */
.api-main{
  padding:2rem clamp(1.2rem,3vw,3rem) 4rem;
  min-width:0;
}

.api-page-head{margin-bottom:2.5rem}
.api-page-head h1{
  font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-0.04em;
  line-height:1.1;margin:0 0 0.6rem;
}
.api-page-sub{
  font-size:15px;color:var(--tx2);line-height:1.6;font-weight:300;
  max-width:760px;margin:0;
}
.api-base{
  font-family:var(--mono);font-size:13px;color:var(--ac);
  background:var(--bg2);padding:1px 7px;border:1px solid var(--bd);border-radius:5px;
}

.api-divider{
  border:none;height:1px;background:var(--bd);
  margin:3rem 0 2rem;
}

/* ---------- sections (overview / auth / errors / limits) ---------- */
.api-section{
  margin-bottom:3rem;scroll-margin-top:80px;
}
.api-section h2{
  font-size:1.6rem;font-weight:700;letter-spacing:-0.025em;
  margin:0 0 1rem;color:var(--tx);
}
.api-section h3{
  font-size:1.05rem;font-weight:600;letter-spacing:-0.015em;
  margin:1.7rem 0 0.6rem;color:var(--tx);
}
.api-p{
  font-size:14.5px;color:var(--tx2);line-height:1.7;font-weight:300;
  max-width:780px;margin:0 0 1rem;
}
.api-p a, .api-section a:not(.api-btn){color:var(--ac);text-decoration:none}
.api-p a:hover{text-decoration:underline}
.api-section code:not(.op-path):not(.api-base){
  font-family:var(--mono);font-size:0.85em;
  background:var(--bg2);border:1px solid var(--bd);
  padding:1px 6px;border-radius:4px;color:var(--ac);
}

/* group section header */
.api-group-h{
  font-size:1.4rem;font-weight:700;letter-spacing:-0.02em;
  color:var(--tx);margin:0.5rem 0 1.2rem;scroll-margin-top:80px;
}

.quickstart{
  margin:0.6rem 0 1.5rem;padding-left:1.3rem;
  font-size:14px;color:var(--tx2);line-height:1.9;font-weight:300;
}
.quickstart code{font-size:12.5px}

/* ---------- tables (auth scopes / errors / limits) ---------- */
.api-table{
  width:100%;border-collapse:collapse;font-size:13.5px;
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  overflow:hidden;margin:0.4rem 0;
}
.api-table th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--dm);letter-spacing:0.08em;text-transform:uppercase;
  padding:0.6rem 0.9rem;background:var(--bg2);border-bottom:1px solid var(--bd);
}
.api-table td{
  padding:0.6rem 0.9rem;border-bottom:1px solid var(--bd);
  color:var(--tx2);font-weight:300;vertical-align:top;line-height:1.55;
}
.api-table tr:last-child td{border-bottom:none}
.api-table code{font-size:12.5px;background:var(--bg2);border:1px solid var(--bd);padding:1px 5px;border-radius:4px;color:var(--ac)}

/* scope code badges in the auth table */
.sc-r{color:var(--ac)!important}
.sc-w{color:var(--gn)!important}
.sc-d{color:var(--rd)!important}
.sc-a{color:var(--pp)!important}

/* status code badges */
.st{
  font-family:var(--mono);font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:5px;display:inline-block;
}
.st-400{color:#fbbf24;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25)}
.st-401{color:#fb923c;background:rgba(251,146,60,0.08);border:1px solid rgba(251,146,60,0.25)}
.st-403{color:var(--rd);background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25)}
.st-404{color:var(--dm);background:rgba(82,82,94,0.08);border:1px solid rgba(82,82,94,0.25)}
.st-413{color:#fb923c;background:rgba(251,146,60,0.08);border:1px solid rgba(251,146,60,0.25)}
.st-429{color:var(--pp);background:rgba(124,92,252,0.08);border:1px solid rgba(124,92,252,0.25)}
.st-503{color:var(--rd);background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25)}

/* callout */
.api-callout{
  margin:1rem 0;padding:0.85rem 1.1rem;
  background:rgba(124,92,252,0.04);border:1px solid rgba(124,92,252,0.2);
  border-radius:10px;font-size:13px;color:var(--tx2);line-height:1.65;font-weight:300;
}
.api-callout strong{color:var(--pp);font-weight:600}

/* ---------- operation card (the swagger-style block) ---------- */
.op{
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  margin-bottom:1.2rem;overflow:hidden;
  scroll-margin-top:80px;
  transition:border-color 0.15s;
}
.op:target{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset}

.op-head{
  display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;
  padding:0.85rem 1.1rem;
  background:var(--bg2);border-bottom:1px solid var(--bd);
}
.op-head .m{font-size:10.5px;min-width:54px;padding:3px 8px}
.op-path{
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--tx);
  background:none;border:none;padding:0;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.op-scope{
  font-family:var(--mono);font-size:11px;color:var(--dm);
}
.op-scope code{font-size:11px;padding:1px 5px;background:none;border:none}

.op-desc{
  padding:0.85rem 1.1rem 0;font-size:13.5px;color:var(--tx2);
  line-height:1.65;font-weight:300;margin:0;
}

.op-section{padding:0 1.1rem 1rem}
.op-section h4{
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--dm);
  letter-spacing:0.1em;text-transform:uppercase;
  margin:1rem 0 0.5rem;
}

.op-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.op-tbl thead th{
  text-align:left;font-family:var(--mono);font-size:9.5px;font-weight:600;
  color:var(--dm);letter-spacing:0.08em;text-transform:uppercase;
  padding:0.45rem 0.6rem;border-bottom:1px solid var(--bd);
}
.op-tbl td{
  padding:0.5rem 0.6rem;border-bottom:1px solid var(--bd);
  color:var(--tx2);font-weight:300;vertical-align:top;line-height:1.5;
}
.op-tbl tr:last-child td{border-bottom:none}
.op-tbl code{font-size:12px;background:var(--bg2);border:1px solid var(--bd);padding:1px 5px;border-radius:4px;color:var(--ac)}

.op-resp{
  margin:0;padding:0.8rem 1rem;background:var(--bg2);
  border:1px solid var(--bd);border-radius:8px;overflow-x:auto;
  font-family:var(--mono);font-size:12px;color:var(--tx);line-height:1.55;
}
.op-resp code{background:none;border:none;padding:0;color:inherit}

/* ---------- code card (tabbed) ---------- */
.code-card{
  background:var(--bg2);border:1px solid var(--bd);border-radius:9px;
  overflow:hidden;margin:0.3rem 0;
}
.code-tabs{
  display:flex;align-items:center;gap:2px;
  padding:0.4rem 0.5rem;background:var(--bg);border-bottom:1px solid var(--bd);
}
.ct, .copy-btn{
  font-family:inherit;font-size:11.5px;font-weight:500;
  padding:0.35rem 0.75rem;background:none;border:1px solid transparent;
  border-radius:6px;color:var(--dm);cursor:pointer;
  transition:background 0.12s,color 0.12s,border-color 0.12s;
}
.ct:hover{color:var(--tx);background:var(--bg2)}
.ct.active{background:var(--card);color:var(--ac);border-color:var(--bd)}
.ct-label{
  font-family:var(--mono);font-size:10px;color:var(--dm);
  letter-spacing:0.08em;text-transform:uppercase;padding:0 0.6rem;
}
.copy-btn{margin-left:auto;color:var(--tx2);border-color:var(--bd)}
.copy-btn:hover{color:var(--ac);border-color:var(--ac)}
.copy-btn.copied{color:var(--gn);border-color:var(--gn)}

.code-pane{
  display:none;margin:0;padding:0.9rem 1rem;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;
  color:var(--tx);overflow-x:auto;
}
.code-pane.active{display:block}
.code-pane code{background:none!important;border:none!important;padding:0!important;color:inherit!important;font-size:inherit!important}

/* ---------- footer ---------- */
.api-foot{
  margin-top:3rem;padding:2rem 0 0;border-top:1px solid var(--bd);
  text-align:center;font-size:13px;color:var(--tx2);font-weight:300;
}
.api-foot a{color:var(--ac);text-decoration:none}
.api-foot a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .api-shell{grid-template-columns:1fr}
  .api-side{display:none}  /* Mobile: hide the sidebar; in-page TOC links still work via #anchors */
  .api-main{padding:1.5rem 1rem 3rem}
}
@media (max-width:480px){
  .api-page-head h1{font-size:1.7rem}
  .api-section h2, .api-group-h{font-size:1.25rem}
  .op-path{font-size:12.5px}
  .op-head{gap:0.5rem}
  .op-scope{display:none}
  .api-table{font-size:12px}
  .api-table th, .api-table td{padding:0.5rem 0.65rem}
}