/* ==========================================================================
   Documentation Styles — 360 Hextile
   Dark-first prose, Pygments monokai, copy buttons, scrollbar
   ========================================================================== */

/* ---------- Prose / .docs-content ---------- */

.docs-content {
    color: #a1a1aa; /* zinc-400 */
    line-height: 1.75;
    font-size: 0.9375rem;
}

.docs-content > *:first-child { margin-top: 0; }

/* Headings */
.docs-content h1 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.docs-content h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    line-height: 1.3;
}

.docs-content h3 {
    color: #e4e4e7; /* zinc-200 */
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.docs-content h4 {
    color: #d4d4d8; /* zinc-300 */
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Paragraphs */
.docs-content p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Links */
.docs-content a {
    color: #ff9f95; /* brand-300 */
    text-decoration: underline;
    text-decoration-color: rgba(225,62,19,0.3);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.docs-content a:hover {
    color: #ff6758; /* brand-400 */
    text-decoration-color: #e13e13;
}

/* Lists */
.docs-content ul,
.docs-content ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
.docs-content li {
    margin-bottom: 0.375rem;
}
.docs-content li::marker {
    color: #e13e13;
}

/* Nested lists */
.docs-content li > ul,
.docs-content li > ol {
    margin-top: 0.375rem;
    margin-bottom: 0;
}

/* Inline code */
.docs-content code:not(.codehilite code):not(pre code) {
    background: rgba(225,62,19,0.1);
    color: #ff9f95; /* brand-300 */
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    font-size: 0.85em;
    font-weight: 500;
}

/* Code blocks */
.docs-content .codehilite,
.docs-content pre {
    position: relative;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    font-size: 0.84rem;
    line-height: 1.65;
}
.docs-content .codehilite code,
.docs-content pre code {
    background: transparent;
    color: #f8f8f2;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: normal;
}

/* Tables */
.docs-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}
.docs-content thead th {
    background: rgba(255,255,255,0.05);
    color: #e4e4e7;
    font-weight: 600;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.docs-content tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: top;
}
.docs-content tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Blockquotes */
.docs-content blockquote {
    border-left: 3px solid #e13e13;
    background: rgba(225,62,19,0.05);
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}
.docs-content blockquote p:last-child {
    margin-bottom: 0;
}

/* HR */
.docs-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225,62,19,0.3), transparent);
    margin: 2rem 0;
}

