/* RollerUp brand: orange accent, logo mark + title on one line (matches rollerup.dev). */
:root {
  /* Logo orange #e04402 is only 4.2:1 on white, so text uses a darker shade (WCAG AA 4.5:1). */
  --brand: #e04402;
  --brand-text: #b83700;
  --accent-color: var(--brand-text);
  --primary-color: var(--brand-text);
  --link-color: var(--brand-text);
  --link-color-hover: #8f2b00;
  --sidebar-link-active-bg: #e0440214;
  --sidebar-link-active-text: var(--brand-text);

  /* Code panels stay dark in both themes, like an editor. */
  --code-panel: #1c1815;
  --code-panel-head: #141110;
  --code-panel-rule: #2c2622;
  --code-fg: #e9e2db;
  --code-muted: #8d8279;
  --tok-keyword: #ff7a45;
  --tok-title: #ffc66d;
  --tok-field: #8fcdf4;
  --tok-type: #ffc66d;
  --tok-variable: #b5dd7a;
  --tok-string: #b5dd7a;
  --tok-number: #d5a6ff;
  --tok-directive: #d5a6ff;
  --tok-doc: #7d8f6b;
  --tok-comment: #9a8f86;
}

:root[data-theme="dark"] {
  --brand: #ff6a2b;
  --brand-text: #ff6a2b;
  --accent-color: var(--brand-text);
  --primary-color: var(--brand-text);
  --link-color: var(--brand-text);
  --link-color-hover: #ff8a57;
  --sidebar-link-active-bg: #ff6a2b24;
  --sidebar-link-active-text: #ffffff;
}

/* Status badges from the schema reference generator; icons are lucide "ban" and "flask-conical". */
.ru-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.05em 0.5em 0.05em 0.4em;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 0.1em;
  white-space: nowrap;
  color: var(--badge-fg);
  background: var(--badge-bg);
}

.ru-badge::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  mask: var(--badge-icon) center / contain no-repeat;
}

.ru-badge--deprecated {
  --badge-fg: #b91c1c;
  --badge-bg: #dc262614;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
}

.ru-badge--unstable {
  --badge-fg: #92400e;
  --badge-bg: #d9770614;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .ru-badge--deprecated {
  --badge-fg: #f87171;
  --badge-bg: #f8717124;
}

:root[data-theme="dark"] .ru-badge--unstable {
  --badge-fg: #fbbf24;
  --badge-bg: #fbbf2424;
}

/* Field-row anchors from the schema reference; keep them clear of the sticky header. */
[id^="field-"] {
  scroll-margin-top: 8rem;
}

/* docmd renders either the logo image or the title; show both. */
.sidebar-header .logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  margin: 0;
  padding: 0.25rem 0.5rem;
  overflow: visible;
  color: inherit;
  text-decoration: none;
}

.sidebar-header .logo-link img {
  float: none;
  height: 24px;
  max-height: 24px;
  margin: 0;
  border-radius: 5px;
}

