/* ============================================================
   /api/docs/* — one page per topic, a side menu, and nothing else.
   Builds on base.css tokens and landing.css's header/footer.
   ============================================================ */

.docs-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.docs-brand span{font-size:13px; font-weight:600; color:var(--pink-dark); background:var(--pink-tint); border-radius:99px; padding:3px 10px; white-space:nowrap}
.docs-nav__actions{display:flex; align-items:center; gap:var(--s3)}
.docs-nav__link{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500}
@media (max-width:560px){ .docs-nav__link, .docs-nav__actions .btn{display:none} }

/* ---------- layout ---------- */
.docs{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); padding-top:var(--s3); padding-bottom:var(--s6)}
.docs__menu{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none}
.docs__menu::-webkit-scrollbar{display:none}
.docs__menu a{
  display:flex; align-items:center; gap:8px; flex:none; text-decoration:none; color:var(--ink-2);
  font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#fff;
}
.docs__menu a:hover{color:var(--ink); background:var(--bg-2)}
.docs__menu a.is-on{color:var(--pink-dark); background:var(--pink-tint); border-color:var(--pink-tint); font-weight:600}
@media (min-width:960px){
  .docs{grid-template-columns:230px minmax(0,1fr); gap:var(--s6); padding-top:var(--s5)}
  .docs__menu{flex-direction:column; overflow:visible; margin:0; padding:0; position:sticky; top:calc(var(--nav-h) + 20px); align-self:start}
  .docs__menu a{border-color:transparent; background:none}
}

/* ---------- content ---------- */
.docs__main{min-width:0; max-width:820px}
.docs__main h1{font-size:clamp(28px,4vw,38px); letter-spacing:-.02em; margin:0 0 var(--s3)}
.docs__main h2{font-size:21px; letter-spacing:-.01em; margin:var(--s5) 0 var(--s2); padding-top:var(--s2); scroll-margin-top:calc(var(--nav-h) + 16px)}
.docs__main h3{font-size:17px; margin:var(--s4) 0 var(--s2)}
.docs__main p, .docs__main li{color:var(--ink-2); line-height:1.65; font-size:16px}
.docs__main p{margin:0 0 var(--s2)}
.docs__main strong{color:var(--ink)}
.docs__main a{color:var(--pink-dark)}
.docs__main code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink); word-break:break-word}
.intro{font-size:18px !important; color:var(--ink) !important}

/* the method + full URL box every API page opens with */
.endpoint{display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; overflow-x:auto; margin:0 0 var(--s2)}
.endpoint code{background:none !important; border:0 !important; padding:0 !important; white-space:nowrap; font-size:14px !important}
.summary{font-size:17px !important; color:var(--ink) !important}

.verb{flex:none; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; font-weight:700; border-radius:6px; padding:3px 7px; letter-spacing:.03em}
.verb--get{background:#E7F5EE; color:#1E7B4E}
.verb--post{background:var(--pink-tint); color:var(--pink-dark)}

/* code blocks, with comments in a softer colour */
.code{margin:0 0 var(--s3); background:#1C1B1F; color:#F4EEF0; border-radius:var(--r); padding:16px 18px; overflow-x:auto; font-size:13.5px; line-height:1.65}
.code code{background:none !important; border:0 !important; padding:0 !important; color:inherit !important; white-space:pre; word-break:normal !important; font-size:inherit !important}
.code .cm{color:#9DDBB5}

/* field tables */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); margin:0 0 var(--s3)}
.ftable{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
.ftable th, .ftable td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); line-height:1.55}
.ftable thead th{background:var(--bg-2); color:var(--ink); font-size:13px; font-weight:600}
.ftable tbody tr:last-child td{border-bottom:0}
.ftable td:first-child{white-space:nowrap}
.ftable td a{text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.req, .opt{display:inline-block; font-size:12px; font-weight:600; border-radius:99px; padding:2px 9px; white-space:nowrap}
.req{background:#E7F5EE; color:#1E7B4E}
.opt{background:var(--bg-2); color:var(--ink-3); border:1px solid var(--line)}

/* notes */
.note{border-radius:var(--r); padding:14px 16px; margin:0 0 var(--s3); border:1px solid}
.note strong{display:block; margin-bottom:4px}
.note p{margin:0 !important; font-size:15px !important}
.note--danger{background:#FDF1EF; border-color:#F3D6D1}
.note--danger strong{color:#A5301F !important}
.note--warn{background:#FFF8EA; border-color:#F0DDBB}
.note--warn strong{color:#7A5418 !important}

.steps{padding-left:1.3em; display:grid; gap:8px; margin:0 0 var(--s3)}
.ticks{list-style:none; padding:0; display:grid; gap:10px; margin:0 0 var(--s3)}
.ticks li{position:relative; padding-left:24px}
.ticks li::before{content:""; position:absolute; left:2px; top:.6em; width:11px; height:6px; border-left:2px solid var(--pink); border-bottom:2px solid var(--pink); transform:rotate(-45deg)}

.cards3{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:var(--s2)}
.cards3 > div{border:1px solid var(--line); border-radius:var(--r); padding:16px; background:var(--pink-tint-2)}
.cards3 strong{display:block; margin-bottom:6px}
.cards3 p{margin:0 !important; font-size:15px !important}

/* previous / next */
.pgs{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s6)}
.pg{display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; text-decoration:none; color:var(--ink) !important; font-weight:600}
.pg span{font-size:12px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.pg--next{text-align:right; grid-column:2}
.pg:hover{border-color:var(--pink); background:var(--pink-tint-2)}

/* On phones, each field becomes a small card: name and Required on one line, the explanation below. */
@media (max-width:640px){
  .tw:has(.ftable--fields){border:0; overflow:visible}
  .ftable--fields{min-width:0}
  .ftable--fields thead{display:none}
  .ftable--fields tbody{display:grid; gap:10px}
  .ftable--fields tr{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
  .ftable--fields td{border:0; padding:0}
  .ftable--fields td:nth-child(2){justify-self:start; align-self:center}
  .ftable--fields td:nth-child(3){grid-column:1 / -1; white-space:normal}
}