/*
 * PayDirect developer resource library (/developers).
 *
 * Hand-written rather than Tailwind utilities, for two reasons: most of what needs styling here
 * is markdown-generated HTML that carries no classes for Tailwind to scan, and the docs site
 * wants one coherent token set (light + dark) that a guide author never has to think about.
 * Loaded only by views/developers/*.ejs - the rest of the app keeps using tailwind.css.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --doc-bg: #ffffff;
  --doc-surface: #f8fafc;
  --doc-surface-raised: #ffffff;
  --doc-text: #111827;
  --doc-text-soft: #374151;
  --doc-muted: #6b7280;
  --doc-border: #e5e7eb;
  --doc-border-strong: #d1d5db;
  --doc-accent: #1d4ed8;
  --doc-accent-soft: #eff6ff;
  --doc-accent-text: #1d4ed8;
  --doc-code-bg: #f6f8fa;
  --doc-code-head: #eef2f7;
  --doc-code-text: #1f2937;
  --doc-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05);

  --doc-note: #2563eb;
  --doc-tip: #059669;
  --doc-warning: #d97706;
  --doc-caution: #dc2626;

  --doc-sidebar-w: 17rem;
  --doc-toc-w: 15rem;
  --doc-header-h: 3.75rem;
  --doc-max-w: 88rem;
}

[data-theme='dark'] {
  --doc-bg: #0b1120;
  --doc-surface: #0f172a;
  --doc-surface-raised: #111c31;
  --doc-text: #e5e7eb;
  --doc-text-soft: #cbd5e1;
  --doc-muted: #94a3b8;
  --doc-border: #1e293b;
  --doc-border-strong: #334155;
  --doc-accent: #60a5fa;
  --doc-accent-soft: #14233d;
  --doc-accent-text: #93c5fd;
  --doc-code-bg: #0d1626;
  --doc-code-head: #131f35;
  --doc-code-text: #d7dee9;
  --doc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);

  --doc-note: #60a5fa;
  --doc-tip: #34d399;
  --doc-warning: #fbbf24;
  --doc-caution: #f87171;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchored headings clear the sticky header instead of hiding beneath it. */
  scroll-padding-top: calc(var(--doc-header-h) + 1rem);
}

body.doc-body {
  margin: 0;
  background: var(--doc-bg);
  color: var(--doc-text);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--doc-accent-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--doc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.doc-skip {
  position: absolute;
  left: -9999px;
}

.doc-skip:focus {
  left: 1rem;
  top: 0.5rem;
  z-index: 60;
  background: var(--doc-surface-raised);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--doc-border-strong);
  border-radius: 6px;
}

/* ---------------------------------------------------------------- header */

.doc-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--doc-header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--doc-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--doc-border);
}

.doc-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 650;
  color: var(--doc-text);
  white-space: nowrap;
}

.doc-header__brand:hover {
  text-decoration: none;
}

.doc-header__brand img {
  height: 1.6rem;
  width: auto;
}

.doc-header__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-accent-text);
  background: var(--doc-accent-soft);
  border: 1px solid color-mix(in srgb, var(--doc-accent) 30%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.doc-header__spacer {
  flex: 1;
}

.doc-header__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.doc-header__link {
  color: var(--doc-text-soft);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
}

.doc-header__link:hover {
  background: var(--doc-surface);
  text-decoration: none;
}

.doc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--doc-border);
  border-radius: 8px;
  background: var(--doc-surface-raised);
  color: var(--doc-text-soft);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.doc-iconbtn:hover {
  border-color: var(--doc-border-strong);
}

.doc-menubtn {
  display: none;
}

/* ---------------------------------------------------------------- version switcher
 *
 * Native <details>, so changing version needs no JavaScript - the production CSP forbids inline
 * script, and a <select onchange> would need one. Hidden entirely while a single version exists.
 */

.doc-versions {
  position: relative;
  flex-shrink: 0;
}

