/* ==========================================================================
   SatsRail developer docs — surface stylesheet
   ==========================================================================

   The docs shell: the sidebar, the guide reading column and the Swagger UI
   overrides. Everything here is specific to this surface. Anything that must
   look the same across SatsRail lives in app/assets/stylesheets — the brand
   tokens in brand_tokens.css and the navbar in navbar.css, both copied in
   beside this file by api-docs/build.rb and linked ahead of it.

   This replaces two inline <style> blocks (one per layout) and a 1,399-line
   assets/css/style.css that no page ever linked — its layout had no users —
   whose palette was a blue-and-green scheme unrelated to anything SatsRail
   ships. The gold here was `--bitcoin-gold: #d4a017`, half a shade off the
   brand's #e8b53c and declared only here. Both are gone: gold is
   var(--bitcoin-orange) now, from the shared tokens.

   Surface tokens are prefixed --docs-* so they cannot collide with a brand
   token; build.rb fails the build if this file and brand_tokens.css ever
   declare the same name. See docs/api-docs.md.
   ========================================================================== */

:root {
  /* Height of the shared navbar. The sidebar sticks below it, so it has to
     know. Measured at runtime by the script in _head.html because the real
     value derives from tokens (logo height, padding) any surface may change;
     this is the fallback for the moment before that runs, and for the rare
     reader with JavaScript off. */
  --docs-nav-h: 46px;

  --docs-sidebar-w: 264px;

  /* The reading surface. Light content under a dark shell — the app's dual
     design system, same split the portal's own pages use. */
  --docs-canvas: #f7f7f8;
  --docs-paper: #ffffff;
  --docs-text: #1f2328;
  --docs-text-muted: #59636e;
  --docs-hairline: #e1e4e8;

  /* The dark sidebar, keyed to the navbar above it so the two read as one
     shell rather than two panels that happen to both be dark. */
  --docs-rail-bg: var(--ink);
  --docs-rail-text: rgba(255, 255, 255, 0.62);
  --docs-rail-text-hover: rgba(255, 255, 255, 0.92);
  --docs-rail-heading: rgba(255, 255, 255, 0.38);
  --docs-rail-rule: rgba(255, 255, 255, 0.1);

  /* Code. The one place a near-black surface survives inside the light
     column, because a diff of a JSON payload wants it. */
  --docs-code-bg: #16191d;
  --docs-code-text: #e6edf3;

  /* Not shared: brand_tokens.css deliberately leaves --radius-sm to each
     surface (the portal uses 0.375rem, the outward-facing sides 0.25rem).
     navbar.css reads it, so the navbar renders unrounded without this. */
  --radius-sm: 0.25rem;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.docs-body {
  margin: 0;
  background: var(--docs-canvas);
  color: var(--docs-text);
  -webkit-font-smoothing: antialiased;
}

/* The navbar is sticky-top from the shared partial; the sidebar and the
   reading column sit side by side beneath it. align-items: flex-start is
   what lets the sidebar be sticky — a stretched flex item cannot be. */
.docs-shell {
  display: flex;
  align-items: flex-start;
}

.docs-main {
  flex: 1 1 auto;
  min-width: 0;            /* without this a wide <pre> stretches the column */
  background: var(--docs-canvas);
  min-height: calc(100vh - var(--docs-nav-h));
}

/* ==========================================================================
   Sidebar

   A Bootstrap collapse at narrow widths; from 992px up the toggle is hidden
   and the list is forced open. See the head of _sidebar.html for why this is
   a collapse and not a <details>.
   ========================================================================== */

.docs-nav {
  background: var(--docs-rail-bg);
  color: var(--docs-rail-text);
  font-family: var(--font-mono);
}

.docs-nav-summary {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: var(--nav-fs);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  color: var(--docs-rail-text-hover);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--docs-rail-rule);
  cursor: pointer;
}

.docs-nav-summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* Bootstrap toggles .collapsed on the button, so the caret follows the
     list's real state rather than a click count. */
  transform: rotate(-135deg);
  transition: transform var(--t-fast) var(--ease-out);
}

.docs-nav-summary.collapsed::after { transform: rotate(45deg); }

.docs-nav-body { padding: 1.25rem 0.75rem 2rem; }

.docs-nav-section { margin-bottom: 1.5rem; }

