/* ============================================================================
   Flik developer documentation
   ----------------------------------------------------------------------------
   Loaded ONLY by pages under /docs/. default.css is the sitewide 14k-line
   compiled theme and is deliberately left alone — everything here is additive.

   Things this file has to work around, all of them facts about default.css:
     - .simple-navbar is position:fixed (top:1rem, ~4.7rem tall), so every
       sticky element and every anchor target needs clearance. That is the
       --nav-clear variable below; nothing should hardcode it.
     - html { scroll-behavior:smooth } is already on globally, so a missed
       anchor is an animated, obvious miss. Hence scroll-margin-top on headings.
     - .text-primary is overridden to #000000 despite --primary being #00e676.
       Never use it. The real brand marks are --flik-gradient and --flik-accent.
     - .container is 1640px at xl but .simple-navbar caps at 1140px. The docs
       shell is its own container (~1400px) and is intentionally wider than the
       floating nav above it.
     - Arimo loads 400/400i/700/700i only. font-weight:600 synthesises; use
       400 or 700.
   ========================================================================== */

:root {
  /* Two greens, because one cannot do both jobs. --flik-accent is the brand
     mark and is only ever a fill, a rule or a decorative shape: at 2.7:1 on
     white it is not legible as text. --flik-accent-text is the same hue taken
     down to 5.1:1 so links, active states and meaningful icons clear WCAG AA,
     and --flik-accent-strong is its hover. Never set a text colour to
     --flik-accent. */
  --flik-accent: #21b514;
  --flik-accent-text: #17800e;
  --flik-accent-strong: #0f5c0a;
  --flik-accent-soft: rgba(0, 230, 118, 0.1);
  --flik-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  /* Reads on the gradient at 4.98:1 against its dark stop and 11.5:1 against
     its light one. White fails the light stop at 1.5:1. */
  --flik-on-gradient: #0d1b24;

  --docs-ink: #1a1a1a;
  --docs-body: #3f4a54;
  --docs-muted: #667280;
  --docs-line: #e5e9ed;
  --docs-line-soft: #eef1f4;
  --docs-bg-soft: #f7f9fa;

  /* Dark code surface. Deep slate rather than pure black so the green tokens
     and the brand gradient sit on it without vibrating. */
  --code-bg: #0d1b24;
  --code-bg-raised: #14262f;
  --code-line: rgba(255, 255, 255, 0.09);
  --code-ink: #d7e3e8;

  --nav-clear: 6.5rem;
  --sidebar-w: 250px;
  --panel-w: 440px;
  --toc-w: 220px;
  --measure: 46rem;

  --mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* ============================================================================
   1. Shell
   ========================================================================== */

.docs-page {
  background: #fff;
}

.docs-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.docs-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-top: var(--nav-clear);
  padding-bottom: 5rem;
}

/* Three panes once there is genuinely room for them. Below this the code
   panel content stays in the document, inline under the prose it belongs to. */
.docs-shell.has-panel {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

@media (min-width: 1200px) {
  .docs-shell.has-panel {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
  }

  /* Endpoint pages: sidebar plus one wide column, which each endpoint block
     then splits into prose and code for itself. */
  .docs-shell.has-split {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  /* Pages with no pinned code sample still want an "On this page" rail —
     they just don't need 440px to hold one. */
  .docs-shell.has-toc {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  }

}

/* ============================================================================
   6b. Per-endpoint split
   ========================================================================== */

.endpoint-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--docs-line-soft);
  scroll-margin-top: var(--nav-clear);
}

/* Reference pages put a code column beside EVERY endpoint rather than pinning
   one sample for the whole page — a single sticky panel only ever illustrates
   whichever request the reader is not currently looking at.

   This has to sit AFTER the single-column rule above, not in the shell's
   media block higher up the file. Same specificity, so source order decides:
   declared earlier, the media query loses to the base rule at every width and
   the code column silently renders underneath the prose instead of beside it. */
