:root {
  color-scheme: light;
  --ink: #0a0c0f;
  --muted: #59616c;
  --line: #d9dde3;
  --soft: #f4f5f7;
  --blue: #235ddd;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font:
    15px/1.6 Inter,
    Segoe UI,
    Arial,
    sans-serif;
}
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px;
  background: #fff;
  color: #000;
}
.skip:focus {
  top: 12px;
}
.docs-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 74px;
  padding: 0 max(20px, calc((100vw - 1440px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.brand img {
  display: block;
  width: 260px;
  height: auto;
}
.brand small {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid;
  border-radius: 9px;
}
.docs-header nav,
.docs-footer nav {
  display: flex;
  align-items: center;
  gap: 21px;
  flex-wrap: wrap;
}
.docs-header nav a,
.docs-footer a {
  color: #343941;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}
.docs-header nav .button {
  padding: 9px 14px;
  border-radius: 7px;
  background: #0d1117;
  color: #fff;
}
.docs-header nav a[aria-current="page"] { color: var(--blue); }
.menu {
  display: none;
}
.docs-layout {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px);
  padding: 26px 24px;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #fafafa;
}
.sidebar section {
  margin: 26px 0;
}
.sidebar h2 {
  margin: 0 0 7px;
  color: #878e98;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sidebar a {
  display: block;
  padding: 6px 0;
  color: #303641;
  text-decoration: none;
  font-size: 13px;
}
.sidebar a:hover {
  color: var(--blue);
}
/* Where the reader is, marked in the place they look for it. The header nav
   has had this since the chrome was unified; the sidebar is the navigation
   that stays on screen while they read. */
.sidebar a[aria-current="page"] {
  color: var(--blue);
  font-weight: 650;
}
/* Desktop shows the sidebar itself; the control only exists below 900px. */
.sidebar-toggle {
  display: none;
}
.search-label {
  display: grid;
  gap: 7px;
  color: #656c76;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.search-label input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #101318;
}
.search-results {
  position: absolute;
  z-index: 5;
  width: calc(100% - 48px);
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.search-results a {
  padding: 9px;
  border-bottom: 1px solid #eee;
}
.content {
  min-width: 0;
  padding: 64px clamp(24px, 6vw, 78px) 96px;
}
.hero {
  max-width: 1060px;
}
.eyebrow {
  margin: 0;
  color: var(--blue);
  /* Was 10px. Three sheets declared this one role at three sizes -- 10px here,
     11px in the playground, 12px on the API reference -- and because this
     sheet loads last the smallest of the three won on every page, including
     the two that had asked for something larger. 11px is the playground's
     value and the floor for an all-caps label at this tracking. */
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
}
h1 {
  margin: 14px 0 22px;
  /* Was clamp(44px, 6vw, 72px): measured at 72px on /docs/, /apidocs/ and
     /keys at 1440px wide. A 72px headline with line-height 0.98 is a poster,
     not a page title -- it crowds the line below it and forces short titles to
     wrap. Capped slightly above the article scale, because these are landing
     pages rather than documentation bodies. */
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.055em;
}
h2 {
  letter-spacing: -0.035em;
}
.lead {
  max-width: 760px;
  color: var(--muted);
  font-size: 19px;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.actions a {
  padding: 11px 16px;
  border: 1px solid #bfc5ce;
  border-radius: 7px;
  background: #fff;
  color: #101318;
  text-decoration: none;
  font-weight: 750;
}
.actions a.primary {
  border-color: #101318;
  background: #101318;
  color: #fff;
}
.actions a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.1);
}
.docs-request-map {
  margin: 38px 0 0;
  padding: 15px;
  border: 1px solid #cbd1d9;
  border-radius: 12px;
  background: #f7f9fb;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.07);
}
.docs-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.docs-map-state {
  color: #174b9e;
}
.docs-map-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.docs-map-steps span {
  padding: 12px;
  border: 1px solid #dce1e7;
  border-radius: 8px;
  background: #fff;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}
.docs-map-steps b {
  display: block;
  margin-bottom: 5px;
  color: #98a2b3;
  /* Was `ui-monospace, monospace`. This sheet declares the canonical stack
     in three other places; here, inside a `font:` shorthand, it had two names
     instead of four. Identical where ui-monospace exists, and a generic
     Courier rather than Consolas where it does not -- so the step numbers were
     set in a different face from every other piece of code on the page, on
     exactly the machines nobody tests on. */
  font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.docs-map-steps span.active {
  border-color: var(--blue);
  background: #edf3ff;
  color: #101828;
  transform: translateY(-2px);
}
.docs-map-steps span.active b {
  color: var(--blue);
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 64px 0 94px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.quick-grid > a {
  padding: 28px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--line);
}
.quick-grid > a:last-child {
  border: 0;
}
.quick-grid small,
.product-grid small {
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.quick-grid h2 {
  margin: 12px 0 8px;
  font-size: 21px;
}
.quick-grid p,
.product-grid p,
.section-heading > p {
  color: var(--muted);
}
.quick-grid span {
  font-weight: 750;
}
.doc-section {
  margin: 90px 0;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 30px;
}
.section-heading h2,
.doc-section > h2 {
  margin: 8px 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.03;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.product-grid a {
  min-height: 190px;
  padding: 26px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.product-grid b {
  display: block;
  font-size: 21px;
}
.product-grid p {
  margin-bottom: 0;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table {
  width: 100%;
  min-width: 730px;
  border-collapse: collapse;
}
th,
td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: var(--soft);
  font-size: 12px;
}
.fine {
  color: var(--muted);
  font-size: 12px;
}
.cta {
  margin-top: 90px;
  padding: 40px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  border-radius: 14px;
  background: #10141a;
  color: #fff;
}
.cta h2 {
  margin: 8px 0 0;
  font-size: 34px;
}
.cta .eyebrow {
  color: #8eb1ff;
}
.cta .actions a {
  border-color: #7c8796;
  background: #10141a;
  color: #fff;
}
.cta .actions .primary {
  background: #fff;
  color: #111;
}
.docs-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 35px 40px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.docs-footer p {
  margin: 3px 0;
}
.article {
  max-width: 920px;
}
.article h1 {
  /* Was clamp(42px, 6vw, 70px), which rendered a 70px headline on a 1440px
     viewport. Measured in a browser rather than reasoned about: at that size a
     normal documentation title wrapped onto three lines and pushed the first
     paragraph below the fold. Documentation headings are signposts, not
     covers. */
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.14;
}
.article h2 {
  margin-top: 54px;
  font-size: 30px;
}
.article h3 {
  margin-top: 30px;
}
.article p,
.article li {
  color: #46505e;
}
.article pre {
  padding: 20px;
  border-radius: 9px;
  background: #10151d;
  color: #e8edf5;
  /* `overflow: auto` alone let every code block scroll sideways -- measured at
     109px on desktop and 523px on a 390px viewport, where it also dragged the
     whole PAGE 360px wide. A reader on a phone could not see the end of a JSON
     line or a signature header without scrolling the document.
     `pre-wrap` + `anywhere` wraps long lines while keeping the text selectable
     and copyable verbatim; `overflow-x: auto` stays as the backstop for
     genuinely unbreakable content. */
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  tab-size: 2;
}
.article code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.article :not(pre) > code {
  padding: 2px 5px;
  background: #eef2f8;
  color: #174b9e;
  /* Endpoint paths and identifiers are long and unspaced; without this they
     push their container instead of wrapping inside it. */
  overflow-wrap: anywhere;
}
/* Tables must adapt to a narrow viewport rather than widen the page.
   `display: block; overflow-x: auto` does NOT achieve that -- measured: the
   table still laid out at its 730px content width inside a 390px viewport and
   dragged the document 360px wide with it, because the row boxes size to
   content and the block has nothing to scroll against.
   `table-layout: fixed` with `width: 100%` makes the columns divide the
   container instead, and the cell rules below let long code tokens wrap inside
   their column rather than widening it. No per-table wrapper markup needed, so
   this holds for every table on all three sites. */
/* `.content table` as well as `.article table`: /docs/ is the one page in the
   three sites whose <main> is `class="content"` without `article`, so this
   override -- written for exactly the 730px-inside-390px measurement described
   below -- did not reach it, and its two prose tables still scrolled sideways
   at 768px and 390px. Measured: 730 > 726 at tablet, 730 > 348 at mobile.
   Checked before widening: every table in all three sites is 2 to 4 columns,
   so nothing inside `.content` wants the floor. The four older
   `main.developer-doc` architecture pages are outside `.content` and still
   have it; they are outside this programme's page set and are recorded for A5
   rather than swept in here. */
.article table,
.content table {
  width: 100%;
  max-width: 100%;
  /* The generic `table` rule above sets `min-width: 730px`, which is why a
     two-column documentation table measured exactly 730px inside a 390px
     viewport. That floor exists for wide DATA tables, which are meant to sit
     inside `.table-wrap` and scroll within it -- so it is overridden here for
     prose tables rather than removed, leaving `.table-wrap` behaviour intact
     everywhere else. */
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 18px 0;
}
/* Same reach as the table rule above. `table-layout: fixed` only produces a
   readable narrow table if the cells can wrap, and `overflow-wrap: anywhere`
   below is what lets a long identifier break inside its column instead of
   widening it -- so widening the table selector without this one would have
   given /docs/ a fixed layout with nothing to fall back on. */
.article th,
.article td,
.content th,
.content td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--stroke, rgba(16, 20, 44, 0.12));
  overflow-wrap: anywhere;
}
.article th {
  font-weight: 600;
}
.article .callout {
  margin: 26px 0;
  padding: 18px;
  border: 1px solid #bdcaed;
  border-left: 4px solid var(--blue);
  background: #f6f8ff;
}
.motion-ready .docs-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--reveal-order, 0) * 45ms);
}
.motion-ready .docs-reveal.is-visible { opacity: 1; transform: translateY(0); }
:where(a, button, input):focus-visible { outline: 3px solid rgba(35, 93, 221, .24); outline-offset: 3px; }
.next-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 50px;
}
.next-grid a {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
}
.breadcrumbs {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 12px;
}
.breadcrumbs a {
  color: inherit;
}
@media (max-width: 900px) {
  .docs-header {
    padding: 14px 20px;
  }
  .menu {
    display: block;
    background: #101318;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 9px 12px;
  }
  .docs-header nav {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 68px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
  }
  .docs-header nav.open {
    display: flex;
  }
  .docs-layout {
    grid-template-columns: 1fr;
  }
  /* The sidebar collapses rather than disappearing. `display: none` here
     meant every destination it carries had to be found in the header nav or
     the footer instead, and neither list is complete: on the REST site the
     header carries four of the seven and the footer three. One row, tapped
     once, gives the real sidebar. `relative` rather than `static` so the
     search results panel still positions against the sidebar. */
  .sidebar {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    padding: 0 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-toggle {
    display: block;
    width: 100%;
    padding: 13px 0;
    border: 0;
    background: none;
    color: #303641;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
  }
  .sidebar-toggle::after {
    content: "\25be";
    float: right;
    color: #878e98;
  }
  .sidebar.open .sidebar-toggle::after {
    content: "\25b4";
  }
  .sidebar:not(.open) > :not(.sidebar-toggle) {
    display: none;
  }
  /* The hub's sidebar opens with the search field, which has no margin of
     its own and would otherwise sit flush against the control above it. */
  .sidebar > .search-label {
    margin: 4px 0 10px;
  }
  .sidebar > section:first-of-type {
    margin-top: 6px;
  }
  .sidebar > section:last-of-type {
    margin-bottom: 18px;
  }
  .content {
    padding: 50px 20px 70px;
  }
  .quick-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }
  .quick-grid > a {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .section-heading {
    grid-template-columns: 1fr;
  }
  .docs-map-steps {
    grid-template-columns: 1fr 1fr;
  }
  .cta,
  .docs-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .docs-footer {
    margin: 0 20px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .docs-map-steps span,
  .actions a {
    transition: none;
    transform: none !important;
  }
}


/* ===================================================================== *
 * EVENTIUM DEVELOPER PLATFORM -- SHARED LAYER
 *
 * Everything above this line is the curated portal stylesheet, unchanged,
 * because it already *is* the platform design language: white page,
 * charcoal ink, one restrained blue accent. Everything below extends it to
 * the application surfaces (API reference, playground, keys console) so
 * those stop being separate websites.
 *
 * Load order on an application page is: that page's own functional sheet
 * FIRST, this sheet SECOND. That is deliberate. The token aliases below
 * then win over the per-surface palettes, so the existing functional CSS
 * keeps its layout and picks up the canonical colours and type without
 * being rewritten.
 * ===================================================================== */

:root {
  /* Aliases for the names the application sheets already reference, mapped
     onto the canonical palette. Previously these surfaces each declared
     their own: --blue was #235ddd here, #1f62d6 on the API reference and
     --accent #315ee7 in the playground; page backgrounds were #fff,
     #f4f7fb and #f7f8fa. One palette now, three fewer. */
  --bg: #fff;
  --paper: #fff;
  --paper-muted: var(--soft);
  --text: #343941;
  --line-strong: #bfc5ce;
  --accent: var(--blue);
  /* The accent above was chosen against white, where it measures about 8:1.
     On the Explorer's dark console panel (#10141b) the same blue measures
     3.24:1 at 11px -- below the 4.5 a label that size needs. This is the same
     hue a step lighter, for text on a dark surface only, so unifying the
     palettes does not mean carrying one surface's contrast onto another.
     #7da2ff on #10141b measures about 7.5:1. */
  --accent-on-dark: #7da2ff;
  --blue-dark: #174b9e;
  --blue-soft: #f6f8ff;
  --green: #137a4e;
  --good: #137a4e;
  --red: #b42318;
  --danger: #b42318;
  --amber: #a75a00;
  --code: #10151d;
  --radius: 9px;
  --content: 1180px;
  --reference: 1480px;
}

/* One typography stack across every surface. The application pages had
   loaded Space Grotesk and Inter from Google Fonts while the portal used
   the system stack, so the same words were set in different faces. */
body {
  background: var(--bg);
  color: var(--ink);
  font:
    15px/1.6 Inter,
    Segoe UI,
    Arial,
    sans-serif;
}

/* An application surface is a tool, not an article: no 72px hero headline
   and no 72px of air above the thing the developer came to use.
 *
 * Scoped by what the page is NOT, rather than by a new class, because the
 * application sheets already style the bare `main` element for width and
 * padding -- adding a layout class there would double the measure. The
 * portal's own containers (.content, .page, .doc-shell) keep the editorial
 * scale; anything else is a tool page, including future ones. */
main:not(.content):not(.page):not(.doc-shell) {
  padding-top: 36px;
}
main:not(.content):not(.page):not(.doc-shell) h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
main:not(.content):not(.page):not(.doc-shell) h2 {
  margin: 34px 0 12px;
  font-size: 20px;
}
.app-lead {
  max-width: 760px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 16px;
}

/* Cards, panels and the console surfaces. */
.panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.panel + .panel {
  margin-top: 16px;
}
.panel > h2:first-child,
.panel > h3:first-child {
  margin-top: 0;
}

/* Form controls: the keys console, the playground and any future tool share
   one control set instead of three. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--blue);
}
.button,
button.primary,
a.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid #101318;
  border-radius: 7px;
  background: #101318;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
button.secondary,
a.button.secondary {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}
.button:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status pills: one vocabulary of colour for state across surfaces. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.pill.is-good {
  border-color: #b7e0c9;
  background: #eff9f3;
  color: var(--good);
}
.pill.is-warn {
  border-color: #f0ddb8;
  background: #fdf8ee;
  color: var(--amber);
}
.pill.is-bad {
  border-color: #f0c4c0;
  background: #fdf2f1;
  color: var(--danger);
}

/* Code: one presentation everywhere, matching the portal's article code. */
pre {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--code);
  color: #e8edf5;
  /* Same correction as `.article pre`, applied to the base element so it holds
     on pages that are not articles: /apidocs/ code blocks were measured
     scrolling 52px sideways on desktop and 209px on a 390px viewport. Wrapping
     keeps the text complete and copyable; overflow-x stays as the backstop. */
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  tab-size: 2;
}
pre,
code,
kbd,
samp {
  /* `pre` was absent here, and its own rule above sets no font-family, so a
     <pre> holding raw text rendered in the user agent's generic `monospace`
     while an inline <code> beside it rendered in this stack -- measured on 6
     elements across the REST pages. The rule above says "one presentation
     everywhere"; this is the line that makes that true. */
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
:not(pre) > code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #eef2f8;
  color: var(--blue-dark);
}

/* The contextual rail an application page uses in place of the doc sidebar:
   a compact version of the same component, so the page still reads as a
   section of one product rather than a standalone tool. */
.app-layout {
  max-width: var(--reference);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}
.app-layout > .sidebar {
  height: auto;
  min-height: calc(100vh - 74px);
}
.app-layout > main {
  margin: 0;
  width: auto;
}

@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  main:not(.content):not(.page):not(.doc-shell) {
    padding-top: 26px;
  }
}


/* ECOSYSTEM SWITCHER -- the one control identical on all three destinations.
 *
 * Each site keeps its OWN navigation: a shared design system must not force a
 * shared information architecture. This is how a developer moves between
 * Developers, REST API and MCP without the three sites collapsing into one
 * undifferentiated menu.
 *
 * Specificity is deliberate. The base sheet collapses `.docs-header nav`
 * (0,1,1) behind the hamburger below 900px; the switcher has to survive that,
 * because on a phone it is the primary wayfinding. Every rule here is written
 * as `.docs-header nav.ecosystem` (0,2,1) so it wins. */
.docs-header nav.ecosystem {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
  flex-wrap: nowrap;
}
.docs-header nav.ecosystem a,
.docs-header nav.ecosystem span {
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #4a515c;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.docs-header nav.ecosystem a:hover {
  color: var(--ink);
}
/* The current destination is a <span>, not a link: it used to be a second
   route to the page the brand already points at, which an audit counted as
   one more name for a page that had ten. */
.docs-header nav.ecosystem .is-current {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
  cursor: default;
}
/* The header now carries three children (brand, site nav, switcher) plus the
   mobile menu button; let the site nav take the slack. */
.docs-header > nav#platformNav {
  margin-left: auto;
}

/* The hub is the parent experience, so REST API and MCP are first-class entry
   points in its own navigation rather than foreign links. They are outlined to
   read as destinations you leave for, not as another page of the hub. The two
   specialised sites do NOT reciprocate: they carry only their own navigation,
   and reach each other through the switcher alone. */
.docs-header nav a.destination {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
}
.docs-header nav a.destination:hover {
  border-color: var(--blue);
  color: var(--blue);
}

@media (max-width: 900px) {
  /* Three header children (brand, site nav, switcher) plus the menu button do
     not fit a phone in one row: measured in Chromium at 390px, the header
     pushed the page 285px wide before this. The header wraps, the switcher
     takes its own row, and the 260px wordmark comes down to something a phone
     can carry. Verified at 390px as zero overflow. */
  .docs-header {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
  }
  .brand img {
    width: 168px;
  }
  .docs-header nav.ecosystem {
    position: static;
    display: flex;
    top: auto;
    left: auto;
    right: auto;
    order: 3;
    border-radius: 8px;
  }
  .docs-header nav.ecosystem a,
  .docs-header nav.ecosystem span {
    padding: 5px 9px;
    font-size: 11px;
  }
  .docs-header > nav#platformNav {
    margin-left: 0;
  }
  /* The collapsed site nav is absolutely positioned; keep it clear of the
     switcher row now that the header is two rows tall. */
  .docs-header nav#platformNav {
    top: 118px;
  }
}

