/* Page chrome for the standalone API reference (index.html in this folder).
   A FILE, not an inline <style>: the page carries its own strict CSP (style-src 'self'), which blocks
   inline style elements. Stoplight's own reset is loaded before this, so these rules win by order. */
html, body { margin: 0; height: 100%; background: #fff; }
body { display: flex; flex-direction: column; }
/* Slim bar so the tab is not an orphan: it says where you are and how to get back to the site. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; background: #0B1224; color: #F3F5F9; font: 600 14px/1.4 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
.topbar .who { display: inline-flex; align-items: center; gap: 10px; }
/* inline style attributes are blocked here too (style-src covers attributes), so this lives in CSS */
.topbar .sub { font-weight: 500; opacity: .7; }
.topbar .mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #4267B2; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.topbar .links { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #F3F5F9; text-decoration: none; font-weight: 600; font-size: 13px; }
.topbar a:hover { background: rgba(255,255,255,.2); }
elements-api { display: block; flex: 1; min-height: 0; }
@media (max-width: 640px) { .topbar { padding: 8px 12px; font-size: 13px; } .topbar .sub { display: none; } }