/* Images */
.docs-content img {
    max-width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Strong / emphasis */
.docs-content strong { color: #e4e4e7; }
.docs-content em { color: #d4d4d8; }


/* ---------- Pygments Monokai Theme ---------- */

.codehilite .hll { background-color: #49483e }
.codehilite .c   { color: #75715e } /* Comment */
.codehilite .k   { color: #66d9ef } /* Keyword */
.codehilite .l   { color: #ae81ff } /* Literal */
.codehilite .n   { color: #f8f8f2 } /* Name */
.codehilite .o   { color: #f92672 } /* Operator */
.codehilite .p   { color: #f8f8f2 } /* Punctuation */
.codehilite .ch  { color: #75715e } /* Comment.Hashbang */
.codehilite .cm  { color: #75715e } /* Comment.Multiline */
.codehilite .cp  { color: #75715e } /* Comment.Preproc */
.codehilite .cpf { color: #75715e } /* Comment.PreprocFile */
.codehilite .c1  { color: #75715e } /* Comment.Single */
.codehilite .cs  { color: #75715e } /* Comment.Special */
.codehilite .gd  { color: #f92672 } /* Generic.Deleted */
.codehilite .ge  { font-style: italic } /* Generic.Emph */
.codehilite .gi  { color: #a6e22e } /* Generic.Inserted */
.codehilite .gs  { font-weight: bold } /* Generic.Strong */
.codehilite .gu  { color: #75715e } /* Generic.Subheading */
.codehilite .kc  { color: #66d9ef } /* Keyword.Constant */
.codehilite .kd  { color: #66d9ef } /* Keyword.Declaration */
.codehilite .kn  { color: #f92672 } /* Keyword.Namespace */
.codehilite .kp  { color: #66d9ef } /* Keyword.Pseudo */
.codehilite .kr  { color: #66d9ef } /* Keyword.Reserved */
.codehilite .kt  { color: #66d9ef } /* Keyword.Type */
.codehilite .ld  { color: #e6db74 } /* Literal.Date */
.codehilite .m   { color: #ae81ff } /* Literal.Number */
.codehilite .s   { color: #e6db74 } /* Literal.String */
.codehilite .na  { color: #a6e22e } /* Name.Attribute */
.codehilite .nb  { color: #f8f8f2 } /* Name.Builtin */
.codehilite .nc  { color: #a6e22e } /* Name.Class */
.codehilite .no  { color: #66d9ef } /* Name.Constant */
.codehilite .nd  { color: #a6e22e } /* Name.Decorator */
.codehilite .ni  { color: #f8f8f2 } /* Name.Entity */
.codehilite .ne  { color: #a6e22e } /* Name.Exception */
.codehilite .nf  { color: #a6e22e } /* Name.Function */
.codehilite .nl  { color: #f8f8f2 } /* Name.Label */
.codehilite .nn  { color: #f8f8f2 } /* Name.Namespace */
.codehilite .nx  { color: #a6e22e } /* Name.Other */
.codehilite .py  { color: #f8f8f2 } /* Name.Property */
.codehilite .nt  { color: #f92672 } /* Name.Tag */
.codehilite .nv  { color: #f8f8f2 } /* Name.Variable */
.codehilite .ow  { color: #f92672 } /* Operator.Word */
.codehilite .w   { color: #f8f8f2 } /* Text.Whitespace */
.codehilite .mb  { color: #ae81ff } /* Literal.Number.Bin */
.codehilite .mf  { color: #ae81ff } /* Literal.Number.Float */
.codehilite .mh  { color: #ae81ff } /* Literal.Number.Hex */
.codehilite .mi  { color: #ae81ff } /* Literal.Number.Integer */
.codehilite .mo  { color: #ae81ff } /* Literal.Number.Oct */
.codehilite .sa  { color: #e6db74 } /* Literal.String.Affix */
.codehilite .sb  { color: #e6db74 } /* Literal.String.Backtick */
.codehilite .sc  { color: #e6db74 } /* Literal.String.Char */
.codehilite .dl  { color: #e6db74 } /* Literal.String.Delimiter */
.codehilite .sd  { color: #e6db74 } /* Literal.String.Doc */
.codehilite .s2  { color: #e6db74 } /* Literal.String.Double */
.codehilite .se  { color: #ae81ff } /* Literal.String.Escape */
.codehilite .sh  { color: #e6db74 } /* Literal.String.Heredoc */
.codehilite .si  { color: #e6db74 } /* Literal.String.Interpol */
.codehilite .sx  { color: #e6db74 } /* Literal.String.Other */
.codehilite .sr  { color: #e6db74 } /* Literal.String.Regex */
.codehilite .s1  { color: #e6db74 } /* Literal.String.Single */
.codehilite .ss  { color: #e6db74 } /* Literal.String.Symbol */
.codehilite .bp  { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.codehilite .fm  { color: #a6e22e } /* Name.Function.Magic */
.codehilite .il  { color: #ae81ff } /* Literal.Number.Integer.Long */
.codehilite .vc  { color: #f8f8f2 } /* Name.Variable.Class */
.codehilite .vg  { color: #f8f8f2 } /* Name.Variable.Global */
.codehilite .vi  { color: #f8f8f2 } /* Name.Variable.Instance */
.codehilite .vm  { color: #f8f8f2 } /* Name.Variable.Magic */


/* ---------- Copy Button (inside pre blocks) ---------- */

.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.375rem;
    color: #71717a;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.codehilite:hover .code-copy-btn,
pre:hover .code-copy-btn {
    opacity: 1;
}
.code-copy-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #d4d4d8;
}
.code-copy-btn.copied {
    color: #22c55e;
    border-color: rgba(34,197,94,0.3);
}


/* ---------- Sidebar Scrollbar ---------- */

.docs-sidebar::-webkit-scrollbar {
    width: 4px;
}
.docs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.docs-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}
.docs-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* Firefox */
.docs-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}


/* ---------- TOC Scrollbar ---------- */

.docs-toc::-webkit-scrollbar {
    width: 3px;
}
.docs-toc::-webkit-scrollbar-track {
    background: transparent;
}
.docs-toc::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}
.docs-toc {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}


/* ---------- Heading anchor on hover ---------- */

.docs-content h2:hover .heading-anchor,
.docs-content h3:hover .heading-anchor {
    opacity: 1;
}
.heading-anchor {
    opacity: 0;
    margin-left: 0.5rem;
    color: #71717a;
    text-decoration: none;
    transition: opacity 0.15s;
}
.heading-anchor:hover {
    color: #e13e13;
}


/* ---------- Search highlight ---------- */

.search-highlight {
    background: rgba(225,62,19,0.2);
    color: #ff9f95;
    padding: 0.05em 0.2em;
    border-radius: 0.2em;
}


/* ---------- Mobile sidebar overlay ---------- */

.docs-sidebar-overlay {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}


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

@media (max-width: 1024px) {
    .docs-content pre {
        font-size: 0.8rem;
    }
    .docs-content table {
        display: block;
        overflow-x: auto;
    }
}