/* Developer documentation. Reuses .doc/.doc-inner/.doc-table from styles.css; this adds the
   documentation-only layout: sticky sidebar, language tabs, endpoint badges. */

.dx-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); max-width: 1180px; margin: 0 auto; }
@media (max-width: 900px) { .dx-layout { grid-template-columns: 1fr; } }

.dx-side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
/* On a phone the 18-link sidebar used to stack above the article, so the page opened on a wall of
   navigation and the actual documentation started below the fold. Below 900px it collapses into a
   native disclosure: closed by default, one tap to open, and the content leads. Desktop is
   unchanged. */
.dx-side-toggle { display: none; }
@media (max-width: 900px) {
  .dx-side {
    position: static; max-height: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 0; margin-bottom: 22px;
  }
  .dx-side-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
    list-style: none; padding: 12px 4px; font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
  }
  .dx-side-toggle::-webkit-details-marker { display: none; }
  .dx-side-toggle::after { content: '▾'; font-size: 13px; transition: transform .15s ease; }
  .dx-side[open] .dx-side-toggle::after { transform: rotate(180deg); }
  .dx-side:not([open]) > .dx-side-nav { display: none; }
  .dx-side[open] { padding-bottom: 18px; }
}

/* Above the breakpoint the disclosure is always expanded. A closed <details> measures zero height
   even when its children are forced visible, which collapsed the grid column and left a blank
   gutter, so the desktop sidebar drops the details semantics entirely. */
@media (min-width: 901px) {
  .dx-side { display: block; height: auto; }
  .dx-side > .dx-side-nav { display: block !important; }
  .dx-side::details-content { content-visibility: visible; }
}
.dx-side h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 8px; }
.dx-side h2:first-child, .dx-side-nav h2:first-child { margin-top: 0; }
.dx-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dx-side a { display: block; padding: 7px 10px; border-radius: 9px; color: var(--ink-dim); text-decoration: none; font-size: 14.5px; }
.dx-side a:hover, .dx-side a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }

.dx-main { min-width: 0; }
.dx-main h1 { font-weight: 700; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.04em; line-height: 1.02; margin: 0 0 10px; }
.dx-main .doc-updated { color: var(--ink-faint); font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; margin-bottom: 30px; }
.dx-main h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(25px, 3vw, 32px); letter-spacing: -.01em; margin: 44px 0 12px; scroll-margin-top: 90px; }
.dx-main h3 { font-size: 17px; margin: 26px 0 8px; letter-spacing: -.01em; }
.dx-main p, .dx-main li { color: var(--ink-dim); font-size: 16.5px; line-height: 1.65; }
.dx-main p { margin: 0 0 14px; }
.dx-main ul, .dx-main ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.dx-main b, .dx-main strong { color: var(--ink); }
.dx-main a { color: #c4b5fd; text-underline-offset: 3px; }
.dx-main a:hover { color: #fff; }
.dx-main code { font-family: var(--mono); font-size: .86em; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: #f5f2ff; word-break: break-word; }
.dx-main pre { overflow-x: auto; margin: 8px 0 24px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); font-size: 13px; line-height: 1.55; }
.dx-main pre code { padding: 0; background: none; word-break: normal; white-space: pre; font-size: inherit; }

/* Endpoint cards: method + path, then parameters and responses. */
.dx-ep { border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; background: rgba(255, 255, 255, .03); scroll-margin-top: 90px; }
.dx-ep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.dx-m { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 7px; }
.dx-m--get { color: #6ee7b7; background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .4); }
.dx-m--post { color: #93c5fd; background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .4); }
.dx-m--delete { color: #fca5a5; background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .4); }
.dx-ep-path { font-family: var(--mono); font-size: 13.5px; color: #f5f2ff; word-break: break-all; }
.dx-ep p { margin: 0 0 10px; font-size: 15px; }
.dx-scope { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px 9px; }

/* Tables carry a wide min-width so columns stay readable, so the wrapper scrolls rather than the
   page: without it a phone clips the right-hand columns with no way to reach them. */
.dx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 10px; border-radius: 10px; }
.dx-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; margin: 0; }
.dx-table th, .dx-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: var(--ink-dim); vertical-align: top; }
.dx-table th { color: var(--ink); font-weight: 700; }

.dx-copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.dx-copy button { font: inherit; font-size: 13px; cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; }
.dx-copy button:hover { background: rgba(255, 255, 255, .14); }