@media (min-width: 1120px) {
  .endpoint-block {
    /* Fluid rather than a flat 440px, so the split can start ~80px earlier
       than the page-level panel does. Browser zoom counts toward this width:
       a 1440px display at 125% is a 1152px viewport, and a flat 440px panel
       would leave the prose too narrow to keep. */
    grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, var(--panel-w));
    gap: 2.5rem;
  }
}

.endpoint-block:first-of-type {
  border-top: 0;
}

.endpoint-block > .endpoint-doc > :first-child {
  margin-top: 0;
}

.endpoint-block h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* The code column tracks the prose it belongs to rather than the page. */
.endpoint-code {
  min-width: 0;
}

@media (min-width: 1200px) {
  .endpoint-code {
    position: sticky;
    top: var(--nav-clear);
  }
}

.endpoint-code .code-block:first-child {
  margin-top: 0;
}

/* Response fields and the error catalogue sit in the code column, beside the
   request they belong to rather than below the prose. They are reference
   material the reader checks against a sample, so they belong next to it.

   The column is ~440px, which two- and three-column tables do not get for
   free: type steps down, cells lose their side padding, and anything that
   still will not fit scrolls inside the card rather than widening the page. */
.endpoint-aside {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem 0.25rem;
  border: 1px solid var(--docs-line);
  border-radius: 8px;
  background: var(--docs-bg-soft);
  overflow-x: auto;
}

.endpoint-aside > h3 {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--docs-muted);
  border: 0;
  padding: 0;
}

.endpoint-aside .param-table,
.endpoint-aside .docs-table {
  margin: 0 0 1rem;
  font-size: 0.82rem;
}

.endpoint-aside .param-table {
  border-top: 0;
}

.endpoint-aside .param-table .param-row:first-child {
  padding-top: 0;
}

.endpoint-aside .docs-table th,
.endpoint-aside .docs-table td {
  padding-right: 0.5rem;
}

/* The error table is three columns in a 440px pane, and its widest cells are
   unbreakable identifiers like open_banking_currency_unsupported. Left to
   auto layout it sizes past the pane and scrolls the "When" column out of
   sight — which is the column the reader actually needs. Fixed layout keeps
   all three visible; the codes wrap instead. */
.endpoint-aside .docs-table {
  table-layout: fixed;
}

/* Wide enough for the word STATUS itself, letter-spacing included — at 3rem
   the header ran into the next column. */
.endpoint-aside .docs-table th:first-child,
.endpoint-aside .docs-table td:first-child {
  width: 4.4rem;
}

.endpoint-aside .docs-table th:nth-child(2),
.endpoint-aside .docs-table td:nth-child(2) {
  width: 42%;
}

.endpoint-aside .docs-table code {
  overflow-wrap: anywhere;
}

.endpoint-aside .param-name .name,
.endpoint-aside .docs-table code {
  font-size: 0.8rem;
}

.endpoint-aside p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--docs-body);
}

/* A sticky column taller than the viewport hides its own bottom, and the
   error table is exactly what makes it tall. Let it scroll internally. */
@media (min-width: 1200px) {
  .endpoint-code {
    max-height: calc(100vh - var(--nav-clear) - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ============================================================================
   2. Sidebar
   ========================================================================== */

.docs-sidebar {
  position: sticky;
  top: var(--nav-clear);
  max-height: calc(100vh - var(--nav-clear) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.5rem;
  padding-bottom: 2rem;
}

.docs-sidebar::-webkit-scrollbar {
  width: 6px;
}
.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--docs-line);
  border-radius: 3px;
}

.docs-nav-group {
  margin-bottom: 1.75rem;
}

.docs-nav-title {
  display: block;
  padding-left: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--docs-muted);
  margin-bottom: 0.6rem;
}

.docs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* No negative margin to bleed the padding out of the sidebar: the sidebar
   scrolls vertically, and an element with overflow-y: auto computes
   overflow-x to auto as well, so anything sticking out of its left edge is
   clipped rather than shown. That squared off the left corner of the active
   item's highlight. The group labels carry matching padding instead, so the
   text still lines up and the highlight stays inside. */
.docs-nav-list a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--docs-body);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.docs-nav-list a:hover {
  background: var(--flik-accent-soft);
  color: var(--flik-accent-text);
  text-decoration: none;
}