.doc-versions__current {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--doc-text-soft);
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.doc-versions__current::-webkit-details-marker {
  display: none;
}

.doc-versions__current::after {
  content: '\25BE';
  color: var(--doc-muted);
}

.doc-versions__current:hover {
  border-color: var(--doc-border-strong);
  color: var(--doc-text);
}

.doc-versions__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 45;
  min-width: 9rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--doc-surface-raised);
  border: 1px solid var(--doc-border-strong);
  border-radius: 10px;
  box-shadow: var(--doc-shadow);
}

.doc-versions__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--doc-text);
}

.doc-versions__link:hover {
  background: var(--doc-accent-soft);
  text-decoration: none;
}

.doc-versions__link[aria-current='true'] {
  color: var(--doc-accent-text);
  font-weight: 600;
}

.doc-versions__badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-warning);
  border: 1px solid color-mix(in srgb, var(--doc-warning) 40%, transparent);
  border-radius: 999px;
  padding: 0 0.35rem;
}

@media (max-width: 900px) {
  /* The header is tight on a phone; search matters more than the version pill. */
  .doc-versions {
    display: none;
  }
}

/* ---------------------------------------------------------------- search */

.doc-search {
  position: relative;
  width: min(22rem, 38vw);
}

.doc-search__input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2.1rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--doc-text);
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: 8px;
}

.doc-search__input::placeholder {
  color: var(--doc-muted);
}

.doc-search__icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--doc-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.doc-search__results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: 24rem;
  overflow-y: auto;
  background: var(--doc-surface-raised);
  border: 1px solid var(--doc-border-strong);
  border-radius: 10px;
  box-shadow: var(--doc-shadow);
  padding: 0.35rem;
  display: none;
}

.doc-search__results[data-open='true'] {
  display: block;
}

.doc-search__hit {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  color: var(--doc-text);
}

.doc-search__hit:hover,
.doc-search__hit[data-active='true'] {
  background: var(--doc-accent-soft);
  text-decoration: none;
}

.doc-search__hit strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.doc-search__hit span {
  display: block;
  font-size: 0.78rem;
  color: var(--doc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-search__empty {
  padding: 0.75rem 0.6rem;
  font-size: 0.85rem;
  color: var(--doc-muted);
}

/* ---------------------------------------------------------------- shell */

.doc-shell {
  max-width: var(--doc-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--doc-sidebar-w) minmax(0, 1fr) var(--doc-toc-w);
  gap: 2.5rem;
  padding: 0 1.25rem;
  align-items: start;
}

.doc-shell--wide {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- sidebar */

.doc-sidebar {
  position: sticky;
  top: var(--doc-header-h);
  max-height: calc(100vh - var(--doc-header-h));
  overflow-y: auto;
  padding: 1.75rem 0 3rem;
}

/* The mobile drawer's backdrop. It is a sibling of .doc-sidebar inside .doc-shell, so it must be
   display:none by default - otherwise it counts as a grid item, takes the content column, and
   pushes the main column and the TOC one cell to the right. Only the mobile rules show it. */
.doc-scrim {
  display: none;
}

.doc-sidebar__section + .doc-sidebar__section {
  margin-top: 1.5rem;
}

.doc-sidebar__title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--doc-muted);
}

.doc-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--doc-border);
}

.doc-sidebar__link {
  display: block;
  padding: 0.3rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  color: var(--doc-text-soft);
}

.doc-sidebar__link:hover {
  color: var(--doc-text);
  text-decoration: none;
}

.doc-sidebar__link[aria-current='page'] {
  color: var(--doc-accent-text);
  border-left-color: var(--doc-accent);
  font-weight: 600;
  background: linear-gradient(90deg, var(--doc-accent-soft), transparent);
}

/* ---------------------------------------------------------------- main */

.doc-main {
  min-width: 0;
  padding: 2.25rem 0 4rem;
}

.doc-breadcrumb {
  font-size: 0.8rem;
  color: var(--doc-muted);
  margin-bottom: 0.6rem;
}

