/*
 * rcs BOX docs theme: Scalar variables + the docs header (and, later, the guide).
 * Tokens from the rcs box design system (Figma "rcs box Designsystem · USES FINAL
 * BRAND 1.2"): Signal, Ink, Paper, White, Sky, Coral. Everything else below is an
 * AA-contrast derivative of those six — do not add new hues.
 * Fonts are self-hosted (SIL OFL, licence texts in /fonts) — no third-party requests.
 */

@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/manrope-800.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/dm-mono-500.woff2") format("woff2"); }

:root {
  --rcs-signal: #B6F53F;
  --rcs-signal-text: #467000; /* Signal derivative with AA contrast on Paper/White */
  --rcs-ink: #0D1828;
  --rcs-ink-2: #3B4756;
  --rcs-ink-3: #6B7684;
  --rcs-paper: #F3F0E7;
  --rcs-paper-2: #E9E5DA;
  --rcs-line: #D9D4C7;
  --rcs-white: #FFFFFF;
  --rcs-sky: #AED0FF;
  --rcs-coral: #FF765F;
  --rcs-font: "Manrope", system-ui, sans-serif;
  --rcs-font-mono: "DM Mono", ui-monospace, monospace;
  --docs-header-height: 56px;

  --scalar-font: var(--rcs-font);
  --scalar-font-code: var(--rcs-font-mono);
  --scalar-radius: 4px;
  --scalar-radius-lg: 6px;
  --scalar-radius-xl: 8px;
  /* Scalar's sticky elements sit below our fixed header. */
  --scalar-custom-header-height: var(--docs-header-height);
}

/* ---------- Scalar (light only; the spec forces light mode) ---------- */
.light-mode {
  --scalar-color-1: #0D1828;
  --scalar-color-2: #3B4756;
  --scalar-color-3: #6B7684;
  --scalar-color-accent: #467000;
  --scalar-background-1: #FFFFFF;
  --scalar-background-2: #F3F0E7;
  --scalar-background-3: #E9E5DA;
  --scalar-background-accent: #B6F53F22;
  --scalar-border-color: #D9D4C7;
  --scalar-sidebar-background-1: #F3F0E7;
  --scalar-sidebar-color-1: #0D1828;
  --scalar-sidebar-color-2: #3B4756;
  --scalar-sidebar-border-color: #D9D4C7;
  --scalar-sidebar-item-hover-background: #E9E5DA;
  --scalar-sidebar-item-active-background: #B6F53F;
  --scalar-sidebar-color-active: #0D1828;
  --scalar-sidebar-search-background: #FFFFFF;
  --scalar-sidebar-search-border-color: #D9D4C7;
  --scalar-button-1: #0D1828;
  --scalar-button-1-color: #B6F53F;
  --scalar-button-1-hover: #1A2A40;
  /* HTTP methods: GET Sky, POST Signal, PATCH yellow, DELETE Coral — derivatives with
     >= 4.5:1 contrast on White, Paper and the Paper hover surface (#E9E5DA) */
  --scalar-color-green: #467000;
  --scalar-color-red: #B8361E;
  --scalar-color-yellow: #7F5600;
  --scalar-color-blue: #2E63B8;
  --scalar-color-orange: #9E4612;
  --scalar-color-purple: #2E63B8;
}

.scalar-app h1,
.scalar-app h2,
.scalar-app h3,
.scalar-app .section-header { font-weight: 700; letter-spacing: -0.02em; }

/* "API + Code" pattern: request/response cards are Ink surfaces. Re-scoping the
   Scalar variables (instead of forcing a background) keeps every token inside —
   JSON keys, tabs, line numbers — readable on Ink. */
