/* ═══════════════════════════════════════════════════════════════════
   docs.css — generated release pages only.

   This file used to skin site/public/docs.html, the single-page
   developer docs. Those docs are now an Astro Starlight site built
   from site/docs-src into site/public/docs, with its own stylesheet at
   site/docs-src/src/styles/metergraph.css, and docs.html is gone.

   Do not delete this file. site/generate_release_pages.py:84 links it
   into every generated release page, and those pages are published
   once and never rewritten: a link handed to a customer in an older
   release still loads this stylesheet. Its only remaining job is to
   keep those pages looking right.

   Tokens below are copied verbatim from the "Metergraph Design System"
   Claude Design project
   (claude.ai/design/p/b2c756f5-2f3c-4df8-a55e-a4f4e2101231); re-sync
   rather than editing values in place.
   ═══════════════════════════════════════════════════════════════════ */

/* ——— tokens (design-system sync) ——— */
:root {
  --ink-1: #131312; --ink-2: #3D3C38; --ink-3: #6C6A61; --ink-4: #96938A;
  --paper-0: #FFFFFF; --paper-1: #F4F2EC; --paper-2: #EAE7DE;
  --line-1: #131312; --line-2: #D8D4C8; --line-3: #E6E3D9;
  --green-700: #0A472D; --green-600: #0E5B3A; --green-500: #1A7A50; --green-100: #DFEBE2;
  --blue-600: #1B44E4; --orange-600: #E85D10; --orange-100: #FBE8DB;
  --yellow-500: #F2B705; --red-600: #DE2A1B;
  --chartreuse: #D9E84A; --mint: #9FE087; --butter: #F3E96B;
  --surface-inverse: var(--ink-1);
  --text-on-inverse: #F4F2EC;
  --accent: var(--green-600); --accent-hover: var(--green-700);
  --link: var(--blue-600); --link-hover: #132FA8; --focus-ring: var(--blue-600);
  --font-core: 'ABC Diatype', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'ABC Diatype Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --display-stretch: 100%;
  --num-stretch: 100%;
  --heading-weight: 500;
  --subhead-weight: 500;
  --r-1: 2px; --r-2: 4px; --r-3: 10px; --r-pill: 999px;
  --ease-swift: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --measure: 1160px;
  --gutter: 28px;
  --body-col: 66ch;
  /* dimmed roles on the dark code surface */
  --on-inverse-55: rgba(244, 242, 236, .55);
  --on-inverse-line: rgba(244, 242, 236, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-0);
  color: var(--ink-1);
  font-family: var(--font-core);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--chartreuse); color: var(--ink-1); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-weight: var(--heading-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ink-1);
}
h1 { font-size: clamp(32px, 3.4vw, 40px); letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.25; margin-bottom: 0.6em; }
h3 { font-size: 20px; font-weight: var(--subhead-weight); letter-spacing: -0.01em; margin-bottom: 0.35em; }

p { margin: 0 0 1em; color: var(--ink-2); }
b { color: var(--ink-1); font-weight: var(--subhead-weight); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

code { font-family: var(--font-mono); font-stretch: var(--num-stretch); font-size: 0.88em; }
.mono { font-family: var(--font-mono); font-stretch: var(--num-stretch); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ——— masthead ——— */
.masthead {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  border-bottom: 1px solid var(--line-3);
}
.wordmark {
  font-weight: 620;
  font-stretch: var(--display-stretch);
  letter-spacing: -0.03em;
  font-size: 19px;
  color: var(--ink-1);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink-1); text-decoration: none; }
.wordmark-sm { font-size: 16px; }
.runhead {
  margin: 0;
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.masthead-nav { margin-left: auto; display: flex; gap: 22px; }
.masthead-nav a { font-size: 14px; color: var(--ink-2); }
.masthead-nav a:hover { color: var(--ink-1); }

/* ——— shell: sticky TOC + main column ——— */
.docs-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 56px;
  padding-top: 36px;
}
.docs-main { min-width: 0; }
.docs-main > .sect {
  border-top: 1px solid var(--line-3);
  padding: 48px 0 56px;
}
.docs-main > .sect:first-child { border-top: none; padding-top: 24px; }
.docs-main p, .docs-main ul, .docs-main ol, .docs-main .warn { max-width: var(--body-col); }
.docs-main .scroll-x, .docs-main .steps-n { max-width: none; }

.toc { position: sticky; top: 28px; align-self: start; }
.toc > summary { list-style: none; cursor: default; }
.toc > summary::-webkit-details-marker { display: none; }
.toc-cap {
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 7px; }
.toc a { font-size: 13.5px; color: var(--ink-3); }
.toc a:hover { color: var(--ink-1); text-decoration: none; }
.toc a.on { color: var(--ink-1); font-weight: var(--subhead-weight); }
.toc .toc-n {
  font-family: var(--font-mono);
  font-stretch: var(--num-stretch);
  font-size: 10px;
  color: var(--ink-4);
  margin-right: 7px;
}

/* ——— prose furniture ——— */
.lede { font-size: 20px; line-height: 1.6; color: var(--ink-2); }

.warn {
  border-left: 2px solid var(--orange-600);
  background: var(--orange-100);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: 12px 16px;
  margin: 20px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.warn b { color: var(--ink-1); font-weight: var(--subhead-weight); }

.api {
  font-family: var(--font-mono);
  font-stretch: var(--num-stretch);
  font-size: 0.85em;
  background: var(--paper-1);
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  padding: 1px 6px;
  white-space: nowrap;
}
h3 .api, h4 .api { font-size: 0.92em; background: none; border: none; padding: 0; }

/* numbered onboarding steps */
.steps-n { list-style: none; margin: 0; padding: 0; counter-reset: sn; }
.steps-n > li {
  position: relative;
  padding: 0 0 30px 44px;
  border-left: 1px solid var(--line-2);
  margin-left: 13px;
}
.steps-n > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps-n > li::before {
  counter-increment: sn;
  content: counter(sn, decimal-leading-zero);
  position: absolute;
  left: -14px;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-600);
  color: #F4F2EC;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-stretch: var(--num-stretch);
  font-size: 10px;
}
.steps-n h3 { margin: 2px 0 0.4em; }
.steps-n p { font-size: 14.5px; color: var(--ink-2); }
.steps-n .code { margin: 14px 0 0; }

/* ——— code blocks (dark cards) ——— */
.code, .tabs {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: 8px;
  overflow: hidden;
  margin: 18px 0;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--on-inverse-line);
}
.code-cap {
  margin: 0;
  font-size: 12px;
  color: var(--on-inverse-55);
}
.code pre, .tabs-panel > pre {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-stretch: var(--num-stretch);
  font-size: 12.5px;
  line-height: 1.75;
  overflow-x: auto;
}
.code code, .tabs-panel code { font-size: inherit; font-stretch: inherit; }

