/* mymind API Documentation Styles
   Uses native CSS nesting — requires Chrome 130+ / Safari 18+
   Defines theme tokens as fallbacks; the app stylesheet may override them.
*/

:root {
  --color: #000;
  --line-color: #e1e1e1;
  --surface-color: #fff;
  --surface-color-2: #f0f2f5;
  --accent-color: #ff5924;
}

/* ─── Layout ─────────────────────────────────────────────────── */

.docs-layout {
  display: flex;
  min-height: 100vh;
  background: var(--surface-color);
}

.docs-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 270px;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line-color);
  background: var(--surface-color-2);
  padding: 32px 20px;
  box-sizing: border-box;
  z-index: 10;

  & .docs-sidebar-logo {
    display: block;
    margin-bottom: 36px;
    padding-left: 12px;
    text-decoration: none;

    & img {
      display: block;
      width: 97px;
      height: 88px;
    }
  }
}

.docs-main {
  margin-left: 270px;
  padding: 60px 80px;
  max-width: 860px;
  box-sizing: border-box;
  font: 16px/1.65 'Nunito', sans-serif;
  color: var(--color);
  background: var(--surface-color);
}

/* ─── Paired examples (right of each endpoint) ────────────────── */

/* The raw holder is not rendered; JS moves each example beside its endpoint. */
.docs-rail {
  display: none;
}

/* Below the rail breakpoint, the examples don't render at all and the page
   renders exactly like a page without a rail. */
.docs-action-example {
  display: none;
}

