/* voice/docs/docs.css - documentation-specific styles.
   Loads on top of voice/styles.css (which provides the palette,
   brand header, buttons, footer, and lightbox). This file only
   adds the sidebar layout, breadcrumb, callouts, figure
   placeholders, table of contents card, control-reference table,
   and the keyboard / inline-code chrome.

   Every selector is namespaced under .docs-* (or a top-level
   page layout class) so nothing here can bleed into the marketing
   pages if both stylesheets are ever loaded together.
*/

/* ===== Docs layout: sidebar + content ===== */

.docs-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 40px;
}

.docs-sidebar {
    position: sticky;
    top: 24px;
    background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px 22px;
    font-size: 0.95rem;
}

.docs-sidebar h4 {
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 14px;
}

.docs-sidebar h4:first-child { margin-top: 0; }

.docs-sidebar ul {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.docs-sidebar li { margin: 2px 0; }

.docs-sidebar a {
    display: block;
    color: var(--text-dim);
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.35;
    border-left: 2px solid transparent;
}

.docs-sidebar a:hover {
    background: var(--panel-3);
    color: var(--cyan);
}

.docs-sidebar a.active {
    background: var(--panel-3);
    color: var(--cyan);
    border-left-color: var(--violet);
    font-weight: 600;
}

.docs-content {
    min-width: 0;
}

/* ===== Breadcrumb ===== */

.docs-crumbs {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 14px;
    letter-spacing: 0.2px;
}

.docs-crumbs a { color: var(--muted); }
.docs-crumbs a:hover { color: var(--cyan); }

.docs-crumbs .sep {
    margin: 0 8px;
    color: var(--border-hi);
}

/* ===== Headings and prose ===== */

.docs-content h1 {
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    line-height: 1.15;
}

.docs-content .docs-lede {
    color: var(--text-dim);
    font-size: 1.08rem;
    margin-bottom: 28px;
    max-width: 720px;
}

.docs-content h2 {
    font-size: 1.45rem;
    color: var(--cyan);
    margin: 36px 0 12px;
    letter-spacing: -0.3px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 26px;
    margin-top: 38px;
}

.docs-content h2:first-of-type {
    border-top: none;
    margin-top: 8px;
    padding-top: 0;
}

.docs-content h3 {
    font-size: 1.12rem;
    color: var(--violet-soft);
    margin: 22px 0 8px;
}

.docs-content p {
    color: var(--text-dim);
    margin: 0 0 14px;
}

.docs-content p strong { color: var(--text); }

.docs-content ul,
.docs-content ol {
    color: var(--text-dim);
    margin: 0 0 16px;
    padding-left: 22px;
}

.docs-content ul li,
.docs-content ol li {
    margin: 4px 0;
}

.docs-content ul li::marker { color: var(--violet); }
.docs-content ol li::marker { color: var(--violet-soft); font-weight: 600; }

.docs-content a {
    color: var(--cyan);
    border-bottom: 1px dotted var(--border-hi);
}

.docs-content a:hover {
    color: var(--violet-soft);
    border-bottom-color: var(--violet-soft);
}

/* ===== Inline code, keyboard chips, file paths ===== */

.docs-content code,
.docs-content kbd,
.docs-content .path {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.92em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-soft);
    color: var(--cyan);
    border: 1px solid var(--border);
}

.docs-content kbd {
    color: var(--text);
    background: var(--panel-3);
    border-color: var(--border-hi);
    box-shadow: 0 1px 0 var(--border-hi);
    padding: 1px 7px;
    font-size: 0.85em;
}

.docs-content .path {
    color: var(--text-dim);
}

/* ===== Callouts (note / tip / warning) ===== */

.docs-callout {
    border-radius: 10px;
    padding: 16px 18px;
    margin: 18px 0;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-dim);
    position: relative;
    padding-left: 56px;
}

.docs-callout::before {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
    font-size: 0.95rem;
}