/* syntax roles on the dark surface */
.cmt { color: var(--on-inverse-55); }
.str { color: var(--butter); }
.hl  { color: var(--mint); }

/* copy button (lives on the dark surface) */
.copy {
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-inverse-55);
  background: transparent;
  border: 1px solid rgba(244, 242, 236, .3);
  border-radius: var(--r-1);
  padding: 4px 10px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-swift), border-color var(--dur-1) var(--ease-swift);
}
.copy:hover { color: var(--text-on-inverse); border-color: var(--text-on-inverse); }
.copy.done { color: var(--mint); border-color: var(--mint); }

/* language tabs */
.tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--on-inverse-line);
}
.tabs-bar [role="tab"] {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 0 8px;
  font-family: var(--font-mono);
  font-stretch: var(--num-stretch);
  font-size: 11.5px;
  color: var(--on-inverse-55);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-swift);
}
.tabs-bar [role="tab"]:hover { color: var(--text-on-inverse); }
.tabs-bar [role="tab"][aria-selected="true"] {
  color: var(--text-on-inverse);
  border-bottom-color: var(--mint);
}
.tabs-bar .copy { margin-left: auto; align-self: center; }
.tabs-panel { margin: 0; }
.tabs-cap {
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-inverse-55);
  margin: 0;
  padding: 10px 16px 0;
  display: none; /* shown by the noscript fallback in the page head */
}

/* ——— tables ——— */
.sched-cap {
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 26px 0 10px;
}
.scroll-x { overflow-x: auto; }
.scroll-x .sched { min-width: 640px; }
.scroll-x .sched-vars { min-width: 780px; }
.sched { width: 100%; border-collapse: collapse; }
.sched th {
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 460;
  color: var(--ink-4);
  text-align: left;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--line-1);
}
.sched td {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--line-3);
  vertical-align: top;
}
.sched td:first-child { color: var(--ink-1); font-weight: var(--subhead-weight); }
.sched th:last-child, .sched td:last-child { padding-right: 0; }
.sched td.num, .sched th.num { text-align: right; }
.sched td.num {
  font-family: var(--font-mono);
  font-stretch: var(--num-stretch);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sched .why { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.sched td.mark, .sched th.mark { text-align: center; }
.sched td.mark { color: var(--ink-4); }
.sched td.mark-y { color: var(--green-600); }
.sched-band td {
  font-family: var(--font-mono);
  font-stretch: 80%;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: none;
  padding: 20px 0 4px;
}
.sched-band:first-child td { padding-top: 4px; }

/* ——— footer ——— */
.footer {
  border-top: 1px solid var(--line-3);
  margin-top: 56px;
  padding: 22px 0 30px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.footer a { color: var(--ink-3); }
.footer a:hover { color: var(--ink-1); }

/* ——— responsive ——— */
@media (max-width: 1080px) {
  .docs-shell { grid-template-columns: 1fr; gap: 8px; }
  .toc { position: static; }
  .toc > summary { cursor: pointer; }
  .docs-main > .sect:first-child { padding-top: 32px; }
}
@media (max-width: 700px) {
  .masthead { height: auto; padding: 14px 0; flex-wrap: wrap; gap: 10px 22px; }
  .masthead-nav { margin-left: 0; width: 100%; }
  .steps-n > li { padding-left: 36px; }
}

/* The product's logo lockup in place of the text wordmark. */
.wordmark img { display: block; height: 25px; width: auto; }
.footer-row .wordmark img { height: 19px; }
.shot-bar .wordmark img { height: 18px; }