/* ============================================================
 * PyTorch-Encoding docs — visual parity with hangzhang.org (2026)
 *
 * Mirrors the design tokens, glassy sticky header, accent stripe,
 * badge/card styling, and dark-mode palette from
 *   zhanghang1989.github.io/files/css/hz-overlay.css
 * so this site feels like the same product as the personal site.
 * ============================================================ */

:root {
    --hz-bg: #ffffff;
    --hz-bg-elev: #ffffff;
    --hz-header-bg: rgba(255, 255, 255, 0.72);
    --hz-fg: #111827;
    --hz-fg-muted: #6b7280;
    --hz-border: rgba(0, 0, 0, 0.08);
    --hz-accent: #ee1c25;
    --hz-accent-hover: #c8161d;
    --hz-accent-soft: rgba(238, 28, 37, 0.10);
    --hz-sidebar-bg: #f7f7f9;
    --hz-code-bg: #f6f8fa;
    --hz-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    --hz-card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.10);
    --hz-radius: 12px;
    --hz-radius-sm: 8px;
}

html[data-theme="dark"] {
    --hz-bg: #0b1020;
    --hz-bg-elev: #131a2e;
    --hz-header-bg: rgba(11, 16, 32, 0.72);
    --hz-fg: #e6ebf5;
    --hz-fg-muted: #9aa3b2;
    --hz-border: rgba(255, 255, 255, 0.08);
    --hz-accent: #ff6b6b;
    --hz-accent-hover: #ffb4b4;
    --hz-accent-soft: rgba(255, 107, 107, 0.14);
    --hz-sidebar-bg: #10162a;
    --hz-code-bg: #0f1630;
    --hz-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.30);
    --hz-card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --hz-bg: #0b1020;
        --hz-bg-elev: #131a2e;
        --hz-header-bg: rgba(11, 16, 32, 0.72);
        --hz-fg: #e6ebf5;
        --hz-fg-muted: #9aa3b2;
        --hz-border: rgba(255, 255, 255, 0.08);
        --hz-accent: #ff6b6b;
        --hz-accent-hover: #ffb4b4;
        --hz-accent-soft: rgba(255, 107, 107, 0.14);
        --hz-sidebar-bg: #10162a;
        --hz-code-bg: #0f1630;
        --hz-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.30);
        --hz-card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45);
    }
}

/* --- Global typography ------------------------------------------------- */
/* Match hangzhang.org exactly: its theme.css sets
     body { font-family: FreightSans, "Helvetica Neue", Helvetica, Arial, sans-serif }
   and code sits in an IBMPlexMono/SFMono stack. Don't override — the
   pytorch-theme font files (bundled as _static/fonts/FreightSans/*) are
   the same ones the personal site loads, so we get pixel-identical text
   by just letting the theme's own body rule win. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

:root {
    --hz-font-sans: FreightSans, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --hz-font-mono: IBMPlexMono, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

body { color: var(--hz-fg); background: var(--hz-bg); transition: background 0.25s ease, color 0.25s ease; }
p, li, td, div { color: var(--hz-fg); }

h1, h2, h3, h4, h5, h6,
.rst-content .toctree-wrapper p.caption, p.caption, legend { color: var(--hz-fg); }

/* Links match hangzhang.org accent */
a { color: var(--hz-accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--hz-accent-hover); text-decoration: underline; }
a:visited { color: var(--hz-accent-hover); }

/* Section rule under h2 like the personal site */
.rst-content h2 {
    border-bottom: 2px solid var(--hz-border);
    padding-bottom: 6px;
    margin-top: 32px;
}

/* ============================================================
 * Site header — 1:1 with hangzhang.org's hz-overlay.css
 *
 * The base pytorch theme (theme.css) already sets height 50px,
 * flex layout, logo 50×50 with the favicon, menu font-size
 * 1.125rem / line-height 2.125rem, letter-spacing 0, and 40px
 * margin between items. hz-overlay only changes:
 *   1. position fixed -> sticky, z-index 9999 -> 900
 *   2. solid blue bg  -> translucent white with backdrop blur
 *   3. adds a soft red gradient stripe under the bar
 *   4. flips menu link color from white to dark fg, hover to red
 * Mirror exactly that set of overrides — nothing more — so the
 * nav renders identically to hangzhang.org.
 * ============================================================ */
.container-fluid.header-holder {
    position: sticky !important;
    top: 0;
    z-index: 900;
    background: var(--hz-header-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--hz-border);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.container-fluid.header-holder::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, var(--hz-accent) 0%, var(--hz-accent) 40%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}