.doc-breadcrumb a {
  color: var(--doc-muted);
}

.doc-title {
  margin: 0 0 0.5rem;
  font-size: 2.15rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.doc-lede {
  margin: 0 0 2rem;
  font-size: 1.075rem;
  color: var(--doc-muted);
}

/* ---------------------------------------------------------------- toc */

.doc-toc {
  position: sticky;
  top: var(--doc-header-h);
  max-height: calc(100vh - var(--doc-header-h));
  overflow-y: auto;
  padding: 2.5rem 0 3rem;
  font-size: 0.83rem;
}

.doc-toc__title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--doc-muted);
}

.doc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--doc-border);
}

.doc-toc__link {
  display: block;
  padding: 0.22rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--doc-muted);
}

.doc-toc__link:hover {
  color: var(--doc-text);
  text-decoration: none;
}

.doc-toc__link[data-active='true'] {
  color: var(--doc-accent-text);
  border-left-color: var(--doc-accent);
}

.doc-toc__link--3 {
  padding-left: 1.5rem;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------- prose */

.doc-content {
  color: var(--doc-text-soft);
}

.doc-content > *:first-child {
  margin-top: 0;
}

.doc-content h2 {
  margin: 2.75rem 0 0.9rem;
  padding-top: 0.4rem;
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--doc-text);
  border-top: 1px solid var(--doc-border);
  padding-top: 1.75rem;
}

.doc-content h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--doc-text);
}

.doc-content h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.97rem;
  font-weight: 650;
  color: var(--doc-text);
}

.doc-anchor {
  margin-left: 0.4rem;
  color: var(--doc-border-strong);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.doc-content h2:hover .doc-anchor,
.doc-content h3:hover .doc-anchor,
.doc-anchor:focus {
  opacity: 1;
  text-decoration: none;
}

.doc-content p {
  margin: 0 0 1.05rem;
}

.doc-content ul,
.doc-content ol {
  margin: 0 0 1.05rem;
  padding-left: 1.35rem;
}

.doc-content li {
  margin-bottom: 0.4rem;
}

.doc-content li > ul,
.doc-content li > ol {
  margin-top: 0.4rem;
}

.doc-content strong {
  color: var(--doc-text);
  font-weight: 650;
}

.doc-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--doc-border);
}

.doc-content blockquote {
  margin: 0 0 1.05rem;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--doc-border-strong);
  color: var(--doc-muted);
}

/* Inline code - fenced blocks are handled by .doc-code below. */
.doc-content :not(pre) > code {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.855em;
  padding: 0.12em 0.36em;
  border: 1px solid var(--doc-border);
  border-radius: 5px;
  background: var(--doc-code-bg);
  color: var(--doc-text);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tables */

.doc-table {
  margin: 0 0 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
}

.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.doc-table th,
.doc-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--doc-border);
}

.doc-table th {
  background: var(--doc-surface);
  color: var(--doc-text);
  font-weight: 650;
  white-space: nowrap;
}

.doc-table tr:last-child td {
  border-bottom: 0;
}

.doc-table td code {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- code blocks */

.doc-code {
  margin: 0 0 1.25rem;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--doc-code-bg);
}

.doc-code figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  background: var(--doc-code-head);
  border-bottom: 1px solid var(--doc-border);
}

.doc-code__lang {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--doc-muted);
}

.doc-code__copy {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--doc-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
  cursor: pointer;
}

.doc-code__copy:hover {
  color: var(--doc-text);
  border-color: var(--doc-border-strong);
}

.doc-code__copy[data-copied='true'] {
  color: var(--doc-tip);
}

.doc-code pre {
  margin: 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
}

.doc-code code {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--doc-code-text);
}

