/* Stripe-docs layout in the portal's dark Formlabs palette: Dark Grey ground, Off White ink, Formlabs Orange for action. */
@font-face { font-family: "Supreme"; src: url("/assets/fonts/Supreme-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("/assets/fonts/Supreme-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("/assets/fonts/Supreme-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("/assets/fonts/Supreme-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Midnight Sans 36"; src: url("/assets/fonts/MidnightSans36-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Midnight Sans 48"; src: url("/assets/fonts/MidnightSans48-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0F1D26;
  --bg-sunk: #0B161D;
  --panel: #16252E;
  --panel-2: #1C2F3A;
  --ink: #FCF7EE;
  --ink-2: rgba(252, 247, 238, 0.76);
  --ink-3: rgba(252, 247, 238, 0.56);
  --line: rgba(252, 247, 238, 0.12);
  --line-strong: rgba(252, 247, 238, 0.22);
  --accent: #FF5A00;
  --accent-ink: #FF8A4C;
  --accent-soft: rgba(255, 90, 0, 0.12);
  --blue: #7EB6FF;
  --yellow: #F2C94C;
  --red: #FF6B6B;
  --green: #5FD3A6;
  --topbar-bg: rgba(15, 29, 38, 0.92);
  --panel-soft: rgba(22, 37, 46, 0.5);
  --font: "Supreme", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The top bar's height, which sticky elements and anchor scrolling keep clear of. */
  --banner: 0px;
  --top: calc(61px + var(--banner));
  --sidebar: 272px;
  --toc: 232px;
}

/* Light palette, picked with the theme toggle in the top bar: White ground, Dark Grey ink. The accent hues are
   darkened so text in them stays readable on white. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-sunk: #F7F5F0;
  --panel: #FAF8F4;
  --panel-2: #F1EDE5;
  --ink: #0F1D26;
  --ink-2: rgba(15, 29, 38, 0.76);
  --ink-3: rgba(15, 29, 38, 0.58);
  --line: rgba(15, 29, 38, 0.12);
  --line-strong: rgba(15, 29, 38, 0.24);
  --accent-ink: #C24100;
  --accent-soft: rgba(255, 90, 0, 0.10);
  --blue: #1F5FBF;
  --yellow: #8A6100;
  --red: #C62828;
  --green: #1B7F5A;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --panel-soft: rgba(241, 237, 229, 0.5);
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); }
img { max-width: 100%; height: auto; }
.icon { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.2em; }

/* ---- Top bar ---------------------------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 24px; max-width: 1600px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { filter: invert(1) brightness(1.1); }
:root[data-theme="light"] .brand img { filter: none; }
.brand span { font-family: "Midnight Sans 36", var(--font); font-weight: 600; letter-spacing: -0.01em; }
.brand b { font-weight: 600; }
.search-trigger { display: flex; align-items: center; gap: 8px; width: min(360px, 40vw); height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-3); font: inherit; font-size: 14px; cursor: pointer; }
.search-trigger:hover { border-color: var(--line-strong); color: var(--ink-2); }
.search-trigger svg { width: 16px; height: 16px; fill: currentColor; }
.search-trigger kbd { margin-left: auto; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; }
.topbar-links { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.topbar-links a { color: var(--ink-2); }
.topbar-links a:hover { color: var(--ink); text-decoration: none; }
.theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.theme-toggle .icon-moon, :root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.menu-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 20px; cursor: pointer; }

/* ---- Shell ------------------------------------------------------------------------------------------ */
/* Named areas so each part keeps its slot whichever parts a page has: without them the outline wraps under the
   content on pages with fewer columns. Guide pages size the content column to the prose, so the outline sits
   beside the text rather than at the far edge of a wide window. */
.shell { --main: minmax(0, 892px); display: grid; grid-template-columns: var(--sidebar) var(--main) var(--toc); grid-template-areas: "side main toc"; max-width: 1600px; margin: 0 auto; }
.no-sidebar .shell { grid-template-columns: var(--main) var(--toc); grid-template-areas: "main toc"; justify-content: center; }
.kind-home .shell { --main: minmax(0, 1232px); }
.kind-api .shell, .kind-models .shell, .kind-api-home .shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-areas: "side main"; }
.shell > .sidebar { grid-area: side; }
.shell > .content { grid-area: main; }
.shell > .toc { grid-area: toc; }
.kind-api .toc, .kind-models .toc { display: none; }
.sidebar { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; padding: 28px 16px 48px 24px; border-right: 1px solid var(--line); scrollbar-width: thin; }
.content { min-width: 0; padding: 40px 56px 64px; }
.kind-api .content, .kind-models .content { padding: 40px 48px 64px; }
.toc { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; padding: 44px 24px 48px 8px; font-size: 13px; }

/* ---- Sidebar nav ------------------------------------------------------------------------------------ */
.toc-heading { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar-nav a, .sidebar-nav summary > span { display: block; padding: 5px 10px; border-radius: 6px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.sidebar-nav a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.sidebar-nav a.active { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
/* A group's heading is its section's link; the chevron beside it opens and closes the group. */
.sidebar-nav summary { display: flex; align-items: center; list-style: none; cursor: pointer; border-radius: 6px; }
.sidebar-nav summary::-webkit-details-marker { display: none; }
.sidebar-nav summary > a, .sidebar-nav summary > span { flex: 1; min-width: 0; }
.sidebar-nav summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 10px 0 8px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.sidebar-nav details[open] > summary::after { transform: rotate(45deg); }
.sidebar-nav summary:hover::after { border-color: var(--ink); }
.sidebar-nav summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sidebar-nav .depth-0 { margin-top: 14px; }
.sidebar-nav .depth-0 > details > summary > a, .sidebar-nav .depth-0 > details > summary > span { font-weight: 600; color: var(--ink); }
.sidebar-nav .depth-0 > details > summary > a.active { color: var(--accent-ink); }
.sidebar-nav details > ul { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.sidebar-nav .ops { margin: 4px 0 10px 10px; padding-left: 6px; border-left: 1px solid var(--line); }
.sidebar-nav .ops a { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 4px 8px; }
.sidebar-nav .ops a.current { color: var(--ink); background: var(--panel); }
.m { flex: none; width: 38px; font: 700 10px/1 var(--mono); letter-spacing: 0.02em; text-align: right; }
.m-get { color: var(--blue); } .m-post { color: var(--accent-ink); } .m-put, .m-patch { color: var(--yellow); } .m-delete { color: var(--red); }

/* ---- TOC -------------------------------------------------------------------------------------------- */
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: flex; gap: 6px; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); line-height: 18px; }
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.current { color: var(--ink); border-left-color: var(--accent); }
.toc .l3 a { padding-left: 26px; }
.toc .m { width: auto; text-align: left; }

/* ---- Prose ------------------------------------------------------------------------------------------ */
.prose { max-width: 780px; }
.kind-home .prose { max-width: 1120px; margin: 0 auto; }
.kind-api .prose, .kind-models .prose, .kind-api-home .prose { max-width: 1320px; }
.prose > h1:first-of-type, .page-status + h1 { margin-top: 0; }
.prose h1 { font: 700 34px/1.2 var(--font); letter-spacing: -0.015em; margin: 0 0 16px; }
.prose h2 { font: 700 24px/1.3 var(--font); letter-spacing: -0.01em; margin: 48px 0 12px; }
.prose h3 { font: 700 18px/1.4 var(--font); margin: 32px 0 8px; }
.prose h4 { font: 700 15px/1.5 var(--font); margin: 24px 0 6px; }
.prose h1 + p { font-size: 18px; color: var(--ink-2); }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .anchor { margin-left: 8px; color: var(--ink-3); opacity: 0; font-weight: 400; }
.prose :is(h2, h3, h4):hover .anchor { opacity: 1; }
.prose .anchor:hover { color: var(--accent-ink); text-decoration: none; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--ink-3); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.prose :not(pre) > code { font-size: 0.86em; padding: 0.12em 0.38em; border-radius: 5px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.prose a code { color: var(--accent-ink); }
.prose blockquote { margin: 20px 0; padding: 4px 18px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th { text-align: left; font-weight: 600; color: var(--ink); background: var(--panel); }
.prose th, .prose td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.prose tr:last-child td { border-bottom: 0; }
figure { margin: 24px 0; }
figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); text-align: center; }
.prose img { border-radius: 10px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.image-grid p { margin: 0; }

.page-status { margin-bottom: 14px; }
.page-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The API reference's version picker: a disclosure of links, so it works without script and crawlers see plain links. */
.version-picker { position: relative; }
.version-picker > summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font: 600 12px/18px var(--font); color: var(--ink); cursor: pointer; list-style: none; user-select: none; }
.version-picker > summary::-webkit-details-marker { display: none; }
.version-picker > summary > span { color: var(--ink-3); font-weight: 500; }
.version-picker > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.version-picker > summary:hover { border-color: var(--line-strong); }
.version-picker ul { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.version-picker li { margin: 0; }
.version-picker a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.version-picker a:hover { background: var(--panel-2); color: var(--ink); }
.version-picker a[aria-current] { color: var(--accent-ink); font-weight: 600; }
.version-picker small { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.version-notice { margin-top: 0; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12px/18px var(--font); letter-spacing: 0.02em; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); vertical-align: middle; }
.badge-draft, .badge-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: rgba(255, 90, 0, 0.3); }
.badge-stub { color: var(--yellow); }

.button { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: 15px; }
.button:hover { text-decoration: none; border-color: var(--ink-3); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #0F1D26; }
.button.primary:hover { background: #FF7326; }

/* ---- Code ------------------------------------------------------------------------------------------- */
.code-block { margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunk); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.code-label { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; }
.copy { padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink-3); font: 500 12px var(--font); cursor: pointer; }
.copy:hover { color: var(--ink); border-color: var(--line-strong); }
.copy.done { color: var(--green); }
/* Code is highlighted with a dark and a light theme at build time; the light colors ride along as --shiki-light. */
:root[data-theme="light"] .shiki, :root[data-theme="light"] .shiki span { color: var(--shiki-light) !important; }
.code-block pre.shiki { margin: 0; padding: 14px 16px; overflow-x: auto; background: transparent !important; font-size: 13.5px; line-height: 1.6; }
.code-block[data-lang="text"] .code-head { display: none; }
pre.mermaid { display: flex; justify-content: center; margin: 24px 0; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: transparent; }
pre.mermaid[data-processed] { color: inherit; }
pre.mermaid svg * { filter: none !important; }
pre.mermaid svg :is(.node, .cluster) :is(rect, .basic.label-container) { rx: 6px; ry: 6px; }
/* An edge with an arrowhead at both ends, such as a two-way connection: in blue, so it reads apart from one-way flow.
   site.js marks the edges and gives them their own arrowheads. */
pre.mermaid svg .edge-both { stroke: var(--blue) !important; }
pre.mermaid svg .marker-both, pre.mermaid svg .marker-both * { fill: var(--blue) !important; stroke: var(--blue) !important; }

/* ---- Tabs ------------------------------------------------------------------------------------------- */
.tabs { margin: 20px 0; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: -1px; }
.tab-bar button { padding: 8px 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-3); font: 600 13px var(--font); cursor: pointer; }
.tab-bar button:hover { color: var(--ink); }
.tab-bar button.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel > .code-block:first-child { margin-top: 12px; }
.tab-panel > :first-child:not(.code-block) { margin-top: 14px; }

/* ---- Callouts --------------------------------------------------------------------------------------- */
.callout { margin: 24px 0; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.callout-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 15px; }
.callout-body > :first-child { margin-top: 6px; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body p { font-size: 15px; }
.callout-warning { border-color: rgba(242, 201, 76, 0.35); background: rgba(242, 201, 76, 0.07); }
.callout-warning .callout-title .icon { fill: var(--yellow); }
.callout-info, .callout-note { border-color: rgba(126, 182, 255, 0.3); background: rgba(126, 182, 255, 0.06); }
.callout-info .callout-title .icon { fill: var(--blue); }
.callout-danger { border-color: rgba(255, 107, 107, 0.35); background: rgba(255, 107, 107, 0.07); }

/* ---- Cards and hero --------------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 20px 0 8px; }
.card { position: relative; padding: 20px 22px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); transition: border-color 0.15s, transform 0.15s; }
.card:hover { border-color: var(--line-strong); }
.card.linked:hover { border-color: rgba(255, 90, 0, 0.55); transform: translateY(-1px); }
.card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; font-size: 16px !important; color: var(--ink); }
.card-title .icon { width: 22px; height: 22px; fill: var(--accent); }
.card-title a { color: var(--ink); }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card p { margin: 6px 0; font-size: 14.5px; line-height: 1.55; }
.card p:last-child a { font-weight: 600; }
.card p:last-child a:not(.external)::after { content: " →"; }
/* Compact, so the demo video below it is in view on a laptop screen. */
.hero { margin: 0 0 20px; padding: 20px 32px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.hero.has-logo { display: flex; align-items: center; gap: 28px; }
.kind-home .content { padding-top: 24px; }
.hero-logo { flex: none; width: 56px; height: auto; filter: invert(1) brightness(1.1); }
:root[data-theme="light"] .hero-logo { filter: none; }
.hero .eyebrow { margin: 0 0 14px; color: var(--accent-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { font-family: "Midnight Sans 48", var(--font); font-weight: 600; font-size: 31px; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 8px; }
.prose .hero p { max-width: 720px; margin: 0; font-size: 16px; line-height: 1.5; }
/* A card on its own takes the whole row. */
.cards:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---- API reference ---------------------------------------------------------------------------------- */
.endpoint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); }
.endpoint-text > h2 { margin-top: 0; font-size: 24px; }
.route { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.route code { font-size: 14px !important; background: none !important; border: 0 !important; padding: 0 !important; color: var(--ink-2) !important; }
.method { font: 700 11px/1 var(--mono); padding: 5px 7px; border-radius: 5px; letter-spacing: 0.04em; }
.method-get { color: var(--blue); background: rgba(126, 182, 255, 0.12); }
.method-post { color: var(--accent-ink); background: var(--accent-soft); }
.method-put, .method-patch { color: var(--yellow); background: rgba(242, 201, 76, 0.12); }
.method-delete { color: var(--red); background: rgba(255, 107, 107, 0.12); }
.endpoint-text p, .endpoint-text li { font-size: 15px; }
.endpoint-text h4 { font-size: 14px; color: var(--ink); }
.endpoint-text .table-wrap { font-size: 13px; }
.endpoint-text table { font-size: 13px; }
/* The samples column is about 60 characters wide on a 13" laptop, too narrow for the spec's UUIDs and paths, so
   long lines wrap there instead of scrolling, at any character so a value never leaves its indent behind, and
   hang 4ch past the line's own indent. Laying the lines out as a
   column drops the newlines between them, so an empty line needs a character to keep its height. */
.endpoint-examples pre.shiki { white-space: pre-wrap; word-break: break-all; }
.endpoint-examples pre.shiki code { display: flex; flex-direction: column; }
.endpoint-examples pre.shiki .line { padding-left: calc(var(--indent, 0ch) + 4ch); text-indent: calc(-4ch - var(--indent, 0ch)); }
.endpoint-examples pre.shiki .line:empty::after { content: "\200b"; }
.endpoint-examples .sticky { position: sticky; top: calc(var(--top) + 24px); display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--top) - 48px); overflow-y: auto; scrollbar-width: thin; }
.example { border-radius: 12px; background: var(--bg-sunk); border: 1px solid var(--line); overflow: hidden; flex: none; }
.example-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.example-title { font: 700 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }
.example-sub { font-size: 13px; color: var(--ink-2); }
.example .tabs { margin: 0; }
.example .tab-bar { padding: 0 8px; background: var(--panel); }
.example .code-block { margin: 0 !important; border: 0; border-radius: 0; }
.example .code-head { display: none; }
.example pre.shiki { font-size: 13px; max-height: 460px; overflow: auto; }
.example .copy-float { position: absolute; }

/* The reference overview: the spec's introduction as bands (see introSections in lib/openapi.mjs). Its panels are short
   enough to read whole, so the column doesn't stick and code blocks aren't capped: nothing scrolls inside the page. */
.band { padding: 48px 0; }
.band:first-child { border-top: 0; padding-top: 8px; }
.band-solo { grid-template-columns: minmax(0, 1fr); }
.band-solo .endpoint-text > :not(.cards) { max-width: 780px; }
.band .sticky { position: static; max-height: none; overflow: visible; }
.band .example pre.shiki { max-height: none; }
.band:first-child h1 { margin: 0 0 10px; }
.band:first-child h1 + p { margin: 0 0 18px; }
.band:first-child h1 + p + p { font-size: 19px; line-height: 1.55; color: var(--ink); }
.band .endpoint-text > h3 { font-size: 16px; margin: 24px 0 6px; }
.band .example-title { text-transform: uppercase; }
.band .example > p { margin: 12px 16px; font-size: 13px; color: var(--ink-3); }
.band .example > p:first-of-type code { font: 600 15px var(--mono); color: var(--ink); background: none; border: 0; padding: 0; }
.band .example > ul { list-style: none; margin: 4px 16px 8px; padding: 0; }
.band .example > ul li { display: grid; gap: 2px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.band .example > ul li:last-child { border-bottom: 0; }
.band .example > ul a { font-size: 14px; font-weight: 600; }
/* A table panel reads as a list: flat rows inside the panel, no box of its own, the header kept for screen readers. */
.band .example > .table-wrap { margin: 0; border: 0; border-radius: 0; }
.band .example table { font-size: 13px; line-height: 1.55; }
.band .example thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.band .example td { padding: 12px 16px; background: none; }
.band .example td + td { padding-left: 0; }
.band .example td:first-child { width: 34%; padding-right: 16px; }
.band .example td:first-child code { padding: 0; border: 0; background: none; font: 600 12.5px var(--mono); color: var(--ink); }
/* A numbered list in a band's text is a set of cards, each led by its bold first phrase. */
.band .endpoint-text > ol { list-style: none; counter-reset: card; display: grid; gap: 14px; margin: 24px 0 0; padding: 0; }
.band .endpoint-text > ol > li { counter-increment: card; position: relative; margin: 0; padding: 16px 18px 16px 58px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); font-size: 14.5px; line-height: 1.6; }
.band .endpoint-text > ol > li::before { content: counter(card); position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font); color: var(--accent-ink); background: var(--accent-soft); }
.band .endpoint-text > ol > li > strong:first-child, .band .endpoint-text > ol > li > p:first-child > strong:first-child { display: block; margin: 2px 0 6px; font-size: 16px; }
.diagram { margin: 0; padding: 12px 10px 6px; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .box { fill: var(--panel); stroke: var(--line-strong); }
.diagram .accent { fill: var(--accent-soft); stroke: rgba(255, 90, 0, 0.45); }
.diagram .chip { fill: var(--bg-sunk); stroke: var(--line-strong); }
.diagram text { font-family: var(--font); fill: var(--ink-2); text-anchor: middle; }
.diagram text.start { text-anchor: start; }
.diagram text.end { text-anchor: end; }
.diagram .strong { font-size: 14px; font-weight: 700; fill: var(--ink); }
.diagram .sub { font-size: 11.5px; fill: var(--ink-3); }
.diagram .chip-title { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.diagram .label { font: 600 11.5px var(--mono); fill: var(--ink-2); }
.diagram .memory { font-size: 12px; font-weight: 600; fill: var(--accent-ink); }
.diagram .arrow { stroke: var(--ink-3); stroke-width: 1.5; }
.diagram .head { fill: var(--ink-3); }

.fields { margin: 32px 0 0; }
.fields-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px !important; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 16px !important; }
.fields-note { font: 400 13px var(--mono); color: var(--ink-3); }
.field-list, .child-fields { list-style: none; margin: 0; padding: 0; }
.field { margin: 0 !important; padding: 14px 0; border-bottom: 1px solid var(--line); }
.field-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.field-name { font: 700 14px var(--mono); color: var(--ink) !important; background: none !important; border: 0 !important; padding: 0 !important; }
.field-type { font-size: 13px; color: var(--ink-3); }
a.field-type { color: var(--ink-3); text-decoration: underline dotted; text-underline-offset: 3px; }
a.field-type:hover { color: var(--accent-ink); }
.field-required { font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.field-deprecated { font-size: 12px; font-weight: 600; color: var(--yellow); }
.field-desc > * { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 1.55; }
.field-desc .field-enum, .field-desc .field-default { color: var(--ink-3); font-size: 13px !important; }
.field-desc .field-enum code, .field-desc .field-default code { font-size: 12px; }
.child-toggle { margin-top: 10px; }
.child-toggle > summary { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 13px; cursor: pointer; list-style: none; user-select: none; }
.child-toggle > summary::-webkit-details-marker { display: none; }
.child-toggle > summary::before { content: "+"; font-weight: 700; }
.child-toggle[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: transparent; background: var(--panel); }
.child-toggle[open] > summary::before { content: "−"; }
.child-toggle[open] > summary { color: var(--ink); }
.child-fields { border: 1px solid var(--line); border-radius: 0 10px 10px 10px; padding: 0 16px; background: var(--panel-soft); }
.child-fields > .field:last-child { border-bottom: 0; }
.kind-models .prose h2 { padding-top: 32px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 20px; }
.kind-models .prose h2 + p { margin-top: -4px; }
.kind-models .fields { max-width: 780px; }
.kind-api .prose > h1 + p, .kind-api .prose > h1 ~ p:not(.endpoint *) { max-width: 780px; }

/* ---- Pager and footer ------------------------------------------------------------------------------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 780px; margin: 56px 0 0; }
.pager a { display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 600; }
.pager a:hover { border-color: rgba(255, 90, 0, 0.55); text-decoration: none; }
.pager small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.pager .next { text-align: right; grid-column: 2; }
.footer { max-width: 780px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.kind-home .footer, .kind-home .pager { margin-left: auto; margin-right: auto; max-width: 1120px; }

/* ---- Search ----------------------------------------------------------------------------------------- */
.search-modal { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(5, 12, 16, 0.6); backdrop-filter: blur(3px); }
.search-modal[hidden] { display: none; }
.search-panel { width: min(640px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); overflow: hidden; }
.search-panel input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 16px var(--font); outline: none; }
.search-results { list-style: none; margin: 0; padding: 6px; max-height: 55vh; overflow-y: auto; }
.search-results a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); }
.search-results a:hover, .search-results li.selected a { background: var(--accent-soft); text-decoration: none; }
.search-results small { display: block; color: var(--ink-3); font-size: 12px; }
.search-results .snippet { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.search-results mark { background: none; color: var(--accent-ink); font-weight: 600; }
.search-hint { margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

/* ---- Site banner: a notice in the top bar of every page, from `banner` in site.yml --------------------------- */
:root.has-banner { --banner: 37px; }
:root:not(.has-banner) .site-banner { display: none; }
.site-banner { position: relative; box-sizing: border-box; min-height: var(--banner); display: flex; align-items: center; justify-content: center;
  padding: 8px 48px; border-top: 1px solid var(--line); background: var(--accent-soft); color: var(--ink);
  font-size: 14px; line-height: 1.4; text-align: center; }
.site-banner a { color: var(--accent-ink); font-weight: 600; }
.banner-close { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.banner-close:hover { background: var(--panel); color: var(--ink); }
.banner-close svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 640px) {
  :root.has-banner { --banner: 56px; }
  .site-banner { padding: 8px 44px 8px 16px; font-size: 13px; }
  .banner-close { right: 8px; }
}

/* ---- Feedback button: fixed at the bottom right of every page, like PreForm's ------------------------- */
.feedback { position: fixed; right: 20px; bottom: 20px; z-index: 12; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel);
  color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s, transform 0.15s; }
.feedback svg { width: 20px; height: 20px; fill: var(--accent); flex: none; }
.feedback:hover { text-decoration: none; border-color: rgba(255, 90, 0, 0.55); transform: translateY(-1px); }
.feedback:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme="light"] .feedback { background: var(--bg); box-shadow: 0 2px 10px rgba(15, 29, 38, 0.14); }
body.menu-open .feedback { display: none; }
@media print { .feedback { display: none; } }

/* ---- Narrow screens --------------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .shell, .kind-api-home .shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-areas: "side main"; }
  .no-sidebar .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .toc { display: none; }
  .endpoint { gap: 32px; }
}
@media (max-width: 1080px) { .endpoint { grid-template-columns: minmax(0, 1fr); } .endpoint-examples .sticky { position: static; max-height: none; } }
@media (max-width: 860px) {
  .shell, .kind-api .shell, .kind-models .shell, .kind-api-home .shell, .no-sidebar .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .sidebar { display: none; position: fixed; inset: var(--top) 0 0 0; z-index: 15; height: auto; background: var(--bg); border: 0; }
  body.menu-open .sidebar { display: block; }
  .menu-toggle { display: block; }
  .topbar-links { display: none; }
  .search-trigger { width: auto; flex: 1; }
  .content, .kind-api .content, .kind-models .content { padding: 28px 16px 48px; }
  .hero { padding: 20px 20px; }
  .hero.has-logo { gap: 16px; }
  .hero-logo { width: 40px; }
  .hero h1 { font-size: 22px; }
  /* Only the icon on a phone, so the button covers less of the page. */
  .feedback { right: 12px; bottom: 12px; padding: 10px; }
  .feedback span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.prose .example-sub { background: none; border: 0; padding: 0; font-size: 13px; color: var(--ink-2); }

/* ---- Accessibility helpers -------------------------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 60; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: #0F1D26; font-weight: 700; }
.skip:focus { top: 12px; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer .edit { white-space: nowrap; }

figure[style] { max-width: var(--figure-width); margin-left: auto; margin-right: auto; }

.demo-video { margin: 0 0 40px; }
/* On the home page, short enough to sit under the hero without scrolling: the viewport less the top bar, the hero and
   the margins between them. */
.kind-home .demo-video video { width: auto; max-width: 100%; max-height: calc(100vh - var(--top) - 200px); margin: 0 auto; }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1004; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.demo-video .demo-video-light { display: none; }
:root[data-theme="light"] .demo-video .demo-video-dark { display: none; }
:root[data-theme="light"] .demo-video .demo-video-light { display: block; }

/* ---- Enum values ------------------------------------------------------------------------------------ */
.values dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 0; font-size: 13px; }
.values dt { margin: 0; }
.values dt code { font-size: 12px; }
.values dd { margin: 0; color: var(--ink-2); }
.prose > .values, .kind-models .values { max-width: 780px; }
.field-meta { color: var(--ink-3) !important; font-size: 13px !important; }
.fields-note[href] { text-decoration: underline dotted; text-underline-offset: 3px; color: var(--ink-3); }

/* ---- Request example picker and response status tabs ------------------------------------------------ */
.variants { display: flex; flex-direction: column; }
.variant-picker { display: block; padding: 8px 10px 0; background: var(--panel); }
.variant-picker select { width: 100%; padding: 6px 30px 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-sunk); color: var(--ink); font: 500 13px var(--font); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.variant { display: none; }
.variant.active { display: block; }
.example .tabs-status .tab-bar { flex-wrap: wrap; }
.example .tabs-status .tab-bar button { font-family: var(--mono); font-size: 12px; }