.docs-callout .docs-callout-title {
    display: block;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

.docs-callout.note    { border-color: var(--violet); }
.docs-callout.note::before {
    content: "i";
    background: rgba(124, 92, 245, 0.18);
    color: var(--violet-soft);
}
.docs-callout.note .docs-callout-title { color: var(--violet-soft); }

.docs-callout.tip     { border-color: var(--cyan); }
.docs-callout.tip::before {
    content: "+";
    background: rgba(94, 227, 255, 0.18);
    color: var(--cyan);
}
.docs-callout.tip .docs-callout-title { color: var(--cyan); }

.docs-callout.warn    { border-color: var(--amber); }
.docs-callout.warn::before {
    content: "!";
    background: rgba(251, 191, 36, 0.16);
    color: var(--amber);
}
.docs-callout.warn .docs-callout-title { color: var(--amber); }

.docs-callout p { color: var(--text-dim); margin: 0 0 8px; }
.docs-callout p:last-child { margin-bottom: 0; }

/* ===== Figures (image with caption + placeholder fallback) ===== */

.docs-figure {
    margin: 22px 0;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    border-radius: 12px;
    overflow: hidden;
}

.docs-figure .docs-figure-frame {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.docs-figure .docs-figure-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.docs-figure .docs-figure-frame.placeholder::after {
    content: attr(data-placeholder);
    color: var(--muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.95rem;
    text-align: center;
    padding: 16px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(124, 92, 245, 0.07) 0,
            rgba(124, 92, 245, 0.07) 12px,
            rgba(94, 227, 255, 0.05) 12px,
            rgba(94, 227, 255, 0.05) 24px
        );
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docs-figure .docs-figure-caption {
    padding: 12px 16px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.docs-figure .docs-figure-caption strong { color: var(--text-dim); }

.docs-figure.tall .docs-figure-frame { aspect-ratio: 1 / 1; }
.docs-figure.wide .docs-figure-frame { aspect-ratio: 21 / 9; }

/* ===== Reference table (used for control rosters and menu items) ===== */

.docs-ref {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel);
}

.docs-ref thead {
    background: var(--panel-2);
}

.docs-ref th,
.docs-ref td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    vertical-align: top;
    font-size: 0.95rem;
}

.docs-ref th {
    color: var(--cyan);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.docs-ref tbody tr:last-child td { border-bottom: none; }

.docs-ref td.name {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.docs-ref td.shortcut {
    color: var(--violet-soft);
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: nowrap;
}

/* ===== TOC card (the docs landing page) ===== */

.docs-toc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0 40px;
}

.docs-toc-card {
    display: block;
    background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.docs-toc-card:hover {
    transform: translateY(-2px);
    border-color: var(--violet-soft);
    box-shadow: 0 14px 30px rgba(124, 92, 245, 0.18);
    color: var(--text);
}

.docs-toc-card h3 {
    color: var(--cyan);
    margin: 0 0 8px;
    font-size: 1.1rem;
    letter-spacing: -0.2px;
}

.docs-toc-card p {
    color: var(--text-dim);
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.docs-toc-card .docs-toc-step {
    display: inline-block;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: var(--violet-soft);
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ===== "Next / Prev" footer pager between pages ===== */

.docs-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 40px 0 10px;
}

.docs-pager .pager-cell {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--text);
}

.docs-pager .pager-cell:hover {
    border-color: var(--cyan);
    color: var(--text);
}

.docs-pager .pager-cell.empty {
    background: transparent;
    border: 1px dashed var(--border);
    opacity: 0.4;
    pointer-events: none;
}

.docs-pager .pager-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.docs-pager .pager-title {
    color: var(--cyan);
    font-weight: 600;
    font-size: 1rem;
}

.docs-pager .pager-cell.next {
    text-align: right;
    align-items: flex-end;
}

/* ===== Definition / "what each thing does" block ===== */

.docs-defs {
    list-style: none;
    padding: 0;
    margin: 18px 0;
}

.docs-defs > li {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 10px 0;
}

.docs-defs > li .docs-def-name {
    display: block;
    color: var(--cyan);
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 1rem;
}

.docs-defs > li .docs-def-name .docs-def-extra {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 8px;
}

.docs-defs > li p {
    color: var(--text-dim);
    margin: 4px 0 0;
}

/* ===== Responsive ===== */

@media (max-width: 1000px) {
    .docs-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .docs-sidebar {
        position: static;
    }
    .docs-toc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .docs-content h1 { font-size: 1.7rem; }
    .docs-content h2 { font-size: 1.2rem; }
    .docs-pager { grid-template-columns: 1fr; }
    .docs-pager .pager-cell.next { text-align: left; align-items: flex-start; }
    .docs-ref th, .docs-ref td { font-size: 0.88rem; padding: 8px 10px; }
}