@media (min-width: 1480px) {
  .docs-main:has(.docs-rail) {
    max-width: 1320px;
  }

  /* On pages that opt into the paired-example layout, non-action-row content
     stays at the same effective width as on pages without a rail (860px box →
     700px content). Action-rows span the full widened width with the example
     in their right column. */
  .docs-main:has(.docs-rail) .docs-page > :not(.docs-section),
  .docs-main:has(.docs-rail) .docs-section > :not(.docs-action-row) {
    max-width: 700px;
  }

  .docs-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 48px;
    align-items: start;
    margin-bottom: 40px;

    & > .docs-action-content {
      min-width: 0;
    }

    & > .docs-action-content > h3:first-child {
      margin-top: 36px;
    }
  }

  .docs-action-example {
    display: block;
    position: sticky;
    top: 32px;
    margin-top: 44px; /* roughly align with endpoint header baseline */
    background: #1a1d24;
    border: 1px solid #2b2f39;
    border-radius: 10px;
    overflow: hidden;

    & .docs-rail-example-header {
      padding: 9px 14px;
      border-bottom: 1px solid #2b2f39;
      background: linear-gradient(to bottom, #282b34 0%, #22252e 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

      & .docs-rail-example-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 600 10px/1 'Nunito';
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #b3bac6;

        &::before {
          content: "";
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--accent-color);
          box-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 65%, transparent);
        }
      }
    }

    & .docs-code {
      background: #0a0c10;
      border: none;
      border-radius: 0;
      margin: 0;
      padding: 14px 16px;

      & code {
        font: 12.5px/1.65 'IBM Plex Mono';
        color: #e8ecf1;
        white-space: pre-wrap;
        word-break: break-word;
      }

      & .json-key    { color: #7dd3fc; }  /* cyan-blue */
      & .json-string { color: #86efac; }  /* mint green */
      & .json-number { color: #fbbf24; }  /* amber */
      & .json-bool,
      & .json-null   { color: #f472b6; }  /* pink */

      & .policy-burst,
      & .policy-sustained { color: #86efac; }  /* mint green */
    }

    /* Dark-theme overrides for nested request/response blocks — kill their
       individual borders so everything sits flush inside the rail card. */
    & .docs-code-block {
      background: transparent;
      border: none;
      border-radius: 0;
      margin: 0;
      overflow: visible;

      & + .docs-code-block {
        border-top: 1px solid #2b2f39;
      }

      & .docs-code-block-header {
        background: #22252e;
        border-bottom: 1px solid #2b2f39;
        color: #9aa3b2;
        padding: 8px 14px;
        box-shadow: inset 2px 0 0 0 transparent;

        & .docs-endpoint-path {
          color: #e8ecf1;
          font-size: 12px;
        }

        & .docs-step-label {
          color: #6b7280;
        }
      }

      /* Thin accent stripe on the left of each request/response header to
         indicate type, without boxing the whole block. */
      &--request .docs-code-block-header {
        box-shadow: inset 2px 0 0 0 #60a5fa;
      }

      &--response .docs-code-block-header {
        box-shadow: inset 2px 0 0 0 #4ade80;
      }

      /* Highlight the multipart "blob" section of a request body so the
         reader can see which part is the binary payload. Display block so the
         background fills each line inside the pre. */
      & .docs-multipart-blob {
        display: block;
        margin: 4px -14px;
        padding: 4px 14px 4px 12px;
        background: color-mix(in srgb, #8b5cf6 12%, transparent);
        box-shadow: inset 2px 0 0 0 #8b5cf6;
      }

      & .docs-code-block-meta {
        background: #14171c;
        border-bottom: 1px solid #2b2f39;
        padding: 6px 14px;
        font-size: 11px;

        & .docs-code-block-meta-key {
          color: #6b7280;
        }

        & .docs-code-block-meta-value {
          color: #e8ecf1;
        }

        & .docs-code-block-meta-link {
          color: color-mix(in srgb, var(--accent-color) 85%, white);
        }
      }

      & .docs-code {
        background: #0a0c10;
        padding: 12px 14px;

        & code {
          font-size: 11.5px;
        }
      }

      & .docs-code-block-note {
        padding: 8px 14px;
        background: #14171c;
        border-top: 1px solid #2b2f39;
        font: 11px 'Nunito';

        & a {
          color: color-mix(in srgb, var(--accent-color) 85%, white);
          text-decoration: none;

          &:hover { text-decoration: underline; }
        }
      }
    }

    /* Step arrow muted for dark backdrop */
    & .docs-step-arrow {
      color: color-mix(in srgb, var(--accent-color) 55%, transparent);

      & .docs-step-arrow-label {
        color: rgba(255, 255, 255, 0.5);

        & code {
          color: var(--accent-color);
        }
      }
    }

    /* Dark-theme overrides for the embedded tab switcher */
    & .docs-lang-tabs {
      margin: 0;
      border: none;
      border-radius: 0;
    }

    & .docs-lang-tabs-nav {
      background: #22252e;
      border-bottom: 1px solid #2b2f39;
      padding: 0 6px;
    }

    & .docs-lang-tab {
      padding: 8px 10px;
      font-size: 11px;
      color: #7a8293;

      &:hover {
        color: #e8ecf1;
      }

      &.docs-lang-tab--active {
        color: var(--accent-color);
        border-bottom-color: var(--accent-color);
      }
    }

    /* Override the global lang-panel padding — nested blocks already have
       their own header/body padding; the outer panel should be flush. */
    & .docs-lang-panel:has(.docs-code-block) {
      padding: 0;
    }

    /* Param pills inside the dark header get a brighter glow. */
    & .docs-param {
      background: color-mix(in srgb, var(--accent-color) 20%, transparent);
      color: #ffb992;
    }
  }
}

/* ─── Sidebar Navigation ──────────────────────────────────────── */

.docs-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.docs-nav-bottom {
  display: flex;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line-color);
  margin-top: 16px;

  & .docs-nav-link {
    font-size: 12px;
    color: color-mix(in srgb, var(--color) 40%, transparent);
  }
}

.docs-nav-link {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  font: 14px 'Nunito';
  color: var(--color);
  text-decoration: none;
  transition: background 0.1s ease;

  &:hover {
    background: var(--surface-color-2);
  }

  &.docs-nav-link--active {
    background: var(--surface-color-2);
    font-weight: 600;
    color: var(--accent-color);
  }
}

.docs-nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Sublinks sit ~12px deeper than the parent's text column (12px) so they
     read as a sub-list, not a continuation of the same level. */
  padding: 4px 0 4px 12px;
}

.docs-nav-sublink {
  display: block;
  padding: 4px 12px;
  border-radius: 4px;
  font: 13px 'Nunito';
  color: color-mix(in srgb, var(--color) 55%, transparent);
  text-decoration: none;
  transition: color 0.1s ease;

  &:hover {
    color: var(--color);
  }
}

/* Sidebar language picker — drives every .docs-lang-tabs on the page so the
   reader sees code samples in their preferred language across all docs. */
.docs-lang-picker {
  margin: auto 0 16px;
  padding: 14px 12px;
  border-top: 1px solid var(--line-color);
  border-bottom: 1px solid var(--line-color);
  background: color-mix(in srgb, var(--surface-color) 60%, var(--surface-color-2));
}

.docs-lang-picker-label {
  display: block;
  font: 600 10px/1 'Nunito';
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color) 40%, transparent);
  margin-bottom: 8px;
  padding: 0 2px;
}

