:root {
  --blue: #293FE1;
  --blue-dark: #09216B;
  --blue-tint: #EEF0FE;
  --ink: #242528;
  --ink-strong: #1F2432;
  --body: #4A4F5C;
  --muted: #8A8F9E;
  --muted-light: #9BA0AE;
  --slate: #6B7080;
  --line: #E7E9F1;
  --line-soft: #F0F1F5;
  --line-strong: #DADCE4;
  --bg: #F6F7FA;
  --bg-panel: #FBFCFE;
  --fill: #F3F4F8;
  --green: #4D806D;
  --green-ink: #3F7A62;
  --green-bg: #E9F3EE;
  --amber-ink: #7A6437;
  --amber-bg: #FBF5E9;
  --amber-line: #F0E4C8;
  --red-ink: #A33A32;
  --red-bg: #FBECEA;
  --mono: ui-monospace, Menlo, monospace;
  --sans: Poppins, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Header and body share one content width so the header's download buttons
     line up with the right edge of the cards and tables below them. */
  --content: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; }
/* The browser's own "[hidden] { display: none }" is a user-agent rule, so any author
   rule that sets display beats it however weak its selector. .page-head sets display:
   flex, which meant hiding the header did nothing: the overview kept the whole title
   strip of whichever database was last open — its name, chips and tabs — sitting above
   its own hero. Honouring the attribute here fixes it wherever it is used rather than
   only in the one place it was noticed. */
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 50, .2);
  border-radius: 7px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* The one animation in the stylesheet was pulseDot, which breathed the green dot on the
   connection pill while a token was live. Nothing pulses in a documentation build. */

.shell { display: flex; height: 100vh; overflow: hidden; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 290px;
  flex: none;
  background: linear-gradient(178deg, #FFF 0%, #FAFBFE 45%, #F2F4FB 100%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand-block { padding: 24px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.brand-logo { width: 158px; height: auto; display: block; }
/* 27.6px = left edge of the "G" wordmark (105/600 of the source PNG) at the 158px render width */
.brand-sub { margin-left: 27.6px; font: 500 12px/1.2 var(--sans); letter-spacing: -.005em; color: var(--slate); }

.search-box {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(31, 36, 50, .09);
}
.search-box:focus-within { border-color: var(--blue); }
.search-icon { color: var(--muted-light); font-size: 12px; }
.search-box input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--ink); font: 400 12.5px/1.2 var(--sans);
}
.kbd {
  font: 500 10px/1 var(--mono); color: var(--muted-light);
  border: 1px solid rgba(31, 36, 50, .14); border-radius: 4px; padding: 2px 5px;
}

/* Same 14px gutter as .nav, so the Overview row lines up with the categories below it
   even though it sits outside the scrolling tree — the tree can scroll under it, and a
   front door that scrolls away is a front door you have to go looking for. */
.side-top { flex: none; padding: 0 14px; display: flex; flex-direction: column; }
.side-home {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font: 600 13px/1.25 var(--sans); color: var(--ink); text-align: left;
}
.side-home:hover { background: rgba(41, 63, 225, .06); color: var(--blue); }
/* Filled rather than tinted like an active leaf: this is the one row that is a place of
   its own rather than a page of the catalogue, and the fill says so at a glance. */
.side-home.active { background: var(--blue); color: #fff; }
.side-home.active .div-icon { opacity: 1; }
.nav-label {
  padding: 16px 11px 7px; font: 500 10px/1 var(--mono);
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted-light);
}