@media (max-width: 420px) {
  .brand img {
    width: 138px;
  }
  .brand small {
    display: none;
  }
  .docs-header nav.ecosystem a,
  .docs-header nav.ecosystem span {
    padding: 5px 7px;
    font-size: 10px;
  }
}

/* ACCOUNT CONTROL -- one Eventium identity, shown only when the server says so.
 *
 * Rendered by platform.js from `GET /api/auth/session` on the auth origin. The
 * signed-out state is the default and is what a failed lookup leaves standing,
 * so a network error can never present as signed in. */
.docs-header .account {
  display: flex;
  align-items: center;
  position: relative;
}
.account-signin {
  padding: 8px 14px;
  border-radius: 7px;
  background: #101318;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.account-button {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.account-button:hover {
  border-color: var(--line-strong);
}
.account-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-email {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}
.account-menu[hidden] {
  display: none;
}
.account-menu-head {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu a,
.account-menu button {
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.account-menu a:hover,
.account-menu button:hover {
  background: var(--soft);
}
.account-signout {
  margin-top: 2px;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 0 7px 7px !important;
  color: var(--danger) !important;
}

@media (max-width: 900px) {
  .account-email {
    display: none;
  }
  .account-button {
    max-width: none;
  }
}

/* API EXPLORER MODES -- one destination, two modes.
 *
 * These live here rather than inline on the page because the Explorer sits on
 * top of playground.css, which sets a blanket `button { color:#fff }` for its
 * dark console controls. A class beats an element selector, and this sheet
 * loads last, so the mode labels are legible instead of white-on-white --
 * which is exactly how they first rendered, and only a browser could show it. */
.explorer-modes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.explorer-mode {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #4a515c;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.explorer-mode:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.explorer-mode.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.explorer-mode-note {
  color: var(--muted);
  font-size: 12px;
}
.explorer-panel[hidden] {
  display: none;
}
.explorer-reference-head {
  margin-bottom: 14px;
}
.explorer-reference-head .muted {
  margin: 0 0 6px;
  color: var(--muted);
}
.explorer-reference-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.explorer-reference-frame rapi-doc {
  display: block;
  height: min(1100px, 78vh);
}
.linklike {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 720px) {
  .explorer-mode-note {
    width: 100%;
  }
}

/* API EXPLORER -- SHARED OPERATION SELECTOR AND REFERENCE
 *
 * The selector sits ABOVE the mode tabs because it belongs to both modes: one
 * catalogue, one selected operation. It used to live inside the request
 * builder, which is why Reference (RapiDoc) kept a second catalogue of its own.
 *
 * The route row is styled for light here. It is dark in playground.css because
 * it was part of the dark console, and on this white page it rendered as a dark
 * block whose method badge had no explicit text colour -- the poor-contrast
 * path badge. White on #1f4fc4 measures about 7.5:1. */
.explorer-operation {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.explorer-operation-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.explorer-operation label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}
.explorer-operation .muted {
  color: var(--muted);
  font-weight: 500;
}
.explorer-operation select {
  width: 100%;
  margin-bottom: 12px;
}
.explorer-operation .route-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.explorer-operation .route-row code,
.reference-route code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}
.explorer-operation .method,
.reference-route .method {
  padding: 4px 8px;
  border-radius: 5px;
  background: #1f4fc4;
  color: #fff;
  font: 800 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.03em;
}
.explorer-operation #schemaStatus {
  color: var(--muted);
  font-size: 12px;
}

.reference-doc h3 {
  margin: 26px 0 8px;
  font-size: 15px;
}
.reference-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.reference-summary {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
}
.reference-doc table {
  min-width: 0;
}
.reference-doc .table-wrap {
  margin: 6px 0 2px;
}
.explorer-reference-frame {
  padding: 22px;
}