/* api-tester.com — no framework, no webfonts: LCP is a ranking factor here. */
:root {
  --bg: #0d1117; --bg-2: #161b22; --bg-3: #1c2128;
  --border: #30363d; --border-2: #21262d;
  --fg: #e6edf3; --fg-2: #9198a1; --fg-3: #6e7681;
  --accent: #2f81f7; --accent-fg: #ffffff;
  --green: #3fb950; --amber: #d29922; --red: #f85149; --purple: #a371f7;
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Dark is the default for everyone. Light is an explicit choice via the header
   toggle (persisted in localStorage), not something the OS decides — the design
   is dark-first and an OS-driven flip to white reads as a different product. */
:root[data-theme="light"] {
  --bg: #ffffff; --bg-2: #f6f8fa; --bg-3: #eef1f4;
  --border: #d1d9e0; --border-2: #e4e8ed;
  --fg: #1f2328; --fg-2: #59636e; --fg-3: #818b98;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--mono); }

/* Content code blocks. Only `pre.out` (the response panel) used to get overflow
   handling, so a long line in a guide's <pre> widened the whole document and
   made the page scroll sideways on mobile. Inline <code> holding a long URL did
   the same. Both are contained here. */
pre { overflow-x: auto; max-width: 100%; }
/* Decoration only for content code blocks — pre.out is the response panel and
   supplies its own chrome. */
pre:not(.out) {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }
code { overflow-wrap: anywhere; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---- header ---- */
.site-header {
  border-bottom: 1px solid var(--border); background: var(--bg-2);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 56px; }
.logo { font-weight: 700; font-size: 16px; color: var(--fg); letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo b { color: var(--accent); }
.nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--fg-2); font-size: 14px; }
.nav a:hover { color: var(--fg); text-decoration: none; }

/* ---- hero ---- */
.hero { padding: 40px 0 24px; }
.hero h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.03em; }
.hero p.lede { font-size: 17px; color: var(--fg-2); margin: 0; max-width: 720px; }

/* ---- the tool ---- */
.tool { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.req-bar { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
select, input, textarea, button { font-family: inherit; font-size: 14px; }
select.method {
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 10px; font-weight: 600; font-family: var(--mono);
  cursor: pointer; min-width: 104px;
}
input.url {
  flex: 1; min-width: 240px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 12px; font-family: var(--mono);
}
input.url:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button.send {
  background: var(--accent); color: var(--accent-fg); border: 0;
  border-radius: var(--radius); padding: 9px 22px; font-weight: 600; cursor: pointer;
}
button.send:hover { filter: brightness(1.1); }
button.send:disabled { opacity: 0.6; cursor: progress; }

/* Scrolls rather than clipping. Five tabs plus a count badge exceed 390px, and
   `.tool` clips with overflow-x:hidden, so the last tab (History) was cut off
   and unreachable on a phone. Every tester page sits near this limit; the one
   with an extra seeded header crossed it first. */
.tabs {
  display: flex; gap: 2px; padding: 0 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 3px; }
.tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tab { flex: 0 0 auto; white-space: nowrap; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fg-2);
  padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tab .count { color: var(--fg-3); font-size: 11px; }
.panel { padding: 12px; display: none; }
.panel[data-active] { display: block; }

textarea.body-input {
  width: 100%; min-height: 150px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; font-family: var(--mono); font-size: 13px; resize: vertical; line-height: 1.5;
}
.kv-row { display: flex; gap: 8px; margin-bottom: 6px; }
.kv-row input {
  /* min-width:0 is load-bearing: without it a flex item refuses to shrink below
     the input's intrinsic width, the row overflows, and the remove button ends
     up off-screen and unreachable on a 390px viewport. */
  flex: 1; min-width: 0;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px; font-family: var(--mono); font-size: 13px;
}
/* Same shrink problem as the inputs above, and harder to spot: `.tool` clips
   with overflow-x:hidden, so an overflowing select is silently cut off rather
   than widening the page. A page-level scrollWidth check cannot see it — the
   control is simply unreachable. */
.kv-row select { flex: 1; min-width: 0; }
.kv-row button { flex: 0 0 auto; }
.kv-row button, .btn-sm {
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 11px; cursor: pointer; font-size: 13px;
}
.kv-row button:hover, .btn-sm:hover { color: var(--fg); border-color: var(--fg-3); }
.hint { color: var(--fg-3); font-size: 12px; margin: 8px 0 0; }

/* ---- response ---- */
.resp { border-top: 1px solid var(--border); background: var(--bg); }
.resp-meta {
  display: flex; gap: 18px; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--border-2); font-size: 13px; flex-wrap: wrap;
}
.status-pill { font-family: var(--mono); font-weight: 700; padding: 2px 9px; border-radius: 20px; font-size: 12px; }
.s-2xx { background: rgba(63,185,80,.15); color: var(--green); }
.s-3xx { background: rgba(163,113,247,.15); color: var(--purple); }
.s-4xx { background: rgba(210,153,34,.15); color: var(--amber); }
.s-5xx, .s-err { background: rgba(248,81,73,.15); color: var(--red); }
.resp-meta .m { color: var(--fg-3); }
.resp-meta .m b { color: var(--fg-2); font-weight: 600; font-family: var(--mono); }
pre.out {
  margin: 0; padding: 14px; overflow: auto; max-height: 460px;
  font-size: 13px; line-height: 1.55; white-space: pre; tab-size: 2;
}
.empty { padding: 44px 20px; text-align: center; color: var(--fg-3); font-size: 14px; }
/* JSON syntax highlight */
.j-key { color: var(--accent); } .j-str { color: var(--green); }
.j-num { color: var(--purple); } .j-bool { color: var(--amber); } .j-null { color: var(--fg-3); }

/* ---- content / SEO ---- */
main section { padding: 40px 0; }
h2 { font-size: 25px; letter-spacing: -0.02em; margin: 0 0 14px; }
h3 { font-size: 18px; margin: 26px 0 8px; }
p { color: var(--fg-2); }
main li { color: var(--fg-2); margin-bottom: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.card {
  border: 1px solid var(--border); border-radius: 8px; padding: 16px;
  background: var(--bg-2); display: block; color: inherit;
}
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h3 { margin: 0 0 6px; font-size: 15px; color: var(--fg); }
.card p { margin: 0; font-size: 13.5px; color: var(--fg-2); }
table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-2); }
th { color: var(--fg); font-weight: 600; background: var(--bg-2); }
td { color: var(--fg-2); }
td code, p code, li code {
  background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; color: var(--fg);
}
details { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: var(--bg-2); }
summary { cursor: pointer; font-weight: 600; color: var(--fg); }
details p { margin: 10px 0 0; }
.breadcrumb { font-size: 13px; color: var(--fg-3); padding: 16px 0 0; }
.breadcrumb a { color: var(--fg-2); }

.site-footer { border-top: 1px solid var(--border); margin-top: 50px; padding: 32px 0; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 26px; }
.footer-grid h4 { font-size: 13px; margin: 0 0 10px; color: var(--fg); text-transform: uppercase; letter-spacing: .05em; }
.footer-grid a { display: block; color: var(--fg-2); font-size: 13.5px; margin-bottom: 6px; }
.copyright { color: var(--fg-3); font-size: 13px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-2); }