/* ---------------------------------------------------------------- multi-language code tabs
 *
 * Which panel shows is decided entirely here, from `data-lang` on <html>. Switching a tab is one
 * attribute write on the root, so every group on the page repaints together and cross-group sync
 * costs no JavaScript loop (see initCodeTabs in developers.js).
 *
 * `data-js` is set pre-paint by developers-theme.js. Without it - a reader with JavaScript off -
 * the tablist is hidden and every panel stacks under its own label, which is exactly what the
 * markdown source looks like. Nothing is ever hidden with the `hidden` attribute, so no content
 * can be stranded in a browser that never runs our script.
 */

.doc-code--tabs figcaption {
  padding-left: 0.35rem;
  gap: 0.5rem;
}

.doc-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem;
  min-width: 0;
  overflow-x: auto;
  /* Firefox; the WebKit scrollbar is hidden below. */
  scrollbar-width: none;
}

.doc-tabs::-webkit-scrollbar {
  display: none;
}

.doc-tabs__tab {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--doc-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}

.doc-tabs__tab:hover {
  color: var(--doc-text);
}

.doc-tabs__panel-label {
  margin: 0;
  padding: 0.35rem 1rem 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--doc-muted);
}

/* --- no JavaScript: every panel stacked and labelled, tablist hidden --- */

html:not([data-js='true']) .doc-code--tabs figcaption {
  display: none;
}

/* --- JavaScript present: the server-rendered default tab shows --- */

[data-js='true'] .doc-tabs__panel-label {
  display: none;
}

[data-js='true'] .doc-tabs__panel {
  display: none;
}

[data-js='true'] .doc-tabs__panel[data-default] {
  display: block;
}

[data-js='true'] .doc-tabs__tab[data-default] {
  color: var(--doc-text);
  background: var(--doc-bg);
  border-color: var(--doc-border-strong);
}

/*
 * --- the reader's chosen language wins, but only in groups that offer it ---
 *
 * The `[data-tab-keys~='...']` guard is the whole fallback story: a group without the chosen
 * language simply is not matched, so it keeps its own default with no flicker and no JS.
 *
 * Specificity does the ordering work, so none of this needs !important: the default rule above is
 * (0,3,0), the hide rule below is (0,4,1) and beats it, and its own show rule is (0,5,1).
 */

html[data-lang='curl'] .doc-code--tabs[data-tab-keys~='curl'] .doc-tabs__panel,
html[data-lang='node'] .doc-code--tabs[data-tab-keys~='node'] .doc-tabs__panel,
html[data-lang='python'] .doc-code--tabs[data-tab-keys~='python'] .doc-tabs__panel,
html[data-lang='php'] .doc-code--tabs[data-tab-keys~='php'] .doc-tabs__panel,
html[data-lang='java'] .doc-code--tabs[data-tab-keys~='java'] .doc-tabs__panel,
html[data-lang='csharp'] .doc-code--tabs[data-tab-keys~='csharp'] .doc-tabs__panel {
  display: none;
}

html[data-lang='curl'] .doc-code--tabs[data-tab-keys~='curl'] .doc-tabs__tab,
html[data-lang='node'] .doc-code--tabs[data-tab-keys~='node'] .doc-tabs__tab,
html[data-lang='python'] .doc-code--tabs[data-tab-keys~='python'] .doc-tabs__tab,
html[data-lang='php'] .doc-code--tabs[data-tab-keys~='php'] .doc-tabs__tab,
html[data-lang='java'] .doc-code--tabs[data-tab-keys~='java'] .doc-tabs__tab,
html[data-lang='csharp'] .doc-code--tabs[data-tab-keys~='csharp'] .doc-tabs__tab {
  color: var(--doc-muted);
  background: transparent;
  border-color: transparent;
}

