/* 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-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; }
}

/* ─── 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;
  }
}