.docs-lang-picker-control {
  position: relative;
}

.docs-lang-picker-select {
  appearance: none;
  width: 100%;
  padding: 8px 32px 8px 12px;
  font: 500 14px/1 'Nunito';
  color: var(--color);
  background: var(--surface-color);
  border: 1px solid var(--line-color);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;

  &:hover {
    border-color: color-mix(in srgb, var(--accent-color) 40%, var(--line-color));
  }

  &:focus-visible {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
  }
}

.docs-lang-picker-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--color) 50%, transparent);
  pointer-events: none;
}

/* Inline language prompt — sits under the intro on the home page so first-time
   readers can set their preference before they hit any code samples. */
.docs-lang-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 48px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--accent-color) 5%, var(--surface-color));
  border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--line-color));
  border-radius: 12px;

  & .docs-lang-prompt-text {
    flex: 1;
    min-width: 0;

    & > strong {
      display: block;
      font: 600 14px/1.4 'Nunito';
      color: var(--color);
      margin-bottom: 4px;
    }

    & > p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: color-mix(in srgb, var(--color) 65%, transparent);
    }
  }

  & .docs-lang-prompt-control {
    flex: 0 0 180px;
  }
}

@media (max-width: 720px) {
  .docs-lang-prompt {
    flex-direction: column;
    align-items: stretch;

    & .docs-lang-prompt-control {
      flex: none;
    }
  }
}

.docs-nav-group {
  margin-top: 32px;
  padding-bottom: 8px;

  &.docs-nav-group--push {
    margin-top: auto;
  }

  & .docs-nav-group-label {
    display: block;
    font: 600 11px/1 'Nunito';
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color) 40%, transparent);
    padding: 0 12px 10px;
  }
}

/* ─── Base URL ───────────────────────────────────────────────── */

.docs-base-url {
  font: 15px/1 'IBM Plex Mono';
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 6%, white);
  border: 1px solid color-mix(in srgb, var(--accent-color) 20%, var(--line-color));
  border-radius: 8px;
  padding: 14px 18px;
  letter-spacing: -0.01em;
}

/* ─── Page Structure ──────────────────────────────────────────── */

.docs-page {
  & > h1 {
    font: 400 32px 'Nunito';
    margin: 0 0 8px;
    letter-spacing: -0.02em;
  }

  & > .docs-page-intro {
    font-size: 17px;
    color: color-mix(in srgb, var(--color) 65%, transparent);
    margin: 0 0 48px;
    max-width: 600px;
    line-height: 1.6;
  }
}

.docs-section {
  margin-bottom: 56px;

  & > h2 {
    font: 600 20px 'Nunito';
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-color);
  }

  & > h3,
  & .docs-action-content > h3 {
    font: 600 16px 'Nunito';
    margin: 36px 0 6px;
    color: var(--color);
    letter-spacing: -0.01em;
    scroll-margin-top: 24px;
  }

  & p {
    margin: 0 0 16px;
    line-height: 1.7;
  }
}

/* Clear divider between model + actions sections */
.docs-section + .docs-section {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line-color);

  & > h2 {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ─── Model Table ─────────────────────────────────────────────── */

.docs-model-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  overflow: hidden;

  & th {
    text-align: left;
    font: 600 11px 'Nunito';
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color) 45%, transparent);
    padding: 10px 16px;
    background: var(--surface-color-2);
    border-bottom: 1px solid var(--line-color);
  }

  & td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-color);
    vertical-align: top;
    line-height: 1.5;
  }

  & tr:last-child td {
    border-bottom: none;
  }

  & tbody tr {
    transition: background 0.1s ease;

    &:hover {
      background: color-mix(in srgb, var(--surface-color-2) 50%, transparent);
    }
  }

  & td:first-child {
    font: 13px/1.5 'IBM Plex Mono';
    color: var(--accent-color);
    width: 96px;
    white-space: nowrap;
  }

  /* The "type" column styling only applies when there's a description column
     after it. On 2-column tables (e.g. access-control), the second cell IS
     the description and should wrap normally. */
  & td:nth-child(2):not(:last-child) {
    font: 13px/1.5 'IBM Plex Mono';
    color: color-mix(in srgb, var(--color) 50%, transparent);
    width: 80px;
    white-space: nowrap;
  }

  & td:last-child {
    word-break: break-word;
  }
}