.scalar-app .scalar-card {
  --scalar-color-1: #E8EDF3;
  --scalar-color-2: #C9D1DB;
  --scalar-color-3: #8B96A5;
  --scalar-color-accent: #B6F53F;
  --scalar-background-1: #0D1828;
  --scalar-background-2: #13213A;
  --scalar-background-3: #1A2A47;
  --scalar-border-color: #24344F;
  --scalar-color-green: #B6F53F;
  --scalar-color-red: #FF765F;
  --scalar-color-yellow: #FFD166;
  --scalar-color-blue: #AED0FF;
  --scalar-color-orange: #FF765F;
  --scalar-color-purple: #AED0FF;
  background: #0D1828;
  color: #E8EDF3;
  border-color: #24344F;
}
.scalar-app .scalar-card .hljs-string { color: #B6F53F; }
.scalar-app .scalar-card .hljs-attr { color: #AED0FF; }

/* No vendor branding and no SDK/codegen upsell (spec non-goal). */
.scalar-app a[href*="scalar.com"],
.scalar-app .generate-sdk-button,
.scalar-app .selected-client-row > .scalar-button { display: none !important; }

/* ---------- Page chrome ---------- */
html, body { margin: 0; }
body { font-family: var(--rcs-font); color: var(--rcs-ink); background: var(--rcs-paper); -webkit-font-smoothing: antialiased; }

.docs-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--docs-header-height); box-sizing: border-box;
  display: flex; align-items: center; gap: 32px;
  padding: 0 24px;
  background: var(--rcs-ink); color: var(--rcs-white);
  border-bottom: 1px solid #24344F;
}
.docs-header a { color: inherit; text-decoration: none; }

.docs-logo { display: inline-flex; align-items: center; gap: 8px; }
.docs-logo-mark { display: block; width: 22px; height: 18px; }
.docs-logo-rcs { font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.06em; }
.docs-logo-box {
  font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 0.02em;
  padding: 4px 6px; border-radius: 2px;
  background: var(--rcs-sky); color: var(--rcs-ink);
}