@media (max-width: 620px) {
  .hero h1 { font-size: 26px; }
  .nav { display: none; }
  .req-bar { flex-direction: column; }
  button.send { width: 100%; }
}
/* ==========================================================================
   v2 layer — Stitch "Terminal Precision" refinements.
   Appended rather than rewritten so every existing class keeps working and
   the two stylesheets stay diffable. Swapping the <link> is the whole change;
   no page markup is touched, which is what lets this apply to all 24 tool
   pages and 20 tester pages at once.
   ========================================================================== */

:root {
  --bg-4: #10131a;      /* deeper well for response surfaces */
  --accent-dim: #1c3d6b;
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
}
:root[data-theme="light"] { --bg-4: #f0f3f6; --accent-dim: #cfe2ff; --shadow-1: 0 1px 2px rgba(31,35,40,.06); }

/* ---- console: request left, response right on wide screens --------------
   Achieved purely with grid placement over the existing DOM order, so the
   markup (and therefore every page that copies it) is unchanged. Below
   1000px it falls back to the original stacked flow.                       */
@media (min-width: 1000px) {
  /* Rows are declared EXPLICITLY on purpose. With only implicit rows,
     `grid-row: 2 / -1` resolves -1 against the (empty) explicit grid, and the
     request bar gets auto-placed BELOW the response instead of above it. */
  .tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }
  .tool > .req-bar        { grid-column: 1 / 3; grid-row: 1; }
  .tool > [data-tabgroup] { grid-column: 1; grid-row: 2; }
  .tool > .panel          { grid-column: 1; grid-row: 3; align-self: start; }
  .tool > .resp {
    grid-column: 2;
    grid-row: 2 / 4;
    border-top: 0;
    border-left: 1px solid var(--border);
    min-height: 340px;
    background: var(--bg-4);
    display: flex;
    flex-direction: column;
  }
  .tool > .resp .out { flex: 1; max-height: none; }
}