/* Linked type references in model/params tables inherit the generic
   docs-page link styling below — no override needed. */

/* Lifecycle / conditional fields — only present in certain object states. */
.docs-model-row--lifecycle {
  background: color-mix(in srgb, var(--accent-color) 4%, transparent);

  & td:first-child {
    color: color-mix(in srgb, var(--accent-color) 80%, var(--color));
  }
}

.docs-field-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  font: 600 9px/1 'Nunito';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-color) 75%, var(--color));
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  vertical-align: middle;
}

.docs-required {
  font: 500 10px/1 'Nunito';
  color: color-mix(in srgb, var(--accent-color) 70%, transparent);
  margin-left: 6px;
  letter-spacing: 0.02em;
}

/* ─── Nested Sub-type ────────────────────────────────────────── */

.docs-subtype {
  margin: 12px 0 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--line-color);

  & h4 {
    font: 600 14px 'Nunito';
    color: color-mix(in srgb, var(--color) 65%, transparent);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
}

/* ─── Action Title ───────────────────────────────────────────── */

.docs-action-desc {
  font-size: 14px;
  color: color-mix(in srgb, var(--color) 55%, transparent);
  margin: -4px 0 12px;
  line-height: 1.6;
}

/* ─── Endpoint Block ──────────────────────────────────────────── */

.docs-endpoint {
  border: 1px solid var(--line-color);
  border-radius: 8px;
  margin-bottom: 24px;

  & .docs-endpoint-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--surface-color-2);
    border-bottom: 1px solid var(--line-color);
    border-radius: 8px 8px 0 0;
  }

  /* Right-side cluster: when an idempotent badge is present it becomes the
     right-anchor and credit-cost rides next to it; otherwise credit-cost floats
     right on its own. */
  &:has(.docs-idempotent) .docs-idempotent {
    margin-left: auto;
  }

  &:not(:has(.docs-idempotent)) .docs-credit-cost {
    margin-left: auto;
  }

  & .docs-credit-cost {
    font: 500 10px/1 'Nunito';
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--color) 35%, transparent);
    background: color-mix(in srgb, var(--color) 5%, transparent);
    padding: 4px 8px;
    border-radius: 10px;
    white-space: nowrap;
    position: relative;
    cursor: default;

    &[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 6px);
      right: 0;
      font: 400 12px/1.4 'Nunito';
      color: white;
      background: color-mix(in srgb, var(--color) 85%, transparent);
      padding: 8px 12px;
      border-radius: 6px;
      width: max-content;
      max-width: 360px;
      white-space: normal;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
      z-index: 5;
    }

    &[data-tooltip]:hover::after {
      opacity: 1;
    }
  }

  & .docs-endpoint-body {
    padding: 20px 18px;

    & > p {
      margin: 0 0 16px;
      font-size: 14px;
      color: color-mix(in srgb, var(--color) 75%, transparent);
      line-height: 1.6;
    }

    & > h3 {
      font: 600 12px 'Nunito';
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--color) 45%, transparent);
      margin: 20px 0 8px;
    }

    & > h3:first-child {
      margin-top: 0;
    }
  }
}

.docs-endpoint-path {
  font: 15px 'IBM Plex Mono';
  color: var(--color);
}

.docs-param {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-style: italic;
}

/* Footnote-style line that follows a params table for cross-cutting
   constraints (e.g. side-effects of one parameter on another). */
.docs-params-note {
  margin: -8px 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color) 55%, transparent);

  & code {
    font-size: 12px;
  }
}

/* ─── Method Badges ───────────────────────────────────────────── */