html[data-lang='curl'] .doc-code--tabs[data-tab-keys~='curl'] .doc-tabs__panel[data-tab='curl'],
html[data-lang='node'] .doc-code--tabs[data-tab-keys~='node'] .doc-tabs__panel[data-tab='node'],
html[data-lang='python'] .doc-code--tabs[data-tab-keys~='python'] .doc-tabs__panel[data-tab='python'],
html[data-lang='php'] .doc-code--tabs[data-tab-keys~='php'] .doc-tabs__panel[data-tab='php'],
html[data-lang='java'] .doc-code--tabs[data-tab-keys~='java'] .doc-tabs__panel[data-tab='java'],
html[data-lang='csharp'] .doc-code--tabs[data-tab-keys~='csharp'] .doc-tabs__panel[data-tab='csharp'] {
  display: block;
}

html[data-lang='curl'] .doc-code--tabs[data-tab-keys~='curl'] .doc-tabs__tab[data-tab='curl'],
html[data-lang='node'] .doc-code--tabs[data-tab-keys~='node'] .doc-tabs__tab[data-tab='node'],
html[data-lang='python'] .doc-code--tabs[data-tab-keys~='python'] .doc-tabs__tab[data-tab='python'],
html[data-lang='php'] .doc-code--tabs[data-tab-keys~='php'] .doc-tabs__tab[data-tab='php'],
html[data-lang='java'] .doc-code--tabs[data-tab-keys~='java'] .doc-tabs__tab[data-tab='java'],
html[data-lang='csharp'] .doc-code--tabs[data-tab-keys~='csharp'] .doc-tabs__tab[data-tab='csharp'] {
  color: var(--doc-text);
  background: var(--doc-bg);
  border-color: var(--doc-border-strong);
}

/* ---------------------------------------------------------------- diagrams
 *
 * Mermaid is rendered to SVG ahead of time (npm run docs:diagrams) and both theme variants are
 * inlined, because a mermaid SVG bakes its colours in. Swapping them here rather than in
 * JavaScript keeps the right one visible with scripting disabled.
 */

.doc-diagram {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1rem;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  background: var(--doc-surface);
  text-align: center;
  overflow-x: auto;
}

.doc-diagram svg {
  max-width: 100%;
  height: auto;
}

.doc-diagram figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--doc-muted);
  text-align: center;
}

.doc-diagram__art--dark {
  display: none;
}

[data-theme='dark'] .doc-diagram__art--light {
  display: none;
}

[data-theme='dark'] .doc-diagram__art--dark {
  display: block;
}

@media print {
  /* Printing is on white regardless of the reader's theme. */
  .doc-diagram__art--dark {
    display: none !important;
  }
  .doc-diagram__art--light {
    display: block !important;
  }
}

/* ---------------------------------------------------------------- shared snippets
 *
 * The signed-request client is one file included by twelve guides (see
 * src/utils/developer-docs/snippets.ts). It is reference material rather than part of the example
 * the reader came for, so it sits collapsed and visually recessive until asked for. <details> is
 * native, so it still opens with JavaScript disabled.
 */

.doc-snippet {
  margin: 0 0 1.25rem;
  border: 1px dashed var(--doc-border-strong);
  border-radius: 10px;
  background: var(--doc-surface);
}

.doc-snippet > summary {
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--doc-text-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9px;
}

/* Replace the native marker with one that points the same way in both engines. */
.doc-snippet > summary::-webkit-details-marker {
  display: none;
}

.doc-snippet > summary::before {
  content: '\25B8';
  color: var(--doc-muted);
  transition: transform 0.15s ease;
}

.doc-snippet[open] > summary::before {
  transform: rotate(90deg);
}

.doc-snippet > summary:hover {
  color: var(--doc-text);
}

.doc-snippet > summary:focus-visible {
  outline: 2px solid var(--doc-accent);
  outline-offset: -2px;
}

/* The included content sits inside the frame, indented away from the summary row. */
.doc-snippet > :not(summary) {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}

.doc-snippet > :last-child {
  margin-bottom: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .doc-snippet > summary::before {
    transition: none;
  }
}

@media print {
  /* Paper has no affordance to open a disclosure, so print it expanded. */
  .doc-snippet > :not(summary) {
    display: block !important;
  }
}

