/* /developers — the Developer API's docs, reference and console (docs/API-SPEC.md § 6). Tokens from tokens.css only. */
.dev-sub { border-bottom: var(--pen-1) solid var(--line); background: var(--sheet); }
.dev-sub ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: .75rem 0; }
.dev-sub a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.dev-sub a[aria-current="page"], .dev-sub a:hover { color: var(--ink); text-decoration: underline; }
.dev-layout { display: grid; gap: 2rem; }
.dev-layout > * { min-width: 0; }   /* let code blocks scroll inside the column instead of widening the page */
.dev-route code { overflow-wrap: anywhere; }
@media (min-width: 992px) { .dev-layout { grid-template-columns: 14rem minmax(0, 1fr); } .dev-toc { position: sticky; top: 1rem; align-self: start; } }
.dev-toc ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.dev-toc li { margin: .2rem 0; }
.dev-toc .dev-toc-h { font-weight: 700; margin-top: .9rem; }
.dev-toc a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.dev-toc a:hover { color: var(--ink); text-decoration: underline; }
.dev-cat { margin-bottom: 3rem; }
.dev-cat > h2 { border-bottom: var(--pen-2) solid var(--ink); padding-bottom: .35rem; }
.dev-ep { border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 1.25rem 0; background: var(--sheet); scroll-margin-top: 1rem; }
.dev-ep h3 { font-size: var(--fs-lg); margin: 0 0 .5rem; }
.dev-route { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.dev-method { display: inline-block; min-width: 3.6rem; text-align: center; font-weight: 700; padding: .1rem .45rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
.dev-method.is-get { color: var(--layer-blue); border-color: var(--layer-blue); }
.dev-method.is-post { color: var(--layer-green); border-color: var(--layer-green); }
.dev-method.is-patch { color: var(--layer-ochre); border-color: var(--layer-ochre); }
.dev-scope, .dev-soon { font-size: var(--fs-sm); padding: .05rem .45rem; border: var(--pen-1) dashed var(--line); border-radius: var(--radius); color: var(--ink-2); }
.dev-soon { border-style: solid; border-color: var(--layer-orange); color: var(--layer-orange); }
.dev-params { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: .75rem 0; }
.dev-params th, .dev-params td { text-align: left; padding: .4rem .5rem; border-bottom: var(--pen-1) solid var(--line); vertical-align: top; }
.dev-params code { overflow-wrap: anywhere; }
@media (max-width: 640px) { .dev-params thead { display: none; } .dev-params tr { display: block; padding: .4rem 0; border-bottom: var(--pen-1) solid var(--line); } .dev-params td { display: block; border: 0; padding: .1rem 0; } }
.dev-code { background: var(--sheet-2); border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; overflow-x: auto; font-size: var(--fs-sm); line-height: 1.5; margin: .5rem 0 1rem; max-width: 100%; }
.dev-code code { white-space: pre; }
.dev-tabs > details { border-top: var(--pen-1) solid var(--line); }
.dev-tabs > details > summary { cursor: pointer; padding: .45rem 0; font-weight: 600; }
.dev-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.dev-card { border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--sheet); }
.dev-card h3 { font-size: var(--fs-md); margin: 0 0 .35rem; }
.dev-card p { margin: 0 0 .5rem; color: var(--ink-2); }
.dev-steps { counter-reset: s; list-style: none; padding: 0; }
.dev-steps > li { counter-increment: s; position: relative; padding-left: 2.4rem; margin-bottom: 1.25rem; }
.dev-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border: var(--pen-2) solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }
.dev-console form { display: grid; gap: 1rem; }
.dev-console fieldset { border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: 1rem; }
.dev-console label { display: block; font-weight: 600; margin-bottom: .25rem; }
.dev-console input[type=text], .dev-console select, .dev-console textarea { width: 100%; max-width: 40rem; }
.dev-console .hint { display: block; color: var(--ink-2); font-size: var(--fs-sm); }
.dev-result .dev-status { font-weight: 700; }
.dev-result .is-ok { color: var(--layer-green); }
.dev-result .is-err { color: var(--layer-red); }