.docs-nav-list a.is-active {
  background: var(--flik-accent-soft);
  color: var(--flik-accent-text);
  font-weight: 700;
}

/* Sub-items: in-page anchors revealed under the active top-level page. */
.docs-nav-sub {
  list-style: none;
  margin: 0.25rem 0 0.5rem 0.65rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--docs-line);
  display: none;
}

.docs-nav-list li.is-active-parent > .docs-nav-sub {
  display: block;
}

.docs-nav-sub a {
  font-size: 0.85rem;
  color: var(--docs-muted);
  padding: 0.25rem 0.5rem;
}

.docs-nav-sub a.is-active {
  background: transparent;
  color: var(--flik-accent-text);
  /* Its siblings mark the active row with weight or a rule; without one here
     the only signal was hue, which is no signal at all to a colour-blind
     reader. */
  font-weight: 700;
}

.docs-sidebar-cta {
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--docs-line);
  border-radius: 10px;
  background: var(--docs-bg-soft);
  font-size: 0.85rem;
  color: var(--docs-body);
}

.docs-sidebar-cta a {
  color: var(--flik-accent-text);
  font-weight: 700;
}

/* --- mobile drawer ------------------------------------------------------- */

.docs-sidebar-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--docs-line);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--docs-ink);
  cursor: pointer;
}

.docs-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 36, 0.45);
  z-index: 1040;
}

.docs-sidebar-backdrop.is-open {
  display: block;
}

@media (max-width: 991.98px) {
  .docs-shell,
  .docs-shell.has-panel,
  .docs-shell.has-toc,
  .docs-shell.has-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: calc(var(--nav-clear) - 1rem);
  }

  .docs-sidebar-toggle {
    display: flex;
  }

  .docs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-height: none;
    z-index: 1050;
    background: #fff;
    border-right: 1px solid var(--docs-line);
    padding: 5.5rem 1.5rem 2rem;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .docs-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  }
}

/* ============================================================================
   3. Prose
   ========================================================================== */

.docs-main {
  min-width: 0;
}

.docs-prose {
  max-width: var(--measure);
  color: var(--docs-body);
  font-size: 1rem;
  line-height: 1.7;
}

.docs-shell.has-panel .docs-prose,
.docs-shell.has-split .docs-prose {
  /* The endpoint rows below manage their own two-pane widths, so the prose
     column must not cap them. Everything else on these pages is still read
     left to right and still needs a measure: without one the page lede ran
     1054px at ~115 characters a line, against 80 on the pages that keep the
     cap. Release the cap for the endpoint rows only. */
  max-width: none;
}

.docs-shell.has-panel .docs-prose > :not(.endpoint-block):not(.endpoint-doc):not(hr),
.docs-shell.has-split .docs-prose > :not(.endpoint-block):not(.endpoint-doc):not(hr) {
  max-width: var(--measure);
}

.docs-prose > h1 {
  font-size: 2.25rem;
  line-height: 1.25;
  color: var(--docs-ink);
  margin: 0 0 0.75rem;
}

.docs-prose > h2,
.endpoint-doc > h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--docs-ink);
  margin: 3rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--docs-line-soft);
}

.docs-prose > h3,
.endpoint-doc > h3 {
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--docs-ink);
  margin: 2rem 0 0.75rem;
}

.docs-prose > h4,
.endpoint-doc > h4 {
  font-size: 1rem;
  color: var(--docs-ink);
  margin: 1.5rem 0 0.5rem;
}

/* The fixed navbar would otherwise swallow every anchor target. */
.docs-prose h2,
.docs-prose h3,
.docs-prose h4,
.endpoint-doc h2,
.endpoint-doc h3,
.endpoint-doc h4,
.docs-section-anchor {
  scroll-margin-top: var(--nav-clear);
}

.docs-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--docs-muted);
  margin-bottom: 2rem;
}

