/* ============================================================
   Docs section - tree sidebar + detail pane (single page)
   Derives its surface palette from the site tokens, matching guides.css.
   ============================================================ */
:root {
    --card: #ffffff;
    --bg: var(--cream);
    --surface: var(--card);
    --text: var(--ink);
    --text-muted: var(--muted);
    --border: var(--line);
    --data-blue: #1e4f9d;
    --code-bg: #0d1b34;
    --code-text: #cfe0ff;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --shot-frame: #1c1c1e;
    --docs-nav-w: 300px;
}

:root[data-theme="dark"] {
    --card: #10192c;
    --bg: #0a1220;
    --surface: #10192c;
    --text: #eaf1ff;
    --text-muted: #93a3c8;
    --border: #1f2c47;
    --data-blue: #8fbaff;
    --code-bg: #050b16;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --card: #10192c;
        --bg: #0a1220;
        --surface: #10192c;
        --text: #eaf1ff;
        --text-muted: #93a3c8;
        --border: #1f2c47;
        --data-blue: #8fbaff;
        --code-bg: #050b16;
    }
}

.docs-page {
    background: var(--bg);
    color: var(--text);
    min-height: 70vh;
}

.docs-shell {
    /* Span the full viewport width rather than the site's centered column. */
    max-width: none;
    display: grid;
    grid-template-columns: var(--docs-nav-w) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 32px 40px 80px;
}

/* ---------- Sidebar ---------------------------------------- */
.docs-sidebar {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.docs-sidebar-head { margin-bottom: 14px; }
.docs-sidebar-title {
    margin: 6px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.docs-tree-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    /* indent by depth so nesting reads clearly */
    padding-left: calc(var(--depth, 0) * 15px);
    border-radius: 8px;
    transition: background .15s var(--ease-out);
}
.doc-tree-row:hover { background: color-mix(in srgb, var(--data-blue) 10%, transparent); }

.doc-tree-toggle {
    flex: 0 0 auto;
    width: 20px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.doc-tree-toggle.spacer { cursor: default; }
.doc-tree-toggle svg { transition: transform .18s var(--ease-out); }
.doc-tree-item.collapsed > .doc-tree-row .doc-tree-toggle svg { transform: rotate(0deg); }
.doc-tree-item:not(.collapsed) > .doc-tree-row .doc-tree-toggle svg { transform: rotate(90deg); }

.doc-tree-link {
    flex: 1 1 auto;
    display: block;
    padding: 5px 8px;
    color: var(--text);
    text-decoration: none;
    font-size: .92rem;
    line-height: 1.3;
    border-radius: 6px;
}
.doc-tree-item.has-children > .doc-tree-row > .doc-tree-link { font-weight: 600; }

.doc-tree-link.active {
    background: var(--data-blue);
    color: #fff;
}
:root[data-theme="dark"] .doc-tree-link.active { color: #06101f; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .doc-tree-link.active { color: #06101f; }
}

/* collapsed subtree */
.doc-tree-item.collapsed > ul { display: none; }

/* ---------- Content pane ----------------------------------- */
.docs-content { min-width: 0; }
.docs-content:focus { outline: none; }

.doc-article { max-width: 820px; }

.doc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-family: "JetBrains Mono", monospace;
    margin-bottom: 14px;
    color: var(--text-muted);
}
.doc-crumb { color: var(--text-muted); text-decoration: none; }
.doc-crumb:hover { color: var(--data-blue); }
.doc-crumb.current { color: var(--text); }
.doc-crumb-sep { opacity: .5; }

.doc-h1 {
    font-family: "Fredoka", system-ui, sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--text);
}
.doc-h2 {
    font-size: 1.3rem;
    margin: 34px 0 12px;
    color: var(--text);
}
.doc-article h3 { font-size: 1.02rem; margin: 0 0 6px; color: var(--text); }
.doc-h3 { margin: 24px 0 10px; }

.doc-lead {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 24px;
}
.doc-article p { line-height: 1.7; margin: 0 0 16px; color: var(--text); }
.doc-article a { color: var(--data-blue); }

.doc-article code {
    font-family: "JetBrains Mono", monospace;
    font-size: .86em;
    background: color-mix(in srgb, var(--data-blue) 12%, transparent);
    padding: 1px 6px;
    border-radius: 5px;
}
.doc-article kbd {
    font-family: "JetBrains Mono", monospace;
    font-size: .82em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 1px 7px;
}