.docs-method {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font: 600 11px/1.6 'IBM Plex Mono';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;

  &.docs-method--get    { background: #dbeafe; color: #1d4ed8; }
  &.docs-method--post   { background: #dcfce7; color: #15803d; }
  &.docs-method--put    { background: #fef3c7; color: #92400e; }
  &.docs-method--patch  { background: #ede9fe; color: #6d28d9; }
  &.docs-method--delete { background: #fee2e2; color: #b91c1c; }
}

/* ─── Parameters Table ────────────────────────────────────────── */

.docs-params-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  margin: 4px 0 16px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  overflow: hidden;

  & th {
    text-align: left;
    font: 600 11px 'Nunito';
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color) 45%, transparent);
    padding: 10px 16px;
    background: var(--surface-color-2);
    border-bottom: 1px solid var(--line-color);
  }

  & td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-color);
    vertical-align: top;
    line-height: 1.5;
  }

  & tr:last-child td {
    border-bottom: none;
  }

  & td:first-child {
    font: 13px/1.5 'IBM Plex Mono';
    color: var(--accent-color);
    width: 96px;
    white-space: nowrap;
  }

  /* The "type" column styling only applies when there's a description column
     after it. On 2-column tables (e.g. Headers), the second cell IS the
     description and should wrap normally. */
  & td:nth-child(2):not(:last-child) {
    font: 13px/1.5 'IBM Plex Mono';
    color: color-mix(in srgb, var(--color) 50%, transparent);
    width: 80px;
    white-space: nowrap;
  }

  /* Default column (when present) */
  &.docs-params-table--with-default td:nth-child(3):not(:last-child) {
    font: 13px/1.5 'IBM Plex Mono';
    color: color-mix(in srgb, var(--color) 50%, transparent);
    width: 88px;
    white-space: nowrap;
  }

  & td:last-child {
    word-break: break-word;

    & code {
      word-break: break-all;
    }
  }

  /* "One of" group header — reads as a subheading between rows */
  & tr.docs-params-group > td {
    padding: 6px 16px;
    background: color-mix(in srgb, var(--color) 3%, transparent);
    font: 600 11px/1.4 'Nunito';
    color: color-mix(in srgb, var(--color) 50%, transparent);
    width: auto;
    white-space: normal;
  }

  & .docs-params-group-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color);
    margin-right: 8px;
  }

  & .docs-params-group-note {
    font-weight: 400;
    font-style: italic;
    color: color-mix(in srgb, var(--color) 45%, transparent);
  }

  /* Left accent stripe visually binds the group header to its child rows. */
  & tr.docs-params-group > td:first-child,
  & tr.docs-params-group-child > td:first-child {
    box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--color) 30%, transparent);
  }
}

/* ─── Code Blocks ─────────────────────────────────────────────── */

.docs-code-label {
  font: 600 11px 'Nunito';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color) 45%, transparent);
  margin: 20px 0 6px;
}

.docs-code {
  background: color-mix(in srgb, var(--surface-color-2) 40%, white);
  border: 1px solid var(--line-color);
  border-radius: 6px;
  padding: 18px 20px;
  margin: 0 0 16px;
  overflow-x: auto;

  & code {
    font: 13.5px/1.8 'IBM Plex Mono';
    color: color-mix(in srgb, var(--color) 70%, transparent);
    white-space: pre;
    display: block;
    letter-spacing: -0.01em;
  }
}

/* ─── Request / Response Blocks ──────────────────────────────── */