.docs-prose p,
.docs-prose ul,
.docs-prose ol {
  margin-bottom: 1.1rem;
}

.docs-prose ul,
.docs-prose ol {
  padding-left: 1.25rem;
}

.docs-prose li {
  margin-bottom: 0.4rem;
}

.docs-prose a {
  color: var(--flik-accent-text);
  text-decoration: none;
  /* The underline is the non-colour half of "this is a link". At 0.3 alpha it
     measured 1.4:1 and was effectively invisible. */
  border-bottom: 1px solid rgba(23, 128, 14, 0.55);
}

.docs-prose a:hover,
.docs-prose a:focus-visible {
  color: var(--flik-accent-strong);
  border-bottom-color: currentColor;
  text-decoration: none;
}

.docs-prose strong {
  color: var(--docs-ink);
  font-weight: 700;
}

/* Inline code. default.css renders <code> Bootstrap pink (#f50057); this
   overrides it to something that reads as a token rather than an error. */
.docs-prose code,
.docs-table code,
.param-table code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--docs-bg-soft);
  border: 1px solid var(--docs-line-soft);
  color: #0f6b57;
  word-break: normal;
}

.docs-prose a code {
  color: inherit;
}

/* Heading anchor links, added by docs.js */
.heading-anchor {
  margin-left: 0.4rem;
  font-size: 0.8em;
  color: var(--docs-line);
  opacity: 0;
  border-bottom: none !important;
  transition: opacity 0.15s ease;
  /* The visible glyph stays small; the hit area does not. 11x21px was below
     the 24px floor and impossible to hit on a phone. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  vertical-align: middle;
}

h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
.heading-anchor:focus,
.heading-anchor:focus-visible {
  opacity: 1;
}

/* Hover cannot reveal anything on a touch screen, so on those pointers the
   anchors are simply always there, at low contrast. */
@media (hover: none) {
  .heading-anchor {
    opacity: 0.55;
  }
}

/* ============================================================================
   4. Page furniture
   ========================================================================== */

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

.docs-breadcrumb a {
  color: var(--docs-muted);
  text-decoration: none;
}

.docs-breadcrumb a:hover {
  color: var(--flik-accent-text);
}

.docs-pager {
  display: flex;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--docs-line);
}

.docs-pager a {
  flex: 1;
  padding: 1rem 1.25rem;
  border: 1px solid var(--docs-line);
  border-radius: 10px;
  text-decoration: none;
  border-bottom: 1px solid var(--docs-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.docs-pager a:hover {
  border-color: #9fe6b4;
  box-shadow: 0 4px 16px rgba(17, 153, 142, 0.08);
}

.docs-pager .pager-dir {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--docs-muted);
  margin-bottom: 0.2rem;
}

.docs-pager .pager-title {
  display: block;
  font-weight: 700;
  color: var(--docs-ink);
}

.docs-pager .is-next {
  text-align: right;
}

/* ============================================================================
   5. On this page
   ========================================================================== */

.on-this-page {
  position: sticky;
  top: var(--nav-clear);
  max-height: calc(100vh - var(--nav-clear) - 2rem);
  overflow-y: auto;
  font-size: 0.85rem;
}

.on-this-page-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--docs-muted);
  margin-bottom: 0.75rem;
}

.on-this-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--docs-line);
}

.on-this-page a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--docs-muted);
  text-decoration: none;
}

.on-this-page a:hover {
  color: var(--flik-accent-text);
}

.on-this-page a.is-active {
  color: var(--flik-accent-text);
  border-left-color: var(--flik-accent);
  font-weight: 700;
}

.on-this-page .is-sub a {
  padding-left: 1.6rem;
  font-size: 0.82rem;
}

@media (max-width: 1199.98px) {
  .on-this-page {
    display: none;
  }
}

/* ============================================================================
   6. Code
   ========================================================================== */

.code-panel {
  min-width: 0;
}

@media (min-width: 1200px) {
  .code-panel.is-sticky {
    position: sticky;
    top: var(--nav-clear);
  }
}