/* ---------------------------------------------------------------- callouts */

.doc-callout {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem 0.35rem;
  border: 1px solid var(--doc-border);
  border-left: 3px solid var(--doc-note);
  border-radius: 8px;
  background: var(--doc-surface);
  color: var(--doc-text-soft);
}

.doc-callout__label {
  margin: 0 0 0.3rem !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-note);
}

.doc-callout--tip {
  border-left-color: var(--doc-tip);
}
.doc-callout--tip .doc-callout__label {
  color: var(--doc-tip);
}

.doc-callout--warning {
  border-left-color: var(--doc-warning);
}
.doc-callout--warning .doc-callout__label {
  color: var(--doc-warning);
}

.doc-callout--caution {
  border-left-color: var(--doc-caution);
}
.doc-callout--caution .doc-callout__label {
  color: var(--doc-caution);
}

/* ---------------------------------------------------------------- pager */

.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--doc-border);
}

.doc-pager__card {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--doc-border);
  border-radius: 10px;
  background: var(--doc-surface-raised);
  color: var(--doc-text);
}

.doc-pager__card:hover {
  border-color: var(--doc-accent);
  text-decoration: none;
}

.doc-pager__card--next {
  grid-column: 2;
  text-align: right;
}

.doc-pager__hint {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--doc-muted);
  margin-bottom: 0.15rem;
}

.doc-pager__label {
  font-weight: 600;
  font-size: 0.925rem;
}

/* ---------------------------------------------------------------- landing */

.doc-hero {
  padding: 4rem 0 2.5rem;
  max-width: 44rem;
}

.doc-hero h1 {
  margin: 0 0 1rem;
  font-size: 2.85rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.doc-hero p {
  margin: 0 0 1.75rem;
  font-size: 1.15rem;
  color: var(--doc-muted);
}

.doc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 0.925rem;
  font-weight: 600;
  border: 1px solid var(--doc-border-strong);
  color: var(--doc-text);
  background: var(--doc-surface-raised);
}

.doc-btn:hover {
  text-decoration: none;
  border-color: var(--doc-accent);
}

.doc-btn--primary {
  background: var(--doc-accent);
  border-color: var(--doc-accent);
  color: #ffffff;
}

[data-theme='dark'] .doc-btn--primary {
  color: #0b1120;
}

.doc-btn--primary:hover {
  filter: brightness(1.07);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  padding-bottom: 4rem;
}

.doc-card {
  display: block;
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--doc-border);
  border-radius: 12px;
  background: var(--doc-surface-raised);
  color: var(--doc-text);
}

.doc-card:hover {
  border-color: var(--doc-accent);
  box-shadow: var(--doc-shadow);
  text-decoration: none;
}

.doc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.7rem;
  border-radius: 8px;
  background: var(--doc-accent-soft);
  color: var(--doc-accent-text);
  font-size: 1rem;
}

.doc-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.doc-card p {
  margin: 0 0 0.8rem;
  font-size: 0.875rem;
  color: var(--doc-muted);
}

.doc-card__pages {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.83rem;
  color: var(--doc-muted);
}