.docs-code-block {
  border: 1px solid var(--line-color);
  border-radius: 8px;
  margin: 20px 0 16px;
  overflow: hidden;

  & .docs-code-block-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font: 600 11px/1 'Nunito';
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color) 55%, transparent);
    border-bottom: 1px solid var(--line-color);

    & .docs-copy-button {
      margin-left: auto;
      padding: 4px 10px;
      font: 600 10px/1 'Nunito';
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--color) 55%, transparent);
      background: transparent;
      border: 1px solid var(--line-color);
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;

      &:hover {
        background: var(--surface-color-2);
        color: var(--color);
      }

      &.docs-copy-button--ok {
        color: var(--accent-color);
        border-color: color-mix(in srgb, var(--accent-color) 35%, var(--line-color));
      }
    }

    & .docs-endpoint-path {
      text-transform: none;
      letter-spacing: 0;
      font: 13px 'IBM Plex Mono';
      color: var(--color);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      & .docs-query-string {
        color: color-mix(in srgb, var(--color) 35%, var(--surface-color));
      }
    }

    & .docs-step-label {
      margin-left: auto;
      font: italic 500 10px/1 'Nunito';
      text-transform: none;
      letter-spacing: 0;
      color: color-mix(in srgb, var(--color) 45%, transparent);
    }
  }

  & .docs-code {
    border: none;
    border-radius: 0;
    margin: 0;
  }

  & .docs-code-block-meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line-color);
    font: 13px 'IBM Plex Mono';

    & .docs-code-block-meta-key {
      font: 600 10px/1 'Nunito';
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: color-mix(in srgb, var(--color) 45%, transparent);
    }

    & .docs-code-block-meta-value {
      color: var(--color);
    }

    & .docs-code-block-meta-link {
      margin-left: auto;
      font: 500 11px/1 'Nunito';
      color: var(--accent-color);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.docs-code-block--request {
  border-color: color-mix(in srgb, #3b82f6 20%, var(--line-color));

  & .docs-code-block-header {
    background: color-mix(in srgb, #3b82f6 8%, white);
  }

  & .docs-code {
    background: color-mix(in srgb, #3b82f6 4%, white);
  }
}

.docs-code-block--response {
  border-color: color-mix(in srgb, #22c55e 20%, var(--line-color));

  & .docs-code-block-header {
    background: color-mix(in srgb, #22c55e 8%, white);
  }

  & .docs-code {
    background: color-mix(in srgb, #22c55e 4%, white);
  }
}

.docs-code-block--error {
  border-color: color-mix(in srgb, #ef4444 20%, var(--line-color));

  & .docs-code-block-header {
    background: color-mix(in srgb, #ef4444 8%, white);
  }

  & .docs-code {
    background: color-mix(in srgb, #ef4444 4%, white);
  }
}

/* JSON syntax highlighting */
.docs-code {
  & .json-key     { color: #4f46e5; }
  & .json-string  { color: #0d9488; }
  & .json-number  { color: #b45309; }
  & .json-bool,
  & .json-null    { color: #e11d48; }

  & .policy-burst,
  & .policy-sustained { color: #0d9488; }
}

.docs-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 0;
  color: color-mix(in srgb, var(--accent-color) 70%, transparent);

  & .docs-step-arrow-line {
    flex-shrink: 0;
  }

  & .docs-step-arrow-label {
    font: italic 400 12px/1 'Nunito';
    color: color-mix(in srgb, var(--color) 55%, transparent);

    & code {
      font: 500 12px 'IBM Plex Mono';
      background: none;
      border: none;
      padding: 0;
      color: var(--accent-color);
      font-style: normal;
    }
  }
}

.docs-effective-date {
  display: inline-block;
  margin: -4px 0 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  font: 600 11px/1.4 'Nunito';
  letter-spacing: 0.04em;
  text-transform: uppercase;

  & time {
    font-variant-numeric: tabular-nums;
  }
}

.docs-coming-soon {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font: 600 10px/1.4 'Nunito';
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.docs-multipart-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  color: #7c3aed;
  font: 600 9.5px/1.4 'Nunito';
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

/* "Idempotent" pill — safe to retry, calling twice has the same effect as once. */
.docs-idempotent {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: #059669;
  font: 600 9.5px/1.4 'Nunito';
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: help;
}

/* Subtle violet tint to signal the blob row is a different shape of request. */
.docs-params-row--multipart > td {
  background: color-mix(in srgb, #8b5cf6 4%, transparent);
}


/* Prose and inline links — covers section bodies, page intros, and table cells */
.docs-page a:not(.docs-nav-link, .docs-cta, .docs-anchor-link) {
  color: var(--accent-color);
  text-decoration: underline color-mix(in srgb, var(--accent-color) 30%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;

  &:hover {
    text-decoration-color: var(--accent-color);
  }
}

/* Inline code — exclude code inside pre blocks */
.docs-main :not(pre) > code {
  font: 13px 'IBM Plex Mono';
  background: var(--surface-color-2);
  border: 1px solid var(--line-color);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── Language Tabs ──────────────────────────────────────────── */

.docs-lang-tabs {
  margin: 20px 0 16px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  overflow: hidden;
}

.docs-lang-tabs-nav {
  display: flex;
  padding: 0 12px;
  background: var(--surface-color-2);
  border-bottom: 1px solid var(--line-color);
}

.docs-lang-tab {
  padding: 8px 14px;
  font: 600 12px/1 'Nunito';
  color: color-mix(in srgb, var(--color) 45%, transparent);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;

  &:hover {
    color: color-mix(in srgb, var(--color) 70%, transparent);
  }

  &.docs-lang-tab--active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
  }
}

/* Nested tab strip (e.g. Client / Usage inside an outer language tab) — visually
   secondary so it reads as a sub-grouping, not a peer of the language switcher. */
.docs-lang-panel .docs-lang-tabs {
  margin: 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--line-color);
}

.docs-lang-panel .docs-lang-tabs-nav {
  padding: 0 4px;
  background: color-mix(in srgb, var(--surface-color-2) 50%, var(--surface-color));
}

.docs-lang-panel .docs-lang-tab {
  padding: 6px 10px;
  font: 600 10.5px/1 'Nunito';
  letter-spacing: 0.06em;
  text-transform: uppercase;

  &.docs-lang-tab--active {
    border-bottom-width: 2px;
  }
}

.docs-lang-panel {
  display: none;

  &.docs-lang-panel--active {
    display: block;
  }

  & .docs-code {
    border: none;
    border-radius: 0;
    margin: 0;
  }

  /* When the panel contains full request/response blocks (not a bare code
     pre), pad the panel and collapse outer margins so everything sits
     flush inside the tab's border. */
  &:has(.docs-code-block) {
    padding: 16px;

    & > *:first-child { margin-top: 0; }
    & > *:last-child  { margin-bottom: 0; }
  }
}

/* ─── Callout Box ─────────────────────────────────────────────── */

/* ─── "Register a client" CTA ─────────────────────────────────── */

.docs-register {
  margin-top: 56px;
  padding: 24px 28px;
  border-radius: 12px;
  background: var(--surface-color-2);
  border: 1px solid var(--line-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.docs-register-body {
  flex: 1;
  min-width: 0;
}

.docs-register-title {
  margin: 0 0 4px;
  font: 600 16px/1.4 'Nunito';
  color: var(--color);
  border: none;
  padding: 0;
}

.docs-register-text {
  margin: 0;
  font: 400 14px/1.55 'Nunito';
  color: color-mix(in srgb, var(--color) 65%, transparent);
  max-width: 520px;
}

.docs-register-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color);
  color: var(--surface-color);
  font: 600 13px/1 'Nunito';
  text-decoration: none;
  transition: background 0.15s ease;

  & svg {
    transition: transform 0.2s ease;
  }

  &:hover {
    background: var(--accent-color);

    & svg {
      transform: translate(2px, -2px);
    }
  }
}

@media (max-width: 640px) {
  .docs-register {
    flex-direction: column;
    align-items: flex-start;
  }
}

.docs-callout {
  margin: 40px 0;
  padding: 20px 24px;
  border-left: 3px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
  background: color-mix(in srgb, var(--accent-color) 5%, var(--surface-color));
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color) 75%, transparent);

  & > strong {
    display: block;
    font: 600 11px 'Nunito';
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 8px;
  }

  & p {
    margin: 0;
  }

  &.docs-callout--subtle {
    margin: 4px 0 16px;
    border-left-color: var(--line-color);
    background: var(--surface-color);
    color: color-mix(in srgb, var(--color) 55%, transparent);

    & > strong {
      color: color-mix(in srgb, var(--color) 50%, transparent);
    }
  }

  /* Destructive / dangerous-operations warning — red accent. */
  &.docs-callout--warning {
    margin: 16px 0 0;
    border-left-color: #dc2626;
    background: color-mix(in srgb, #dc2626 5%, var(--surface-color));
    color: color-mix(in srgb, var(--color) 80%, transparent);

    & > strong {
      color: #b91c1c;
      display: inline-flex;
      align-items: center;
      gap: 6px;

      &::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        background: #dc2626;
        mask: url("data:image/svg+xml;utf8,<svg 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'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
      }
    }
  }
}

/* ─── Call-to-Action card (e.g. GitHub link) ──────────────────── */

.docs-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin: 0 0 32px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 25%, var(--line-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color) 3%, var(--surface-color));
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;

  &:hover {
    background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-color));
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--line-color));
  }

  & .docs-cta-icon {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--color) 80%, transparent);
  }

  & .docs-cta-body {
    flex: 1;
    min-width: 0;
  }

  & .docs-cta-title {
    display: block;
    font: 600 11px/1 'Nunito';
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 6px;
  }

  & .docs-cta-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color) 75%, transparent);

    & code {
      font: 12.5px 'IBM Plex Mono';
    }
  }

  & .docs-cta-action {
    flex-shrink: 0;
    padding: 9px 16px;
    background: var(--color);
    color: var(--surface-color);
    border-radius: 8px;
    font: 600 12px/1 'Nunito';
    white-space: nowrap;
    transition: background 0.15s ease;
  }

  &:hover .docs-cta-action {
    background: color-mix(in srgb, var(--color) 80%, var(--accent-color));
  }
}

/* ─── Anchor link beside endpoint headings ─────────────────────── */

.docs-anchor-link {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  color: color-mix(in srgb, var(--color) 30%, transparent);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.docs-section > h3:hover > .docs-anchor-link,
.docs-anchor-link:hover,
.docs-anchor-link:focus-visible {
  opacity: 1;
  color: var(--accent-color);
}

/* ─── Changelog list ──────────────────────────────────────────── */

.docs-changelog-release {
  margin-top: 32px;

  & + .docs-changelog-release {
    margin-top: 48px;
  }
}

.docs-changelog-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 14px 'Nunito';
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color) 45%, transparent);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-color);
}

.docs-changelog-version {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-color-2);
  color: color-mix(in srgb, var(--color) 65%, transparent);
  font: 600 11px/1.4 'IBM Plex Mono';
  letter-spacing: 0;
  text-transform: none;
}

