/* ============================================================
   Subalytics — public API docs (/docs/, site/api_documentation.html).
   Sticky section menu on the left, endpoint reference on the right.
   Uses the palette variables from styles.css. Loads after header.html.
   ============================================================ */

.apidocs { background: var(--grey); padding: 48px 0 80px; }
.apidocs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }

/* ---- left menu ---- */
.apidocs-nav { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 8px; }
.apidocs-nav-group { margin-bottom: 24px; }
.apidocs-nav-title { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--dark_blue); margin: 0 0 8px; }
.apidocs-nav ul { list-style: none; margin: 0; padding: 0; }
.apidocs-nav li a { display: block; font-size: 14px; color: #555; padding: 5px 0 5px 12px; border-left: 2px solid transparent; text-decoration: none; }
.apidocs-nav li a:hover { color: var(--blue); }
.apidocs-nav li a.active { color: var(--blue); border-left-color: var(--blue); font-weight: 700; }
.apidocs-nav code { font-size: 12px; color: inherit; background: none; padding: 0; }

/* ---- content ---- */
.apidocs-content { min-width: 0; }
.apidocs-section { background: var(--white); border: 1px solid #e3e5ee; border-radius: 10px; padding: 32px 36px; margin-bottom: 28px; scroll-margin-top: 24px; }
.apidocs-section h2 { font-family: "Playfair Display", serif; font-size: 1.75rem !important; font-weight: 700; color: var(--dark_blue); margin: 0 0 16px; }
.apidocs-section h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark_blue); margin: 28px 0 12px; }
.apidocs-section p, .apidocs-section li { font-size: 15px; line-height: 1.6; color: var(--black_font); }
.apidocs-section ul { padding-left: 20px; }
.apidocs-section p a { color: var(--blue); text-decoration: underline; }
.apidocs-group-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--blue); margin: 40px 0 12px; }
.apidocs-group-label:first-child { margin-top: 0; }

.apidocs-endpoint { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.apidocs-method { font-size: 12px; font-weight: 700; color: var(--white); background: var(--blue); border-radius: 4px; padding: 3px 8px; }
.apidocs-path { font-size: 15px; color: var(--dark_blue); background: var(--grey); border-radius: 4px; padding: 3px 8px; word-break: break-all; }
.apidocs-tag { font-size: 12px; color: #666; border: 1px solid #d6d9e4; border-radius: 12px; padding: 2px 10px; }

.apidocs-section code { color: var(--blue); background: var(--grey); border-radius: 3px; padding: 1px 5px; font-size: 13.5px; word-break: break-word; }
.apidocs-section pre { background: var(--dark_blue); color: #e8ebf5; border-radius: 8px; padding: 18px 20px; font-size: 13px; line-height: 1.55; overflow-x: auto; margin: 0 0 16px; }
.apidocs-section pre code { color: inherit; background: none; padding: 0; font-size: inherit; word-break: normal; }

.apidocs-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.apidocs-table th { background: var(--grey); color: var(--dark_blue); font-weight: 700; text-align: left; padding: 10px 12px; border-bottom: 1px solid #e3e5ee; }
.apidocs-table td { padding: 10px 12px; border-bottom: 1px solid #eef0f5; vertical-align: top; color: var(--black_font); }
.apidocs-table td:first-child { white-space: nowrap; }
.apidocs-table td:first-child code { font-weight: 700; }
.apidocs-table-wrap { overflow-x: auto; }

@media (max-width: 860px) {
  .apidocs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .apidocs-nav { position: static; max-height: none; background: var(--white); border: 1px solid #e3e5ee; border-radius: 10px; padding: 20px; }
  .apidocs-section { padding: 24px 20px; }
  .apidocs-table td:first-child { white-space: normal; }
}