/* The public API reference (/api/docs) in the API dashboard's look.

   The page keeps its own structure: one long reference, its own chapter sidebar,
   the two boxes under the intro. theme.css and views.css
   (static/api-portal-20261009-app-theme/) bring the dashboard's skin: tokens,
   fonts, the sidebar look and the .docs-article typography of its Documentation
   view. This file fits the long page into that skin. */

/* The reference column: left-aligned under the sidebar as before, at a reading width.
   It is not a card, so views.css's article padding goes. */
.docs-main { max-width: calc(920px + 2 * var(--gutter)); margin: 0; padding-top: 40px; padding-bottom: 80px; }
.docs-main .docs-article { padding: 0; }

/* ───────── Sidebar: the reference's chapters in the dashboard's sidebar look ───────── */
/* Text only, as before, and denser than the dashboard's eleven entries: it carries ninety. */
.docs-sidebar .sidebar-nav { gap: 1px; padding-bottom: 8px; }
.docs-sidebar .nav-sect--in { margin: 16px 14px 4px; }
.docs-sidebar .nav-sect--in:first-child { margin-top: 0; }
.docs-sidebar .nav-item { padding: 7px 14px; font-size: 13.5px; }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid var(--border-subtle); }
.nav-sub a {
    display: block;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease, background 0.15s ease;
}
.nav-sub a:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); }
.nav-sub a.active { color: var(--purple); background: var(--purple-light); font-weight: 550; }

/* ───────── Content ───────── */
/* Chapters are separated by the page's <hr>s; the capability chapters never had one. */
.docs-article h2.category { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }

/* The two boxes under the intro: same place and words, the dashboard's card and buttons. */
.docs-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; margin-top: 16px; padding: 22px 24px; }
#signup-cta { margin-top: 26px; }
.docs-cta-text { flex: 1; min-width: 260px; }
.docs-cta-title { margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.docs-cta-desc { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.docs-cta-desc strong { color: var(--text); }
/* The two buttons carry the page: full-size pills with bold labels. Sign-up is white on
   a violet a shade deeper than the theme's accent (white on #8b5cf6 is 4.2:1, on
   #7c3aed 5.7:1). Sign-in keeps the green this page always had, with dark ink. */
.docs-cta .docs-cta-btn { gap: 8px; padding: 13px 26px; border: 0; border-radius: 980px; font-size: 14px; font-weight: 800; color: #fff; text-decoration: none; }
.docs-cta .docs-cta-btn svg { width: 17px; height: 17px; }
.docs-cta .btn.primary.docs-cta-btn { background: #7c3aed; box-shadow: 0 10px 30px -8px rgba(124, 58, 237, 0.7); }
.docs-cta .btn.primary.docs-cta-btn:hover { background: #6d28d9; }
.docs-cta .docs-cta-btn--signin { color: var(--on-accent); background: #22c55e; box-shadow: 0 10px 30px -8px rgba(34, 197, 94, 0.5); }
.docs-cta .docs-cta-btn--signin:hover { background: #22c55e; filter: brightness(1.06); transform: translateY(-1px); }

/* Tables keep views.css's frame, but on a wrapper: rows run the full width and a
   wide table scrolls inside its frame. */
.docs-article .table-scroll {
    max-width: 100%;
    margin: 16px 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.docs-article .table-scroll > table { display: table; width: 100%; margin: 0; border: 0; border-radius: 0; }
/* views.css lets inline code break anywhere, and in an auto-sized table that lets the
   browser squeeze a column until names split mid-word (aspect_rat|io). In here code
   still wraps at spaces and hyphens (some cells quote whole error messages) but never
   inside a word. */
.docs-article .table-scroll td code { overflow-wrap: normal; }
/* Changelog dates read as one token (2026-05-|09 otherwise). */
#doc-changelog ~ .table-scroll td:first-child { white-space: nowrap; }

/* ───────── Sign-up modal (the dashboard's dialog look) ───────── */
.docs-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.docs-modal-card {
    width: min(480px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px;
    color: var(--text);
    background: var(--surface-flat);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}
.docs-modal .modal-head { margin-bottom: 10px; }
.docs-modal .modal-text { margin-bottom: 20px; }
.docs-alert { display: none; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.docs-alert--referral { align-items: center; gap: 10px; margin-bottom: 18px; color: var(--accent-strong); background: var(--accent-tint); border: 1px solid var(--accent-line); }
.docs-alert--bad { color: #ffb3b3; background: var(--danger-tint); border: 1px solid var(--danger-line); }
.docs-alert--good { color: var(--green); background: var(--accent-green); border: 1px solid var(--accent-green-border); }

/* ───────── Narrow screens: the sidebar becomes a drawer (theme.css .open) ───────── */
.docs-menu-toggle { display: none; }
@media (max-width: 860px) {
    .docs-menu-toggle { display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 95; background: var(--surface-flat); }
    .docs-main { padding-top: 64px; }
    .docs-modal { padding: 16px; }
    .docs-modal-card { padding: 20px 18px; }
}
/* Phones: the action wraps under the text and takes the full width. */
@media (max-width: 640px) {
    .docs-cta { padding: 20px; }
    .docs-cta .docs-cta-btn { width: 100%; }
}