/* assets/css/docs.css */

/* ─── TOKENS ─────────────────────────────────────────── */
:root{
    --bg-body:#0e141e;
    --bg-panel:rgba(9, 10, 21, 0.384);
    --bg-grad:linear-gradient(135deg,rgba(255,255,255,.03)0%,rgba(255,255,255,0)100%);
    --pill-active-bg:#1e1b18;
    --pill-hover-bg:#2b2622;
    --text-default:#d1d5db;
    --text-heading:#ffffff;
    --text-active:#ffe8cb;
    --text-hover:#f9a55d;
    --link-idle:#c4c4c4;   /* idle  link tone  */
    --link-hover:#d74f05;  /* hover highlight */
    --radius:.75rem;
}

/* ─── PAGE BACKDROP ─────────────────────────────────── */
body.is-docs{
    background:var(--bg-body);
    background-image:
       radial-gradient(60% 60% at 50% 0%,rgba(255,255,255,.05)0%,transparent 70%),
       radial-gradient(100% 100% at 0% 100%,rgba(255,255,255,.025)0%,transparent 70%);
}

/* ─── OUTER WRAPPER  (top-nav + body grid) ──────────── */
.docs-shell{
    max-width: 90%;
    margin: 80px auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 20px 1.5rem;
    background:rgba(9, 10, 21, 0.658);
    border-radius:var(--radius);
}

/* ─── TOP NAV  – occupies flex row 0 ─────────────────── */
.docs-topnav{flex:0}

/* ─── BODY GRID (sidebar · article · toc) ────────────── */
.docs-body{
    flex:1;
    display:grid;
    grid-template-columns:20% 55% 24%;
    gap:0.5rem;
}
@media(max-width:1280px){
    .docs-body{grid-template-columns:260px 1fr}
    .docs-toc{display:none}
}
@media(max-width:1023px){
    .docs-body{display:block}
    #shareai-docs-sidebar{display:none!important}
}

/* ─── PANELS ────────────────────────────────────────── */
.docs-nav,.docs-toc,.docs-content{
    position:relative;
    background:var(--bg-panel);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.04);
    border-radius:var(--radius);
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset,
               0 0 0 1px rgba(0,0,0,.25) inset;
}
.docs-nav::before,.docs-toc::before,.docs-content::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--bg-grad);
    border-radius:inherit;
    pointer-events:none;
}
.docs-nav,.docs-toc{
    position:sticky;
    top:5.5rem;
    height:calc(100vh - 7rem);
    padding:1.75rem 1.25rem;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.docs-content{
    max-width:48rem;
    margin-inline:auto;
    padding:3rem 2.5rem;
}

/* ─── NAV HEADINGS ─────────────────────────────────── */
.docs-nav h5{
    margin:1.5rem 0 .6rem;
    font:600 .75rem/1.15 var(--font-sans,sans-serif);
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-heading);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding-bottom:.25rem;
}