.code-block {
  position: relative;
  background: var(--code-bg);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  background: var(--code-bg-raised);
  border-bottom: 1px solid var(--code-line);
  min-height: 2.6rem;
}

.code-block-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: rgba(215, 227, 232, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-block pre {
  margin: 0;
  padding: 1rem 1.1rem;
  background: transparent;
  border: 0;
  overflow-x: auto;
  max-height: 30rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--code-ink);
  -webkit-text-size-adjust: 100%;
}

.code-block pre code {
  font-family: var(--mono);
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}

.code-block pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.code-block pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}

/* --- language tabs ------------------------------------------------------- */

.code-tabs {
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.code-lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(215, 227, 232, 0.6);
  font-size: 0.78rem;
  font-family: inherit;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.code-lang-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.code-lang-btn.is-active {
  color: #0d1b24;
  background: #38ef7d;
  font-weight: 700;
}

.code-sample[hidden] {
  display: none;
}

/* --- copy ---------------------------------------------------------------- */

.copy-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(215, 227, 232, 0.8);
  font-size: 0.72rem;
  font-family: inherit;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.copy-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.copy-btn.is-copied {
  background: #38ef7d;
  border-color: #38ef7d;
  color: #0d1b24;
  font-weight: 700;
}

/* --- prism tokens, tuned for --code-bg ----------------------------------- */

.token.comment,
.token.prolog,
.token.cdata {
  color: #5d7684;
}
.token.punctuation {
  color: #8fa6b2;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ff8f9e;
}
.token.boolean,
.token.number {
  color: #ffc46b;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #6ee7a8;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #9fd7e8;
}
.token.atrule,
.token.attr-value,
.token.keyword {
  color: #6fd3ff;
}
.token.function,
.token.class-name {
  color: #ffd479;
}
.token.regex,
.token.important,
.token.variable {
  color: #e8b4ff;
}
.token.important,
.token.bold {
  font-weight: 700;
}
.token.italic {
  font-style: italic;
}

/* ============================================================================
   7. Endpoints, parameters, tables
   ========================================================================== */

.endpoint-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  background: var(--docs-bg-soft);
  border: 1px solid var(--docs-line);
  border-radius: 8px;
}

.endpoint-header .path {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--docs-ink);
  word-break: break-all;
}

.method-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
}

.method-badge.get {
  background: #1a6fba;
}
.method-badge.post {
  background: #12855f;
}
.method-badge.patch {
  background: #9a6100;
}
.method-badge.delete {
  background: #c0392b;
}

.param-table {
  width: 100%;
  margin: 1rem 0 2rem;
  border-top: 1px solid var(--docs-line);
  font-size: 0.9rem;
}

.param-table .param-row {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--docs-line-soft);
}

.param-table .param-row.is-child {
  padding-left: 1.5rem;
  border-left: 2px solid var(--docs-line-soft);
  margin-left: 0.25rem;
}

.param-name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.param-name .name {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--docs-ink);
}

.param-name .type {
  font-size: 0.78rem;
  color: var(--docs-muted);
}

.param-name .req {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c0392b;
}

.param-name .opt {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.param-desc {
  color: var(--docs-body);
  line-height: 1.6;
}

.param-desc p:last-child {
  margin-bottom: 0;
}

.docs-table {
  width: 100%;
  margin: 1.25rem 0 2rem;
  font-size: 0.9rem;
  border-collapse: collapse;
}

.docs-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--docs-muted);
  padding: 0 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--docs-line);
}

.docs-table td {
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--docs-line-soft);
  vertical-align: top;
  color: var(--docs-body);
}

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

.docs-table td:last-child,
.docs-table th:last-child {
  padding-right: 0;
}

/* A table box cannot shrink below its own content, so at phone widths the
   status and field tables push the whole document sideways — 28px of body
   scroll on a 375px screen, which reads as a broken page rather than a wide
   table. Making the table its own scroll container keeps the cells legible
   and the page still. */
