/*
 * TBMC Brand styling for Scalar Docs — aligned to apps/console.
 * Tokens from bettermoney-brandbook.vercel.app (colors + typography chapters).
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --scalar-font: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --scalar-font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.light-mode {
  /* Ink palette — Green 1 instead of black, matching console "ink on beige". */
  --scalar-color-1: #0a1c1e;
  --scalar-color-2: rgba(10, 28, 30, 0.75);
  --scalar-color-3: rgba(10, 28, 30, 0.5);
  --scalar-color-disabled: rgba(10, 28, 30, 0.25);
  --scalar-color-ghost: rgba(10, 28, 30, 0.1);
  --scalar-color-accent: #d49625;

  /* Surface palette — Beige 2 canvas, Beige 3 elevated. */
  --scalar-background-1: #f2ebe2; /* Beige 2 — page canvas */
  --scalar-background-2: #f8f8f6; /* Beige 3 — cards, sidebar, code */
  --scalar-background-3: #e9dfd0; /* Slightly deeper beige for hover / inset */
  --scalar-background-accent: #d49625;

  --scalar-border-color: rgba(10, 28, 30, 0.14);

  /* Primary CTA: gold with ink text, matching console. */
  --scalar-button-1: #d49625;
  --scalar-button-1-hover: #b07e1f;
  --scalar-button-1-color: #0a1c1e;

  --scalar-sidebar-background-1: #f8f8f6;
  --scalar-sidebar-item-hover-background: rgba(10, 28, 30, 0.06);
  --scalar-sidebar-item-active-background: rgba(212, 150, 37, 0.12);
  --scalar-sidebar-color-1: #0a1c1e;
  --scalar-sidebar-color-2: #435c5b;
  --scalar-sidebar-color-active: #d49625;
  --scalar-sidebar-border-color: rgba(10, 28, 30, 0.08);
}

.dark-mode {
  --scalar-color-1: #ffffff;
  --scalar-color-2: rgba(255, 255, 255, 0.75);
  --scalar-color-3: rgba(255, 255, 255, 0.55);
  --scalar-color-disabled: rgba(255, 255, 255, 0.25);
  --scalar-color-ghost: rgba(255, 255, 255, 0.1);
  --scalar-color-accent: #d49625;

  --scalar-background-1: #0a1c1e; /* Green 1 */
  --scalar-background-2: #003331; /* Green 2 */
  --scalar-background-3: #035956; /* Green 3 */
  --scalar-background-accent: #d49625;

  --scalar-border-color: rgba(255, 255, 255, 0.12);

  --scalar-button-1: #d49625;
  --scalar-button-1-hover: #b07e1f;
  --scalar-button-1-color: #0a1c1e;

  --scalar-sidebar-background-1: #003331;
  --scalar-sidebar-item-hover-background: rgba(255, 255, 255, 0.06);
  --scalar-sidebar-item-active-background: rgba(212, 150, 37, 0.18);
  --scalar-sidebar-color-1: #ffffff;
  --scalar-sidebar-color-2: rgba(255, 255, 255, 0.7);
  --scalar-sidebar-color-active: #d49625;
  --scalar-sidebar-border-color: rgba(255, 255, 255, 0.08);
}

/* Hide the auto-generated "Introduction" entry that Scalar inserts under
   /reference/description/introduction. info.description is intentionally
   blank in the spec; the sidebar <li> carries a data-sidebar-id ending in
   /description/introduction. */
[data-sidebar-id$='/description/introduction'] {
  display: none !important;
}

/* Lora as the display face. Per brand book, headings + display text use Lora
   at 110% line-height; Instrument Sans (the --scalar-font default we set above)
   is everywhere else. */
.scalar-app h1,
.scalar-app h2,
.scalar-app h3,
.section-title,
.markdown h1,
.markdown h2,
.markdown h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  word-spacing: -0.18em;
}

/* Tabular numerics so parameter tables and status-code columns line up,
   matching the console body rule. */
.scalar-app,
.markdown {
  font-variant-numeric: tabular-nums;
}

/* The request example card ships with .dark-mode hard-coded so its terminal
   command preview always renders dark. In light mode that produces a single
   deep-green panel that fights the beige page. Re-scope the scalar variables
   inside the card back to light values so it matches the response panel. */
.light-mode .request-card.dark-mode {
  --scalar-color-1: #0a1c1e;
  --scalar-color-2: rgba(10, 28, 30, 0.75);
  --scalar-color-3: rgba(10, 28, 30, 0.5);
  --scalar-color-disabled: rgba(10, 28, 30, 0.25);
  --scalar-color-ghost: rgba(10, 28, 30, 0.1);
  --scalar-background-1: #f2ebe2;
  --scalar-background-2: #f8f8f6;
  --scalar-background-3: #e9dfd0;
  --scalar-border-color: rgba(10, 28, 30, 0.14);
  --scalar-button-1: #d49625;
  --scalar-button-1-hover: #b07e1f;
  --scalar-button-1-color: #0a1c1e;
}

/* Code blocks in the Markdown guide pages render their <code> as a flex column
   (one flex item per line). A flex column's cross size is driven by its
   container, not its content, so a single long line never widens the <code>
   past the <pre> — the pre's overflow-x:auto then has nothing to scroll and the
   line is clipped (e.g. the one-line user-registration response). Sizing the
   <code> to its content (max-content) restores the horizontal scroll, while
   min-width:100% keeps short blocks filling the panel so they don't shrink-wrap. */
.t-editor__code-container pre code {
  width: max-content;
  min-width: 100%;
}

/* The sticky Ask AI composer overlays the final Previous/Next links on narrow
   screens unless the document reserves space for it at the bottom. */
@media (max-width: 640px) {
  .content.content-toc .page-content {
    padding-bottom: 4.5rem;
  }
}