/* ─── NAV ITEMS ─────────────────────────────────────── */
.docs-nav a,
.docs-nav summary{
    display:flex;
    align-items:center;
    width:100%;
    padding:.48rem 1rem;
    border-radius:.65rem;
    font-size:.875rem;
    line-height:1.35;
    color:var(--text-default);
    background:transparent;
    cursor:pointer;
    transition:background .15s,color .15s;
}
.docs-nav summary::-webkit-details-marker{display:none}
.docs-nav summary::marker{content:""}
.docs-nav .indent-0{padding-left:1rem}
.docs-nav .indent-1{padding-left:2.25rem}
.docs-nav .indent-2{padding-left:3.5rem}
.docs-nav .indent-3{padding-left:4.75rem}
.docs-nav summary::after{
    content:"";
    width:.45rem;height:.45rem;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg) translateY(-1px);
    margin-left:auto;
    transition:transform .2s;
}
.docs-nav details[open]>summary::after{transform:rotate(45deg) translateY(-1px)}
.docs-nav a:hover:not(.active),
.docs-nav summary:hover{background:var(--pill-hover-bg);color:#fff}
.docs-nav .active{
    background:var(--pill-active-bg);
    color:var(--text-active);
    font-weight:600;
}
.docs-nav details[open]>summary{background:transparent;color:var(--text-default)}
.docs-nav ul{margin:0;padding:0;list-style:none}

/* ─── DESKTOP ToC ──────────────────────────────────── */
.toc-title{
    font:600 .8125rem/1.3 var(--font-sans,sans-serif);
    color:var(--text-heading);
    margin-bottom:1rem;
}
.toc-list{margin:0;padding:0;list-style:none}
.toc-list li{margin:0 0 .55rem}
.toc-lvl-3{padding-left:1rem}
.toc-list a{color:var(--text-default);transition:color .15s}
.toc-list a:hover{color:var(--text-hover)}
.toc-list a.active{color:var(--text-active);font-weight:600}

/* ─── MOBILE DRAWER (unchanged) ────────────────────── */
@media(max-width:1023px){
    .pill-main{
        position:fixed;
        left:50%;bottom:1.25rem;
        transform:translateX(-50%);
        z-index:50;
        background:var(--pill-active-bg);
        color:var(--text-active);
        font:600 .8125rem/1 var(--font-sans,sans-serif);
        padding:.7rem 1.6rem;
        border-radius:999rem;
        box-shadow:0 2px 6px rgba(0,0,0,.4);
        cursor:pointer;
        transition:background .2s;
    }
    .pill-main:hover{background:var(--pill-hover-bg)}
    .mobile-drawer{
        position:fixed;left:0;right:0;bottom:0;
        height:82vh;
        transform:translateY(100%);
        transition:transform .3s ease;
        z-index:49;
        background:var(--bg-panel);
        backdrop-filter:blur(8px);
        border-top:1px solid rgba(255,255,255,.05);
        border-radius:var(--radius) var(--radius) 0 0;
        display:flex;flex-direction:column;
    }
    .mobile-drawer::before{
        content:"";position:absolute;inset:0;
        background:var(--bg-grad);
        border-radius:inherit;pointer-events:none;
    }
    .mobile-drawer.open{transform:translateY(0)}
    .drawer-header{
        padding:1.25rem 1.5rem 0;
        font:600 1rem/1.3 var(--font-sans,sans-serif);
        color:var(--text-heading);text-align:left;
    }
    .drawer-body{flex:1;overflow:auto;padding:1rem 1.5rem 3rem}
    .drawer-pane{display:none;min-height:100%}
    .drawer-pane.show{display:block}
    .drawer-pane.docs-nav{padding:20}
    .drawer-footer{
        position:absolute;left:0;right:0;bottom:1rem;
        display:grid;grid-template-columns:1fr auto 1fr;
        column-gap:.75rem;align-items:center;padding:0 1rem;
    }
    .ctrl-btn,.ctrl-close{
        background:var(--pill-hover-bg);color:var(--text-default);
        border:none;font:600 .75rem/1 var(--font-sans,sans-serif);
        cursor:pointer;transition:background .2s,color .2s;
    }
    .ctrl-btn{
        padding:.55rem 0;border-radius:999rem;width:100%;
    }
    .ctrl-btn.active{background:var(--pill-active-bg);color:var(--text-active)}
    .ctrl-close{
        width:3rem;height:3rem;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        font-size:1.25rem;background:var(--pill-active-bg);color:var(--text-active);
        box-shadow:0 2px 6px rgba(0,0,0,.4);
    }
    .ctrl-btn:hover:not(.active),.ctrl-close:hover{background:var(--pill-active-bg)}
}

/* ─── DOCS TOP NAV ─────────────────────────────────── */
.docs-topnav{
    background:#0d0f16;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    z-index:30;
}
.docs-topnav>ul{
    display:flex;
    gap:2rem;
    height:48px;
    align-items:center;
    margin:0;
    padding:0 1.75rem;
    list-style:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.docs-topnav li{margin:0}
.docs-topnav a{
    display:block;
    padding:.25rem 0;
    color:var(--link-idle);           /* idle colour */
    font:500 .875rem/1 var(--font-sans,sans-serif);
    white-space:nowrap;
    transition:color .15s;
}
.docs-topnav a:hover,
.docs-topnav a:focus{
    color:var(--link-hover);          /* hover colour */
}
.docs-topnav .current-menu-item>a,
.docs-topnav .current_page_item>a{
    color:#fff;
    font-weight:600;
    position:relative;
}
.docs-topnav .current-menu-item>a::after,
.docs-topnav .current_page_item>a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-6px;
    height:2px;
    background:var(--text-active);
    border-radius:1px;
}
@media(max-width:768px){
    .docs-topnav {margin-top: 40px;}
    .docs-topnav>ul{gap:1.25rem;padding:0 1rem}
    .docs-topnav a{font-size:.8125rem}
}
.docs-topnav li::marker{content:""}