/* ---- provider sidebar -----------------------------------------------------
   Common endpoints / auth guide / reading errors, beside the console on the 10
   provider tester pages. The sidebar is SECOND in source order so that when the
   grid collapses to one column below 1000px it stacks BELOW the console, which
   is the thing people came for. `.tool` keeps its own internal two-column
   split; this grid only decides how much room it gets.                       */
.console-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 1000px) {
  .console-layout {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
    align-items: start;
  }
}
.side-panel {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2);
  padding: 12px 14px; margin: 0 0 14px;
}
.side-panel:last-child { margin-bottom: 0; }
.side-panel h2 {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2);
  margin: 0 0 10px;
}
.side-panel ol, .side-panel ul { margin: 0; padding-left: 18px; }
.side-panel li { color: var(--fg-2); font-size: 13px; line-height: 1.5; margin: 0 0 7px; }
.side-panel li:last-child { margin-bottom: 0; }
.side-panel code { font-size: 12px; overflow-wrap: anywhere; }
.side-note { margin: 10px 0 0; font-size: 12px; color: var(--fg-3); line-height: 1.5; }

/* Each endpoint is a button: clicking it fills the console's URL and method.
   The wiring lives in enhance.js, generated from these data attributes. */
.side-panel ul.ep-list { list-style: none; margin: 0; padding: 0; }
.ep-list li { margin: 0 0 6px; }
.ep-list li:last-child { margin-bottom: 0; }
.ep {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); color: var(--fg-2);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 7px 9px; font-family: inherit; font-size: 13px; line-height: 1.4;
  transition: border-color .12s ease, background .12s ease;
}
.ep:hover, .ep:focus-visible { background: var(--bg-3); border-color: var(--border); }
.ep-sig { display: flex; gap: 7px; align-items: baseline; }
.ep-m {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; color: var(--fg-3);
}
.ep-p {
  min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--fg);
  overflow-wrap: anywhere;
}
.ep-d { display: block; margin-top: 3px; font-size: 12px; color: var(--fg-3); }