.docs-changelog-stage {
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font: 600 10px/1.4 'Nunito';
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.docs-changelog-group {
  margin: 18px 0 2px;
  font: 600 11px/1.4 'Nunito';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color) 40%, transparent);
}

.docs-entity-icon {
  white-space: nowrap;
}

.docs-entity-icon::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: middle;
  background-color: currentColor;
  mask: var(--entity-icon) no-repeat center / contain;
}

.docs-entity-icon--book { --entity-icon: url('../../icons/types/book.svg'); }
.docs-entity-icon--instagramreel { --entity-icon: url('../../icons/types/instagram.svg'); }
.docs-entity-icon--movie { --entity-icon: url('../../icons/types/movie.svg'); }
.docs-entity-icon--product { --entity-icon: url('../../icons/types/product.svg'); }
.docs-entity-icon--tvepisode { --entity-icon: url('../../icons/types/tv-series.svg'); }
.docs-entity-icon--videogame { --entity-icon: url('../../icons/types/game.svg'); }
.docs-entity-icon--xpost { --entity-icon: url('../../icons/types/tweet.svg'); }

.docs-changelog-entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.55;

  & code {
    font: 12.5px 'IBM Plex Mono';
  }
}

.docs-changelog-badge {
  flex-shrink: 0;
  display: inline-block;
  min-width: 60px;
  padding: 3px 8px;
  border-radius: 4px;
  font: 600 10px/1.4 'Nunito';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;

  &.docs-changelog-badge--breaking {
    background: #fee2e2;
    color: #b91c1c;
  }

  &.docs-changelog-badge--new {
    background: #dcfce7;
    color: #15803d;
  }

  &.docs-changelog-badge--fixed {
    background: #dbeafe;
    color: #1d4ed8;
  }

  &.docs-changelog-badge--docs {
    background: var(--surface-color-2);
    color: color-mix(in srgb, var(--color) 55%, transparent);
  }
}