.doc-card__pages li {
  padding: 0.1rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-section-head {
  padding: 2.5rem 0 1rem;
}

.doc-section-head h2 {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.doc-section-head p {
  margin: 0;
  color: var(--doc-muted);
  font-size: 0.925rem;
}

/* ---------------------------------------------------------------- footer */

.doc-footer {
  border-top: 1px solid var(--doc-border);
  background: var(--doc-surface);
}

.doc-footer__inner {
  max-width: var(--doc-max-w);
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  font-size: 0.83rem;
  color: var(--doc-muted);
}

.doc-footer__inner a {
  color: var(--doc-muted);
}

.doc-footer__spacer {
  flex: 1;
}

/* ---------------------------------------------------------------- empty state */

.doc-empty {
  max-width: 34rem;
  padding: 5rem 0;
}

.doc-empty h1 {
  margin: 0 0 0.75rem;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.doc-empty p {
  color: var(--doc-muted);
  margin: 0 0 1.5rem;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .doc-shell {
    grid-template-columns: var(--doc-sidebar-w) minmax(0, 1fr);
    gap: 2rem;
  }
  .doc-toc {
    display: none;
  }
}

@media (max-width: 900px) {
  .doc-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .doc-menubtn {
    display: inline-flex;
  }

  .doc-header__links {
    display: none;
  }

  .doc-search {
    width: auto;
    flex: 1;
  }

  /* Off-canvas drawer, toggled by developers.js. */
  .doc-sidebar {
    position: fixed;
    inset: var(--doc-header-h) auto 0 0;
    width: min(20rem, 84vw);
    max-height: none;
    z-index: 45;
    padding: 1.25rem 1.25rem 3rem;
    background: var(--doc-surface-raised);
    border-right: 1px solid var(--doc-border);
    transform: translateX(-102%);
    transition: transform 0.2s ease;
  }

  .doc-sidebar[data-open='true'] {
    transform: translateX(0);
  }

  .doc-scrim {
    position: fixed;
    inset: var(--doc-header-h) 0 0 0;
    z-index: 44;
    background: rgba(2, 6, 23, 0.45);
    display: none;
  }

  .doc-scrim[data-open='true'] {
    display: block;
  }

  .doc-title {
    font-size: 1.8rem;
  }

  .doc-hero h1 {
    font-size: 2.1rem;
  }

  .doc-pager {
    grid-template-columns: 1fr;
  }

  .doc-pager__card--next {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .doc-sidebar,
  .doc-anchor {
    transition: none;
  }
}

@media print {
  .doc-header,
  .doc-sidebar,
  .doc-toc,
  .doc-pager,
  .doc-footer,
  .doc-code__copy {
    display: none !important;
  }
  .doc-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- syntax highlighting
 * A small highlight.js theme in the same tokens as the rest of the page, rather than shipping
 * one of the packaged stylesheets - those assume their own background and do not follow a
 * light/dark toggle. Only the token classes the guides' languages actually emit are defined.
 */

.hljs-comment,
.hljs-quote {
  color: var(--doc-muted);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-built_in {
  color: #8250df;
}

.hljs-string,
.hljs-regexp,
.hljs-addition {
  color: #0a7f4f;
}

.hljs-number,
.hljs-symbol {
  color: #b45309;
}

.hljs-attr,
.hljs-attribute,
.hljs-property {
  color: #0550ae;
}

.hljs-title,
.hljs-title.function_,
.hljs-section,
.hljs-name {
  color: #953800;
}

.hljs-variable,
.hljs-template-variable,
.hljs-params {
  color: var(--doc-code-text);
}

.hljs-meta,
.hljs-doctag {
  color: var(--doc-muted);
}

.hljs-deletion {
  color: #b91c1c;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 600;
}

[data-theme='dark'] .hljs-keyword,
[data-theme='dark'] .hljs-selector-tag,
[data-theme='dark'] .hljs-literal,
[data-theme='dark'] .hljs-built_in {
  color: #d2a8ff;
}

[data-theme='dark'] .hljs-string,
[data-theme='dark'] .hljs-regexp,
[data-theme='dark'] .hljs-addition {
  color: #7ee787;
}

[data-theme='dark'] .hljs-number,
[data-theme='dark'] .hljs-symbol {
  color: #ffa657;
}

[data-theme='dark'] .hljs-attr,
[data-theme='dark'] .hljs-attribute,
[data-theme='dark'] .hljs-property {
  color: #79c0ff;
}

[data-theme='dark'] .hljs-title,
[data-theme='dark'] .hljs-title.function_,
[data-theme='dark'] .hljs-section,
[data-theme='dark'] .hljs-name {
  color: #ffa657;
}

[data-theme='dark'] .hljs-deletion {
  color: #ff7b72;
}