@media (max-width: 767px) {
  .docs-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   8. Callouts
   ========================================================================== */

.callout {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  border-radius: 10px;
  border: 1px solid var(--docs-line);
  border-left-width: 3px;
  background: var(--docs-bg-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}

.callout .callout-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-title {
  display: block;
  font-weight: 700;
  color: var(--docs-ink);
  margin-bottom: 0.2rem;
}

.callout.note {
  border-left-color: #1a6fba;
}
.callout.note .callout-icon {
  color: #1a6fba;
}

.callout.tip {
  border-left-color: var(--flik-accent);
  background: rgba(0, 230, 118, 0.06);
}
.callout.tip .callout-icon {
  color: var(--flik-accent-text);
}

.callout.warning {
  border-left-color: #a86d00;
  background: #fff9ed;
}
.callout.warning .callout-icon {
  color: #a86d00;
}

.callout.danger {
  border-left-color: #c0392b;
  background: #fdf2f1;
}
.callout.danger .callout-icon {
  color: #c0392b;
}

/* Availability banner for endpoints that are documented but not yet live.
   Remove the markup from the API pages when the endpoints ship. */
.availability-note {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
  border-radius: 10px;
  background: #fff9ed;
  border: 1px solid #f0d9a8;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6b5416;
}

.availability-note strong {
  color: #5a460f;
}

.availability-note a {
  color: #8a6a12;
  border-bottom: 1px solid rgba(138, 106, 18, 0.35);
}

/* ============================================================================
   9. Home / index cards
   ========================================================================== */

.docs-hero {
  padding: calc(var(--nav-clear) + 1rem) 0 3rem;
  border-bottom: 1px solid var(--docs-line-soft);
  background: linear-gradient(180deg, #f7fdf9 0%, #ffffff 100%);
}

.docs-hero h1 {
  font-size: 2.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--docs-ink);
}

.docs-hero p {
  font-size: 1.2rem;
  color: var(--docs-muted);
  max-width: 44rem;
  margin-bottom: 0;
}

.docs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.docs-card {
  display: block;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--docs-line);
  border-radius: 12px;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}

.docs-card:hover {
  border-color: #9fe6b4;
  box-shadow: 0 8px 28px rgba(17, 153, 142, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
}

.docs-card h3 {
  font-size: 1.05rem;
  color: var(--docs-ink);
  margin: 0 0 0.35rem;
}

.docs-card p {
  font-size: 0.9rem;
  color: var(--docs-muted);
  line-height: 1.55;
  margin: 0;
}

.docs-card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--flik-accent-soft);
  color: var(--flik-accent-text);
  font-size: 1rem;
  margin-bottom: 0.85rem;
}

/* Two-column decision layout (sessions vs payment links) */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.choice-card {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--docs-line);
  border-radius: 12px;
  background: #fff;
}

.choice-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--docs-ink);
}

.choice-card ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--docs-body);
}

/* ============================================================================
   10. Steps
   ========================================================================== */

.docs-steps {
  counter-reset: docstep;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
}

.docs-steps > li {
  counter-increment: docstep;
  position: relative;
  padding-left: 2.75rem;
  padding-bottom: 1.75rem;
  margin: 0;
}

.docs-steps > li::before {
  content: counter(docstep);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--flik-gradient);
  color: var(--flik-on-gradient);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.docs-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 2.1rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--docs-line);
}

.docs-steps h3 {
  margin-top: 0 !important;
  font-size: 1.05rem;
}

/* ============================================================================
   11. Print
   ========================================================================== */

@media print {
  .docs-sidebar,
  .on-this-page,
  .docs-pager,
  .copy-btn,
  .code-tabs,
  .docs-sidebar-toggle {
    display: none !important;
  }
  .docs-shell,
  .docs-shell.has-panel,
  .docs-shell.has-toc,
  .docs-shell.has-split {
    grid-template-columns: 1fr;
    padding-top: 1rem;
  }
  .code-block {
    border: 1px solid #999;
  }
}


/* ============================================================================
   10. Browser surfaces and motion
   The parts nobody draws. Left alone they ship the user agent's defaults,
   which belong to no design system.
   ========================================================================== */

