/*
  Stylesheet of the API guide (developers.html, developers-en.html), loaded after legal.css - the shared look of the
  public pages - and adding only what an API page needs: code, endpoint headings, the request path, the verdict dots
  and the DEC-02 placeholders. Colours are constants/colors.ts tokens; the three verdict colours mark the three
  display_band values in the "how to read" table and nothing else. No web fonts, no scripts.
*/
:root {
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "D2Coding", Consolas, "Liberation Mono", monospace;
  --real: #10B981;
  --uncertain: #F59E0B;
  --ai: #EF4444;
}
code, pre { font-family: var(--mono); }
code { font-size: 0.88em; }
:not(pre) > code { background: var(--surface2); padding: 0.08em 0.36em; border-radius: 4px; word-break: normal; }
/* code keeps its own line breaks and scrolls inside its box (each <pre> is focusable, so the keyboard can scroll it):
   wrapping a Python line restarted it at column 0 and lost the indentation on a phone */
pre { margin: 8px 0 24px; padding: 16px 18px; background: var(--surface2); border-radius: 8px; max-width: 100%;
      font-size: 0.84rem; line-height: 1.65; white-space: pre; overflow-x: auto; word-break: normal; overflow-wrap: normal; }
pre code { font-size: inherit; }
.lang { margin: 20px 0 0; color: var(--muted); font-size: 0.86rem; }
.nw, .meta code { white-space: nowrap; }   /* "A-EYE" never breaks at its hyphen, the server address never mid-way */

/* endpoint headings: method as a small outlined tag, path in the code face */
.ep { font-family: var(--mono); letter-spacing: 0; }
.verb { display: inline-block; font-size: 0.62em; font-weight: 600; vertical-align: 0.18em; margin-right: 0.5em;
        padding: 0.05em 0.5em; border: 1px solid var(--border-strong); border-radius: 4px; }

/* the path one request takes: each check, and the status that stops a request there */
.gates { list-style: none; margin: 48px 0 64px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.gates li { position: relative; padding: 30px 20px 0 0; }
.gates li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; border-top: 2px solid var(--secondary); }
.gates li:nth-child(2)::before { border-image: linear-gradient(90deg, var(--secondary), var(--primary)) 1; }
.gates li:nth-child(n+3)::before { border-top-color: var(--primary); }
.gates li:last-child::before { right: auto; width: 16px; }
.gates li::after { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
                   background: var(--bg); border: 2px solid var(--secondary); }
.gates li:nth-child(n+3)::after { border-color: var(--primary); }
.gates li:last-child::after { background: var(--primary); border-color: var(--primary); }
.gates p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
/* step names are paragraphs, not headings: the path sits before <main>, ahead of the page's own h2s */
.gates .step-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--fg); }
.gates .exit { margin-top: 10px; color: var(--fg); font-size: 0.84rem; }
.gates .exit code { background: none; padding: 0; font-weight: 600; }

/* the three answers: the verdict colours appear here and nowhere else on the page */
.dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; margin-right: 0.45em;
       vertical-align: 0.06em; }
.dot.real { background: var(--real); }
.dot.uncertain { background: var(--uncertain); }
.dot.ai { background: var(--ai); }

.fields tbody th { width: 30%; }
.fields code { white-space: nowrap; overflow-wrap: normal; }   /* field names and values are short: never split one */
.fields tbody th code, .errors tbody th code { background: none; padding: 0; font-weight: 600; }
.errors tbody th { width: 4.2em; }
.errors td code { word-break: normal; }

/* the contents list: in the sidebar on a wide screen; on a phone it moves above the request path (toc-top), which
   would otherwise push it more than a screen down */
.toc-top { display: none; }

/* owner decisions not made yet (DEV_PLAN DEC-02): visible on purpose, so a draft cannot pass for the real page */
.tbd { border: 1px dashed var(--border-strong); border-radius: 4px; padding: 0.05em 0.4em; color: var(--muted); }

@media (max-width: 860px) {
  .gates { grid-template-columns: 1fr; margin: 36px 0 48px; }
  .gates li { padding: 0 0 26px 34px; }
  .gates li:last-child { padding-bottom: 0; }
  .gates li::before { top: 8px; bottom: -8px; left: 7px; right: auto; width: 0; border-top: 0;
                      border-left: 2px solid var(--secondary); border-image: none; }
  .gates li:nth-child(2)::before { border-image: linear-gradient(180deg, var(--secondary), var(--primary)) 1; }
  .gates li:nth-child(n+3)::before { border-left-color: var(--primary); }
  .gates li:last-child::before { display: none; }
  .gates li::after { top: 4px; }
  .fields tbody th, .errors tbody th { width: auto; }
  pre { padding: 14px; font-size: 0.8rem; }
  .toc-top { display: block; margin: 28px 0 0; }
  .toc-top ol { display: flex; flex-wrap: wrap; gap: 2px 18px; border-left: 0; }
  .toc-top a { padding: 4px 0; margin-left: 0; border-left: 0; }
  .layout > .toc { display: none; }
}
/* the server address stays on one line: on the narrowest phones it is set a little smaller to fit the text column */
@media (max-width: 340px) {
  .meta code { font-size: 0.8em; }
}