/* ======================================================================
 * site.css: the BeMap API documentation
 *
 * One stylesheet, no framework, no build step: what is written here is what
 * ships. Every colour is a token; the dark palette redefines the tokens
 * only, under `prefers-color-scheme` and again under `[data-theme]` so an
 * explicit choice wins either way. On screen, code is always on a dark
 * ground; on paper, dark on white.
 *
 * Every text colour reads at 4.5:1 or better on the grounds it is drawn on,
 * in both palettes, the tinted pills and badges included (a pill tints its
 * ground with its own colour, so the pair is computed, not guessed).
 * tests/ui-layout.js measures each pair on the built pages, in a browser,
 * in both palettes. A status or method colour is therefore darker
 * in the light palette than the bright one the dark palette uses as text,
 * and a solid method badge takes `--method-ink` rather than white.
 * ====================================================================== */

:root {
  color-scheme: light;
  --accent: #1d6bff;
  --accent-2: #19b6e8;
  --accent-ink: #1552c7;
  --accent-wash: #eaf1ff;
  /* The bright gradient is decoration (a card's top edge). A label sits on
     the deeper one: white reads at 5.8:1 at its lighter end. */
  --grad: linear-gradient(135deg, #1d6bff 0%, #19b6e8 100%);
  --grad-button: linear-gradient(135deg, #1759e0 0%, #0c6aa3 100%);

  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --bg-raised: #ffffff;
  --bg-hover: #f1f4f9;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #5b6b82;
  --line: #e3e8ef;
  --line-2: #edf1f6;

  --code-bg: #0b1324;
  --code-bg-2: #111b31;
  --code-ink: #dbe4f3;
  --code-line: #1f2b45;

  --ok: #046c4e;
  --warn: #9a4508;
  --danger: #b91c1c;
  --preprod: #7c3aed;
  --get: #046c4e;
  --post: #1552c7;
  --put: #9a4508;
  --delete: #b91c1c;
  --method-ink: #ffffff;

  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --topbar: 60px;
  --side: 276px;
  --panel: 470px;
  --toc: 240px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #5b93ff;
    --accent-2: #38c9f3;
    --accent-ink: #8db4ff;
    --accent-wash: #13213d;
    --bg: #0a0f1c;
    --bg-soft: #0e1526;
    --bg-raised: #111a2e;
    --bg-hover: #152038;
    --ink: #e6ebf5;
    --ink-2: #b7c2d6;
    --ink-3: #8390a8;
    --line: #1e2a42;
    --line-2: #172238;
    --code-bg: #070c18;
    --code-bg-2: #0c1426;
    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    --preprod: #a78bfa;
    --get: #34d399;
    --post: #6ea1ff;
    --put: #f59e0b;
    --delete: #f87171;
    --method-ink: #0a0f1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #5b93ff;
  --accent-2: #38c9f3;
  --accent-ink: #8db4ff;
  --accent-wash: #13213d;
  --bg: #0a0f1c;
  --bg-soft: #0e1526;
  --bg-raised: #111a2e;
  --bg-hover: #152038;
  --ink: #e6ebf5;
  --ink-2: #b7c2d6;
  --ink-3: #8390a8;
  --line: #1e2a42;
  --line-2: #172238;
  --code-bg: #070c18;
  --code-bg-2: #0c1426;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --preprod: #a78bfa;
  --get: #34d399;
  --post: #6ea1ff;
  --put: #f59e0b;
  --delete: #f87171;
  --method-ink: #0a0f1c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
/* A component's own `display` would otherwise beat the attribute. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 16px); }
body {
  margin: 0;
  font: 15px/1.65 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); }
:not(pre) > code {
  font-size: .86em;
  padding: .12em .38em;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
  color: var(--ink);
  word-break: break-word;
}
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.muted { color: var(--ink-3); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* A box that fills a clipping parent draws its ring inside itself: a code
   block fills its card (overflow: hidden, for the corners), an operation row
   its list. Outside, the parent cut the ring to a line or less. */
pre:focus-visible, .op-row:focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar);
  display: flex; align-items: center; gap: 28px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* BeNomad's logo, as benomad.com shows it (site/assets/benomad-logo*.svg,
   copied from its public/assets/), then the product after a divider. The
   white logo replaces it in the dark palette. */
.brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 22px; width: auto; }
.brand-logo-dark { display: none; }
.brand-product { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line); line-height: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: block; }
}
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }
.brand-name { font-size: 17px; }
.brand-sub {
  font-size: 12px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-wash); padding: 2px 8px; border-radius: 999px;
}
.topnav { display: flex; gap: 4px; }
.topnav a {
  color: var(--ink-2); font-weight: 500; font-size: 14px;
  padding: 7px 12px; border-radius: 8px;
}
.topnav a:hover { background: var(--bg-hover); text-decoration: none; color: var(--ink); }
/* The current section: `page` on its own page, `true` on the pages under it. */
.topnav a[aria-current] { color: var(--ink); background: var(--bg-hover); }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search-open {
  display: flex; align-items: center; gap: 8px; min-width: 220px;
  font: 500 13px var(--sans); color: var(--ink-3);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 10px; cursor: pointer;
}
.search-open span { flex: 1; text-align: left; }
.search-open:hover { border-color: var(--accent); color: var(--ink-2); }
kbd {
  font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-3);
}
.version-pill {
  font-size: 12px; font-weight: 600; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
/* The sign-in: a pill as small as the release beside it, and the panel it
   opens under the top bar. Signed in, it names the account and carries a
   dot, so a phone that shows the key alone still says so. */
.signin { position: relative; }
.signin-open {
  position: relative; display: flex; align-items: center; gap: 6px; max-width: 190px;
  font: 600 12px var(--sans); color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px 4px 8px; cursor: pointer; white-space: nowrap;
}
.signin-open .icon { width: 14px; height: 14px; }
.signin-open:hover { border-color: var(--accent); color: var(--ink); }
.signin-label { overflow: hidden; text-overflow: ellipsis; }
.signin-open.signed-in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.signin-open.signed-in::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--bg);
}
.signin-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 300px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised);
  box-shadow: var(--shadow), 0 18px 40px -18px rgba(15, 23, 42, .35);
}
.signin-title { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.signin-form { display: grid; gap: 10px; }
.signin-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.signin-form input, .signin-form select { font: 13px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.signin-done p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); }
.signin-status { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.signin-status:empty { display: none; }
.signin-status.bad { color: var(--danger); }
.signin-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.theme-toggle, .nav-toggle {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover, .nav-toggle:hover { background: var(--bg-hover); }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}
.nav-toggle { display: none; }

/* ---------------------------------------------------------------- layout */

.layout { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.layout.no-side { grid-template-columns: minmax(0, 1fr); }
/* The changelog: no menu, a table of contents. Wherever the panel is
   hidden (1180 px and below) its column goes too, or it stays empty. */
.layout.no-side.has-panel { grid-template-columns: minmax(0, 1fr) var(--toc); }
.layout.has-side.has-panel { grid-template-columns: var(--side) minmax(0, 1fr) var(--toc); }
.page-op .layout.has-side.has-panel { grid-template-columns: var(--side) minmax(0, 1fr) var(--panel); }

.sidebar {
  position: sticky; top: var(--topbar); align-self: start;
  height: calc(100vh - var(--topbar)); overflow-y: auto;
  padding: 20px 12px 40px 16px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  scrollbar-width: thin;
}
.content { min-width: 0; padding: 36px 48px 80px; }
.page-home .content { padding: 0; }
/* The panel has no scroll of its own: it sticks under the top bar, and one
   taller than the window moves with the page until its foot or its top is in
   view (site.js sets its `top`). A code block keeps its own height limit. */
.panel {
  position: sticky; top: var(--topbar); align-self: start;
  padding: 28px 24px 40px 8px;
}
.page-op .panel { padding: 24px 24px 40px 0; }
.panel-inner { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------------------------------------ side nav */

/* One level of groups, flat entries in them: a label that wraps rather than
   being cut, then a muted version tag, then the method, aligned in one column. */
.side-sections { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.nav-top, .nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-top { margin-bottom: 6px; }
.nav-group { border-top: 1px solid var(--line-2); padding: 4px 0; }
.nav-group summary {
  list-style: none; cursor: pointer;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); padding: 9px 8px 7px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-group summary:hover { color: var(--ink); }
.nav-group summary::-webkit-details-marker, .nav-fold summary::-webkit-details-marker { display: none; }
.nav-group summary::after, .nav-fold summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 5px; flex: none; }
.nav-group[open] > summary::after, .nav-fold[open] > summary::after { transform: rotate(45deg); }
.nav-group ul { margin: 0 0 6px; }
.nav-top a, .nav-group a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 8px 6px 10px; border-radius: 7px; color: var(--ink-2); line-height: 1.4;
}
.nav-top a:hover, .nav-group a:hover { background: var(--bg-hover); color: var(--ink); text-decoration: none; }
.nav-top a[aria-current="page"], .nav-group a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.nav-label { flex: 1; min-width: 0; }
.nav-tag { flex: none; font: 500 10.5px var(--mono); color: var(--ink-3); }
.nav-method { flex: none; min-width: 36px; padding: 1px 0; border-radius: 4px; font: 700 9.5px var(--mono); letter-spacing: .03em; text-align: center; background: color-mix(in srgb, currentColor 11%, transparent); }
.nav-get { color: var(--get); } .nav-post { color: var(--post); } .nav-put { color: var(--put); } .nav-delete { color: var(--delete); }
.nav-badge { flex: none; font-size: 10px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
/* The Guides menu has a level above its groups: Tutorials, Maps, Reference,
   Service pages, each a heading over its groups, whose labels then read as
   entries (Routing, BeNomad Tiles) rather than as headings of their own. */
.nav-section { border-top: 1px solid var(--line-2); padding: 4px 0 6px; }
.nav-heading { margin: 0; padding: 9px 8px 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.nav-section .nav-group { border-top: 0; padding: 0; }
.nav-section .nav-group summary { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); padding: 6px 8px 6px 10px; border-radius: 7px; }
.nav-section .nav-group summary:hover { background: var(--bg-hover); color: var(--ink); }
.nav-section .nav-group ul { margin: 0 0 4px 10px; padding-left: 6px; border-left: 1px solid var(--line); }
.nav-section .nav-top { margin: 0; }
.nav-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 10px; border-radius: 7px; color: var(--ink-3); font-size: 12.5px; }
.nav-fold summary:hover { background: var(--bg-hover); color: var(--ink); }
.nav-fold ul { margin: 2px 0 0 10px !important; padding-left: 6px !important; border-left: 1px solid var(--line); }
.nav-fold a { color: var(--ink-3); }
.op-related { margin: -4px 0 18px; font-size: 13.5px; color: var(--ink-3); }

/* ------------------------------------------------------------ typography */

.doc { max-width: 800px; }
.doc.wide { max-width: 1040px; }
.doc.op { max-width: 860px; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.doc h1 { font-size: 32px; margin: 0 0 .5rem; font-weight: 750; }
.doc h2 { font-size: 21px; margin: 2.6rem 0 .8rem; padding-top: .4rem; font-weight: 700; }
.doc h3 { font-size: 16.5px; margin: 1.8rem 0 .5rem; font-weight: 650; }
.doc h4 { font-size: 15px; margin: 1.4rem 0 .4rem; }
/* BeMap's WMS pages put a whole parameter description in an h5. */
.doc h5, .doc h6 { font-size: 14.5px; font-weight: 400; line-height: 1.65; letter-spacing: 0; color: var(--ink-2); margin: 1.6rem 0 .3rem; }
/* BeMap's tutorials title a section with a field or an option name
   (chargingStationDeprecatedConnector:), one word wider than a 320 px
   screen: it breaks rather than push the page sideways. */
.doc :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }
.doc h5 strong, .doc h6 strong { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.doc p, .doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li + li { margin-top: .25rem; }
/* Every heading carries one, so every heading reveals it, and a keyboard
   reader sees the one it stands on. */
.anchor { margin-left: .4rem; color: var(--ink-3); opacity: 0; font-weight: 400; }
:is(h1, h2, h3, h4, h5, h6):hover .anchor, .anchor:focus-visible { opacity: 1; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .6rem; }
.lede { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.6rem; max-width: 70ch; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--accent-ink); }
blockquote {
  margin: 1.2rem 0; padding: .8rem 1.1rem;
  border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 8px 8px 0;
}
blockquote p { margin: .3rem 0; color: var(--ink-2); }

.table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc :not(.table-wrap) > table { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0 1.4rem; }
.doc th { text-align: left; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-3); background: var(--bg-soft); font-weight: 600; }
.doc th, .doc td { padding: 9px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ callouts */

.callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; margin: 1.2rem 0; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-soft); font-size: 14px; color: var(--ink-2);
}
.callout .icon { margin-top: 2px; color: var(--accent); }
.callout ul { margin: .4rem 0 0; }
.callout-key { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-wash); }
.callout-new { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--bg)); }
.callout-new .icon { color: var(--ok); }
.callout-ops a.op-link { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------ badges */

/* White on the deep light fills, near-black on the bright dark ones. */
.method {
  display: inline-block; font: 700 11px var(--mono); letter-spacing: .03em;
  padding: 3px 7px; border-radius: 6px; color: var(--method-ink); background: var(--post);
}
.method-get { background: var(--get); } .method-post { background: var(--post); }
.method-put, .method-patch { background: var(--put); } .method-delete { background: var(--delete); }
.badge {
  display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap;
}
.badge-required { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.badge-deprecated { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.badge-preprod { color: var(--preprod); border-color: color-mix(in srgb, var(--preprod) 40%, transparent); background: color-mix(in srgb, var(--preprod) 8%, transparent); }
.badge-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); vertical-align: middle; }

/* ------------------------------------------------------------ operation */

.op-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.op-head h1 { margin-bottom: .4rem; }
.endpoint {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: .6rem 0 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.endpoint-path { flex: 1; background: none !important; border: 0 !important; font-size: 14px !important; padding: 0 !important; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.op-desc p { font-size: 15.5px; }

.op-list { list-style: none; padding: 0; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.op-list li + li { margin: 0; border-top: 1px solid var(--line-2); }
.op-row { display: grid; grid-template-columns: 62px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; color: var(--ink-2); }
.op-row:hover { background: var(--bg-hover); text-decoration: none; }
.op-row .method { justify-self: start; }
.op-path { font: 13px var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-title { font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-block { margin-bottom: 1.4rem; }
.domain-block h2 a { color: var(--ink); }
.link-list { padding-left: 1.1rem; }

.status-list { list-style: none; padding: 0; }
.status-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.status { font: 700 12px var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink); }

/* ---------------------------------------------------------- field tree */

.fields { list-style: none; margin: .4rem 0 1rem; padding: 0; border-top: 1px solid var(--line-2); }
.field { padding: 13px 0 12px; border-bottom: 1px solid var(--line-2); margin: 0 !important; }
.field-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-name { font-size: 13.5px !important; font-weight: 650; background: none !important; border: 0 !important; padding: 0 !important; color: var(--ink) !important; }
.field-type { font: 12.5px var(--mono); color: var(--ink-3); }
.field-in { font-size: 11.5px; color: var(--ink-3); }
.field-desc { margin-top: 4px; font-size: 14px; }
/* A type name deep in the tree, or an address BeMap wrote as text, has no
   break opportunity: at 320 px it pushed the page sideways. */
.field-desc, .field-type, details.children > summary { overflow-wrap: anywhere; }
details.children > summary { max-width: 100%; }
.field-desc p { margin: .3rem 0; }
.field-alias, .field-example { font-size: 13px; color: var(--ink-3); margin: .3rem 0; }
.tree-note { font-size: 13px; color: var(--ink-3); margin: .5rem 0; }
details.children, details.enum { margin-top: 8px; }
details.children > summary, details.enum > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}
details.children > summary::-webkit-details-marker, details.enum > summary::-webkit-details-marker { display: none; }
details.children > summary::before, details.enum > summary::before { content: "+"; font-family: var(--mono); color: var(--accent); }
details[open].children > summary::before, details[open].enum > summary::before { content: "\2212"; }
details.children > summary:hover, details.enum > summary:hover { color: var(--ink); border-color: var(--accent); }
details.children > .fields { margin: 8px 0 0 6px; padding-left: 16px; border-left: 2px solid var(--line); border-top: 0; }
details.children > .fields > .field:last-child { border-bottom: 0; }
.response-tree > summary { font-size: 13px; }
/* A meaning may hold no break opportunity (attributeCode's "0=10;1=20;..."):
   it breaks anywhere rather than widen the table under the panel. */
.enum-table { display: table !important; border: 0 !important; margin: 8px 0 0 !important; font-size: 13.5px !important; }
.enum-table td { padding: 6px 12px 6px 0 !important; border-bottom: 1px solid var(--line-2) !important; overflow-wrap: anywhere; }
.enum-table td:first-child { white-space: nowrap; width: 1%; }
.enum-table code { font-weight: 600; }

/* ---------------------------------------------------------- code cards */

.code-card { border-radius: 12px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-line); box-shadow: var(--shadow); }
.doc .code-card { margin: 1.1rem 0 1.4rem; }
.code-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; background: var(--code-bg-2); border-bottom: 1px solid var(--code-line); min-height: 42px; }
.code-title { font-size: 12px; font-weight: 650; color: #93a3c0; letter-spacing: .02em; white-space: nowrap; }
/* The tabs wrap rather than scroll: a row that scrolled hid PHP and C# on a
   phone and at 1200 to 1320 px with no sign that they were there, and a
   remembered language could be selected out of sight. Every tab stays in
   view, and a scrolling row no longer cuts a tab's focus ring. */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.tab {
  font: 600 12px var(--sans); color: #8a9ab7; background: none; border: 0;
  padding: 5px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: #e7eefc; background: rgba(255, 255, 255, .05); }
.tab[aria-selected="true"] { color: #fff; background: rgba(91, 147, 255, .18); }
.copy {
  margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: 1px solid transparent; color: #8a9ab7; cursor: pointer;
}
.copy:hover { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
.copy.done { color: #34d399; }
/* The clipboard refused: the code is selected instead, for Ctrl+C. */
.copy.select { color: #fbbf24; }
.copy-path { color: var(--ink-3); }
.copy-path:hover { color: var(--ink); background: var(--bg-hover); border-color: var(--line); }
/* Try it's answer is a code block too: the drawer sits outside .doc and the
   cards, and without this its highlighting, made for the dark ground, fell
   on the drawer's white, and a long line widened the whole drawer. */
.code-card pre, .doc pre, .try-result pre {
  margin: 0; padding: 14px 16px; overflow: auto; max-height: 560px;
  font-size: 12.8px; line-height: 1.6; color: var(--code-ink); background: var(--code-bg);
  tab-size: 2; scrollbar-width: thin;
}
.doc > pre, .doc li pre, .doc .guide-schema + pre { border-radius: 12px; border: 1px solid var(--code-line); margin: 1rem 0 1.3rem; }
.code-note { font-size: 12.5px; color: #8a9ab7; margin: 0; padding: 8px 16px 10px; background: var(--code-bg); border-top: 1px solid var(--code-line); }
.panel .code-note { color: #8a9ab7; }
.page-op .panel > .panel-inner > .code-note { background: none; border: 0; color: var(--ink-3); padding: 0 4px; }
.tok-k { color: #c792ea; } .tok-s { color: #a5e3a0; } .tok-n { color: #f7b267; } .tok-c { color: #7f8db0; font-style: italic; }
.tok-p { color: #7fd1ff; } .tok-b { color: #ff9b9b; } .tok-f { color: #82aaff; }

.variant-pick { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.variant-pick select, .try-form select, .try-form input, .try-form textarea {
  font: 13px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.variant-pick select { flex: 1; }

/* -------------------------------------------------------------- buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px var(--sans); padding: 10px 16px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.button:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.button.primary { background: var(--grad-button); color: #fff; border-color: transparent; }
.button.primary:hover { filter: brightness(1.06); }
.try-open { width: 100%; }

/* ---------------------------------------------------------------- home */

.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 72px max(40px, calc((100vw - 1240px) / 2)) 64px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 60%),
    radial-gradient(700px 380px at 5% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
}
.hero > * { position: relative; }
.hero h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; font-weight: 780; }
.hero .lede { font-size: 18.5px; max-width: 58ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-meta { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.hero-code .code-card { box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .55); }
.hero-code pre { max-height: 360px; }

.band { padding: 56px max(40px, calc((100vw - 1240px) / 2)); }
.band + .band { border-top: 1px solid var(--line-2); }
.band-title { font-size: 26px; margin: 0 0 22px; letter-spacing: -.02em; }
.band.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--bg-soft); }
.band.split p { color: var(--ink-2); max-width: 56ch; }
.lang-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lang-chip { font: 600 13px var(--mono); padding: 6px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card-grid.compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--ink-2); transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.card-grid.compact .card { padding: 12px 14px; border-radius: 10px; }
a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-wash); color: var(--accent); }
.card-icon .icon { width: 22px; height: 22px; }
.card-title { font-weight: 700; color: var(--ink); font-size: 15.5px; }
.card-grid.compact .card-title { font-weight: 600; font-size: 14px; }
.card-text { font-size: 14px; line-height: 1.55; }
.card-meta { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.card-meta .icon { width: 15px; height: 15px; }
.eco .card-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent)); }

/* ------------------------------------------------------------------ toc */

.toc { font-size: 13px; }
.toc-title { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
/* A heading may be one long token (OPTIMIZED_ROUTE_FOR_CHARGING_STATION:):
   it breaks in the column rather than scroll the page. */
.toc li a { display: block; padding: 4px 0 4px 12px; color: var(--ink-3); margin-left: -1px; border-left: 2px solid transparent; overflow-wrap: anywhere; }
.toc li.toc-3 a { padding-left: 24px; }
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.active { color: var(--accent-ink); border-left-color: var(--accent); }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 3rem; }
.pager a { flex: 1; display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; }
.pager a span { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager-next { text-align: right; }

.release { border-top: 1px solid var(--line-2); }
.release-date { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 6px; }

/* --------------------------------------------------------------- search */

.search-modal { position: fixed; inset: 0; z-index: 80; background: rgba(8, 12, 24, .45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.search-modal[hidden] { display: none; }
.search-box { width: min(680px, calc(100vw - 24px)); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.search-field input { flex: 1; border: 0; outline: 0; background: none; font: 16px var(--sans); color: var(--ink); }
.search-results { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.search-results li a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 9px; color: var(--ink); }
.search-results li a:hover, .search-results li.active a { background: var(--accent-wash); text-decoration: none; }
.sr-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.sr-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.sr-sub { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { margin: 0; padding: 16px; font-size: 13.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- try it */

.try-drawer { position: fixed; inset: 0; z-index: 90; background: rgba(8, 12, 24, .45); display: flex; justify-content: flex-end; }
.try-drawer[hidden] { display: none; }
.try-inner { width: min(560px, 100vw); height: 100%; overflow-y: auto; background: var(--bg-raised); border-left: 1px solid var(--line); padding: 18px 22px 40px; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .5); }
.try-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 17px; }
.try-close { font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer; }
.try-form { display: flex; flex-direction: column; gap: 12px; }
.try-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.try-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.try-form textarea { font: 12.5px/1.55 var(--mono); min-height: 220px; resize: vertical; }
.try-note { font-size: 12.5px; color: var(--ink-3); margin: 0; }
/* An operation nothing was captured for sends the specification's shape:
   said beside the body, before the reader sends placeholders. */
.try-shape { margin: 0; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--warn) 7%, var(--bg-raised)); }
.try-query { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.try-result { margin-top: 18px; }
.try-status { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.try-status .status.ok { color: var(--ok); } .try-status .status.bad { color: var(--danger); }
.try-result pre { border: 1px solid var(--code-line); border-radius: 12px; max-height: 60vh; }
/* An image answer (a brand logo, a vehicle picture) is shown as one. */
.try-image { margin: 0; }
.try-image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 1px solid var(--line); background: var(--bg-soft); }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px max(24px, calc((100vw - 1240px) / 2)); font-size: 13px; color: var(--ink-3); }
.foot-inner nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-inner a { color: var(--ink-3); }
.foot-inner a:hover { color: var(--ink); }

/* ------------------------------------------------------------ products */

.band-lede { margin: -12px 0 22px; color: var(--ink-2); max-width: 70ch; }
.band-spotlight { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)) 0%, var(--bg) 100%); }
.spot-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.spot-card { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.spot-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.card-kicker { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink); }
.card-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.card-live .icon { width: 12px; height: 12px; }
.use-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.use-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
.use-card .card-icon { grid-row: span 2; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line-2); color: var(--ink-2); }
.badge-star { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); vertical-align: middle; }
.product-block { margin: 1.2rem 0 2rem; }
.product-block h3 { margin-top: 1.4rem; }
.product-block h2 a, .product-block h3 a { color: var(--ink); }
.callout-live { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--bg)); }
.callout-live .icon { color: var(--ok); }
.panel-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 2px 2px 0; }
.page-product .panel-inner > .button { align-self: flex-start; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1320px) {
  .page-op .layout.has-side.has-panel { grid-template-columns: var(--side) minmax(0, 1fr) 400px; }
  .content { padding: 32px 36px 72px; }
}
@media (max-width: 1180px) {
  .layout.has-side.has-panel, .page-op .layout.has-side.has-panel { grid-template-columns: var(--side) minmax(0, 1fr); }
  .page-doc .layout.no-side.has-panel { grid-template-columns: minmax(0, 1fr); }
  .page-doc .panel { display: none; }
  .page-op .panel { grid-column: 2; position: static; max-height: none; padding: 0 36px 56px; }
  .search-open { min-width: 0; }
  .search-open span, .search-open kbd { display: none; }
}
/* The logo, the product and the five sections leave no room for the
   release down to the width where the sections go into the menu. */
@media (max-width: 1000px) {
  .version-pill { display: none; }
}
@media (max-width: 900px) {
  :root { --topbar: 56px; }
  .topbar { gap: 16px; padding: 0 14px; }
  .brand-logo { height: 18px; }
  .topnav { display: none; }
  .nav-toggle { display: grid; }
  .layout, .layout.no-side.has-panel, .layout.has-side.has-panel, .page-op .layout.has-side.has-panel { grid-template-columns: minmax(0, 1fr); }
  /* The drawer spans from the top bar to the foot of the window and
     scrolls on its own. The desktop menu's `align-self: start` would size
     this fixed box to its content instead: taller than the window, it then
     rose over the top bar and could not scroll, and its last entries, often
     the page being read, were out of reach. */
  .sidebar { display: none; position: fixed; top: var(--topbar); left: 0; bottom: 0; width: min(320px, 88vw); height: auto; align-self: stretch; overscroll-behavior: contain; z-index: 60; box-shadow: var(--shadow); }
  body.nav-open .sidebar { display: block; }
  /* The page stays where it was while the menu is open over it. */
  body.nav-open { overflow: hidden; }
  body.nav-open .topnav { display: flex; position: fixed; top: var(--topbar); right: 0; z-index: 61; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 0 0 0 12px; padding: 8px; }
  /* A page with a menu opens one drawer: the sections at its top, the
     section's own menu under them, not two panels over each other. */
  body.has-sidebar.nav-open .topnav { display: none; }
  .side-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
  .side-sections a { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; }
  .side-sections a:hover { text-decoration: none; border-color: var(--accent); color: var(--ink); }
  .side-sections a[aria-current] { background: var(--accent-wash); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
  .page-op .panel { grid-column: 1; padding: 0 20px 48px; }
  .content { padding: 26px 20px 60px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 48px 20px; gap: 32px; }
  .band { padding: 40px 20px; }
  .band.split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .op-row { grid-template-columns: 56px minmax(0, 1fr); }
  .op-title { display: none; }
  .doc h1 { font-size: 27px; }
  .try-creds, .try-query { grid-template-columns: 1fr; }
}
/* A phone's top bar holds the logo, the product and three buttons: the
   product loses its pill first, then its name below 360 px, the logo never. */
@media (max-width: 480px) {
  .brand { gap: 10px; }
  .brand-logo { height: 16px; }
  .brand-product { padding-left: 10px; }
  .brand-name { font-size: 15px; }
  .brand-sub { display: none; }
  .topbar-tools { gap: 6px; }
}
/* Below the width where the release goes, the sign-in keeps its key and
   its dot, a button like its neighbours, and its panel spans the screen. */
@media (max-width: 1000px) {
  .signin-label { display: none; }
  .signin-open { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 9px; }
  .signin-open .icon { width: 17px; height: 17px; }
}
@media (max-width: 480px) {
  .signin { position: static; }
  .signin-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar) + 8px); width: auto; }
}
@media (max-width: 359px) {
  .brand-product { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* On paper: the page, then its examples. The panel held every request and
   response, so it comes back into the flow under the page; what works only
   on a screen goes (the menus, the table of contents, Try it, Copy page, a
   map not drawn). A code block prints every line, wrapped: its height limit
   and its scroll cut it on paper. Only the language shown prints, and its
   tab alone names it. */
@media print {
  .topbar, .sidebar, .site-foot, .skip, .try-open, .try-drawer, .search-modal, .page-actions, .copy, .toc, .pager, .ai-card, .map-form,
  .live-map:has(.map-veil:not([hidden])), .tab[aria-selected="false"] { display: none !important; }
  .layout { display: block; }
  .content { padding: 0 0 24px; }
  .panel { display: block !important; position: static !important; padding: 0 !important; }
  .code-card { overflow: visible; box-shadow: none; }
  pre, .code-card pre, .doc pre, .hero-code pre, .try-result pre { max-height: none !important; overflow: visible !important; white-space: pre-wrap; overflow-wrap: anywhere; }
  /* The reference whole: Chrome prints a closed <details> as its summary,
     the folded fields, the long value tables and the business text left out. */
  details::details-content { content-visibility: visible; }
  details.children > summary::before, details.enum > summary::before { display: none; }
  /* Paper is white, and the print dialog drops every ground unless asked
     for its background graphics: the light palette prints whatever the
     theme (data-theme is no media query), and code prints dark on white.
     :root[data-theme] weighs as much as the dark palette's selectors and
     comes after them. */
  :root[data-theme] {
    color-scheme: light;
    --accent: #1d6bff; --accent-2: #19b6e8; --accent-ink: #1552c7; --accent-wash: #eaf1ff;
    --bg: #ffffff; --bg-soft: #f6f8fb; --bg-raised: #ffffff; --bg-hover: #f1f4f9;
    --ink: #0f172a; --ink-2: #334155; --ink-3: #5b6b82; --line: #e3e8ef; --line-2: #edf1f6;
    --ok: #046c4e; --warn: #9a4508; --danger: #b91c1c; --preprod: #7c3aed;
    --get: #046c4e; --post: #1552c7; --put: #9a4508; --delete: #b91c1c; --method-ink: #ffffff;
    --code-bg: #ffffff; --code-bg-2: #ffffff; --code-ink: #0f172a; --code-line: #cbd5e1;
  }
  .code-title, .tab, .code-note { color: var(--ink-3); }
  .tab[aria-selected="true"] { color: var(--ink); background: none; }
  .tok-k { color: #7c3aed; } .tok-s { color: #046c4e; } .tok-n { color: #9a4508; } .tok-c { color: #5b6b82; }
  .tok-p { color: #1552c7; } .tok-b { color: #b91c1c; } .tok-f { color: #1552c7; }
  /* A method badge keeps its fill, which its white label needs. */
  .method { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (min-width: 1200px) {
  .family-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.guide-product { font-size: 14px !important; margin: 1.4rem 0 .6rem !important; }
.guide-product a { color: var(--ink-2); }
/* The Guides index: four parts, a jump to each, and its groups under it. */
.guide-jump { margin: -8px 0 8px; }
.guide-part { margin: 2.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.guide-part > h2 { margin-top: 0; }
.guide-part > .muted { margin-top: -.3rem; }
.guide-part h3 { margin-top: 1.8rem; }
.guide-part h3 a { color: var(--ink); }
.service-lines { list-style: none; padding: 0; margin: .8rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.service-lines li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 14px; margin: 0 !important; }
.service-lines li + li { border-top: 1px solid var(--line-2); }
.service-lines strong { font-size: 13.5px; }
.service-lines span { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 900px) { .service-lines li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ------------------------------------------------------------ live maps */

.live-map { margin: 1rem 0 1.8rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-raised); box-shadow: var(--shadow); }
.map-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.map-form label, .map-bar label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.map-form label { flex: 1 1 150px; min-width: 0; }
.map-form select, .map-form input, .map-bar select { font: 13px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; width: 100%; }
.map-form .button { flex: 0 0 auto; padding: 9px 16px; }
.map-frame { position: relative; height: 460px; background: var(--bg-soft); }
/* Sized by its frame, not positioned: each engine's stylesheet sets the
   position of its own container, and MapLibre's `relative` would collapse
   an absolutely placed one to no height. */
.map-canvas { width: 100%; height: 100%; }
.map-veil {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--ink-3);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 12%, transparent) 0, transparent 58%),
    linear-gradient(var(--line-2) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--bg-soft);
}
.map-veil .icon { width: 42px; height: 42px; color: var(--accent); }
.map-veil p { max-width: 44ch; margin: 0; font-size: 14px; }
.map-noscript { margin: 0; padding: 14px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; min-height: 48px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
/* Folded while there is nothing to say, and still a live region: hidden,
   it would not announce the first message. */
.map-bar:has(> .map-status:empty):not(:has(> .map-geoserver:not([hidden]))) { min-height: 0; padding: 0; border-top: 0; }
.map-bar label { flex-direction: row; align-items: center; gap: 8px; }
.map-bar select { width: auto; padding: 6px 9px; }
.map-status.ok::before, .map-status.bad::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--ok); }
.map-status.bad { color: var(--danger); }
.map-status.bad::before { background: var(--danger); }
@media (max-width: 600px) {
  .map-form .button { flex: 1 1 100%; }
  .map-frame { height: 360px; }
}

/* ------------------------------------------------------ try it: account */

.try-account { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-size: 13px; }
.try-account.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--bg)); }
.try-account.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--bg)); }
.try-account-status { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); }
.try-account .status.ok { color: var(--ok); }
.try-account .status.bad { color: var(--danger); }
.try-account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.try-account-fields:empty { display: none; }
.try-account-notes { grid-column: 1 / -1; margin: 0; color: var(--ink-2); line-height: 1.55; }
.try-account.warn .try-account-notes strong { color: var(--warn); }
@media (max-width: 900px) { .try-account-fields { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- around the API */

.tagline { margin: -.4rem 0 1rem; font-size: 15px; color: var(--ink-2); }
.strip { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 2.6rem 0 .5rem; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 14px; background: linear-gradient(135deg, var(--accent-wash) 0%, var(--bg) 70%); }
.strip > div { flex: 1 1 320px; }
.strip p { margin: 0; color: var(--ink-2); }
.strip .strip-title { margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--ink); }
.strip .button { flex: 0 0 auto; }
.showcase { margin: 1.6rem 0; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow); }
.showcase h2 { margin-top: 0 !important; }
.showcase .card-chips { align-items: center; }
.showcase-uses { font-size: 12.5px; font-weight: 650; color: var(--ink-3); margin-right: 4px; }
a.chip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-ink); }
.showcase-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
/* A tool's name is one word: it never breaks inside. */
.tool-table td:first-child code { white-space: nowrap; }
@media (min-width: 1200px) {
  .card-grid.eco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ AI layer */

.content { position: relative; }
.page-actions { position: absolute; top: 24px; right: 36px; z-index: 20; display: flex; align-items: center; gap: 8px; }

/* The two views of the API reference (render.js viewText): the one the
   reader chose hides the other. Technical is the default. */
:root:not([data-view="biz"]) .v-biz { display: none !important; }
:root[data-view="biz"] .v-tech { display: none !important; }
.view-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-soft); }
.view-switch button { font: 600 12.5px var(--sans); color: var(--ink-3); background: none; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.view-switch button:hover { color: var(--ink); }
.view-switch button[aria-checked="true"] { color: var(--ink); background: var(--bg-raised); box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
/* At the head of the API reference menu, above Overview, the full width of
   the menu; it stays in view while the menu scrolls to the current entry.
   A sticky box stops at the menu's padding, so it sticks 20 px higher, the
   menu's top padding, or the entries would show through above it. */
.side-view { position: sticky; top: -20px; z-index: 3; margin: -8px 0 10px; padding: 8px 0 6px; background: var(--bg); }
/* The pinned switch covers the top 48 px of the menu: an entry that takes
   the focus is scrolled below it, not under it. */
.sidebar:has(> .side-view) { scroll-padding-top: 64px; }
.side-view .view-switch { display: flex; }
.side-view .view-switch button { flex: 1; padding: 6px 10px; }
.op-alias { margin: -2px 0 12px; font-size: 13px; color: var(--ink-3); }
.op-pitch { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
.op-more { margin: -4px 0 18px; }
.op-more > summary { display: inline-block; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
.op-more[open] > summary { margin-bottom: 6px; }
.op-more-label { margin: 14px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.copy-page { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-raised); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.copy-page button { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--sans); color: var(--ink-2); background: none; border: 0; padding: 6px 10px; cursor: pointer; }
.copy-page button:hover { color: var(--ink); background: var(--bg-hover); }
.copy-page .icon { width: 15px; height: 15px; }
.copy-page-main { border-radius: 8px 0 0 8px; }
.copy-page-more { border-left: 1px solid var(--line) !important; border-radius: 0 8px 8px 0; padding: 6px 7px !important; }
.copy-page button.done { color: var(--ok); }
.copy-page-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 290px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); box-shadow: var(--shadow), 0 18px 40px -18px rgba(15, 23, 42, .35); }
.menu-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: 13px var(--sans); cursor: pointer; }
.menu-item:hover { background: var(--bg-hover); text-decoration: none; }
.menu-item .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); flex: none; }
.menu-item span { display: flex; flex-direction: column; gap: 1px; }
.menu-item strong { font-weight: 650; }
.menu-item small { font-size: 12px; color: var(--ink-3); }
.menu-item.done strong { color: var(--ok); }
.page-home .page-actions { display: none; }
.ai-card { margin-top: 6px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 12px; background: linear-gradient(160deg, var(--accent-wash), var(--bg-raised) 60%); }
.ai-card .panel-kicker { display: flex; align-items: center; gap: 6px; color: var(--accent-ink); }
.ai-card .panel-kicker .icon { width: 14px; height: 14px; }
.ai-prompt { max-height: 170px; overflow: auto; margin: 10px 0; padding: 10px 12px; border-radius: 9px; background: var(--code-bg); color: var(--code-ink); font: 11.5px/1.55 var(--mono); white-space: pre-wrap; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-actions .button { padding: 7px 11px; font-size: 12.5px; }
.ai-actions .button.done { border-color: var(--ok); color: var(--ok); }
.ai-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
/* In the flow above the page, and still the menu's containing block: static,
   it left the menu to .content, which put it under the whole article. */
@media (max-width: 900px) {
  .page-actions { position: relative; top: auto; right: auto; display: flex; justify-content: flex-end; margin: 0 0 8px; }
  .copy-page-menu { right: 0; left: auto; max-width: calc(100vw - 24px); }
}
/* On a phone an enum value and its meaning stack: a value such as
   MAPMATCH_AVOID_TUNNEL does not wrap, and beside its meaning it pushed the
   table past the screen. */
@media (max-width: 600px) {
  .enum-table, .enum-table tbody, .enum-table tr, .enum-table td { display: block !important; width: auto !important; }
  .enum-table tr { padding: 6px 0; border-bottom: 1px solid var(--line-2); }
  .enum-table td { padding: 0 !important; border-bottom: 0 !important; }
  .enum-table td:first-child { white-space: normal; }
  .enum-table td:first-child code { overflow-wrap: anywhere; }
}
/* BeMap's pages carry raw HTML tables (a JSON example in a cell, a table of
   links) without the wrapper a Markdown table gets: they scroll in their own
   box, not the page. A long address in a link may break; so may a path in
   a guide's API reference callout. */
.guide table:not(.enum-table, .table-wrap table) { display: block; max-width: 100%; overflow-x: auto; }
/* An image in such a table keeps its width: a percentage max-width makes a
   replaced element's min-content width zero, so the table's automatic
   layout gave the text the width and drew BeMap's 512 px charging-station
   illustration at 61 to 95 px on a desktop and at 0 px on a phone. The
   table scrolls in its own box instead. */
.guide table:not(.enum-table, .table-wrap table) img { max-width: none; }
/* A code block in such a table's cell scrolls in its own card, and no longer
   sets the cell's width: the prose beside it keeps the rest. */
.guide td .code-card { width: 0; min-width: 100%; }
.doc a { overflow-wrap: anywhere; }
.callout-ops a.op-link { flex-wrap: wrap; overflow-wrap: anywhere; }

/* Windows high contrast replaces every colour and drops every shadow, and
   those were all that marked the chosen view, the selected tab, the current
   page and the search result under the arrow keys. The system's selection
   colours mark the first two there; a ring inside marks the others. Last in
   the file: a rule of the same weight written after it would win, as the
   view switch's own did. */
@media (forced-colors: active) {
  /* forced-color-adjust: none, or Chrome draws its Canvas backplate behind
     the label, over the Highlight ground: HighlightText on Canvas, white on
     white. The focus ring then takes a system colour too. */
  .view-switch button[aria-checked="true"], .tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; outline-color: Highlight; }
  .topnav a[aria-current], .side-sections a[aria-current], .nav-top a[aria-current="page"], .nav-group a[aria-current="page"], .search-results li.active a { outline: 2px solid CanvasText; outline-offset: -2px; }
  .toc li a { border-left-color: Canvas; }
  .toc a.active { border-left-color: Highlight; }
  /* The signed-in dot is a ground, which forced colours would erase. */
  .signin-open.signed-in::after { forced-color-adjust: none; background: Highlight; box-shadow: 0 0 0 2px Canvas; }
}
/* A logo is an image, which high contrast leaves as it is: the one drawn
   for the system's ground, whatever palette the page chose, or its grey or
   its white letters vanish into the forced ground. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  :root[data-theme] .brand-logo-light { display: none; }
  :root[data-theme] .brand-logo-dark { display: block; }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  :root[data-theme] .brand-logo-light { display: block; }
  :root[data-theme] .brand-logo-dark { display: none; }
}