/* Studio Docs (/create/docs/) */
.docs {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: 220px minmax(0, 1fr);
}

.docs-nav {
    display: grid;
    gap: 2px;
    padding: 14px;
    position: sticky;
    top: 16px;
}
.docs-nav-title { color: var(--muted); font: bold 12px/1 Arial, sans-serif; letter-spacing: 0.06em; margin: 2px 8px 8px; text-transform: uppercase; }
.docs-nav a {
    border-radius: 8px;
    color: var(--text);
    font: 14px/1.3 Arial, sans-serif;
    padding: 7px 10px;
    text-decoration: none;
}
.docs-nav a:hover { background: var(--wash); }
.docs-nav a.active { background: var(--wash); color: var(--brand); font-weight: bold; }

.docs-body { display: grid; gap: 18px; min-width: 0; }
.docs-section { min-width: 0; padding: 22px 26px; scroll-margin-top: 16px; }
.docs-section h2 { color: var(--ink); font: bold 24px/1.2 var(--display); margin: 0 0 12px; }
.docs-section h3 { color: var(--ink); font: bold 17px/1.3 Arial, sans-serif; margin: 22px 0 8px; }
.docs-section p, .docs-section li, .docs-section dd { color: var(--text); font: 15px/1.6 Arial, sans-serif; }
.docs-section p { margin: 0 0 10px; }
.docs-section ul, .docs-section ol { margin: 0 0 10px; padding-left: 22px; }
.docs-section li { margin: 4px 0; }
.docs-section a { color: var(--brand); font-weight: bold; }

.docs-section code {
    background: #eef3f9;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: #1f3b5c;
    font: 13px/1.4 Consolas, "Courier New", monospace;
    padding: 1px 5px;
}
.docs-section pre {
    background: #1e2a38;
    border-radius: 10px;
    margin: 0 0 14px;
    overflow-x: auto;
    padding: 14px 16px;
}
.docs-section pre code { background: none; border: 0; color: #e8eef6; font-size: 13.5px; line-height: 1.55; padding: 0; white-space: pre; }

kbd {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    color: var(--ink);
    display: inline-block;
    font: bold 12px/1 Arial, sans-serif;
    min-width: 12px;
    padding: 3px 6px;
    text-align: center;
}

.docs-table { border-collapse: collapse; margin: 6px 0 14px; width: 100%; }
.docs-table th, .docs-table td { border-bottom: 1px solid var(--line); font: 14px/1.5 Arial, sans-serif; padding: 9px 10px; text-align: left; vertical-align: top; }
.docs-table th { background: var(--wash); color: var(--ink); font-weight: bold; }
.docs-table td { color: var(--text); }
.docs-table td:first-child { white-space: nowrap; }

.docs-defs { margin: 0 0 10px; }
.docs-defs dt { color: var(--ink); font: bold 15px/1.4 Arial, sans-serif; margin-top: 12px; }
.docs-defs dd { margin: 4px 0 0; }

.docs-tip {
    background: #fff8dc;
    border: 1px solid #f0dd94;
    border-radius: 10px;
    color: #5c4a0b;
    font: 14px/1.55 Arial, sans-serif;
    margin: 12px 0 4px;
    padding: 10px 14px;
}

.docs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.docs-chips span { background: var(--wash); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: bold 13px/1 Arial, sans-serif; padding: 6px 10px; }
.docs-end { margin-top: 14px; }

.create-docs-link { align-self: center; white-space: nowrap; }

@media (max-width: 860px) {
    .docs { grid-template-columns: minmax(0, 1fr); }
    .docs-nav { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); position: static; }
    .docs-nav-title { grid-column: 1 / -1; }
    .docs-section { padding: 18px 16px; }
    .docs-table td:first-child { white-space: normal; }
}