.docs-changelog-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.docs-changelog-title {
  font-weight: 600;
  color: var(--color);

  & > .docs-anchor-link {
    margin-left: 6px;
  }

  &:hover > .docs-anchor-link {
    opacity: 1;
  }
}

.docs-changelog-endpoint-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  align-self: flex-start;
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--color) 80%, transparent);
}

.docs-changelog-desc {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color) 65%, transparent);
}

/* ─── Mastermind Badge ─────────────────────────────────────────── */

.docs-mastermind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 10px;
  font: 600 10px/1 'Nunito';
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  color: #fff;
  box-shadow: 0 1px 4px color-mix(in srgb, #a855f7 30%, transparent);

  &::before {
    content: '\2728';
    font-size: 11px;
  }
}

/* ─── Status Codes Table ──────────────────────────────────────── */

.docs-status-badge {
  display: inline-block;
  font: 600 12px 'IBM Plex Mono';
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-color-2);

  &.docs-status--ok      { background: #dcfce7; color: #15803d; }
  &.docs-status--client  { background: #fef9c3; color: #854d0e; }
  &.docs-status--server  { background: #fee2e2; color: #b91c1c; }
}

/* Body format of a response, shown after the status badge. Outlined rather
   than filled so the status code still reads first, and inherits the header
   color so it works on both the light and dark code-block headers. */
.docs-format-badge {
  display: inline-block;
  font: 600 11px 'IBM Plex Mono';
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .docs-layout {
    flex-direction: column;
  }

  .docs-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line-color);
    padding: 20px;
  }

  .docs-sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .docs-nav-group {
    margin-top: 8px;
    width: 100%;

    & .docs-nav-group-label {
      display: none;
    }
  }

  .docs-main {
    margin-left: 0;
    padding: 32px 20px;
  }
}