/* Documentation uses GraphiteInk colors from styles.css and the app's bundled
   Instrument Sans. Spacing mirrors DesignTokens' 4/8/12/16/24/32/40/48 scale. */
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-SemiBold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
:root {
  --doc-xs: 4px; --doc-sm: 8px; --doc-md: 12px; --doc-lg: 16px;
  --doc-xl: 24px; --doc-2xl: 32px; --doc-3xl: 40px; --doc-4xl: 48px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--photo-ink); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2);
  --bg-sunk: var(--dark-surface-2); --ink: var(--dark-ink); --ink-2: var(--dark-ink-2);
  --ink-3: var(--dark-ink-3); --border: var(--dark-border); --border-strong: var(--dark-border-strong);
  --accent: var(--dark-accent); --accent-hi: var(--dark-accent);
}
body { font-size: 14px; line-height: 1.6; }
.integration-guide { max-width: 960px; padding: var(--doc-xl) var(--doc-2xl) var(--doc-4xl); overflow-wrap: anywhere; }
.integration-guide h1 { font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: var(--doc-md) 0; }
.integration-guide h1 br { display: none; }
.integration-guide h1 br::after { content: ' '; }
.integration-guide h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 var(--doc-lg); }
.integration-guide h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; margin: var(--doc-xl) 0 var(--doc-sm); }
.integration-guide p { margin: var(--doc-md) 0; }
.integration-guide strong { font-weight: 600; }
.integration-guide li + li { margin-top: var(--doc-sm); }
.integration-guide ul, .integration-guide ol { padding-left: var(--doc-xl); }
.integration-guide a { text-underline-offset: 3px; }
.integration-guide p a, .integration-guide li a { text-decoration: underline; }
.guide-nav { display: flex; flex-wrap: wrap; gap: var(--doc-xs) var(--doc-sm); align-items: center; border-bottom: 1px solid var(--border); padding-bottom: var(--doc-lg); margin-bottom: var(--doc-xl); }
.guide-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--doc-sm) var(--doc-md); color: var(--ink-2); border-radius: var(--r-sm); font-weight: 500; text-decoration: none; }
.guide-nav a:first-child { color: var(--ink); padding-left: 0; margin-right: auto; }
.guide-nav a:hover { background: var(--surface-2); }
.guide-nav [aria-current="page"] { color: var(--ink); background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--border); }
.guide-header { padding-bottom: var(--doc-lg); }
.guide-header > p:not(.guide-kicker) { color: var(--ink-2); max-width: 76ch; }
.guide-kicker { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.guide-actions { display: flex; flex-wrap: wrap; gap: var(--doc-sm); margin-top: var(--doc-xl); }
.guide-actions a, .copy-code { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--doc-sm) var(--doc-lg); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.guide-actions a:hover, .copy-code:hover { background: var(--surface-2); }
.guide-toc { display: flex; flex-wrap: wrap; gap: var(--doc-xs) var(--doc-lg); padding: var(--doc-md) 0; margin-bottom: var(--doc-xl); border-block: 1px solid var(--border); }
.guide-toc a { min-height: 40px; display: inline-flex; align-items: center; color: var(--ink-2); font-size: 13px; }
.integration-guide > section { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--doc-xl); margin-top: var(--doc-lg); background: var(--surface); }
.guide-callout { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--doc-lg); margin-block: var(--doc-lg); }
.guide-callout > :first-child { margin-top: 0; }
.guide-callout > :last-child { margin-bottom: 0; }
.integration-guide table { width: 100%; border-collapse: collapse; font-size: 13px; }
.integration-guide th, .integration-guide td { text-align: left; vertical-align: top; padding: var(--doc-md) var(--doc-sm); border-bottom: 1px solid var(--border); }
.integration-guide th { font-weight: 500; color: var(--ink-2); background: var(--bg-sunk); }
.integration-guide caption { text-align: left; font-weight: 500; padding-block: var(--doc-md); }
.integration-guide pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--doc-lg); line-height: 1.6; font-size: 12px; margin-top: var(--doc-sm); }
.integration-guide code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; }
.integration-guide pre code { font-size: inherit; }
.code-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--doc-sm); justify-content: space-between; color: var(--ink-3); font-size: 12px; margin-top: var(--doc-lg); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--doc-lg); }
.guide-grid article { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--doc-xl); background: var(--surface); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2; padding: var(--doc-md); background: var(--surface); color: var(--ink); }
.skip-link:focus { left: 0; }
.guide-footer { display: flex; flex-wrap: wrap; gap: var(--doc-lg); border-top: 1px solid var(--border); padding-block: var(--doc-lg); margin-top: var(--doc-xl); }
.guide-footer a { min-height: 40px; display: inline-flex; align-items: center; }
.copy-status { min-height: 1.5em; color: var(--ink-2); }
@media (max-width: 600px) {
  .integration-guide { padding: var(--doc-lg) var(--doc-lg) var(--doc-2xl); }
  .integration-guide h1 { font-size: 28px; }
  .integration-guide h2 { font-size: 20px; }
  .integration-guide > section, .guide-grid article { padding: var(--doc-lg); }
  .guide-nav a:first-child { flex-basis: 100%; }
  .guide-nav a { min-height: 44px; }
  .guide-actions a { width: 100%; min-height: 44px; }
}

/* Keep endpoint names readable; narrow screens scroll tables, not the page. */
div.guide-table { max-width: 100%; overflow-x: auto; }
div.guide-table table { min-width: 540px; }