/* NPReq account pages (#1000 part 3b). Same palette as the public site (styles.css), no web fonts,
   no inline styles anywhere, so the CSP can stay at style-src 'self'. */
:root {
  --primary: #0B3D5C;
  --secondary: #2A6F97;
  --warm: #A04A2A;
  --ink: #0C1B2A;
  --ink-muted: #5A6A7A;
  --surface: #FFFFFF;
  --surface-soft: #F5F8FB;
  --border: #D6E0EA;
  --success: #059669;
  --warn: #b45309;
  --danger: #b42318;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(12, 27, 42, 0.06), 0 1px 2px rgba(12, 27, 42, 0.04);
  --font: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface-soft); color: var(--ink); font-family: var(--font); line-height: 1.5; }
a { color: var(--secondary); }
a:hover { color: var(--primary); }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-inner { max-width: none; margin: 0; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; gap: 1rem; }
.logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); }
/* #1603 (Joey): the header logo is npreq.com's map lockup: the light USA silhouette on a navy badge with NPReq on it
   (Req in the warm accent), then the NPReq.com name; npreq.com's sizes (npreq/site/styles.css): the badge in px and the words in rem, as there. */
.npreq-lockup-map { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 38px; background: #0B3D5C; border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.npreq-lockup-map img { width: 86%; height: auto; display: block; }
.npreq-lockup-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; font-size: 0.62rem; line-height: 1; letter-spacing: -0.04em; color: #0B3D5C; pointer-events: none; padding: 0 10% 2%; }
.npreq-lockup-word .req { color: #A04A2A; }
.logo-name { font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--primary); white-space: nowrap; }
.nav { margin-left: auto; display: flex; gap: 1rem; }
.nav a { text-decoration: none; font-weight: 500; }
main { max-width: 53.75rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; color: var(--primary); }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--primary); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }
.muted { color: var(--ink-muted); font-size: 0.95rem; }
.former-member { color: var(--danger); font-size: 0.9rem; }
.hidden { display: none !important; }
label { display: block; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.terms-box { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.75rem 0; }   /* #1357: the box beside its label */
.terms-box label { display: inline; font-weight: 400; margin: 0; }
.terms-box input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; align-self: flex-start; }   /* #1521: a 24 px target */
.new-account { margin: 0.5rem 0 0; }   /* #1501: a new email creates the account, said right under the field */
input[type=email], input[type=text], textarea { width: 100%; max-width: 26.25rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff; }
textarea { max-width: 100%; min-height: 4.5rem; font-family: ui-monospace, Consolas, monospace; font-size: max(12px, 0.9rem); }
input:focus, textarea:focus, button:focus-visible { outline: 3px solid rgba(42, 111, 151, 0.35); outline-offset: 1px; }
button { font: inherit; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 0.5625rem 1rem; cursor: pointer; margin: 0.75rem 0.5rem 0 0; }
button.secondary { background: #fff; color: var(--primary); }
button.danger { background: var(--danger); border-color: var(--danger); }
button:disabled { opacity: 0.55; cursor: default; }
.msg { margin-top: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: var(--surface-soft); border: 1px solid var(--border); }
.msg:empty { display: none; }
.msg.error { border-color: #f1b5b0; background: #fef3f2; color: var(--danger); }
.msg.ok { border-color: #a7e3cb; background: #ecfdf5; color: #065f46; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--ink-muted); font-weight: 600; font-size: max(11px, 0.85rem); text-transform: uppercase; letter-spacing: 0.03em; }
code, .key { font-family: ui-monospace, Consolas, monospace; }
code { font-size: max(12px, 1em); }
.newkey { word-break: break-all; background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius-sm); padding: 0.75rem; font-size: 0.95rem; }
.pill { display: inline-block; padding: 1px 0.5rem; border-radius: 999px; font-size: max(11px, 0.8rem); font-weight: 600; background: var(--surface-soft); border: 1px solid var(--border); }
.pill.active { color: var(--success); border-color: #a7e3cb; }
.pill.revoked { color: var(--danger); border-color: #f1b5b0; }
.pill.rotating { color: var(--warn); border-color: #fcd34d; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 1rem; }
.plan .price { font-size: 1.8rem; font-weight: 700; color: var(--primary); white-space: nowrap; }   /* #1588: '/ month' stays on the line */
.plan ul { padding-left: 1.125rem; margin: 0.5rem 0; }
.plan { display: flex; flex-direction: column; }   /* #1543: the Choose buttons line up at the card bottom */
.plan .plan-cta { margin-top: auto; margin-bottom: 0; }
.plan .price { margin: 0.25rem 0 0.5rem; }   /* a flex column does not collapse margins: keep the name, price and list close */
.site-footer { text-align: center; color: var(--ink-muted); font-size: max(11px, 0.85rem); padding: 1.5rem 1rem; }
/* #1059: links that act as buttons, reading pages, the sign-in extras and phone tap targets. */
a.button { display: inline-block; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 0.625rem 1.125rem; text-decoration: none; min-height: 2.75rem; }
a.button:hover { background: var(--secondary); color: #fff; }
button.link { background: none; border: none; color: var(--secondary); padding: 0.625rem 0.25rem; margin: 0; text-decoration: underline; font-weight: 500; min-height: 2.75rem; }
button.link:disabled { color: var(--ink-muted); text-decoration: none; }
.links { margin: 0.25rem 0 0; }
.cf-turnstile { margin-top: 0.75rem; }
pre { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; overflow-x: auto; font-size: max(12px, 0.85rem); white-space: pre; }
@media (max-width: 600px) { pre.example { white-space: pre-wrap; } }   /* #1521: the sample wraps at spaces on a phone, never cut off (words stay whole, #1103 R8) */
/* #1521: Delete account is last and quiet, behind a small summary; the red button shows only once it is opened */
#delete-card { background: transparent; box-shadow: none; border-style: dashed; padding: 0.75rem 1.25rem; }
#delete-card summary { cursor: pointer; color: var(--ink-muted); font-size: 0.9rem; }
#delete-card details[open] summary { color: var(--danger); margin-bottom: 0.5rem; }
dl { margin: 0; }
dt { font-weight: 600; margin-top: 0.625rem; }
dd { margin: 0.125rem 0 0; color: var(--ink-muted); }
.banner { background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; }
.reading h2 { margin-top: 1.75rem; }
.reading a[href^="https://"] { overflow-wrap: break-word; }   /* #1543: a bare address (Privacy's Cloudflare link) wraps on a 320 px phone */
.reading h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; color: var(--primary); }
.reading blockquote { margin: 0.75rem 0; padding: 0.25rem 0.875rem; border-left: 4px solid var(--warm); background: var(--surface); }
.table-wrap { overflow-x: auto; margin: 0.75rem 0; }
/* #1103 R8: a reading table that is wider than the screen shows a shadow on the side that has more (it scrolls
   with the content, so it disappears at the end): a visible cue, no script. Code in a cell never breaks inside a
   word (an error code must stay whole); paths may break after a "/", where render_pages.py puts a <wbr>. */
.reading .table-wrap {
  background:
    linear-gradient(to right, var(--surface-soft) 30%, rgba(245, 248, 251, 0)),
    linear-gradient(to left, var(--surface-soft) 30%, rgba(245, 248, 251, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(12, 27, 42, 0.22), rgba(12, 27, 42, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(12, 27, 42, 0.22), rgba(12, 27, 42, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 2rem 100%, 2rem 100%, 0.875rem 100%, 0.875rem 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 600px) { .reading th, .reading td { padding: 8px 4px; } .reading td code { font-size: 0.9em; } }   /* #1130: the Docs error table fits a 343 px phone box */
.nav a, .site-footer a { display: inline-block; padding: 0.625rem 0.125rem; }
.site-footer a { padding: 10px 2px; }   /* #1603: the footer's links keep the tap padding the docs footer has */
/* #1572 (Joey 2026-10-28; the orchestrator's choice A, msg 9051): at 100% browser zoom a desktop sees the docs the
   way 80% zoom showed them before: the root is 80%, so every rem in the header and the content is 0.8 of what it was.
   The CSS alone decides it, so the first paint is already right: a fine pointer and a window wider than 640 px, or
   docs.js's html.docs-desk (a zoomed-in desktop, #1567). Phones and touch devices keep a 100% root. The menu keeps its
   size (256 px, 15.2 px, in px times --docs-nav-scale). Code never goes under 12 px and labels never under 11 px
   (max(), in CSS px, so they still zoom with the page); body text is 12.8 px. 1 px borders and the corner radii stay in px.
   #1603 (Joey 2026-10-29): EVERY portal page has this root and the docs' header, so moving between Pricing, Docs and
   Sign in never resizes the page or moves the header. The base rules above are in rem (an exact /16, so a 100% root,
   a phone, is unchanged), and the header is the same rule on every page. Only the docs page has docs.js, so only it
   keeps the 80% root past about 200% zoom; at 100-200% every page matches. */
@media (pointer: fine) and (min-width: 40.0625em) { html { font-size: 80%; } }
html.docs-desk { font-size: 80%; }
/* #1543: four header links on a narrow phone: the row wraps under the logo instead of pushing the page sideways */
@media (max-width: 600px) { .header-inner { flex-wrap: wrap; height: auto; min-height: 4rem; row-gap: 0; } }
@media (max-width: 600px) { .nav { gap: 10px; } th:nth-child(4), td:nth-child(4) { display: none; } .reading td:nth-child(4), .reading th:nth-child(4) { display: table-cell; } }

/* #1504: the API docs site (docs.html, docs.js). A sidebar beside the page on a wide screen, above it on a phone. */
.docs-site main.docs-main { max-width: none; margin: 0; padding: 1.5rem 0 4rem; min-width: 0; }
/* #1567 (Joey, his product call; it replaces #1560's zoom rule): the docs are FULL WIDTH. The header spans the window
   and sticks to its top; the menu is pinned flush to the window's left edge under it, for the whole page height, and
   scrolls on its own; the content starts right after it, and on a wide screen the code pane fills the rest.
   On a desktop the menu also KEEPS ITS SIZE between 50% and 200% page zoom while the header and content scale:
   docs.js sets --docs-nav-scale to 1/zoom (and --docs-header-h to the header's height), and every size in the menu is
   in em of its own font size, so one variable scales all of it. Without script the variable is 1. Phones and touch
   devices keep the Contents menu. The trade-off (Joey accepted it): a reader who zooms to read the menu cannot; its
   link text is 15.2 px at 100%. The breakpoints are in em; the code pane stacks under 75em. */
.docs-site .site-header { position: sticky; top: 0; z-index: 10; }
.docs-site .header-inner { max-width: none; padding: 0 1.5rem; }
.docs-layout { display: block; padding: 0 1.5rem 0 calc(256px * var(--docs-nav-scale, 1) + 2rem); }
.docs-site .site-footer { margin-left: calc(256px * var(--docs-nav-scale, 1)); }
.docs-site .docs-main, .docs-site .docs-main [id] { scroll-margin-top: calc(var(--docs-header-h, calc(4rem + 1px)) + 0.75rem); }
.docs-page:not(.docs-op) { max-width: 52rem; }
.docs-toc ul ul { margin: 0 0 0.26em 0.66em; }
.docs-toc ul ul a { font-size: 0.895em; padding: 0.2em 0.66em; color: var(--ink-muted); }
.docs-nav { position: fixed; left: 0; top: var(--docs-header-h, calc(4rem + 1px)); bottom: 0; width: calc(256px * var(--docs-nav-scale, 1)); overflow-y: auto; overscroll-behavior: contain; padding: 1.5em 0.8em 1.5em 0.5em; font-size: calc(15.2px * var(--docs-nav-scale, 1)); background: var(--surface-soft); border-right: 1px solid var(--border); z-index: 5; }
.docs-nav-toggle { display: none; }
.docs-toc, .docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc ul { margin: 0.13em 0 0.4em 0.8em; border-left: 1px solid var(--border); }
.docs-toc a { display: block; padding: 0.33em 0.66em; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.docs-toc ul a { font-size: 0.947em; }
.docs-toc a:hover { background: var(--surface); color: var(--primary); }
.docs-toc a[aria-current="page"] { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: var(--shadow); }
.method { display: inline-block; min-width: 3.2em; font-size: max(11px, 0.72rem); font-weight: 700; letter-spacing: 0.03em; color: var(--secondary); }
.docs-search { margin-bottom: 1.05em; }
.docs-search label { margin: 0 0 4px; font-size: 0.895em; }   /* #1603: the menu keeps its px gap under a rem base label */
.docs-search input { width: 100%; padding: 0.5em 0.66em; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: var(--surface); }
.docs-search input:focus { outline: 2px solid var(--secondary); outline-offset: 1px; }
.docs-search-status { margin: 0.4em 0.13em 0; font-size: 0.895em; color: var(--ink-muted); min-height: 1em; }
.docs-results { list-style: none; margin: 0.4em 0 0; padding: 0; }
.docs-results a { display: block; padding: 0.4em 0.53em; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.docs-results a:hover, .docs-results a:focus { background: var(--surface); }
.docs-result-title { display: block; font-weight: 600; color: var(--primary); }
.docs-result-snippet { display: block; font-size: 0.863em; color: var(--ink-muted); }
.docs-page > h2:first-child { margin-top: 0.5rem; font-size: 1.35rem; }
.docs-page[data-endpoint] > h2:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.2rem; }
.docs-pager { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.docs-pager a { text-decoration: none; font-weight: 600; }
.docs-pager-next { margin-left: auto; text-align: right; }
/* #1542: code is a terminal: a dark bar (the language, or the tabs, and Copy) over the code. The colours are fixed, so
   the blocks read the same in a light or a dark system theme, and each pair passes WCAG AA (tested in
   test_render_pages.py). Code scrolls inside its block, never the page; JSON and output wrap. */
.code-block, .code-group { margin: 0.875rem 0; max-width: 100%; background: #0d1117; border: 1px solid #30363d; border-radius: var(--radius-sm); overflow: hidden; }
.code-group .code-block { margin: 0; border: none; border-radius: 0; }
.code-bar { display: flex; align-items: center; gap: 0.5rem; min-height: 2.375rem; padding: 0 0.375rem 0 0.75rem; background: #161b22; border-bottom: 1px solid #30363d; }
.code-lang { font-size: max(11px, 0.78rem); font-weight: 600; letter-spacing: 0.02em; color: #c9d1d9; }
.code-block pre { margin: 0; padding: 0.75rem 0.875rem; border: none; border-radius: 0; background: #0d1117; color: #e6edf3; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: max(12px, 0.84rem); line-height: 1.55; white-space: pre; overflow-x: auto; color-scheme: dark; }
.code-block[data-lang="json"] pre, .code-block[data-lang="output"] pre { white-space: pre-wrap; overflow-wrap: break-word; }
.code-block[data-lang="output"] pre { color: #d1d7e0; }
.prompt { color: #8b949e; user-select: none; -webkit-user-select: none; }
.code-copy { flex: none; margin: 0 0 0 auto; padding: 0.25rem 0.75rem; min-height: 1.75rem; font: inherit; font-size: max(11px, 0.78rem); font-weight: 600; border: 1px solid #3d444d; border-radius: 6px; background: #21262d; color: #e6edf3; cursor: pointer; }
.code-copy:hover { background: #30363d; border-color: #8b949e; }
.code-copy:focus-visible { outline: 2px solid #58a6ff; outline-offset: 1px; }
.code-group.is-tabbed .code-block .code-bar { display: none; }
.code-tabbar { padding-left: 2px; }
.code-tabs { display: flex; gap: 2px; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.code-tabs button { margin: 0; padding: 0 0.75rem; min-height: 2.375rem; font: inherit; font-size: max(11px, 0.8rem); font-weight: 600; border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: #9da7b3; cursor: pointer; white-space: nowrap; }
.code-tabs button[aria-selected="true"] { color: #f0f6fc; border-bottom-color: #58a6ff; }
.code-tabs button:hover { color: #f0f6fc; }
.code-tabs button:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; }
.docs-copy-area { position: fixed; top: 0; left: -9999px; opacity: 0; }
.trimmed { margin: 0.5rem 0 0.375rem; font-size: 0.9rem; color: var(--ink-muted); }
/* #1542 (three panes, Joey via the orchestrator): each endpoint page is the text and a dark code column side by side on
   a wide screen (each operation is one row, so its samples start level with its title), stacked under it below 1280 px.
   The top bar names the version; the sidebar is three collapsible groups. Colours are fixed and pass WCAG AA (tested). */
.docs-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 1rem; }
.docs-topbar h1 { margin: 0; }
.api-version { font-size: max(11px, 0.75em); font-weight: 600; color: var(--ink-muted); }
.docs-topbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.docs-version { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-weight: 600; font-size: 0.9rem; }
.docs-version[hidden] { display: none; }
.docs-version select { font: inherit; padding: 0.375rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
a.button.docs-download { min-height: 2.5rem; padding: 0.5rem 0.875rem; font-size: 0.9rem; }
.docs-toc > .toc-group { margin: 0 0 0.4em; }
.toc-group > details > summary { cursor: pointer; padding: 0.5em 0.66em 0.25em; padding-left: 0.26em; font-size: 0.821em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.docs-toc .toc-group > details > ul { margin: 0; border-left: none; }
.docs-toc .toc-group > details > ul a { font-size: 1em; }
/* #1560: three levels: the group (flush left, small capitals), its pages (1rem in) and an endpoint's sections (2rem in). */
.toc-group > details > ul > li > a { padding-left: 1.32em; }
.docs-toc .toc-sub { margin: 0 0 0.26em; border-left: none; }
.docs-toc .toc-sub a { padding-left: 2.37em; font-size: 0.926em; color: var(--ink-muted); }
.docs-toc .toc-sub a[aria-current] { color: var(--primary); font-weight: 600; background: var(--surface); }
.docs-toc li[data-version] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.docs-toc li[data-version][hidden] { display: none; }
.docs-toc li[data-version] > .toc-sub { grid-column: 1 / -1; }
.toc-chevron { width: 2.1em; height: 2.1em; font-size: inherit; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; }
.toc-chevron[hidden] { display: none; }
.toc-chevron::before { content: ""; display: block; width: 0.47em; height: 0.47em; margin: 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.toc-chevron[aria-expanded="true"]::before { transform: rotate(45deg); }
.toc-chevron:hover { background: var(--surface); color: var(--primary); }
.toc-chevron:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
.docs-onpage { margin: 0 0 0.75rem; font-size: 0.88rem; }
.docs-onpage-title { display: inline; margin: 0 0.5rem 0 0; font-size: max(11px, 0.78rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.docs-onpage ul { display: inline; list-style: none; margin: 0; padding: 0; }
.docs-onpage li { display: inline-block; margin: 0 0.625rem 0.25rem 0; }
.op-text > h2 { margin-top: 0; }
.op-summary { margin: 0.25rem 0 0.625rem; font-size: 1.05rem; color: var(--ink-muted); }
.param-group { margin: 0.875rem 0 0.25rem; font-size: max(11px, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.auth-badge { display: inline-block; margin-right: 0.375rem; padding: 1px 0.5rem; border-radius: 999px; font-size: max(11px, 0.8rem); font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.chip { display: inline-block; min-width: 3em; margin-right: 0.375rem; padding: 1px 0.5rem; border-radius: 999px; text-align: center; font-size: max(11px, 0.8rem); font-weight: 700; color: #ffffff; }
.chip-2xx { background: #1b6e43; }
.chip-3xx { background: #455a64; }
.chip-4xx { background: #b3261e; }
.chip-5xx { background: #7f1d1d; }
details.status { margin: 0.375rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
details.status > summary { cursor: pointer; padding: 0.5rem 0.625rem; }
details.status > summary:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
details.status > :not(summary) { margin: 0 0.625rem 0.625rem; }
.schema-name { font-size: 0.9rem; }
.shared-errors { font-size: 0.92rem; }
.shared-errors .chip { margin: 0 2px; }
.op-code { background: #263238; color: #eceff1; padding: 1rem; border-radius: var(--radius); min-width: 0; }
.op-code h3 { margin: 0.25rem 0 0.5rem; color: #eceff1; }
.op-code .code-block, .op-code .code-group { background: #11171a; border-color: #37474f; }
.op-code .code-block pre { background: #11171a; }
.resp-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0 0 0.5rem; }
.resp-picker button { margin: 0; padding: 0.1875rem 0.625rem; min-height: 2rem; font: inherit; font-size: max(11px, 0.82rem); font-weight: 700; border: 1px solid #546e7a; border-radius: 999px; background: #37474f; color: #eceff1; cursor: pointer; }
.resp-picker button[aria-pressed="true"] { background: #eceff1; color: #11171a; border-color: #eceff1; }
.resp-picker button:focus-visible, .resp-picker select:focus-visible { outline: 2px solid #58a6ff; outline-offset: 1px; }
.resp-picker select { max-width: 100%; font: inherit; font-size: max(11px, 0.85rem); padding: 0.25rem 0.375rem; border: 1px solid #546e7a; border-radius: var(--radius-sm); background: #11171a; color: #eceff1; }
.resp-picker select[hidden] { display: none; }
@media (min-width: 75em) {
  .docs-op:not([hidden]) { display: grid; grid-template-columns: minmax(0, 52rem) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; }
  .docs-op > .docs-pager { grid-column: 1 / -1; }
}
@media (max-width: 74.99em) {
  .docs-op:not([hidden]) { display: block; }
  .op-code { margin-top: 1rem; }
}
/* A phone, or a desktop window under 640 px: the Contents menu above the page. docs.js marks a zoomed-in desktop
   (a fine pointer, a window at least 640 device-independent px wide) with html.docs-desk, which keeps the side menu. */
@media (max-width: 40em) {
  html:not(.docs-desk) .docs-layout { padding: 0 16px; }
  html:not(.docs-desk) .docs-site .site-header { position: static; }
  html:not(.docs-desk) .docs-site .site-footer { margin-left: 0; }
  html:not(.docs-desk) .docs-site .docs-main, html:not(.docs-desk) .docs-site .docs-main [id] { scroll-margin-top: 0; }
  html:not(.docs-desk) .docs-nav-toggle { display: inline-block; margin: 16px 0 0; font: inherit; font-weight: 600; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--primary); cursor: pointer; }
  html:not(.docs-desk) .docs-nav-toggle[hidden] { display: none; }
  html:not(.docs-desk) .docs-nav { position: static; width: auto; font-size: 0.95rem; padding: 12px 0 0; background: none; border-right: 0; overflow: visible; }
  html:not(.docs-desk) .docs-nav-toggle:not([hidden]) + .docs-nav:not(.is-open) { display: none; }
  html:not(.docs-desk) .docs-site main.docs-main { padding-top: 16px; }
}

/* #1518: the new-account dashboard: the getting-started steps and the no-plan state. */
.steps { margin: 0.25rem 0 0; padding-left: 1.375rem; }
.steps li { margin: 0.375rem 0; }
.done-mark { color: var(--success); font-weight: 600; }
.no-plan a.button { margin-top: 0.625rem; }
/* #1615: a confirmation in the page (no browser dialog), and a plan card's Cancel plan and Keep my plan row */
.confirm { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.confirm label { display: block; margin: 0.5rem 0 0.25rem; }
.confirm button { margin: 0.5rem 0.5rem 0 0; }
/* #1614: each key's in-page panel (Rotate and Revoke confirms, the IP allowlist editor) sits in a row below the key */
.key-panel td { padding: 0; border: 0; }
.key-panel .confirm { margin: 0 0 0.75rem; }
.allow-list { list-style: none; margin: 0.25rem 0; padding: 0; }
.allow-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.allow-list li button { margin: 0; }
.allow-list li .msg { flex-basis: 100%; }
.allow-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.allow-add input { flex: 1 1 14rem; min-width: 0; }
.allow-add button { margin: 0; }
.confirm label.check { display: block; margin: 0.25rem 0; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.625rem; }
.plan-actions > * { margin: 0; }
.closed-facts > p:first-child { margin-top: 0; }
#key-hint { margin: 0.5rem 0 0; }

/* ---------------------------------------------------------------- #1541: the account page's left sidebar (Joey) */
.acct-main { max-width: 68.75rem; }
.acct-layout { display: grid; grid-template-columns: 13.75rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.acct-nav { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; }
.acct-nav-title { margin: 0 0 0.5rem; font-size: max(11px, 0.8rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.acct-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.acct-nav button { display: block; width: 100%; margin: 0; text-align: left; background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-sm); padding: 0.5rem 0.625rem; font-weight: 500; }
.acct-nav button:hover { background: var(--surface-soft); }
.acct-nav button[aria-current="page"] { background: var(--primary); color: #fff; }
.acct-sections { min-width: 0; }
.linkish { background: none; border: 0; padding: 0; margin: 0; color: var(--secondary); text-decoration: underline; font: inherit; cursor: pointer; }
.totp-qr { margin: 0.75rem 0; }
.totp-qr svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
@media (max-width: 760px) {
  .acct-layout { display: block; }
  .acct-nav { position: static; margin-bottom: 16px; padding: 8px; }
  .acct-nav-title { display: none; }
  .acct-nav ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .acct-nav button { width: auto; border: 1px solid var(--border); padding: 6px 10px; }
}
/* #1546: sign-in with Google, GitHub and Microsoft, under the email button. Our own buttons, each in its provider's
   light style (white, a grey border, the provider's mark and "Continue with ..."); no provider script or font. */
.oauth-box { margin-top: 1rem; display: grid; gap: 0.625rem; max-width: 26.25rem; }
.oauth-or { margin: 0; color: var(--ink-muted); font-size: 0.9rem; text-align: center; }
button.oauth { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; margin: 0; min-height: 2.75rem;
  background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 500; }
button.oauth:hover { background: #f8fafd; }
button.oauth svg { flex: 0 0 1.125rem; }
button.oauth-github svg { color: #1f2328; }
/* #1588 (Joey): the sign-in page is one centred column: a 460 px card on the page's centre line, the heading, the 'or'
   and the hint lines centred, and the provider buttons, the email field and Continue at the card's full width. The
   Terms box keeps its box beside the label, and the order stays as #1564 set it. */
body[data-page="signin"] main { max-width: 30.75rem; }   /* the 460 px card plus main's 16 px padding each side (at a 100% root) */
body[data-page="signin"] h1, body[data-page="signin"] .muted, body[data-page="signin"] .new-account, body[data-page="signin"] .links { text-align: center; }
body[data-page="signin"] .card input[type=email], body[data-page="signin"] .card input[type=text], body[data-page="signin"] .oauth-box { max-width: none; }
body[data-page="signin"] .card form > button[type=submit] { display: block; width: 100%; margin-right: 0; }
body[data-page="signin"] .cf-turnstile { display: flex; justify-content: center; }   /* CeMe L1: the widget on the centre line */

/* #1546 PR B: the Sign-in methods list: the provider, its state and its button on one line. */
.methods { list-style: none; margin: 0.5rem 0; padding: 0; }
.methods li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.methods li button { margin: 0 0 0 auto; }