/* The developer page. The shell — bar, footer, column, headings, bullets, callout — is
   /legal.css, shared with the privacy and terms pages, so this file carries only what is
   about an API reference: a base URL, code blocks, method badges and the operation list.
   It uses the same tokens, so the page cannot drift away from the rest of the site. */

:root{
  --dev-del:#b03a2e;
  --dev-del-bg:#fbeae7;
}

/* ---------------------------------------------------------------- base url */

.dev__url{margin-top:14px}
.dev__url code{
  display:inline-block;
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:15px;
  background:var(--plum);
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  word-break:break-all;
}

/* ------------------------------------------------------------------- code */

.dev__code{
  margin-top:13px;
  background:var(--plum);
  color:#eae4f2;
  border-radius:var(--r-card);
  padding:16px 18px;
  overflow-x:auto;
}
.dev__code code{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:12.8px;
  line-height:1.65;
  white-space:pre;
}

.dev__note{
  margin-top:14px;
  font-size:13.6px;
  color:var(--muted);
}

/* ------------------------------------------------------------ jump chips */

.dev__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dev__tags a{
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  color:var(--plum);
  background:var(--sand);
  border-radius:var(--r-pill);
  padding:6px 12px;
}
.dev__tags a:hover{background:var(--mint);color:var(--deep)}

/* ----------------------------------------------------------------- group */

.dev-tag{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.dev-tag:first-of-type{border-top:0}
.dev-tag h3{font-size:19px}
.dev-tag__note{margin-top:8px;font-size:14.2px;color:var(--muted);max-width:74ch}

/* ------------------------------------------------------------ operations */

.dev-ops{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dev-op{background:#fff;border:1px solid var(--line);border-radius:14px}
.dev-op[open]{border-color:var(--lav);box-shadow:var(--shadow-card)}
.dev-op > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:11px 14px;
  flex-wrap:wrap;
}
.dev-op > summary::-webkit-details-marker{display:none}
.dev-op > summary::after{
  content:"+";
  margin-left:auto;
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  color:var(--muted-2);
  font-size:15px;
}
.dev-op[open] > summary::after{content:"\2212"}

.dev-method{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:6px;
  background:var(--mint);
  color:var(--deep);
  flex:none;
}
.dev-method[data-method="POST"]{background:var(--plum);color:#fff}
.dev-method[data-method="PATCH"],
.dev-method[data-method="PUT"]{background:var(--sand);color:var(--plum)}
.dev-method[data-method="DELETE"]{background:var(--dev-del-bg);color:var(--dev-del)}

.dev-path{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:13px;
  color:var(--plum);
  word-break:break-all;
}
.dev-summary{font-size:14px;color:var(--muted);flex:1 1 240px}

.dev-op__body{padding:2px 14px 16px;border-top:1px solid var(--line)}
.dev-op__body h4{
  font-family:"DM Sans",sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin:16px 0 8px;
}
.dev-op__body p{font-size:14px;color:var(--muted);margin-top:6px}
.dev-scope{font-size:13px;color:var(--muted)}
/* A parameter's own note is not the sentence about what the key needs, so it is not the same
   class: one name for one thing is what keeps a locator meaning what it says. */
.dev-param-note{font-size:12.8px;color:var(--muted-2);margin-top:2px}

.dev-fields{width:100%;border-collapse:collapse;font-size:13.4px}
.dev-fields th,.dev-fields td{text-align:left;vertical-align:top;padding:7px 10px 7px 0;border-bottom:1px solid var(--line)}
.dev-fields th{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:11.5px;
  font-weight:500;
  color:var(--muted-2);
  white-space:nowrap;
}
.dev-fields td code{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:12.6px;color:var(--plum)}
.dev-fields tr:last-child th,.dev-fields tr:last-child td{border-bottom:0}
.dev-req{color:var(--dev-del);font-size:11.5px;font-family:"DM Mono",ui-monospace,Menlo,monospace}

/* --------------------------------------------------------------- answers */

.dev-answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dev-answers li{display:flex;gap:10px;align-items:baseline;font-size:13.6px;color:var(--muted)}
.dev-status{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:12px;
  color:var(--deep);
  flex:none;
  min-width:44px;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width:760px){
  .dev-op > summary{gap:8px;padding:11px 12px}
  .dev-summary{flex:1 1 100%;order:3}
  .dev-op > summary::after{order:2}
  .dev-fields{display:block;overflow-x:auto;white-space:nowrap}
  .dev-fields th,.dev-fields td{white-space:normal}
  .dev__url code{font-size:13.5px;padding:11px 13px}
  .dev-tag h3{font-size:17.5px}
}