.docs-nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.docs-nav a {
  font-family: var(--rcs-font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #C9D1DB; padding: 6px 0; border-bottom: 2px solid transparent;
}
.docs-nav a:hover { color: var(--rcs-white); }
.docs-nav a[aria-current="page"] { color: var(--rcs-white); border-bottom-color: var(--rcs-signal); }

.docs-version {
  font-family: var(--rcs-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 2px;
  background: var(--rcs-signal); color: var(--rcs-ink);
}

@media (max-width: 720px) {
  .docs-header { height: auto; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
  .docs-nav { order: 3; flex-basis: 100%; gap: 16px; overflow-x: auto; }
  :root { --docs-header-height: 96px; }
}

.docs-placeholder {
  max-width: 720px; box-sizing: border-box;
  margin: 88px auto; padding: 48px;
  background: var(--rcs-white); border: 1px solid var(--rcs-line); border-radius: 4px;
}
.docs-placeholder h1 { font-weight: 700; font-size: 32px; letter-spacing: -0.06em; margin: 0 0 16px; }
.docs-placeholder p { font-weight: 500; font-size: 15px; line-height: 1.6; margin: 0; }
.docs-placeholder a { color: var(--rcs-signal-text); font-weight: 700; }

/* ---- Guide (/docs/guide): Paper canvas, 12-col rhythm, 720px reading width ---- */
.guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
  max-width: 1296px;
  margin: 0 auto;
  padding: 32px 24px 88px;
}
@media (min-width: 900px) { .guide { grid-template-columns: 240px minmax(0, 720px); } .guide-select { display: none; } }
@media (min-width: 1280px) { .guide { grid-template-columns: 240px minmax(0, 720px) 220px; } }
@media (max-width: 899px) { .guide-nav, .guide-toc { display: none; } }

.guide-nav-label { font-family: var(--rcs-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7684; margin: 0 0 12px; }
.guide-nav ol, .guide-toc ul, .guide-overview ol { list-style: none; margin: 0; padding: 0; }
.guide-nav li + li { margin-top: 4px; }
.guide-nav ol a { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 4px; color: var(--rcs-ink); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.3; }
.guide-nav ol a:hover { background: #E9E5DA; }
.guide-nav ol a[aria-current="page"] { background: var(--rcs-signal); }
.guide-nav-number { font-family: var(--rcs-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: #6B7684; }
.guide-nav ol a[aria-current="page"] .guide-nav-number { color: var(--rcs-ink); }
.guide-nav-foot { font-size: 13px; line-height: 1.5; color: #3B4756; margin: 24px 10px 0; }
.guide-nav-foot a { color: var(--rcs-signal-text); font-weight: 700; }

.guide-select { margin: 0 0 24px; }
.guide-select-foot { font-size: 13px; line-height: 1.5; color: #3B4756; margin: 8px 2px 0; }
.guide-select-foot a { color: var(--rcs-signal-text); font-weight: 700; }
/* Anchor jumps (TOC, version links) land below the sticky header, not under it. */
.guide-article h2, .guide-article h3 { scroll-margin-top: calc(var(--docs-header-height) + 24px); }
.guide-select select { width: 100%; font: 700 15px var(--rcs-font); padding: 10px 12px; border: 1px solid #D9D4C7; border-radius: 4px; background: var(--rcs-white); color: var(--rcs-ink); }

.guide-main { min-width: 0; }
.guide-kicker { font-family: var(--rcs-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7684; margin: 0 0 16px; }
.guide-article { background: var(--rcs-white); border: 1px solid #D9D4C7; border-radius: 6px; padding: 32px; }
.guide-article h1 { font-weight: 700; font-size: 32px; letter-spacing: -0.04em; line-height: 1.15; margin: 0 0 24px; }
.guide-article h2 { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; margin: 48px 0 12px; padding-top: 16px; border-top: 1px solid #E9E5DA; }
.guide-article h3 { font-weight: 700; font-size: 17px; margin: 24px 0 8px; }
.guide-article p, .guide-article li { font-weight: 500; font-size: 15px; line-height: 1.65; color: var(--rcs-ink); }
.guide-article p { margin: 0 0 16px; }
.guide-article ul, .guide-article ol { padding-left: 22px; margin: 0 0 16px; }
.guide-article li + li { margin-top: 6px; }
.guide-article a { color: var(--rcs-signal-text); font-weight: 700; }
.guide-article code { font-family: var(--rcs-font-mono); font-size: 12px; background: var(--rcs-paper); border: 1px solid #E9E5DA; border-radius: 3px; padding: 1px 5px; }
.guide-article table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.guide-article th { text-align: left; font-family: var(--rcs-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #3B4756; background: var(--rcs-paper); padding: 8px 10px; border-bottom: 1px solid #D9D4C7; }
.guide-article td { padding: 10px; border-bottom: 1px solid #E9E5DA; vertical-align: top; line-height: 1.5; }
.guide-article blockquote { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid #D9D4C7; background: var(--rcs-paper); border-radius: 0 4px 4px 0; }
.guide-article blockquote p:last-child { margin-bottom: 0; }
.guide-article .callout-info { background: #EAF2FF; border-left-color: var(--rcs-sky); }
.guide-article .callout-warn { background: #FFF1EE; border-left-color: var(--rcs-coral); }
.guide-article .callout-check { background: var(--rcs-paper); border-left-color: var(--rcs-signal); }
.guide-article .callout-check ul { list-style: none; padding-left: 0; }
.guide-article input[type="checkbox"] { margin-right: 8px; accent-color: var(--rcs-signal); }
.guide-article hr { border: 0; border-top: 1px solid #E9E5DA; margin: 32px 0; }

.guide-overview { margin-top: 32px; }
.guide-overview h2 { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 16px; }
.guide-overview li { background: var(--rcs-white); border: 1px solid #D9D4C7; border-radius: 6px; padding: 16px 20px; }
.guide-overview li + li { margin-top: 8px; }
.guide-overview a { font-weight: 700; font-size: 17px; color: var(--rcs-ink); text-decoration: none; }
.guide-overview a:hover { color: var(--rcs-signal-text); }
.guide-overview p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #3B4756; }

.guide-next { margin: 24px 0 0; font-weight: 700; font-size: 15px; }
.guide-next a { color: var(--rcs-signal-text); }

.guide-toc { position: sticky; top: 24px; align-self: start; }
.guide-toc li + li { margin-top: 6px; }
.guide-toc a { font-size: 13px; line-height: 1.4; font-weight: 500; color: #3B4756; text-decoration: none; }
.guide-toc a:hover { color: var(--rcs-ink); }

/* Changelog: version list left, no "on this page" column */
@media (min-width: 1280px) { .guide--changelog { grid-template-columns: 240px minmax(0, 720px); } }
.guide--changelog .guide-nav ol a { display: block; font-family: var(--rcs-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; }
.guide--changelog .guide-article h2 { font-family: var(--rcs-font-mono); font-size: 18px; letter-spacing: 0.02em; }