/* SDK page. Tokens come from styles.css, structure from docs.css. */
/* The SDK components read --qb-*; map them onto this site's tokens. */
.docs-main qb-pricing-table, .docs-main qb-usage-meter, .docs-main qb-invoice-list, .docs-main qb-entitlement,
.docs-main qb-checkout-button, .docs-main qb-portal-button, .docs-main qb-observation-badge, .docs-main qb-price,
.verchip, #themeStage {
  --qb-accent: var(--accent); --qb-accent-fg: var(--accent-ink); --qb-bg: var(--surface); --qb-fg: var(--ink);
  --qb-muted: var(--ink-2); --qb-border: var(--line); --qb-font: var(--f-body); --qb-font-mono: var(--f-mono);
}
.demo { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.demo-top span:first-child { color: var(--collapse); }
.demo-body { padding: 20px; min-width: 0; }
.demo-body.row, .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.demo-body.stack, .stack { display: grid; gap: 16px; }
.docs-main .demo-body p.sent { font-size: 1.15rem; max-width: none; color: var(--ink); }
.docs-main .sent b { font-weight: 600; }
.gate { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 70ch; }
.gate.on { border-left: 3px solid var(--good); } .gate.off { border-left: 3px solid var(--bad); } .gate.maybe { border-left: 3px solid var(--collapse); }
.modes { display: flex; gap: 8px 20px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 10px; margin: 0; min-width: 0; font: 500 13px var(--f-mono); }
.modes legend { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); padding: 0 6px; }
.modes label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.modes input { accent-color: var(--accent); }
.mini { font: 600 12px var(--f-mono); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.mini:hover, .mini.on { border-color: var(--accent); color: var(--accent); }
.themes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.demo .btn small { text-transform: none; letter-spacing: 0; }
.feed { max-height: 190px; overflow: auto; }
.docs-main .feed li { color: var(--ink-2); }
.docs-main .feed li span { overflow-wrap: anywhere; }
.guar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: g; max-width: 76ch; }
.guar li { counter-increment: g; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.guar li::before { content: counter(g, decimal-leading-zero); grid-row: span 2; font: 600 13px var(--f-mono); color: var(--collapse); padding-top: 3px; }
.guar b { color: var(--ink); font: 600 1.05rem var(--f-display); letter-spacing: -.01em; }
.guar span { color: var(--ink-2); }
.callout-link { margin-top: 4px; }
.code pre { white-space: pre; }
.tbl td:nth-child(2) code { white-space: normal; }
.docs-main .tbl-wrap + .tbl-wrap { margin-top: -4px; }
@media (max-width: 560px) { .demo-body { padding: 14px; } .docs-hero .ctas .btn { width: 100%; justify-content: center; } }