.sidebar-header .logo-link::after {
  content: "RollerUp Developer Docs";
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---- Code panels ---- */
.main-content pre.hljs {
  background: var(--code-panel);
  color: var(--code-fg);
  border-color: var(--code-panel-rule);
  font-size: 0.82rem;
  line-height: 1.7;
  padding: 1rem 1.25rem;
}

.main-content .docmd-code-block-wrapper {
  background: var(--code-panel);
  border-color: var(--code-panel-rule);
}

.main-content .docmd-code-block-header,
:root[data-theme="dark"] .main-content .docmd-code-block-header {
  background: var(--code-panel-head);
  border-bottom-color: var(--code-panel-rule);
  padding-block: 0.55rem;
}

.main-content .docmd-code-block-title {
  color: var(--code-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-content .docmd-code-block-header .copy-code-button {
  color: var(--code-muted);
}

.main-content .docmd-code-block-header .copy-code-button:hover {
  color: var(--code-fg);
}

/* Tokens from assets/js/code-highlight.js (GraphQL, JSON). */
.ru-tok-keyword {
  color: var(--tok-keyword);
}
.ru-tok-title {
  color: var(--tok-title);
}
.ru-tok-field,
.ru-tok-key {
  color: var(--tok-field);
}
.ru-tok-type {
  color: var(--tok-type);
}
.ru-tok-variable {
  color: var(--tok-variable);
}
.ru-tok-string {
  color: var(--tok-string);
}
.ru-tok-number,
.ru-tok-literal {
  color: var(--tok-number);
}
.ru-tok-directive {
  color: var(--tok-directive);
}
.ru-tok-doc {
  color: var(--tok-doc);
  font-style: italic;
}
.ru-tok-comment {
  color: var(--tok-comment);
  font-style: italic;
}
.ru-tok-punct {
  color: var(--code-muted);
}

/* docmd's own highlighting (other languages) on the dark panel. */
.main-content pre.hljs .hljs-keyword {
  color: var(--tok-keyword);
}
.main-content pre.hljs .hljs-title {
  color: var(--tok-title);
}
.main-content pre.hljs .hljs-attr,
.main-content pre.hljs .hljs-variable {
  color: var(--tok-field);
}
.main-content pre.hljs .hljs-string {
  color: var(--tok-string);
}
.main-content pre.hljs .hljs-number,
.main-content pre.hljs .hljs-literal {
  color: var(--tok-number);
}
.main-content pre.hljs .hljs-comment {
  color: var(--tok-comment);
  font-style: italic;
}
.main-content pre.hljs .hljs-operator,
.main-content pre.hljs .hljs-punctuation {
  color: var(--code-muted);
}

/* ---- Queries / Mutations: docs on the left, examples on the right (Stripe-style) ---- */
.content-layout:has(.ru-op) .toc-sidebar {
  display: none;
}

.content-area:has(.ru-op) {
  max-width: 1480px;
}

.ru-op {
  display: grid;
  gap: 0 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-color);
}

.ru-op-doc,
.ru-op-code {
  min-width: 0;
}

.ru-op-code .docmd-code-block-wrapper {
  margin: 0 0 0.75rem;
}

@media (min-width: 1100px) {
  .ru-op {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Pin the examples while the docs column scrolls; long responses scroll inside. */
  .ru-op-code {
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding-top: 2.4rem;
    scrollbar-width: thin;
  }
}

/* ---- Rate limits guide: bucket-level chart (inline SVG in guides/rate-limits.md) ---- */
.ru-chart {
  margin: 1.5rem 0;
  --chart-paced: #2563eb;
  --chart-fast: var(--brand-text);
  --chart-throttle: #b91c1c;
}

:root[data-theme="dark"] .ru-chart {
  --chart-paced: #60a5fa;
  --chart-throttle: #f87171;
}

.ru-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ru-chart-grid {
  stroke: var(--border-color);
  stroke-width: 1;
}

.ru-chart-label {
  fill: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ru-chart-paced,
.ru-chart-fast {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

.ru-chart-paced {
  stroke: var(--chart-paced);
}

.ru-chart-fast {
  stroke: var(--chart-fast);
}

.ru-chart-paced-dot {
  fill: var(--chart-paced);
}

.ru-chart-fast-dot {
  fill: var(--chart-fast);
}

.ru-chart-throttle {
  fill: none;
  stroke: var(--chart-throttle);
  stroke-width: 2;
  stroke-linecap: round;
}

.ru-chart figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ru-key {
  display: inline-block;
  width: 0.9em;
  height: 3px;
  margin: 0 0.4em 0.2em 0;
  vertical-align: middle;
  border-radius: 2px;
}

.ru-key--paced {
  background: var(--chart-paced);
}

.ru-key--fast {
  margin-left: 0.6em;
  background: var(--chart-fast);
}

/* ---- Diagram tokens for the Mermaid skin below ---- */
div.mermaid {
  --flow-node-bg: var(--bg-color);
  --flow-node-line: var(--border-color);
  --flow-decision-bg: #f5f3f1;
  --flow-edge: #8a817a;
  --flow-bad-bg: #fdecec;
  --flow-bad-line: #e5a3a3;
  --flow-bad-text: #9f1c1c;
  --flow-warn-bg: #fdf3e2;
  --flow-warn-line: #e6c48a;
  --flow-warn-text: #8a4b06;
  --flow-ok-bg: #e9f6ee;
  --flow-ok-line: #9fd2b1;
  --flow-ok-text: #166534;
}

:root[data-theme="dark"] div.mermaid {
  --flow-decision-bg: #1d1b1a;
  --flow-edge: #8f8780;
  --flow-bad-bg: #2a1616;
  --flow-bad-line: #7f3434;
  --flow-bad-text: #fca5a5;
  --flow-warn-bg: #2a2012;
  --flow-warn-line: #7c5a1c;
  --flow-warn-text: #fcd34d;
  --flow-ok-bg: #12241a;
  --flow-ok-line: #2f6b45;
  --flow-ok-text: #86efac;
}

/* ---- Mermaid skin: restyles docmd's Mermaid output with the diagram tokens above. ----
   Mermaid scopes its own theme to the SVG's id, so these need !important. Add the classes
   decision / bad / warn / ok to nodes (`class X ok`) to color them. */
div.mermaid svg {
  font-family: var(--font-family-sans) !important;
}

div.mermaid g.node .label-container {
  fill: var(--flow-node-bg) !important;
  stroke: var(--flow-node-line) !important;
  stroke-width: 1px !important;
  rx: 8px;
  ry: 8px;
}

div.mermaid g.node.decision .label-container {
  fill: var(--flow-decision-bg) !important;
}

div.mermaid g.node.bad .label-container {
  fill: var(--flow-bad-bg) !important;
  stroke: var(--flow-bad-line) !important;
}

div.mermaid g.node.warn .label-container {
  fill: var(--flow-warn-bg) !important;
  stroke: var(--flow-warn-line) !important;
}

div.mermaid g.node.ok .label-container {
  fill: var(--flow-ok-bg) !important;
  stroke: var(--flow-ok-line) !important;
}

div.mermaid .nodeLabel,
div.mermaid .nodeLabel p {
  color: var(--text-color) !important;
  font-family: var(--font-family-sans) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* First line of each node is its title; on outcomes it carries the outcome color. */
div.mermaid .nodeLabel p::first-line {
  font-weight: 600;
}

div.mermaid g.node.bad .nodeLabel p::first-line {
  color: var(--flow-bad-text);
}

div.mermaid g.node.warn .nodeLabel p::first-line {
  color: var(--flow-warn-text);
}

div.mermaid g.node.ok .nodeLabel p::first-line {
  color: var(--flow-ok-text);
}

div.mermaid .flowchart-link {
  stroke: var(--flow-edge) !important;
  stroke-width: 1.25px !important;
}

div.mermaid .arrowMarkerPath {
  fill: var(--flow-edge) !important;
  stroke: var(--flow-edge) !important;
}

div.mermaid .edgeLabel,
div.mermaid .labelBkg {
  background: var(--bg-color) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600;
}

div.mermaid .edgeLabel *,
div.mermaid .edgeLabel rect {
  background: var(--bg-color) !important;
  fill: var(--bg-color) !important;
}