/* ---- denser, more scannable tables ---- */
table { font-size: 13.5px; border: 1px solid var(--border); border-radius: 8px; }
th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-2); font-family: var(--mono); font-weight: 600;
}
tbody tr:hover td { background: var(--bg-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---- cards: flatter, tighter, clearer affordance ---- */
.card { transition: border-color .12s ease, background .12s ease; }
.card:hover { background: var(--bg-3); }
.card h3 { font-family: var(--mono); font-size: 14px; letter-spacing: -.01em; }

/* ---- callout, for security notices that must not read as decoration ---- */
.callout {
  border: 1px solid var(--amber); border-left-width: 3px; border-radius: 8px;
  background: rgba(210,153,34,.07); padding: 14px 16px; margin: 16px 0;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout strong { color: var(--fg); }

/* ---- table of contents for long articles ----
   Markup is generated by app.js from the page's own h2 headings. */
.toc {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2);
  padding: 10px 14px; margin: 0 0 26px;
}
/* The global `details` rule adds its own border/background/padding; inside
   .toc that produces a box within a box. Reset it here. */
.toc details { border: 0; background: none; padding: 0; margin: 0; }
.toc summary { cursor: pointer; font-weight: 600; color: var(--fg); font-size: 14px; }
.toc ol { margin: 10px 0 2px; padding-left: 20px; }
.toc li { margin-bottom: 4px; color: var(--fg-2); }
.toc a { color: var(--fg-2); font-size: 13.5px; }
.toc a:hover { color: var(--accent); }
@media (min-width: 1100px) { .toc { position: sticky; top: 72px; z-index: 1; } }

/* ---- affordance for tables that scroll sideways ---- */
.scroll-hint {
  color: var(--fg-3); font-size: 12px; margin: -6px 0 14px;
  font-style: italic;
}

/* ---- copy button on content code blocks ---- */
pre.has-copy { position: relative; }
.copy-code {
  position: absolute; top: 8px; right: 8px;
  background: var(--bg-3); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px 9px; font-size: 11.5px; font-family: var(--mono); cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
pre.has-copy:hover .copy-code, .copy-code:focus { opacity: 1; }
@media (hover: none) { .copy-code { opacity: 1; } }

/* ---- prose measure: long guides were running full width ---- */
main section > p, main section > ul, main section > ol { max-width: 74ch; }

/* ---- status pills: slightly stronger, monospace ---- */
.status-pill { font-family: var(--mono); letter-spacing: .03em; }

/* ---- header polish ---- */
.site-header { backdrop-filter: saturate(1.1) blur(6px); }
.nav a { font-size: 13.5px; }
.nav a:hover { color: var(--fg); }

/* ---- status code class colouring ----
   The class of a status code is the first thing worth knowing, so the digits
   carry it. Applied to the h1, the category cell and related-code cards. */
.c-1 { color: var(--fg-2); }
.c-2 { color: var(--green); }
.c-3 { color: var(--purple); }
.c-4 { color: var(--amber); }
.c-5 { color: var(--red); }
.hero h1 .c-1, .hero h1 .c-2, .hero h1 .c-3, .hero h1 .c-4, .hero h1 .c-5 {
  font-family: var(--mono); letter-spacing: -0.02em;
}
.card h3 .c-1, .card h3 .c-2, .card h3 .c-3, .card h3 .c-4, .card h3 .c-5 {
  font-family: var(--mono);
}

/* `.empty` lives inside pre.out, which sets white-space: pre — so the
   placeholder could not wrap and was clipped once the console column narrowed
   to make room for the provider sidebar. */
.empty { white-space: normal; }

/* With a sidebar taking ~290px, splitting the console again at 1000px leaves
   two ~415px columns — too narrow to read a JSON body in. Inside
   .console-layout the console stays stacked until there is genuinely room. */
/* The sidebar already supplies the second column. Splitting the console again
   inside it gives three dense columns and a ~415px response pane, which is too
   narrow to read a JSON body in — so inside .console-layout the console always
   stacks request above response. */
@media (min-width: 1000px) {
  .console-layout .tool { display: block; }
  .console-layout .tool > .resp { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---- numbered step cards (Stitch "Getting Started" treatment) ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.step {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--bg-2); padding: 16px 18px;
}
.step-n {
  display: block; font-family: var(--mono); font-size: 12px;
  color: var(--fg-3); letter-spacing: .1em; margin-bottom: 6px;
}
.step h3 { margin: 0 0 8px; font-size: 15px; color: var(--fg); }
.step p { margin: 0; font-size: 13.5px; }