.doc-list, .doc-steps { margin: 0 0 18px; padding-left: 22px; }
.doc-list li, .doc-steps li { line-height: 1.65; margin-bottom: 8px; }
.doc-cols { columns: 2; column-gap: 32px; }
.doc-cols .doc-list { margin-bottom: 0; }
.doc-cols .doc-list li { break-inside: avoid; }
@media (max-width: 620px) { .doc-cols { columns: 1; } }
.doc-steps { counter-reset: step; list-style: none; padding-left: 0; }
.doc-steps li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 14px;
}
.doc-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: var(--data-blue);
    color: #fff;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}
:root[data-theme="dark"] .doc-steps li::before { color: #06101f; }

.doc-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}
.doc-feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}
.doc-feature-card p { margin: 0; font-size: .92rem; color: var(--text-muted); }
.doc-feature-card a { text-decoration: none; }

.doc-callout {
    background: color-mix(in srgb, var(--data-blue) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--data-blue) 24%, transparent);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 20px;
    line-height: 1.6;
}
.doc-note { font-size: .94rem; color: var(--text-muted); }
.doc-related {
    font-size: .9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 28px;
}

/* ---------- Code block ------------------------------------- */
.doc-article pre.doc-code {
    background: var(--code-bg);
    color: var(--code-text);
    font-family: "JetBrains Mono", monospace;
    font-size: .82rem;
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 0 0 18px;
    border: 1px solid var(--border);
}
.doc-article pre.doc-code .k { color: #7fd1ff; }
.doc-article pre.doc-code .s { color: #ff9ec4; }
.doc-article pre.doc-code .c { color: #6b7a9e; }
.doc-article pre.doc-code .n { color: #ffd479; }
.doc-article pre.doc-code .t { color: #a5f3d0; }
.doc-article pre.doc-code code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ---------- Reference table -------------------------------- */
.doc-table-wrap { overflow-x: auto; margin: 0 0 22px; }
table.doc-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .9rem;
}
table.doc-table th,
table.doc-table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.5;
}
table.doc-table th {
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
table.doc-table td { color: var(--text-muted); }
table.doc-table td:first-child { color: var(--text); }
table.doc-table code { white-space: nowrap; }

/* ---------- Per-format export block ------------------------ */
.doc-export-fmt { margin: 26px 0 0; }
.doc-export-fmt h3 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1.05rem;
    margin: 0 0 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.doc-export-fmt:first-of-type h3 { border-top: 0; padding-top: 0; }
.doc-ext {
    font-family: "JetBrains Mono", monospace;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--data-blue) 10%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
}
.doc-export-fmt > p { margin: 0 0 12px; font-size: .95rem; }

/* ---------- Screenshot frame + placeholder ----------------- */
.doc-shot { margin: 0 0 26px; }
.doc-shot-frame {
    border-radius: 14px;
    overflow: hidden;
    background: var(--shot-frame);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.doc-shot-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: var(--shot-frame);
}
.doc-shot-titlebar .dot { width: 11px; height: 11px; border-radius: 999px; }
.doc-shot-titlebar .dot.r { background: #ff5f57; }
.doc-shot-titlebar .dot.y { background: #febc2e; }
.doc-shot-titlebar .dot.g { background: #28c840; }
.doc-shot-title { margin-left: 8px; color: #9aa3b2; font-size: .78rem; font-family: "JetBrains Mono", monospace; }
.doc-shot img { display: block; width: 100%; height: auto; }
.doc-shot-caption { text-align: center; font-size: .86rem; color: var(--text-muted); margin: 12px 0 0; }

.doc-shot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 260px;
    padding: 40px 20px;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
        #14203a;
    color: #7f8db0;
}
.doc-shot-placeholder-label {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #9fb0d8;
}
.doc-shot-placeholder-id {
    font-family: "JetBrains Mono", monospace;
    font-size: .78rem;
    background: rgba(0,0,0,.3);
    color: #cfe0ff;
    padding: 3px 9px;
    border-radius: 6px;
}

/* ---------- Stub (documentation in progress) --------------- */
.doc-stub {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 24px 26px;
}
.doc-stub-badge {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--data-blue);
    background: color-mix(in srgb, var(--data-blue) 12%, transparent);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}

/* ---------- Status badges (mirror the /features legend) ---- */
.doc-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 12px;
}
.doc-title-row .doc-h1 { margin: 0; }

.doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "JetBrains Mono", monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.doc-badge.ok      { color: #1f8a53; background: color-mix(in srgb, #23a866 15%, transparent); border-color: color-mix(in srgb, #23a866 32%, transparent); }
.doc-badge.wip     { color: #b26a00; background: color-mix(in srgb, #f0a020 16%, transparent); border-color: color-mix(in srgb, #f0a020 34%, transparent); }
.doc-badge.planned { color: #5566a8; background: color-mix(in srgb, #6d7fc4 14%, transparent); border-color: color-mix(in srgb, #6d7fc4 30%, transparent); }
.doc-badge.demo    { color: #7a4bc0; background: color-mix(in srgb, #9a6ae0 15%, transparent); border-color: color-mix(in srgb, #9a6ae0 32%, transparent); }

:root[data-theme="dark"] .doc-badge.ok      { color: #6fe0a5; }
:root[data-theme="dark"] .doc-badge.wip     { color: #f5c06a; }
:root[data-theme="dark"] .doc-badge.planned { color: #a9b6ea; }
:root[data-theme="dark"] .doc-badge.demo    { color: #cbaef5; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .doc-badge.ok      { color: #6fe0a5; }
    :root:not([data-theme="light"]) .doc-badge.wip     { color: #f5c06a; }
    :root:not([data-theme="light"]) .doc-badge.planned { color: #a9b6ea; }
    :root:not([data-theme="light"]) .doc-badge.demo    { color: #cbaef5; }
}

/* Small status dot beside a tree item that isn't fully shipped. */
.doc-tree-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 999px;
}
.doc-tree-dot.wip     { background: #f0a020; }
.doc-tree-dot.planned { background: #6d7fc4; }
.doc-tree-dot.demo    { background: #9a6ae0; }

/* Legend chip row, e.g. on the Why / welcome panes. */
.doc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 22px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: .85rem;
    color: var(--text-muted);
}
.doc-legend span.item { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Live in-browser sample (lazy iframe) ----------- */
.doc-live-demo {
    margin: 0 0 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--shot-frame);
    box-shadow: var(--shadow-lg);
}
.doc-live-demo-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: var(--shot-frame);
}
.doc-live-demo-bar .dot { width: 11px; height: 11px; border-radius: 999px; }
.doc-live-demo-bar .dot.r { background: #ff5f57; }
.doc-live-demo-bar .dot.y { background: #febc2e; }
.doc-live-demo-bar .dot.g { background: #28c840; }
.doc-live-demo-bar .doc-live-demo-title {
    margin-left: 8px;
    color: #9aa3b2;
    font-size: .78rem;
    font-family: "JetBrains Mono", monospace;
}
.doc-live-demo-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 360px;
    background: #14181a;
}
.doc-live-demo-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.doc-live-demo-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #9aa4a8;
    font-size: .9rem;
    text-align: center;
    padding: 24px;
}
.doc-live-demo-spinner {
    width: 34px; height: 34px;
    border: 3px solid rgba(255,255,255,.12);
    border-left-color: #4db6ac;
    border-radius: 50%;
    animation: doc-demo-spin 1s linear infinite;
}
@keyframes doc-demo-spin { to { transform: rotate(360deg); } }
.doc-live-demo-note {
    font-size: .85rem;
    color: var(--text-muted);
    margin: -12px 0 24px;
}

/* On pages built around a live demo (the datatable sample and the full
   browser preview), let the demo claim every bit of width and height the
   surrounding prose doesn't use: drop the 820px article cap, run the article
   as a viewport-tall flex column, and let the stage grow to fill the gap
   between the intro text and the note below it. */
/* Guard against `:has()` raising specificity above the UA `[hidden]` rule -
   without this, these demo articles would stay visible (and appear to load
   their preview) on every other docs page. Keep it first so the display rule
   below only ever wins on the article that's actually shown. */
.doc-article[hidden] { display: none; }
.doc-article:has(.doc-live-demo):not([hidden]) {
    max-width: none;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 130px);
}
/* Keep the prose itself readable even though the article is now full-width. */
.doc-article:has(.doc-live-demo) > .doc-crumbs,
.doc-article:has(.doc-live-demo) > .doc-title-row,
.doc-article:has(.doc-live-demo) > .doc-lead,
.doc-article:has(.doc-live-demo) > p,
.doc-article:has(.doc-live-demo) > .doc-callout {
    max-width: 820px;
}
.doc-article:has(.doc-live-demo) .doc-live-demo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.doc-article:has(.doc-live-demo) .doc-live-demo-stage {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
}

/* ---------- Mobile sidebar toggle -------------------------- */
.docs-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}

@media (max-width: 860px) {
    .docs-shell { grid-template-columns: 1fr; gap: 0; }
    .docs-sidebar-toggle { display: inline-flex; }
    .docs-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 24px;
    }
    .docs-sidebar[hidden] { display: none; }
    .doc-article { max-width: none; }
}