/* Shared stylesheet for the content pages (guides, use cases,
   comparisons, their indexes). The tokens are the Instrument identity
   copied verbatim from index.html, which keeps its own inline copy so the
   landing page stays a single file. The thing advertised must look like
   the thing installed (COMMERCIAL_SPEC.md §5). */
:root {
  --bg: #f2f4f5;
  --bg-raised: #ffffff;
  --bg-sunken: #e9ecee;
  --border: #d5dade;
  --text: #1a1f24;
  --text-muted: #5b6670;
  --text-faint: #7d8891;
  --accent: #0f7b8a;
  --accent-strong: #0a5a66;
  --accent-soft: #d7eef2;
  --chrome-bg: #1a1f24;
  --chrome-text: #a9b2b9;
  --chrome-text-strong: #ffffff;
  --chrome-raised: #2a3138;
  --chrome-accent: #6fc4d1;
  --radius: 2px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.65; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.measure { max-width: 720px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--bg-raised); color: var(--text); padding: 8px 12px; border: 1px solid var(--border); z-index: 10; }
.skip:focus { left: 8px; }

/* ---- header: a slim strip of the instrument's dark housing ---- */
.site-head { background: var(--chrome-bg); color: var(--chrome-text); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 60px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--chrome-accent); text-decoration: none; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.brand svg { display: block; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-nav a { color: var(--chrome-text); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--chrome-text-strong); }
.site-nav a[aria-current="true"] { color: var(--chrome-text-strong); }
.site-nav .button { color: #ffffff; }

/* ---- buttons ---- */
.button { display: inline-block; font: inherit; font-weight: 600; padding: 11px 22px; cursor: pointer; text-decoration: none; background: var(--accent); color: #ffffff; border: 1px solid var(--accent); border-radius: var(--radius); }
.button:hover, .button:focus-visible { background: var(--accent-strong); border-color: var(--accent-strong); }
.site-nav .button { padding: 7px 14px; font-size: 13px; font-family: var(--font); letter-spacing: 0; text-transform: none; }
.button.ghost { background: transparent; color: var(--accent-strong); }
.button.ghost:hover { background: var(--accent-soft); }

/* ---- article ---- */
.article-head { padding: 56px 0 28px; }
.article-head .kicker { display: block; margin-bottom: 10px; }
.article-head h1 { margin: 0 0 16px; font-size: clamp(30px, 4.6vw, 44px); font-weight: 700; }
.article-head .lede { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-muted); }
.article-meta { margin: 18px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.article-meta a { color: inherit; }
.article { padding: 0 0 56px; }
.article h2 { font-size: clamp(22px, 3vw, 28px); margin: 44px 0 12px; }
.article h3 { font-size: 19px; margin: 28px 0 8px; }
.article p, .article li { color: var(--text); }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 24px; }
.article li { margin-bottom: 6px; }
.article li::marker { color: var(--accent); }
.article strong { font-weight: 600; }
.article code, .article pre { font-family: var(--font-mono); font-size: 0.92em; }
.article code { background: var(--bg-sunken); padding: 1px 5px; border-radius: var(--radius); }
.article pre { background: var(--chrome-bg); color: var(--chrome-text-strong); padding: 14px 18px; border-radius: var(--radius); overflow-x: auto; line-height: 1.5; margin: 0 0 16px; }
.article pre code { background: none; padding: 0; color: inherit; }
.article figure { margin: 28px 0; }
.article figure img, .article figure video { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius); }
.article figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.article blockquote { margin: 0 0 16px; border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; color: var(--text-muted); }
.article .note { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 20px 0; color: var(--text-muted); }
.article .note strong { color: var(--accent-strong); }

/* ---- tables ---- */
.table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; background: var(--bg-raised); border: 1px solid var(--border); }
.table th, .table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-sunken); font-weight: 600; }
.table tr:last-child td { border-bottom: none; }
.table th[scope="row"] { font-family: var(--font); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-muted); background: none; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.table .good { color: var(--accent-strong); font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
.table-wrap .table { min-width: 560px; margin: 0; }

/* ---- mid-article call to action ---- */
.callout { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 22px 24px; margin: 32px 0; display: flex; flex-direction: column; gap: 10px; }
.callout p { margin: 0; color: var(--text); }
.callout strong { color: var(--accent-strong); }
.callout .button { align-self: flex-start; }

/* ---- faq: the same disclosure list as the landing page ---- */
.faq { display: flex; flex-direction: column; margin: 12px 0 0; }
.faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq summary { font-weight: 600; padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 16px; color: var(--text-muted); }

/* ---- related pages ---- */
.related { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
.related h2 { font-size: 16px; margin: 0 0 10px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---- closing call to action: the dark housing again ---- */
.cta-end { background: var(--chrome-bg); color: var(--chrome-text); padding: 56px 0; }
.cta-end .wrap { display: flex; flex-direction: column; gap: 16px; }
.cta-end h2 { margin: 0; color: var(--chrome-text-strong); font-size: clamp(22px, 3vw, 30px); }
.cta-end p { margin: 0; max-width: 620px; }
.cta-end .button { align-self: flex-start; }
.cta-end .fineprint-note { font-family: var(--font-mono); font-size: 12px; color: var(--chrome-text); }

/* ---- footer ---- */
footer.site-foot { background: var(--chrome-bg); color: var(--chrome-text); padding: 28px 0 40px; border-top: 1px solid var(--chrome-raised); }
/* No opacity here: 12px mono text at 70% on the dark housing fails the
   4.5:1 contrast ratio. The muted chrome colour passes as it is. */
footer.site-foot .fineprint { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--chrome-text); }
footer.site-foot a { color: inherit; }

/* ---- index pages ---- */
.index-head { padding: 56px 0 24px; }
.index-head h1 { margin: 0 0 12px; font-size: clamp(30px, 4.6vw, 44px); }
.index-head p { margin: 0; color: var(--text-muted); font-size: 19px; max-width: 640px; }
.index { padding: 0 0 64px; }
.index h2 { font-size: 22px; margin: 36px 0 14px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.cards li { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.cards li a { font-weight: 600; text-decoration: none; font-size: 17px; }
.cards li a:hover { text-decoration: underline; }
.cards li p { margin: 0; color: var(--text-muted); font-size: 15px; }
.cards li .kicker { font-size: 11px; }
.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.list li { border-bottom: 1px solid var(--border); padding: 14px 0; display: flex; flex-direction: column; gap: 4px; }
.list li a { font-weight: 600; text-decoration: none; font-size: 17px; }
.list li a:hover { text-decoration: underline; }
.list li p { margin: 0; color: var(--text-muted); font-size: 15px; }

@media (max-width: 780px) {
  body { font-size: 16px; }
  .article-head { padding-top: 40px; }
  .article-head .lede { font-size: 18px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .site-nav { margin-left: 0; width: 100%; gap: 14px; }
}