.docs-nav-heading {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-size: var(--nav-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  color: var(--docs-rail-heading);
}

.docs-nav-link {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--nav-fs);
  color: var(--docs-rail-text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.docs-nav-link:hover {
  color: var(--docs-rail-text-hover);
  background: rgba(255, 255, 255, 0.05);
}

/* Gold is the current page, never hover — the same rule the navbar follows,
   so the two halves of the shell agree on what gold means. */
.docs-nav-link.active {
  color: var(--nav-active-color);
  background: var(--nav-active-bg);
}

.docs-nav-rule {
  margin: 1.25rem 0.5rem;
  border: 0;
  border-top: 1px solid var(--docs-rail-rule);
}

@media (min-width: 992px) {
  .docs-nav {
    position: sticky;
    top: var(--docs-nav-h);
    flex: 0 0 var(--docs-sidebar-w);
    width: var(--docs-sidebar-w);
    height: calc(100vh - var(--docs-nav-h));
    overflow-y: auto;
    border-right: 1px solid var(--docs-rail-rule);
  }

  .docs-nav-summary { display: none; }

  /* Force the list open whatever state Bootstrap left it in: the toggle is
     hidden here, so a reader who collapsed it on a narrow window and then
     widened it would have no way to get it back. Specificity, not
     !important — this is 0,4,0 against Bootstrap's 0,2,0 `.collapse:not
     (.show)`. */
  .docs-nav .docs-nav-body.collapse:not(.show) { display: block; }
}

@media (max-width: 991.98px) {
  .docs-shell { display: block; }
}

/* ==========================================================================
   Guide pages
   ========================================================================== */

.docs-main .hero-section {
  padding: 3.5rem 0;
  background-color: var(--ink);   /* under the photo, so a slow image never flashes white */
}

.bg-bitcoin-gradient {
  background: linear-gradient(135deg, var(--bitcoin-orange) 0%, var(--bitcoin-orange-dark) 100%);
}

/* Used 44 times across the guides — mostly the numbered step badges — and
   defined nowhere until now, so every one of them rendered as a transparent
   circle on the old site. */
.bg-bitcoin {
  background-color: var(--bitcoin-orange) !important;
  color: var(--ink) !important;
}

.text-bitcoin { color: var(--bitcoin-orange) !important; }

.btn-bitcoin {
  background: var(--bitcoin-orange);
  border: 1px solid var(--bitcoin-orange);
  color: var(--ink);
  font-weight: 600;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.btn-bitcoin:hover,
.btn-bitcoin:focus {
  background: var(--bitcoin-orange-dark);
  border-color: var(--bitcoin-orange-dark);
  color: var(--ink);
}

.docs-main .card {
  border: 1px solid var(--docs-hairline);
  border-radius: var(--radius-md);
  background: var(--docs-paper);
}

.docs-main .card-header {
  background: var(--docs-paper);
  border-bottom: 1px solid var(--docs-hairline);
  font-weight: 600;
}

.docs-main pre {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--docs-code-bg);
  color: var(--docs-code-text);
  overflow-x: auto;
}

.docs-main pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.docs-main code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Inline code outside a <pre>, on the light column. */
.docs-main :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  background: rgba(232, 181, 60, 0.12);
  color: #7a5a0b;
}

/* :not(.btn) is load-bearing. `.docs-main a` outweighs Bootstrap's `.btn`,
   so without it every button in the guides — including the light and
   outline ones on the dark call-to-action panels — is repainted this gold
   and becomes unreadable. Excluding them lets .btn keep its own colors. */
.docs-main a:not(.btn) { color: var(--bitcoin-orange-dark); }
.docs-main a:not(.btn):hover { color: var(--bitcoin-orange); }

/* Links inside a hero or any dark panel inherit the panel's own treatment —
   the rule above is for the light reading column only. */
.docs-main .hero-section a:not(.btn),
.docs-main .bg-dark a:not(.btn),
.docs-main .bg-bitcoin-gradient a:not(.btn) { color: inherit; }

.docs-main .table > :not(caption) > * > * { background: transparent; }

/* ==========================================================================
   Swagger UI

   Rendered with BaseLayout, so there is no topbar to hide — the old sheet
   spent a rule doing that. What is left is making the operations agree with
   the brand: Swagger's default green POST against gold everywhere else read
   as two different products.
   ========================================================================== */

.docs-main-reference { background: var(--docs-paper); }

.swagger-ui { max-width: 100%; }

.swagger-ui .info { margin: 2.5rem 0; }

.swagger-ui .info .title { color: var(--docs-text); }

.swagger-ui .opblock.opblock-post {
  border-color: var(--bitcoin-orange);
  background: rgba(232, 181, 60, 0.08);
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
  background: var(--bitcoin-orange);
  color: var(--ink);
}

.swagger-ui .btn.execute {
  background: var(--bitcoin-orange);
  border-color: var(--bitcoin-orange);
  color: var(--ink);
}

.swagger-ui .btn.execute:hover {
  background: var(--bitcoin-orange-dark);
  border-color: var(--bitcoin-orange-dark);
}

/* Swagger UI ships its own wrapper padding that assumes it owns the page;
   inside the reading column it needs to sit in from the sidebar's edge. */
.swagger-ui .wrapper { padding: 0 1.5rem; }