.nav { flex: 1; overflow-y: auto; padding: 0 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.nav-empty { padding: 18px 8px; font-size: 12px; color: var(--muted); }
/* No gap: a collapsed branch is a zero-height child, and a gap would still show. The
   open spacing comes from .children's own margin instead. */
.nav-div { display: flex; flex-direction: column; }

.div-btn, .sec-btn, .leaf {
  display: flex; align-items: center; width: 100%;
  text-align: left; background: transparent; border: 0; cursor: pointer;
  border-radius: 9px;
}
.div-btn { gap: 11px; padding: 11px; font: 600 13px/1.25 var(--sans); color: var(--ink); }
.div-btn:hover { background: rgba(41, 63, 225, .06); color: var(--blue); }
.div-btn.open { color: var(--blue); }
.div-icon { width: 16px; text-align: center; flex: none; font-size: 12px; opacity: .7; }
.div-label, .sec-label, .leaf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev {
  font: 400 11px/1 var(--sans); color: var(--muted-light);
  display: inline-block; transition: transform .26s var(--ease);
}
.div-btn.open .chev, .sec-btn.open .chev { transform: rotate(90deg); }

/* 0fr→1fr is the one grid trick that animates to a height nobody had to measure. */
/* Indents stay tight because the tree mirrors the docs taxonomy: three levels deep
   with long labels, so every pixel of indent is a pixel off the visible name. */
.children {
  display: grid; grid-template-rows: 0fr;
  margin: 0 0 0 13px; padding-left: 8px; border-left: 1px solid transparent;
  opacity: 0;
  transition: grid-template-rows .26s var(--ease), margin .26s var(--ease), opacity .2s var(--ease);
}
.children.open { grid-template-rows: 1fr; margin: 2px 0 8px 13px; border-left-color: #E4E7F0; opacity: 1; }
.children-inner { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.children .children.open { margin: 2px 0 6px 6px; }

.sec-btn { gap: 10px; padding: 9px 10px; border-radius: 8px; font: 500 12.5px/1.25 var(--sans); color: #3F4552; }
.sec-btn:hover { background: rgba(41, 63, 225, .06); color: var(--blue); }
.sec-btn.open { color: var(--blue); }

.leaf { gap: 10px; padding: 9px 10px; border-radius: 8px; font: 500 12.5px/1.25 var(--sans); color: var(--body); }
.leaf:hover { background: rgba(41, 63, 225, .08); color: var(--ink); }
.leaf-bar { width: 3px; height: 15px; border-radius: 2px; flex: none; }
.leaf-count { font: 500 10px/1 var(--mono); color: var(--muted-light); flex: none; }
.leaf.active { background: var(--blue); color: #fff; }
.leaf.active .leaf-bar { background: #fff !important; }
.leaf.active .leaf-count { color: rgba(255, 255, 255, .7); }

/* Documented in the published taxonomy but with no content here yet. Dimmed and inert
   so the shape of the full catalogue stays visible without implying a working page. */
.leaf.placeholder { cursor: default; color: var(--muted-light); }
.leaf.placeholder:hover { background: transparent; color: var(--muted-light); }
.leaf.placeholder .leaf-bar { background: repeating-linear-gradient(180deg, #D3D7E2 0 2px, transparent 2px 4px); }
.leaf.placeholder .leaf-count { color: #C8CCD8; }

/* Categories that own an overview page: the label navigates, so give the chevron its
   own hit area rather than letting it look like dead space. */
.div-btn.has-overview .chev, .sec-btn.has-overview .chev {
  margin: -9px -6px -9px 0; padding: 9px 6px; border-radius: 6px; cursor: pointer;
}
.div-btn.has-overview .chev:hover, .sec-btn.has-overview .chev:hover { background: rgba(41, 63, 225, .12); }
.div-btn.active, .sec-btn.active { color: var(--blue); background: rgba(41, 63, 225, .09); }

/* Flat rows: the standalone doc pages and the external link. */
.div-btn.flat { gap: 11px; }
.div-btn.flat.placeholder { cursor: default; color: var(--muted-light); }
.div-btn.flat.placeholder:hover { background: transparent; color: var(--muted-light); }
.div-btn.flat.active { color: var(--blue); }
a.div-btn.flat { text-decoration: none; }
.chev.out { transition: none; opacity: .55; }
a.div-btn.flat:hover .chev.out { opacity: 1; }

/* The sidebar footer styled here — .side-foot, the .conn-pill and its status .dot, and the
   .foot-btn rows for "Check access" and "Connection & credentials" — has gone with the API
   tester, and so has the markup it dressed. See the comment where it stood in index.html. */

/* ---------- main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.loading { padding: 48px; color: var(--muted); font-size: 13px; }

.page-head {
  flex: none; border-bottom: 1px solid var(--line);
  padding: 26px 44px 0; display: flex; flex-direction: column; gap: 20px; background: #fff;
}
.page-head > * { width: 100%; max-width: var(--content); }
.head-top { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.head-titles { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 9px; }
.eyebrow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted-light); }
/* .badge dressed the green "Entitled" pill that sat beside the breadcrumb. Both are gone —
   see the comment in renderHead. The green tokens it used are still in the palette, and
   still earn their keep on the overview's second stat card. */
.page-head h1 { margin: 0; font: 600 27px/1.2 var(--sans); letter-spacing: -.025em; color: var(--ink-strong); }
/* Wide enough that the longest tagline in the catalogue still sits on one line. */
.tagline { margin: 0; max-width: 940px; font: 400 14px/1.65 var(--sans); color: #5A6070; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 2px; }
.chip { padding: 4px 9px; border-radius: 6px; background: var(--fill); color: var(--slate); font: 500 10.5px/1.4 var(--mono); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); cursor: pointer; font: 500 13px/1 var(--sans);
}
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn.primary { padding: 11px 17px; border: 0; background: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--blue-dark); color: #fff; }
/* .btn.sm and .btn.xs were the compact sizes the tester's toolbars used — Get token, Run,
   Export, the pager. Every button left in the catalogue is a full-size one. */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line-strong); color: var(--ink); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  padding: 12px 16px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; font: 600 13px/1 var(--sans);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* "View & Test API": announced, not offered. Lighter than the tabs beside it and with the
   pointer that says so, because a tab that looks identical to its neighbours and does
   nothing when clicked reads as a broken page rather than a planned one.
   :hover keeps the same colour deliberately. The other tabs darken on hover to invite the
   click; this one has nothing to invite, and the padlock and pill have already answered
   the reader without asking them to hover at all. */
.tab.soon, .tab.soon:hover { color: var(--muted-light); cursor: not-allowed; }
/* inline-flex only on this one tab: the others hold a bare text node and need no layout,
   and giving every tab a flex context would change nothing except what has to be read. */
.tab.soon { display: inline-flex; align-items: center; gap: 7px; }

/* Small enough to sit on the cap height of the label rather than tower over it, and
   desaturated because a full-colour emoji padlock at this size draws more attention than
   the tab it is qualifying — it should read as punctuation, not as a warning. */
.tab-lock { font-size: 10.5px; line-height: 1; filter: grayscale(1); opacity: .75; }

/* The pill carries the amber the rest of the site already uses for "known gap, explained"
   — the same tokens as .callout, which is what the Coverage and Data dictionary tabs show
   when a database has neither. Amber rather than grey: grey on a greyed tab disappears,
   and this is the one part of the tab that has to be legible. Not red, because nothing
   here has failed; it simply has not arrived. */
.tab-soon-pill {
  padding: 3px 7px; border-radius: 5px;
  background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink);
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}

.body { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg-panel); }
.panel { padding: 34px 44px 72px; display: flex; flex-direction: column; gap: 34px; max-width: var(--content); }

/* The rail sits inside the shared content width, so the page keeps one right edge
   shared with the header and the tables below. */
.panel.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 44px; align-items: start; }
.panel-main { display: flex; flex-direction: column; gap: 34px; min-width: 0; }

/* Offset matches the panel's top padding so the pinned rail keeps the same gap below
   the tab divider that it has when the page sits unscrolled. */
.toc { position: sticky; top: 34px; display: flex; flex-direction: column; gap: 1px; }
.toc-label {
  font: 500 10.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted-light); padding: 0 0 12px 14px;
}
.toc-link {
  padding: 8px 14px; border-left: 2px solid var(--line); border-radius: 0 7px 7px 0;
  color: var(--slate); font: 500 12.5px/1.45 var(--sans);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.toc-link:hover { color: var(--ink); background: rgba(41, 63, 225, .05); }
.toc-link.on { color: var(--blue); border-left-color: var(--blue); }

/* Too narrow to spare a column — fall back to the plain single-column panel. Only the
   heading links drop: the rail is now the one place downloads appear, so hiding it
   wholesale would make the data dictionary unreachable on a laptop. They reflow into a
   row under the content instead. */
@media (max-width: 1180px) {
  .panel.has-toc { display: flex; }
  .toc { position: static; }
  .toc > .toc-label, .toc > .toc-link { display: none; }
}

/* ---------- prose ---------- */
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.prose > * { margin: 0; }
.prose h2 { font: 600 17px/1.35 var(--sans); letter-spacing: -.015em; color: var(--ink-strong); margin-top: 14px; }
.prose h3 { font: 600 14px/1.4 var(--sans); color: var(--ink); margin-top: 8px; }
.prose h4 { font: 600 12.5px/1.4 var(--sans); color: var(--slate); text-transform: none; margin-top: 4px; }
.prose p { font: 400 14px/1.8 var(--sans); color: var(--body); text-wrap: pretty; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; color: inherit; }
.prose a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--blue-tint); }
.prose a:hover { border-bottom-color: var(--blue); }
.prose code { font: 400 12.5px/1.5 var(--mono); background: var(--fill); border-radius: 5px; padding: 2px 5px; color: var(--ink); }

/* Process flowcharts in the documentation are drawn with box characters, so the block
   has to keep its own line breaks and spacing. */
.prose .md-pre {
  border: 1px solid var(--line); border-radius: 12px; background: var(--fill);
  padding: 16px 18px; overflow-x: auto;
}
.prose .md-pre code {
  background: none; padding: 0; border-radius: 0;
  font: 400 12px/1.7 var(--mono); color: var(--ink); white-space: pre;
}

/* The documentation's process diagrams. max-width rather than the source's fixed
   500-700px, so they shrink with the prose column instead of overflowing it, with
   height:auto to hold the aspect ratio. Bordered because most are flowcharts on a white
   background, which would otherwise bleed into the page with no edge. */
.prose .md-img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}

.prose ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prose ul li {
  position: relative; padding-left: 17px;
  font: 400 13.5px/1.7 var(--sans); color: var(--body); text-wrap: pretty;
}
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
/* Sub-lists sit tighter and drop to a hollow marker, so depth reads without indent
   guides. */
.prose ul ul { gap: 6px; margin: 8px 0 2px; }
.prose ul ul li { font-size: 13px; }
.prose ul ul li::before { background: none; border: 1.5px solid var(--blue); top: 8px; }

.prose ol.steps {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.prose ol.steps li {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff;
  display: flex; flex-direction: column; gap: 9px;
}
.step-num {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--blue-tint); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--mono);
}
.step-title { font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
.step-body { font: 400 12.5px/1.65 var(--sans); color: var(--slate); text-wrap: pretty; }

.prose blockquote {
  border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: 12px;
  padding: 16px 18px; font: 400 13px/1.7 var(--sans); color: var(--amber-ink); text-wrap: pretty;
}
.prose blockquote strong { color: inherit; }

/* A thematic break. The documentation puts one before a heading that already has its own
   spacing above it, so the rule is inset and quiet rather than a full-width divider
   competing with the heading. */
.prose .md-rule {
  border: 0; border-top: 1px solid var(--line);
  width: 64px; margin: 6px 0;
}

/* ---------- tables ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: #fff; max-width: 100%; }
table.md-table, table.grid { border-collapse: collapse; width: 100%; }
table.md-table { min-width: 520px; }
table.grid { min-width: 640px; }
.md-table thead tr, .grid thead tr { background: #F7F8FB; }
.md-table th, .grid th {
  text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line);
  font: 600 11px/1.2 var(--sans); color: var(--slate); white-space: nowrap;
}
.md-table td, .grid td {
  padding: 14px 18px; border-top: 1px solid var(--line-soft);
  font: 400 13px/1.65 var(--sans); color: var(--body); vertical-align: top; text-wrap: pretty;
}
.prose .table-wrap { max-width: 100%; }
.prose .md-table th, .prose .md-table td { padding: 12px 16px; }
.cell-mono { font: 400 12.5px/1.5 var(--mono); color: var(--ink); }
.cell-type { font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat {
  border: 1px solid var(--line); border-radius: 12px; padding: 17px 18px;
  display: flex; flex-direction: column; gap: 6px; background: #fff;
}
.stat-label { font: 600 9.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted-light); }
.stat-value { font: 600 21px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink-strong); }
.stat-note { font: 400 11.5px/1.5 var(--sans); color: var(--muted); text-wrap: pretty; }

/* ---------- section headings + downloads ---------- */
.section { display: flex; flex-direction: column; gap: 13px; }
.section > h2 { margin: 0; font: 600 17px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink-strong); }
.section-note { margin: 0; max-width: 660px; font: 400 13.5px/1.7 var(--sans); color: #5A6070; text-wrap: pretty; }
.eyebrow-label { font: 600 9.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted-light); }

/* Downloads live in the rail, under "On this page". Only the badge and name are shown
   — the blurb and file size are in .dl-tip, revealed on hover. The top padding
   separates them from the heading links above. */
.dl-rail { display: flex; flex-direction: column; gap: 4px; padding: 22px 0 0; }
.dl-rail-label {
  font: 500 10.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted-light); padding: 0 0 12px 2px;
}
.dl-btn {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.dl-btn:hover { border-color: var(--blue); background: #F8F9FF; }
.dl-btn-name {
  min-width: 0; font: 500 12.5px/1.35 var(--sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-btn:hover .dl-btn-name { color: var(--blue); }

/* Not published yet: kept in place rather than hidden, so the gap stays visible. */
.dl-btn.off { background: #FCFCFD; cursor: default; }
.dl-btn.off:hover { border-color: var(--line); background: #FCFCFD; }
.dl-btn.off .dl-ext { filter: grayscale(1); opacity: .7; }
.dl-btn.off .dl-btn-name, .dl-btn.off:hover .dl-btn-name { color: var(--muted-light); }

.dl-ext {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font: 700 8px/1 var(--mono);
}

/* Opens down and to the left: the rail is the last column, so a card anchored left
   would run off the viewport. */
.dl-tip {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 236px;
  display: flex; flex-direction: column; gap: 6px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 10px 28px rgba(23, 28, 45, .13);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.dl-btn:hover .dl-tip, .dl-btn:focus-visible .dl-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.dl-tip-blurb { font: 400 12px/1.55 var(--sans); color: var(--slate); text-wrap: pretty; }
.dl-tip-meta { font: 400 10.5px/1.5 var(--mono); color: var(--muted-light); }

/* Below the rail breakpoint the buttons follow the content instead of sitting beside
   it, so they reflow into a row. This has to come after the rules above to win on
   source order — the rail's own breakpoint block is further up the file. */
@media (max-width: 1180px) {
  .dl-rail { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 0; }
  .dl-rail-label { flex: 0 0 100%; padding-bottom: 4px; }
  .dl-btn { width: auto; }
  /* Anchored left here: at this width the buttons start at the left edge, so a
     right-anchored card would run off the other side. */
  .dl-tip { left: 0; right: auto; }
}

/* ---------- coverage ---------- */
.panel.coverage { flex-direction: row; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.coverage-prose { flex: 1 1 460px; min-width: min(460px, 100%); }
.split {
  flex: 1 1 340px; min-width: min(340px, 100%);
  border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: #fff;
  display: flex; flex-direction: column; gap: 18px;
}
.split-rows { display: flex; flex-direction: column; gap: 15px; }
.split-row { display: flex; flex-direction: column; gap: 7px; }
.split-head { display: flex; align-items: baseline; gap: 10px; }
.split-name { flex: 1; font: 500 13px/1.3 var(--sans); color: var(--ink); }
.split-value { font: 500 12px/1.3 var(--mono); color: var(--slate); }
.split-track { height: 7px; border-radius: 4px; background: #EEF0F5; overflow: hidden; }
.split-fill { height: 100%; border-radius: 4px; background: var(--blue); }

/* ---------- dictionary ---------- */

/* Three sections stood here — the live tab, the check-access view and the settings drawer
   — and all three have gone with the API tester. Roughly 145 rules for a connection strip,
   an endpoint grid, a parameter form, a result panel with its tabs and pager, a call
   history, a licence fact grid and a credentials drawer. Nothing in the catalogue emits any
   of those class names now, so they are deleted rather than left to be read as styling for
   a feature someone might go looking for. */

/* Kept out of that stretch, because the Data dictionary and Coverage tabs still use it: the
   note shown when a database migrated from the documentation has neither. The .callout.bad
   variant went with the tester — it reported a failed API call, and nothing here can fail. */
.callout {
  border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: 12px;
  padding: 16px 18px; font: 400 13px/1.7 var(--sans); color: var(--amber-ink); text-wrap: pretty;
}
.callout p { margin: 0; }

/* ---------- overview ---------- */
/* Bands rather than one padded panel: the page is a sequence of sections, and a hairline
   with a change of tint is what separates them without drawing a heavy divider. The inner
   width is the same --content the header and tables share, so every left edge on the site
   lines up whichever page you are on. */
.home { display: flex; flex-direction: column; background: #fff; }
.home-band { padding: 0 44px; border-bottom: 1px solid var(--line); }
.home-band:last-child { border-bottom: 0; }
.home-band.tint { background: var(--bg-panel); }
.home-inner {
  width: 100%; max-width: var(--content);
  padding: 40px 0 44px; display: flex; flex-direction: column; gap: 18px;
}
.band-title { margin: 0; font: 600 20px/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink-strong); }
.band-sub { margin: 0; max-width: 760px; font: 400 13.5px/1.7 var(--sans); color: var(--slate); }
.band-title + .band-sub { margin-top: -6px; }

/* Copy on the left, the two counts stacked in the space beside the headline rather than
   in a band underneath it — the headline is three lines at most, so a full-width row of
   cards below it left a gap to its right and pushed the first real section off-screen. */
.home-band.hero .home-inner {
  padding: 46px 0 48px; gap: 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
}
.hero-copy { min-width: 0; }
/* Scoped to the hero rather than set on .eyebrow, which is also the breadcrumb on every
   database page — there it is a location label and should stay quiet. Here it is the
   masthead of the site's front page, so it carries the brand colour. */
.hero-copy .eyebrow { color: var(--blue); }
.hero-title {
  margin: 14px 0 0; max-width: 720px;
  font: 600 38px/1.18 var(--sans); letter-spacing: -.032em; color: var(--ink-strong);
}
.hero-lede { margin: 18px 0 0; max-width: 700px; font: 400 14.5px/1.75 var(--sans); color: var(--body); }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Two cards on one line, their top edge level with the top of the headline. Side by side
   rather than stacked: they are one set of figures and read as a row, and stacking them
   left an empty half-column between the copy and the upper card.

   The offset clears what sits above the headline in the other column — the eyebrow's line
   box (10.5px at line-height 1) and the title's own top margin. Written as the sum of those
   two rather than the 25px it comes to, so changing either rule above moves this with it
   instead of quietly knocking the two columns out of line. */
.home-stats { display: flex; gap: 12px; margin-top: calc(10.5px + 14px); }
/* A flat wash of colour over the whole card, one tone each, with the figure in the strong
   version of the same hue. Both tones are already in the palette — the blue is the accent
   every card icon on this page uses, and the green was shared with the "Entitled" badge
   until that was removed, leaving these two cards as its only remaining use — so the pair
   picks up colours the site already speaks in rather than adding any.
   No gradient and no heavier top rule: a single solid fill is what makes these read as two
   distinct figures instead of one two-column panel. */
/* 232px wide while a card held a wrapping sentence. With two short lines in it that width
   was mostly empty, which read as something having been deleted rather than as a figure
   given room. 184px is set by the widest thing either card can hold: five characters of
   44px figure — "1,287", if the catalogue ever grows an order of magnitude — inside 20px
   of padding either side. */
.home-stat { width: 184px; border: 1px solid; border-radius: 14px; padding: 18px 20px 20px; }
.home-stat.tone-blue { background: var(--blue-tint); border-color: #DCE0FB; }
.home-stat.tone-green { background: var(--green-bg); border-color: #D5E6DC; }
/* Up from 30px now the figure is the whole point of the card and has nothing under it to
   share the eye with. Tabular figures so the two counts share a digit width and read as a
   set rather than as two unrelated numbers that happen to sit together. */
.home-stat-num {
  font: 600 44px/1 var(--sans); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.tone-blue .home-stat-num { color: var(--blue); }
.tone-green .home-stat-num { color: var(--green-ink); }
/* The label takes a darkened version of its own tone, so the card has two levels of weight
   in one colour. A third level lived under this — .home-stat-note, the grey line of
   explanation — and has gone with the copy it carried. */
.home-stat-key { margin-top: 7px; font: 600 12.5px/1.3 var(--sans); }
.tone-blue .home-stat-key { color: var(--blue-dark); }
.tone-green .home-stat-key { color: #2A5344; }

/* Below a wide laptop the two columns become one and the pair moves under the copy, still
   on one line. The breakpoint is on the window, but what matters is the room left for the
   headline: the sidebar, the band's padding and 380px of cards take about 750px, so much
   below this the 38px title starts breaking mid-phrase to make space for two figures,
   which is the wrong thing to protect.
   1320px rather than the 1420px this was while the cards were 232px wide. Losing the
   descriptions took 96px off the pair, and that is 96px the headline keeps — so the
   two-column layout now survives a window that would have collapsed it before. */
@media (max-width: 1320px) {
  .home-band.hero .home-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* One column now, so there is no headline beside the pair to line up with — the offset
     that did that would only read as a stray gap under the buttons. */
  .home-stats { flex-wrap: wrap; margin-top: 0; }
  /* The cards keep their 184px here rather than stretching to fill the wider column. They
     used to grow into it because they held a sentence that benefited from the room; two
     short lines stretched across 320px would put the figure back in an empty box. */
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 8px; }
.feature {
  border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.feature-icon {
  width: 30px; height: 30px; border-radius: 8px; background: var(--blue-tint);
  color: var(--blue); font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.feature-title { font: 600 13.5px/1.35 var(--sans); color: var(--ink-strong); }
.feature-text { margin: 0; font: 400 12.5px/1.7 var(--sans); color: var(--slate); }
/* Pushed to the bottom so the links line up across cards of unequal text length. */
.link-more {
  margin-top: auto; padding: 0; border: 0; background: transparent; align-self: flex-start;
  color: var(--blue); cursor: pointer; font: 600 12px/1.4 var(--sans);
}
.link-more:hover { color: var(--blue-dark); }

.sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 8px; }
.sol-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px 22px; background: #fff;
  display: flex; flex-direction: column; gap: 12px;
}
.sol-card:hover { border-color: var(--line-strong); }
.sol-head { display: flex; align-items: center; gap: 11px; }
.sol-icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--blue-tint); color: var(--blue);
  font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none;
}
.sol-name { flex: 1; min-width: 0; font: 600 14px/1.3 var(--sans); color: var(--ink-strong); }
.sol-count { flex: none; font: 500 10.5px/1 var(--mono); color: var(--muted); }
.sol-blurb { margin: 0; font: 400 12.5px/1.7 var(--sans); color: var(--slate); }
.sol-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sol-chip {
  padding: 4px 9px; border: 0; border-radius: 6px; background: var(--fill); color: var(--slate);
  font: 500 10.5px/1.5 var(--mono); cursor: pointer; text-align: left;
}
button.sol-chip:hover { background: var(--blue-tint); color: var(--blue); }
/* Documented upstream, nothing to open here yet — inert, and dimmed to say so. */
.sol-chip.pending, .sol-chip.more { color: var(--muted-light); cursor: default; background: transparent; }
.sol-chip.pending { border: 1px dashed var(--line-strong); padding: 3px 8px; }

.use-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 8px; }
.use-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: #fff; }
.use-kicker {
  font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted-light);
}
.use-title { margin-top: 12px; font: 600 13.5px/1.35 var(--sans); color: var(--ink-strong); }
.use-text { margin: 8px 0 0; font: 400 12.5px/1.7 var(--sans); color: var(--slate); }

.home-cta {
  border-radius: 14px; padding: 30px 32px; background: var(--blue);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cta-text { min-width: 280px; flex: 1; }
.cta-title { font: 600 18px/1.3 var(--sans); letter-spacing: -.02em; color: #fff; }
.cta-sub { margin: 8px 0 0; max-width: 600px; font: 400 12.5px/1.7 var(--sans); color: rgba(255, 255, 255, .82); }
.cta-btns { display: flex; gap: 11px; flex-wrap: wrap; }
.btn.primary.inverse { background: #fff; color: var(--blue-dark); }
.btn.primary.inverse:hover { background: #F1F3FF; color: var(--blue-dark); }
.btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

@media (max-width: 900px) {
  .sidebar { width: 240px; }
  .page-head, .panel, .home-band { padding-left: 22px; padding-right: 22px; }
  .hero-title { font-size: 30px; }
}