/* ── SEED analytics API: the developer guide and reference ───────────────
   Self-contained on purpose. styles.css is the dashboard's, and several of its
   rules are about the dashboard's tables in particular (sticky heads, the
   760px card layout), which would reshape every table on this page too. The
   colour VALUES are the dashboard's, copied, so the two pages read as one
   product in both themes.

   Every colour is a custom property, declared once for light and once for
   dark. Type sizes are only ever one of the --t-* steps.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --surface-2:     #f3f4f6;
  --surface-hover: #f7f8fa;
  --border:        #d6dae1;
  --border-strong: #878f9b;

  --text:          #14171c;
  --text-2:        #5a626e;
  --text-3:        #6b7280;

  --accent:        #1f66bd;
  --accent-hover:  #17529c;
  --accent-soft:   #dce9fb;
  --accent-ink:    #ffffff;

  --good:          #147a4c;
  --good-soft:     #e6f4ec;
  --danger:        #b5352b;
  --danger-soft:   #fdeceb;
  --warn:          #7a4e0c;
  --warn-soft:     #fbf0dc;
  --warn-border:   #e2ce9f;

  --code-bg:       #f3f4f6;
  --code-key:      #1f5fae;
  --code-str:      #146140;
  --code-num:      #9a3412;
  --code-lit:      #7c3aad;

  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .05);
  --shadow-lg: 0 10px 40px rgba(16, 20, 28, .12);

  --radius:    12px;
  --radius-sm: 8px;

  --t-hero: 34px;
  --t-lg:   24px;
  --t-h2:   19px;
  --t-body: 15px;
  --t-sm:   13px;
  --t-xs:   11.5px;

  --top-h: 56px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:            #0f1115;
    --surface:       #16181c;
    --surface-2:     #1d2026;
    --surface-hover: #1f232a;
    --border:        #2e333c;
    --border-strong: #626b78;

    --text:          #eef0f3;
    --text-2:        #a3abb8;
    --text-3:        #848d9c;

    --accent:        #3987e5;
    --accent-hover:  #5099f0;
    --accent-soft:   #1a2b45;
    --accent-ink:    #0b0e13;

    --good:          #4cb98a;
    --good-soft:     #142720;
    --danger:        #f07a72;
    --danger-soft:   #2b1a19;
    --warn:          #e0b467;
    --warn-soft:     #241d12;
    --warn-border:   #4d4127;

    --code-bg:       #1b1e24;
    --code-key:      #7fb4f5;
    --code-str:      #7fd1a8;
    --code-num:      #f0a070;
    --code-lit:      #c9a2f2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .55);
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors land below the sticky top bar, not under it. */
  scroll-padding-top: calc(var(--top-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Same guard as the dashboard (CLAUDE.md trap 9): a class that sets
   `display` would otherwise outrank the UA's [hidden] rule. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
code, pre, kbd { font-family: var(--mono); }
:not(pre) > code {
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  padding: 10px 16px;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.top-inner {
  max-width: 1360px; margin: 0 auto;
  height: var(--top-h);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--text); text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand-mark { color: var(--accent); line-height: 0; flex: none; }
.brand-text { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ver {
  flex: none;
  padding: 1px 8px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-xs); font-weight: 700;
}
.top-links { display: flex; gap: 18px; flex: none; font-size: var(--t-sm); font-weight: 500; }
.top-links a { color: var(--text-2); text-decoration: none; }
.top-links a:hover { color: var(--text); }

/* ── Layout ────────────────────────────────────────────────────────────── */

.layout {
  max-width: 1360px; margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 40px;
}

.side {
  position: sticky; top: var(--top-h);
  align-self: start;
  max-height: calc(100vh - var(--top-h));
  overflow-y: auto;
  padding: 24px 4px 32px 0;
  scrollbar-width: thin;
}

.side-search { position: relative; }
.search {
  width: 100%; height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--t-sm);
}
.search:focus-visible { outline-offset: 1px; border-color: var(--accent); }
.search[disabled] { opacity: .6; }
.search-key {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-3); font-size: var(--t-xs); line-height: 1.6;
  pointer-events: none;
}
.q-status { margin-top: 6px; font-size: var(--t-xs); color: var(--text-2); }
.q-status:empty { display: none; }

/* Only on a phone, where the contents fold away under it. */
.side-toggle { display: none; }

.side-head {
  margin: 20px 0 6px;
  font-size: var(--t-xs); font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.side-list, .side-ops { list-style: none; margin: 0; padding: 0; }
.side-list a, .side-ops a, .side-tag {
  display: block;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: var(--t-sm); line-height: 1.4;
  text-decoration: none;
}
.side-list a:hover, .side-ops a:hover, .side-tag:hover { background: var(--surface-hover); color: var(--text); }
.side-list a.on, .side-ops a.on, .side-tag.on { color: var(--accent); background: var(--accent-soft); }
.side-tag { font-weight: 600; color: var(--text); margin-top: 4px; }
.side-ops a {
  display: flex; align-items: baseline; gap: 6px;
  padding-left: 14px;
  font-family: var(--mono); font-size: var(--t-xs);
}
.side-ops .m { flex: none; font-weight: 700; font-size: 10px; color: var(--text-3); width: 30px; }
.side-ops .p { min-width: 0; overflow-wrap: break-word; }
.side-wait { padding: 5px 10px; color: var(--text-3); font-size: var(--t-sm); }

.main { min-width: 0; padding: 32px 0 64px; outline: none; }

/* ── Intro ─────────────────────────────────────────────────────────────── */

.intro h1 { font-size: var(--t-hero); letter-spacing: -.025em; }
.lede { margin-top: 10px; max-width: 70ch; font-size: 17px; color: var(--text-2); }
.facts {
  display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: 12px 16px; min-width: 0; }
.facts dt {
  font-size: var(--t-xs); font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.facts dd { margin: 2px 0 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
/* The base address is read and copied whole, so it is plain monospace rather
   than a chip, and gets the widest cell so it does not break mid-word. */
.facts dd code { white-space: nowrap; }
.facts #base-url { padding: 0; border: 0; background: none; font-size: var(--t-sm); }

/* ── Guide sections ───────────────────────────────────────────────────── */

.guide { margin-top: 12px; }
.doc {
  padding: 32px 0 4px;
  border-bottom: 1px solid var(--border);
  max-width: 820px;
}
.doc:last-child { border-bottom: 0; }
.doc h2 { font-size: var(--t-lg); letter-spacing: -.02em; margin-bottom: 12px; }
.doc h3 { font-size: var(--t-h2); margin: 22px 0 8px; }
.doc > p, .doc > ul, .doc > ol, .doc > .tabs, .doc > .table-wrap, .doc > pre, .doc > .code-wrap { margin-bottom: 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--text-3); }
.steps { counter-reset: none; }
.steps > li { padding-left: 4px; margin-bottom: 10px; }

.callout {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background: var(--surface);
}
.callout--warn { border-left-color: var(--warn-border); background: var(--warn-soft); }
.callout--warn strong { color: var(--warn); }

.wait { color: var(--text-3); font-size: var(--t-sm); padding: 8px 0; }
.fail {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--danger);
}
.fail p + p { margin-top: 6px; }
.fail .fail-retry { position: static; margin-top: 10px; }
.scope-pd { margin-left: 6px; }

/* ── Code ──────────────────────────────────────────────────────────────── */

.code-wrap { position: relative; }
pre.code {
  margin: 0;
  padding: 14px 76px 14px 16px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text);
  tab-size: 2;
}
pre.code code { font-size: inherit; }
.copy {
  position: absolute; top: 8px; right: 8px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--t-xs); font-weight: 600;
  cursor: pointer;
}
.copy:hover { background: var(--surface-hover); }

