/* JoyUI docs site — styles for the documentation site's own shell
   (sidebar, code blocks, tables), kept separate from the .joy- prefixed
   design system files. The actual look (color, glass, buttons, cards...)
   comes from the real CDN files (joy-tokens.css / joy.css /
   joy-utilities.css), loaded before this one — everything here reads the
   --joy-* variables they define. */

/* ---------- Two-column layout (sidebar + content) ---------- */

.jdocs-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--joy-space-6);
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(96px + var(--joy-space-5)) var(--joy-space-5) var(--joy-space-8);
    align-items: start;
}

.jdocs-sidebar {
    position: sticky;
    top: calc(96px + var(--joy-space-4));
    max-height: calc(100vh - 96px - var(--joy-space-6));
    overflow-y: auto;
    padding: var(--joy-space-4);
    border-radius: var(--joy-radius-lg);
}

.jdocs-sidebar-group + .jdocs-sidebar-group { margin-top: var(--joy-space-5); }

.jdocs-sidebar-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--joy-text-muted);
    padding: 0 var(--joy-space-3);
    margin-bottom: var(--joy-space-2);
}

.jdocs-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--joy-space-2);
    padding: 8px var(--joy-space-3);
    border-radius: var(--joy-radius-sm);
    color: var(--joy-text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.jdocs-sidebar-link:hover { background: rgba(127, 127, 127, 0.1); color: var(--joy-text); }

.jdocs-sidebar-link.is-active {
    background: var(--joy-accent-soft);
    color: var(--joy-accent);
    font-weight: 700;
}

.jdocs-sidebar-toggle { display: none; }

/* ---------- Content ---------- */

.jdocs-main { min-width: 0; }

.jdocs-eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--joy-space-3);
    margin-bottom: var(--joy-space-2);
    flex-wrap: wrap;
}

.jdocs-content h1 { font-size: 2.2rem; margin-bottom: var(--joy-space-2); }
.jdocs-content > p.jdocs-lead { color: var(--joy-text-muted); font-size: 1.08rem; max-width: 62ch; margin-bottom: var(--joy-space-6); }

.jdocs-content h2 {
    font-size: 1.5rem;
    margin-top: var(--joy-space-8);
    margin-bottom: var(--joy-space-3);
    padding-top: var(--joy-space-6);
    border-top: 1px solid var(--joy-glass-border);
}
.jdocs-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--joy-space-5); }

.jdocs-content h3 { font-size: 1.15rem; margin-top: var(--joy-space-6); margin-bottom: var(--joy-space-2); }
.jdocs-content p { color: var(--joy-text-muted); line-height: 1.7; margin-bottom: var(--joy-space-3); max-width: 72ch; }
.jdocs-content code:not(pre code) {
    background: rgba(127, 127, 127, 0.14);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.88em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.jdocs-content ul, .jdocs-content ol { color: var(--joy-text-muted); line-height: 1.8; margin: 0 0 var(--joy-space-4) var(--joy-space-5); }

/* ---------- "Live + code" block ---------- */

.jdocs-example {
    border: 1px solid var(--joy-glass-border);
    border-radius: var(--joy-radius-lg);
    overflow: hidden;
    margin-bottom: var(--joy-space-3);
    background: var(--joy-glass-bg);
}

.jdocs-example-stage {
    padding: var(--joy-space-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--joy-space-4);
}

.jdocs-example-stage.is-column { flex-direction: column; align-items: stretch; }
.jdocs-example-stage.is-dark-check {
    background-image: linear-gradient(45deg, rgba(127,127,127,0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(127,127,127,0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(127,127,127,0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(127,127,127,0.08) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Code toolbar sits in its own row above the code, so the copy button
   never overlaps the code text — it has no reason to, at any code
   length or width, since it's outside the scrolling area entirely. */
.jdocs-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--joy-space-3);
    padding: 8px var(--joy-space-4);
    background: #15151a;
    border-top: 1px solid var(--joy-glass-border);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.jdocs-example-snippet .jdocs-code-toolbar { border-top: none; }

.jdocs-code-toolbar > span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a8a94;
}

.jdocs-code {
    display: block;
    margin: 0;
    padding: var(--joy-space-4) var(--joy-space-5);
    background: #1a1a1f;
    color: #e4e4ea;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
}

.jdocs-copy-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--joy-radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: #d5d5db;
    font-size: 0.75rem;
    font-family: var(--joy-font);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.jdocs-copy-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.jdocs-copy-btn.is-copied { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }

/* ---------- Reference tables ---------- */

.jdocs-table-wrap { overflow-x: auto; margin-bottom: var(--joy-space-5); border: 1px solid var(--joy-glass-border); border-radius: var(--joy-radius-md); }
.jdocs-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.jdocs-table th, .jdocs-table td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--joy-glass-border); vertical-align: top; }
.jdocs-table th { color: var(--joy-text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(127, 127, 127, 0.06); }
.jdocs-table tr:last-child td { border-bottom: none; }
.jdocs-table td code { white-space: nowrap; }

/* ---------- Page metadata badges ---------- */

.jdocs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--joy-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(127, 127, 127, 0.12);
    color: var(--joy-text-muted);
}
.jdocs-badge.is-js { background: var(--joy-accent-soft); color: var(--joy-accent); }

/* ---------- Callouts ---------- */

.jdocs-callout {
    display: flex;
    gap: var(--joy-space-3);
    padding: var(--joy-space-4);
    border-radius: var(--joy-radius-md);
    background: rgba(127, 127, 127, 0.08);
    border: 1px solid var(--joy-glass-border);
    margin-bottom: var(--joy-space-5);
}
.jdocs-callout i { font-size: 1.2rem; color: var(--joy-accent); flex-shrink: 0; margin-top: 2px; }
.jdocs-callout p { margin: 0; max-width: none; }

/* ---------- Color token swatches ---------- */

.jdocs-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--joy-space-3); margin-bottom: var(--joy-space-5); }
.jdocs-swatch { border: 1px solid var(--joy-glass-border); border-radius: var(--joy-radius-md); overflow: hidden; }
.jdocs-swatch-color { height: 64px; }
.jdocs-swatch-info { padding: var(--joy-space-2) var(--joy-space-3); }
.jdocs-swatch-name { font-weight: 600; font-size: 0.85rem; display: block; }
.jdocs-swatch-value { font-size: 0.78rem; color: var(--joy-text-muted); font-family: monospace; }

/* ---------- Landing page ---------- */

.jdocs-landing-cta-row { display: flex; gap: var(--joy-space-3); flex-wrap: wrap; }
.jdocs-value-icon { font-size: 1.6rem; color: var(--joy-accent); }

/* ---------- Footer ---------- */

.jdocs-foot {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--joy-space-6) var(--joy-space-5) var(--joy-space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--joy-space-3);
    color: var(--joy-text-muted);
    font-size: 0.85rem;
}
.jdocs-foot a { color: var(--joy-text-muted); }
.jdocs-foot a:hover { color: var(--joy-accent); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .jdocs-shell { grid-template-columns: 1fr; padding-top: calc(88px + var(--joy-space-4)); }

    .jdocs-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .jdocs-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-height: none;
        z-index: 200;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s var(--joy-ease);
        background: var(--joy-surface);
    }
    .jdocs-sidebar.is-open { transform: translateX(0); }

    .jdocs-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 190;
    }
    .jdocs-sidebar-overlay.is-visible { display: block; }
}