.main-menu a { color: var(--hz-fg) !important; }
.main-menu a:hover { color: var(--hz-accent) !important; }

/* Lock the nav link typography to the exact values hangzhang.org
   computes (from theme.css line 9812). Setting them explicitly on
   the same selector shields the nav from any theme.css delta or
   pytorch-body inheritance introduced by the docs shell. */
.header-holder .main-menu ul li a {
    font-family: FreightSans, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 1.125rem !important;
    line-height: 2.125rem !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* ============================================================
 * Sidebar / search input
 * ============================================================ */
.wy-side-nav-search,
.pytorch-left-menu-search {
    background-color: var(--hz-sidebar-bg);
    border-bottom: 1px solid var(--hz-border);
    padding: 0.8em 1em 0.6em;
}

.wy-side-nav-search input[type="text"],
.pytorch-left-menu-search input[type="text"] {
    border: 1px solid var(--hz-border);
    border-radius: 999px;
    background: var(--hz-bg-elev);
    color: var(--hz-fg);
    padding: 6px 14px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wy-side-nav-search input[type="text"]:focus,
.pytorch-left-menu-search input[type="text"]:focus {
    border-color: var(--hz-accent);
    box-shadow: 0 0 0 3px var(--hz-accent-soft);
    outline: none;
}

.wy-side-nav-search > div.version { color: var(--hz-fg-muted); }

.wy-nav-content-wrap,
.wy-menu li.current > a { background-color: var(--hz-bg); }

@media screen and (min-width: 1400px) {
    .wy-nav-content-wrap { background-color: rgba(0, 0, 0, 0.03); }
    .wy-nav-content { background-color: var(--hz-bg); }
}

/* Mobile top bar */
.wy-nav-top {
    background-color: var(--hz-bg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin: 0.4045em 0.809em;
    color: var(--hz-fg);
    border-bottom: 1px solid var(--hz-border);
}
.wy-nav-top > a { display: none; }
@media screen and (max-width: 768px) {
    .wy-side-nav-search > a img.logo { height: 60px; }
}
.wy-side-nav-search a { display: block; }

/* Sidebar menu links */
.wy-menu a { color: var(--hz-fg-muted); text-decoration: none; }
.wy-menu a:hover { color: var(--hz-fg); background: var(--hz-accent-soft); }
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a {
    color: var(--hz-fg);
    background: var(--hz-bg);
    border-right: 3px solid var(--hz-accent);
}

/* ============================================================
 * Signature "cards" & inline literals (accent red for consistency)
 *
 * The upstream theme was written for older Sphinx and pins
 *   .class em.property       -> position: absolute; left: 0.5rem
 *   .class dt                -> padding-left: 4em; border-top: 3px solid blue
 *   .class dt a              -> position: absolute; right: 30px
 * Once we swap dt to `display: table` for the card look, those
 * absolute children escape and collide with the class name /
 * disappear off-screen. Fix by making dt a positioned block and
 * letting the "class" prefix + [source]/¶ links flow inline.
 * ============================================================ */
.rst-content dl:not(.docutils) { margin-bottom: 24px; }

.rst-content dl:not(.docutils) > dt,
.rst-content dl.py > dt,
article.pytorch-article .class > dt,
article.pytorch-article .function > dt,
article.pytorch-article .attribute > dt,
article.pytorch-article .method > dt,
article.pytorch-article .staticmethod > dt {
    display: block;
    position: relative;
    background: var(--hz-accent-soft);
    color: var(--hz-fg);
    border-top: 3px solid var(--hz-accent);
    border-left: none;
    border-radius: var(--hz-radius-sm) var(--hz-radius-sm) 0 0;
    padding: 8px 44px 8px 12px !important;
    font-size: 100%;
    margin-bottom: 6px;
    word-wrap: break-word;
}

/* "class" / "static" / "property" prefix flows inline as an accent chip */
.rst-content dl.py > dt em.property,
article.pytorch-article .class em.property,
article.pytorch-article .function em.property,
article.pytorch-article .attribute em.property,
article.pytorch-article .method em.property,
article.pytorch-article .staticmethod em.property {
    position: static !important;
    left: auto !important;
    display: inline;
    text-transform: none;
    font-style: normal;
    color: var(--hz-accent);
    font-weight: 600;
    padding-right: 0.4rem;
}

/* Nested method/attribute signatures inside a class get a left accent bar
   instead of a full top bar, so the visual hierarchy still reads. */
article.pytorch-article .class .method > dt,
article.pytorch-article .class .staticmethod > dt,
article.pytorch-article .class .attribute > dt {
    border-top: 1px solid var(--hz-border);
    border-left: 3px solid var(--hz-accent);
    border-radius: 0 var(--hz-radius-sm) 0 0;
    background: var(--hz-bg-elev);
    padding-left: 12px !important;
}

/* [source] + ¶ anchor: sit at the right edge of the signature card */
.rst-content dl:not(.docutils) > dt > a.headerlink,
.rst-content dl:not(.docutils) > dt > a.reference,
article.pytorch-article .class > dt > a,
article.pytorch-article .function > dt > a,
article.pytorch-article .attribute > dt > a,
article.pytorch-article .method > dt > a {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 0;
}

/* dd body: remove the theme's forced 3.75rem left indent so descriptions
   line up with the signature card above. */
article.pytorch-article .class > dd,
article.pytorch-article .function > dd,
article.pytorch-article .attribute > dd,
article.pytorch-article .method > dd {
    padding-left: 12px;
}

.rst-content tt.literal, .rst-content code.literal {
    color: var(--hz-accent);
    background: var(--hz-accent-soft);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 90%;
}
.rst-content tt.xref, a .rst-content tt, .rst-content tt.xref,
.rst-content code.xref, a .rst-content tt, a .rst-content code {
    color: var(--hz-accent);
}

/* Code blocks */
.rst-content pre.literal-block,
.rst-content div[class^='highlight'] pre {
    border: 1px solid var(--hz-border);
    border-radius: 6px;
    background: var(--hz-code-bg);
    color: var(--hz-fg);
}

/* Admonitions — accent bar on note/warning headers */
.rst-content .admonition-title { background: var(--hz-accent); }

/* Buttons */
.btn-neutral, .btn {
    border-radius: 6px !important;
    border: 1px solid var(--hz-border) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-neutral:hover, .btn:hover {
    background: var(--hz-accent-soft) !important;
    color: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
}

/* Footer */
footer { font-size: 80%; color: var(--hz-fg-muted); }
footer .rst-footer-buttons { font-size: 125%; }
footer p { font-size: 100%; }

/* Sphinx: hidden headers that appear in TOC tree */
.rst-content .hidden-section { display: none; }
nav .hidden-section { display: inherit; }

/* Floating theme toggle (matches personal-site button) */
.hz-theme-toggle {
    position: fixed; right: 20px; bottom: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--hz-border);
    background: var(--hz-bg-elev);
    color: var(--hz-fg);
    cursor: pointer;
    box-shadow: var(--hz-card-shadow);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; z-index: 10000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hz-theme-toggle:hover { transform: scale(1.08); box-shadow: var(--hz-card-shadow-hover); }

/* ============================================================
 * Dark-mode block overrides for the theme's stock components
 * ============================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] .wy-body-for-nav,
html[data-theme="dark"] .wy-nav-content,
html[data-theme="dark"] .wy-nav-content-wrap,
html[data-theme="dark"] .wy-menu li.current > a,
html[data-theme="dark"] .rst-content {
    background-color: var(--hz-bg) !important;
    color: var(--hz-fg) !important;
}
html[data-theme="dark"] .wy-nav-side { background-color: var(--hz-sidebar-bg) !important; }
html[data-theme="dark"] .wy-side-nav-search { background-color: var(--hz-sidebar-bg) !important; }
html[data-theme="dark"] .wy-menu-vertical a { color: var(--hz-fg-muted); }
html[data-theme="dark"] .wy-menu-vertical a:hover { background: var(--hz-accent-soft); color: var(--hz-fg); }

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] .rst-content dl:not(.docutils) dt { color: var(--hz-fg); }

html[data-theme="dark"] .rst-content pre.literal-block,
html[data-theme="dark"] .rst-content div[class^='highlight'] pre {
    background: var(--hz-code-bg);
    border-color: var(--hz-border);
    color: var(--hz-fg);
}
html[data-theme="dark"] .rst-content table.docutils td,
html[data-theme="dark"] .rst-content table.docutils th {
    background: var(--hz-bg-elev);
    border-color: var(--hz-border);
    color: var(--hz-fg);
}
html[data-theme="dark"] .wy-side-nav-search input[type="text"] {
    background: var(--hz-bg-elev);
    color: var(--hz-fg);
    border-color: var(--hz-border);
}