/* JSON in the examples: keys, strings, numbers, true/false/null. */
.j-key { color: var(--code-key); }
.j-str { color: var(--code-str); }
.j-num { color: var(--code-num); }
.j-lit { color: var(--code-lit); }

.tabs { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--code-bg); }
.tab-list {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--border);
}
.tab-list [role="tab"] {
  height: 34px; padding: 0 12px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
}
.tab-list [role="tab"]:hover { color: var(--text); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs pre.code { border: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
/* One long command: wrapped, so all of it is visible and none of it sits
   under the Copy button. */
pre.code.code-curl { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th, td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
thead th {
  font-size: var(--t-xs); font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
tbody th { font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }
.compare td, .compare th { min-width: 150px; }
.guide table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; }
.nowrap { white-space: nowrap; }
.dim { color: var(--text-2); }

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6;
  white-space: nowrap;
  vertical-align: 1px;
}
.badge code { background: none; border: 0; padding: 0; font-size: 1em; color: var(--text); }
.badge-pd { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.badge-none { color: var(--text-3); }

.method {
  display: inline-block; flex: none;
  min-width: 48px; padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 800; letter-spacing: .03em;
  text-align: center;
  background: var(--accent-soft); color: var(--accent);
}
.method-post { background: var(--good-soft); color: var(--good); }
.method-delete { background: var(--danger-soft); color: var(--danger); }
.method-put, .method-patch { background: var(--warn-soft); color: var(--warn); }

/* ── Reference ─────────────────────────────────────────────────────────── */

.reference { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border-strong); }
.ref-head { font-size: 28px; letter-spacing: -.02em; }
.ref-sub { margin-top: 6px; color: var(--text-2); max-width: 70ch; }

.tag-group { margin-top: 36px; }
.tag-head { font-size: var(--t-lg); letter-spacing: -.02em; }
.tag-desc { margin-top: 4px; color: var(--text-2); max-width: 75ch; }

.ep {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ep-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.ep-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  font-size: 17px;
}
.ep-path { font-family: var(--mono); font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.ep-path .ph { color: var(--accent); }
.ep-anchor {
  margin-left: auto;
  color: var(--text-3); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
}
.ep-anchor:hover { color: var(--accent); }
.ep-summary { margin-top: 6px; font-weight: 600; }
.ep-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ep-body { padding: 16px 20px 20px; }
.ep-body > * + * { margin-top: 16px; }
.ep-desc p + p { margin-top: 8px; }
.ep-desc { color: var(--text); max-width: 80ch; }
.ep h4 {
  font-size: var(--t-xs); font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 22px;
}
.ep h4 + * { margin-top: 8px; }
.ep h4 a { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ep-note { font-size: var(--t-sm); color: var(--text-2); }

.ep-table { border: 1px solid var(--border); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; }
.ep-table td:first-child { width: 34%; }
.ep-table td.f-type { width: 20%; }
.f-name { font-family: var(--mono); font-size: var(--t-sm); font-weight: 650; overflow-wrap: anywhere; }
.f-name .f-parent { color: var(--text-3); font-weight: 500; }
.f-name .badge { font-family: var(--font); margin-left: 4px; }
.f-type { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-2); overflow-wrap: anywhere; }
.f-desc { overflow-wrap: anywhere; }
.f-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.f-tag {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-3);
  padding: 0 6px; border: 1px solid var(--border); border-radius: 4px;
}
.f-tag--req { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.f-extra { margin-top: 4px; font-size: var(--t-xs); color: var(--text-2); }
.f-extra code { font-size: 1em; }
tr.f-personal { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }

.ep-errors { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ep-errors li { font-size: var(--t-sm); }
.ep-errors code { font-weight: 700; }

.ep-example summary {
  cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; color: var(--accent);
}
.ep-example[open] summary { margin-bottom: 8px; }
.ep-example pre.code { max-height: 460px; overflow: auto; }

.no-match { margin-top: 24px; padding: 24px; text-align: center; color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); }

/* While a search is active the guide steps aside, so the matches are the
   first thing below the box rather than ten sections further down. */
body.searching .guide,
body.searching .intro { display: none; }
body.searching .reference { margin-top: 0; padding-top: 24px; border-top: 0; }

.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 48px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--t-sm); color: var(--text-2);
}

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 10px 16px;
  background: var(--text); color: var(--surface);
  border-radius: 20px;
  font-size: var(--t-sm); font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 60;
}

/* ── Narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  .top-inner { padding: 0 16px; }
  .side {
    position: static; max-height: none; overflow: visible;
    padding: 16px 0 0;
  }
  .side-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
  .side-search { grid-column: 1; }
  .q-status { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .side-toggle {
    grid-column: 2; grid-row: 1;
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: var(--t-sm); font-weight: 600;
    cursor: pointer;
  }
  .side-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .side-nav {
    grid-column: 1 / -1;
    display: none;
    padding: 4px 12px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .side.open .side-nav { display: block; }
  .main { padding-top: 20px; }
}

@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --t-hero: 28px; --t-lg: 21px; }
  .top-links { gap: 12px; }
  /* The brand needs the room more than a link the page repeats below. */
  .top-links .top-spec { display: none; }
  .lede { font-size: var(--t-body); }
  pre.code { padding: 44px 14px 14px; font-size: 12.5px; }
  .copy { top: 8px; right: 8px; }
  .ep-head { padding: 14px 14px 12px; }
  .ep-body { padding: 12px 14px 16px; }
  .ep-title { font-size: var(--t-body); }
  .ep-anchor { display: none; }
  .ref-head { font-size: var(--t-lg); }

  /* Three columns do not fit in 360px of card, so each row stacks: the name
     and its type on one line, the description underneath. */
  .stack, .stack tbody, .stack tr, .stack td, .stack tbody th { display: block; width: auto !important; }
  .stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .stack tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .stack tbody tr:last-child { border-bottom: 0; }
  .stack td, .stack tbody th { padding: 0; border: 0; }
  .stack td + td { margin-top: 3px; }
  .stack td[data-label]::before {
    content: attr(data-label) ': ';
    font-size: var(--t-xs); font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .compare td, .compare th { min-width: 0; }
  .toast { left: 12px; right: 12px; bottom: 16px; transform: none; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}