/* Inline contents, for the reference pages. They run to 76KB and five
   endpoints with no in-page navigation at all, and they cannot take the
   right-hand "On this page" rail: their endpoint rows already split the one
   content column into prose and code, and a third column would cut the prose
   to ~314px inside the 1400px container. So the contents sit in the flow,
   above the first section — which also gives every reader one on phones,
   where the right rail is hidden on every page. */
.docs-contents {
  margin: 0 0 2.5rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border: 1px solid var(--docs-line);
  border-radius: 12px;
  background: var(--docs-bg-soft);
}

.docs-contents-title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.docs-contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Multi-column, not grid: a two-column grid fills across the rows, so
   reading down the left column skipped every other section. Columns flow
   down and then across, which is how anyone reads a contents list. */
@media (min-width: 700px) {
  .docs-contents ol {
    columns: 2;
    column-gap: 2.5rem;
  }

  .docs-contents li {
    break-inside: avoid;
  }
}

.docs-contents a {
  display: block;
  padding: 0.3rem 0;
  color: var(--docs-body);
  font-size: 0.92rem;
  line-height: 1.45;
  text-decoration: none;
  border-bottom: 0;
}

.docs-contents a:hover,
.docs-contents a:focus-visible {
  color: var(--flik-accent-text);
  border-bottom: 0;
}

.docs-contents .is-sub a {
  padding-left: 0.9rem;
  font-size: 0.86rem;
  color: var(--docs-muted);
}

.docs-contents code {
  font-size: 0.85em;
}

/* Skip link. Every page puts a ~20-item sidebar between the header and the
   content, so a keyboard reader otherwise tabs the whole nav on every page. */
.docs-skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 1080;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 8px 8px;
  background: var(--flik-accent-text);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.docs-skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

::selection {
  background: var(--flik-accent-soft);
  color: var(--docs-ink);
}

.code-block ::selection {
  background: rgba(56, 239, 125, 0.28);
  color: #fff;
}

.docs-shell,
.docs-prose {
  caret-color: var(--flik-accent-text);
}

/* One focus ring for the whole surface, in the brand's own green rather than
   the UA's blue. :focus-visible so a mouse click does not draw it, with the
   offset carrying a white halo so the ring reads on tinted rows too. */
.docs-prose a:focus-visible,
.docs-nav-list a:focus-visible,
.docs-nav-sub a:focus-visible,
.docs-breadcrumb a:focus-visible,
.on-this-page a:focus-visible,
.docs-pager a:focus-visible,
.docs-card:focus-visible,
.docs-sidebar-cta a:focus-visible,
.docs-sidebar-toggle:focus-visible,
.copy-btn:focus-visible,
.code-lang-btn:focus-visible,
.heading-anchor:focus-visible {
  outline: 2px solid var(--flik-accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the dark code surface the dark green disappears, so the ring switches to
   the gradient's light stop. */
.code-block .copy-btn:focus-visible,
.code-block .code-lang-btn:focus-visible,
.endpoint-code .copy-btn:focus-visible,
.endpoint-code .code-lang-btn:focus-visible {
  outline-color: #38ef7d;
}

/* Scrollbars on the code panes, which are the only routinely scrolled boxes. */
.code-block pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 227, 232, 0.28) transparent;
}

.code-block pre::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.code-block pre::-webkit-scrollbar-track {
  background: transparent;
}

.code-block pre::-webkit-scrollbar-thumb {
  background: rgba(215, 227, 232, 0.28);
  border-radius: 999px;
}

.code-block pre::-webkit-scrollbar-thumb:hover {
  background: rgba(215, 227, 232, 0.45);
}

/* Figures in the parameter and error tables are read down a column, so they
   line up on the digit rather than drifting with proportional numerals. */
.param-table .param-name,
.docs-table code,
.endpoint-doc code {
  font-variant-numeric: tabular-nums;
}

/* Reduced motion: the transitions here are small and none of them carry
   meaning on their own, so they stop rather than shorten. The drawer still
   opens, the anchor still appears, they simply arrive. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}