/* ============================================================
   walker-cms theme — Anthropic-ish minimal
   light default: off-white + near-black + terracotta accent
   slate dark:     warm-dark + bone + brightened terracotta
   focus: serif headings, generous whitespace, no boxes/shadows
   ============================================================ */

/* Hide Material's default logo icon — dropping `theme.icon.logo` from
   mkdocs.yml still falls back to a built-in graduation/library SVG.
   Site name alone is cleaner. */
.md-header__button.md-logo { display: none !important; }

/* ============================================================
   Block-level copy-link anchors (docs/javascripts/block_anchors.js).
   Subtle ¶ on hover, like Material's heading permalink. Lets walker
   grab a URL pointing at a specific paragraph / list item / code
   block / admonition to send to AI.

   IMPORTANT: .md-content__inner *is* .md-typeset (Material puts both
   classes on the same <article>), so a descendant combinator
   `.md-typeset .md-content__inner` matches nothing. Select directly
   on .md-content__inner — that's the parent the JS targets too.
   ============================================================ */
.md-content__inner > p,
.md-content__inner > ul > li,
.md-content__inner > ol > li,
.md-content__inner ul ul > li,
.md-content__inner ol ol > li,
.md-content__inner > blockquote,
.md-content__inner > pre,
.md-content__inner > .admonition,
.md-content__inner .admonition > p,
.md-content__inner > details {
    position: relative;
}
.wk-anchor {
    position: absolute;
    top: 0.1em;
    right: -1.5em;
    padding: 0 0.4em;
    color: var(--md-default-fg-color--lighter);
    font-size: 0.85em;
    line-height: 1;
    text-decoration: none !important;
    border-bottom: none !important;
    opacity: 0;
    transition: opacity 0.1s, color 0.1s;
    user-select: none;
    cursor: pointer;
}
:where(.md-content__inner > p,
       .md-content__inner > ul > li,
       .md-content__inner > ol > li,
       .md-content__inner ul ul > li,
       .md-content__inner ol ol > li,
       .md-content__inner > blockquote,
       .md-content__inner > pre,
       .md-content__inner > .admonition,
       .md-content__inner .admonition > p,
       .md-content__inner > details):hover > .wk-anchor,
.wk-anchor:focus,
.wk-anchor:hover {
    opacity: 1;
    color: var(--md-accent-fg-color);
}
/* hide on narrow viewports where there's no right margin to render into */
@media (max-width: 1100px) { .wk-anchor { display: none; } }

/* ---------- Cross-Document View Transitions (native crossfade on navigation) ----------
   Chrome 126+ / Safari 18+. Falls back to plain reload on older browsers.
   Replaces instant-nav + manual KaTeX/DOM flicker fixes — the browser
   now snapshots the outgoing page and cross-fades to the incoming one,
   so users never see the 'bare TeX → rendered math' flash. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pin chrome (header + sidebars) so only the center content crossfades.
   Giving each region its own view-transition-name takes it out of the
   root snapshot; animation-duration: 0ms means no crossfade for it —
   the content is nearly identical across pages so the switch reads as
   "layout is stable, only the middle swaps".
   Only .md-content participates in the default root crossfade. */
.md-header        { view-transition-name: wk-header; }
.md-tabs          { view-transition-name: wk-tabs; }
.md-sidebar--primary   { view-transition-name: wk-sidebar-primary; }
.md-sidebar--secondary { view-transition-name: wk-sidebar-secondary; }
.md-footer        { view-transition-name: wk-footer; }

::view-transition-group(wk-header),
::view-transition-group(wk-tabs),
::view-transition-group(wk-sidebar-primary),
::view-transition-group(wk-sidebar-secondary),
::view-transition-group(wk-footer) {
    animation-duration: 0ms;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ---------- Anthropic-research-style layout: no left sidebar ----------
   The site-wide left nav (tree of every page) is replaced by each
   section's index.md serving as its own menu. Walker: 'left nav 不优雅,
   要不像 anthropic 的 research 那样，单独 menu + 点击进文章'.
*/
.md-sidebar--primary { display: none !important; }

/* content takes back the freed column; center at a comfortable reading width */
.md-main__inner {
    max-width: 64rem;
    margin-left: auto !important;
    margin-right: auto !important;
}
.md-content {
    max-width: none;
}

/* right-side TOC: keep it for long articles, but make it quieter */
.md-sidebar--secondary .md-nav__title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.7;
    color: var(--md-default-fg-color--lighter);
    font-weight: 600;
}
.md-sidebar--secondary .md-nav__link {
    font-size: 0.68rem;
    line-height: 1.35;
    padding: 0.15em 0;
    color: var(--md-default-fg-color--lighter);
}
/* active TOC link: subtle — same color, just bolder. Material's scroll
   tracking is unreliable (no active at page top, stuck on last entry
   after scrolling back) so loud accent highlight would mislead. */
.md-sidebar--secondary .md-nav__link--active {
    color: var(--md-default-fg-color);
    font-weight: 600;
}
.md-sidebar--secondary .md-nav__link:hover {
    color: var(--md-accent-fg-color);
}

/* on narrow screens Material already hides primary sidebar via drawer;
   our display:none above keeps the top-left hamburger active — remove it */
.md-header__button.md-icon[for="__drawer"] { display: none !important; }

/* ---------- GLOBAL: unify page bg so hero and body don't break into bands ---------- */
.md-main,
.md-main__inner,
.md-content,
.md-content__inner,
.md-container {
    background: var(--md-default-bg-color) !important;
}
body { background: var(--md-default-bg-color); }

/* Reserve scrollbar gutter at all times so expanding <details> on the
   studies landing TOC doesn't trigger a horizontal shift when the page
   suddenly grows tall enough to need a scrollbar. */
html { scrollbar-gutter: stable; }

/* Version tag (fixed bottom-right). 由 hooks/inject_version.py 生成的
   docs/javascripts/version.js 在 DOMContentLoaded 时 append 到 body。
   Format: v<major>.<minor>.<short-commit>，跟 git log 对得上即同步。 */
.wk-version {
    position: fixed;
    bottom: 0.4rem;
    right: 0.8rem;
    font-family: var(--md-code-font, ui-monospace, "SFMono-Regular", monospace);
    font-size: 0.6rem;
    color: var(--md-default-fg-color--lighter);
    background: var(--md-default-bg-color);
    padding: 0.15em 0.5em;
    border: 1px solid var(--wk-hairline);
    border-radius: 3px;
    opacity: 0.55;
    z-index: 100;
    pointer-events: auto;
    user-select: all;
    transition: opacity 0.15s;
}
.wk-version:hover { opacity: 1; }

/* ---------- light palette overrides ---------- */
/* Anthropic-inspired: warm cream surface (not off-white), terracotta accent.
   Sampled from anthropic.com: the "淡淡橙黄" is the bg itself, not an overlay. */
[data-md-color-scheme="default"] {
    --md-default-bg-color:          #faf9f5;   /* Anthropic research off-white */
    --md-default-bg-color--light:   #f5f3eb;
    --md-default-bg-color--lighter: #efede3;
    --md-default-fg-color:          #1a1a1a;
    --md-default-fg-color--light:   #2a2a2a;
    --md-default-fg-color--lighter: #6a6a6a;
    --md-default-fg-color--lightest:#bdb9ab;

    --md-primary-fg-color:          #faf9f5;
    --md-primary-bg-color:          #1a1a1a;
    --md-primary-bg-color--light:   #3a3a3a;

    --md-accent-fg-color:           #cc785c;   /* terracotta */
    --md-accent-fg-color--transparent: rgba(204,120,92,0.12);

    --md-typeset-a-color:           #b45a3e;
    --md-code-bg-color:             #f1efe7;
    --md-code-fg-color:             #2a2a2a;
    --md-footer-bg-color:           #1a1a1a;
    --md-footer-bg-color--dark:     #111111;

    /* custom tokens */
    --wk-hairline: rgba(26,26,26,0.10);
    --wk-hairline-soft: rgba(26,26,26,0.05);
}

/* ---------- dark palette overrides ---------- */
[data-md-color-scheme="slate"] {
    --md-default-bg-color:          #191815;
    --md-default-bg-color--light:   #1f1e1a;
    --md-default-bg-color--lighter: #262521;
    --md-default-fg-color:          #f5f3eb;
    --md-default-fg-color--light:   #d5d0be;
    --md-default-fg-color--lighter: #908a7b;
    --md-default-fg-color--lightest:#4a4742;

    --md-primary-fg-color:          #0f0e0c;
    --md-primary-bg-color:          #f5f3eb;

    --md-accent-fg-color:           #e89677;   /* lighter terracotta */
    --md-accent-fg-color--transparent: rgba(232,150,119,0.14);

    --md-typeset-a-color:           #e89677;
    --md-code-bg-color:             #0f0e0c;
    --md-code-fg-color:             #e5e2d6;
    --md-footer-bg-color:           #0f0e0c;

    --wk-hairline: rgba(245,243,235,0.10);
    --wk-hairline-soft: rgba(245,243,235,0.05);
}

/* ---------- typography: serif headings, sans body ---------- */
:root {
    --wk-serif: "Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    font-family: var(--wk-serif);
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--md-default-fg-color);
}

.md-typeset h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5em;
}

.md-typeset h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
    padding-bottom: 0;
    border-bottom: none;
}

.md-typeset h3 {
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 0.9em;
    margin-bottom: 0.3em;
}

.md-typeset h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.8em;
    margin-bottom: 0.25em;
}

.md-typeset {
    font-size: 0.78rem;
    line-height: 1.55;
}

/* tighten paragraph + list spacing for higher info density */
.md-typeset p,
.md-typeset ul,
.md-typeset ol {
    margin: 0.4em 0;
}
.md-typeset li { margin-bottom: 0.1em; }
.md-typeset li > p { margin: 0.2em 0; }

/* code: keep monospace readable. body is 0.78rem (~12.5px) so fenced code
   at 0.92em ≈ 11.5px stays under body but still legible; inline matches. */
.md-typeset pre > code,
.md-typeset .highlight pre {
    font-size: 0.92em;
    line-height: 1.5;
}
.md-typeset code {
    font-size: 0.92em;
    padding: 0.08em 0.35em;
}
.md-typeset .admonition,
.md-typeset details {
    margin: 0.8em 0;
    padding: 0.35em 0.8em;
    font-size: 0.95em;
}
.md-typeset .admonition > p,
.md-typeset details > p {
    margin: 0.3em 0;
}

/* widen content column so the tighter typography breathes horizontally
   instead of piling vertical */
.md-grid { max-width: 68rem; }
.md-main__inner { margin-top: 0.8rem; }

/* mermaid + figures: center inside content column. With mermaid
   useMaxWidth:false, LR chains render at natural width — when they
   exceed content column, allow horizontal scroll instead of squashing
   into multi-row vertical layout. */
.md-typeset .mermaid,
.md-typeset figure {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
}
.md-typeset figure > svg,
.md-typeset figure > img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
/* mermaid SVG: natural-size; container handles overflow */
.md-typeset .mermaid > svg {
    display: inline-block;
    height: auto;
}

/* ---------- header / tabs: flat, hairline ---------- */
.md-header {
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    box-shadow: none;
    border-bottom: 1px solid var(--wk-hairline);
}
.md-header__title,
.md-header__topic {
    font-weight: 600;
}
.md-tabs {
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    border-bottom: 1px solid var(--wk-hairline-soft);
}
.md-tabs__link {
    opacity: 0.75;
}
.md-tabs__link--active,
.md-tabs__link:hover {
    opacity: 1;
    color: var(--md-default-fg-color);
}

/* ---------- remove card borders / shadows ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card,
.md-typeset .grid > * {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 1.4em 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--wk-hairline) !important;
    border-radius: 0 !important;
    transition: opacity 0.15s ease;
}
.md-typeset .grid.cards > ul > li:last-child,
.md-typeset .grid > .card:last-child {
    border-bottom: none !important;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.75;
}

/* tighten grid to single column when narrow, feel list-like */
.md-typeset .grid.cards > ul,
.md-typeset .grid {
    gap: 0 !important;
    display: block !important;
}

/* ---------- admonitions: flat, left-rule ---------- */
.md-typeset .admonition,
.md-typeset details {
    border: none;
    border-left: 2px solid var(--md-accent-fg-color);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 1em;
    font-size: 0.95em;
}
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
    background: transparent !important;
    border: none;
    /* leave room (~1.8em) for Material's absolute-positioned ::before icon
       — was 0 before and the icon overlapped the 'Note' text */
    padding: 0.4em 0.6em 0.4em 1.8em;
    font-weight: 600;
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
    background: var(--md-accent-fg-color) !important;
}

/* ---------- tables: minimal + compact ---------- */
.md-typeset table:not([class]) {
    border: none;
    border-collapse: collapse;
    font-size: 0.84em;
    line-height: 1.4;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
    padding: 0.35em 0.55em;
}
.md-typeset table:not([class]) th {
    background: transparent;
    border-bottom: 2px solid var(--md-default-fg-color);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.md-typeset table:not([class]) td {
    border: none;
    border-bottom: 1px solid var(--wk-hairline);
}

/* ---------- code: subtle ---------- */
.md-typeset pre {
    background: var(--md-code-bg-color);
    box-shadow: none;
    border-radius: 2px;
}
.md-typeset pre > code {
    border: none;
    font-size: 0.82em;
}
.md-typeset :not(pre) > code {
    padding: 0.1em 0.4em;
    background: var(--md-code-bg-color);
    color: var(--md-code-fg-color);
    border-radius: 2px;
    border: none;
    font-size: 0.85em;
}

/* ---------- links: faint underline, emphatic on hover ---------- */
.md-typeset a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
    border-bottom: 1px solid var(--md-accent-fg-color--transparent);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.md-typeset a:hover {
    color: var(--md-accent-fg-color);
    border-bottom-color: currentColor;
}

/* ---------- nav: understated ---------- */
.md-nav__title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-default-fg-color--lighter);
    font-weight: 600;
    padding-left: 0.6rem;
}
.md-nav__link {
    font-size: 0.81rem;
    margin: 0.3em 0;
}
.md-nav__item--active > .md-nav__link {
    color: var(--md-accent-fg-color);
    font-weight: 600;
}

/* ---------- search: flat ---------- */
.md-search__form {
    background: var(--wk-hairline-soft);
    box-shadow: none;
    border: none;
    border-radius: 2px;
}
.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background: var(--wk-hairline);
}

/* ---------- content width: reading-friendly ---------- */
.md-grid {
    max-width: 62rem;
}

/* ---------- footer: minimal, same palette ---------- */
.md-footer {
    background: transparent;
}
.md-footer-meta {
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color--lighter);
    border-top: 1px solid var(--wk-hairline);
    font-size: 0.75rem;
}
.md-footer-meta .md-footer-copyright,
.md-footer-meta a {
    opacity: 0.8;
}

/* ---------- selection ---------- */
::selection {
    background: var(--md-accent-fg-color);
    color: #fff;
}

/* ---------- hide Material's "Back to top" chrome subtlety ---------- */
.md-top {
    background: var(--md-default-bg-color);
    border: 1px solid var(--wk-hairline);
    color: var(--md-default-fg-color);
    box-shadow: none;
}
.md-top:hover {
    background: var(--md-default-bg-color--light);
}

/* ============================================================
   custom landing hero — Anthropic research mood
   light surface (matches body), near-black text, sans-first,
   typography-forward, zero decorative SVG/avatar/amber.
   Replaces the earlier dark teal-grey hero per walker 2026-04-24.
   ============================================================ */

.walker-hero {
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    padding: 6rem 2rem 4rem;
    /* full-width surface, but bg matches body so there's no visible band */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    display: flex;
    justify-content: center;
    text-align: left;
}

.walker-hero__inner {
    max-width: 44rem;
    width: 100%;
    padding: 0 1rem;
}

/* name — one serif across EN + ZH (Source Serif 4 + Noto Serif SC fallback).
   Dropped Instrument Serif italic so all headings + hero share one voice. */
.walker-hero__name {
    font-family: var(--wk-serif);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--md-default-fg-color);
}
.walker-hero__name-zh { font-weight: 500; }
.walker-hero__name-en {
    font-style: italic;
    font-weight: 400;
    color: var(--md-default-fg-color--light);
}
.walker-hero__name-sep {
    color: var(--md-default-fg-color--lighter);
    margin: 0 0.3em;
    font-weight: 300;
    font-style: normal;
}

/* thin terracotta rule */
.walker-hero__rule {
    width: 2rem;
    height: 1px;
    background: var(--md-accent-fg-color);
    margin: 1.25rem 0 2rem;
}

/* flowing bio paragraph — EN + CN, serif, Anthropic research body feel */
.walker-hero__bio {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--md-default-fg-color--light);
    margin: 0 0 1.4rem;
    max-width: 56ch;
}
.walker-hero__bio--en {
    font-family: var(--wk-serif);
    font-size: 1.02rem;
}
.walker-hero__bio--cn {
    font-family: var(--wk-serif);
    font-size: 0.98rem;
    color: var(--md-default-fg-color--light);
}

/* Moonshot redacted — on light bg, use the fg color as the block */
.walker-redacted {
    display: inline-block;
    background: var(--md-default-fg-color);
    color: transparent;
    user-select: none;
    -webkit-user-select: none;
    padding: 0 0.55em;
    font-family: monospace;
    letter-spacing: 0;
    text-decoration: none;
    border: none;
}
.walker-redacted::selection { background: var(--md-default-fg-color); color: var(--md-default-fg-color); }

/* nav — Anthropic-style underlined link row */
.walker-hero__nav {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
}
.walker-hero__nav a {
    color: var(--md-default-fg-color);
    text-decoration: none;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    padding-bottom: 2px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.walker-hero__nav a:hover {
    color: var(--md-accent-fg-color);
    border-bottom-color: var(--md-accent-fg-color);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    .walker-hero { padding: 4rem 1.5rem 3rem; }
    .walker-hero__inner { max-width: none; padding: 0; }
    .walker-hero__name { font-size: clamp(2rem, 8vw, 2.6rem); }
    .walker-hero__line { font-size: 0.93rem; gap: 0.5em 0.8em; }
    .walker-hero__label { min-width: auto; }
    .walker-hero__nav { font-size: 0.92rem; gap: 0.8rem 1.2rem; }
}

/* ============================================================
   studies TOC (gen_toc.py output) — strip pymdownx.details'
   admonition chrome so <summary> looks like a bullet link,
   just with a native disclosure triangle.
   ============================================================ */
.walker-toc details,
.walker-toc details[open] {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0.25em 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
}
.walker-toc details > summary {
    background: transparent !important;
    border: none !important;
    padding: 0.1em 0 0.1em 1.1em !important;
    margin: 0 !important;
    font-weight: 600;
    font-size: inherit;
    list-style: none;
    position: relative;
    cursor: pointer;
}
/* Material injects ::before (icon) and ::after (chevron) — hide both */
.walker-toc details > summary::before {
    display: none !important;
}
.walker-toc details > summary::after {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0.15em;
    font-size: 0.75em;
    color: var(--md-default-fg-color--lighter);
    transform: none !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    mask: none !important;
    -webkit-mask: none !important;
    transition: transform 0.12s ease;
}
.walker-toc details[open] > summary::after {
    content: "▾";
    top: 0.15em;
}
.walker-toc details > summary > a {
    color: var(--md-default-fg-color);
    text-decoration: none;
    border-bottom: none;
}
.walker-toc details[open] > summary > a,
.walker-toc details > summary:hover > a {
    color: var(--md-accent-fg-color);
}

/* bullets inside <details>: tight + normal weight */
.walker-toc details ul,
.walker-toc > ul {
    margin: 0.3em 0 0.3em 1.4em !important;
    padding: 0 !important;
}
.walker-toc li {
    font-weight: normal;
    line-height: 1.8;
}
.walker-toc li a {
    border-bottom: none;
}
.walker-toc li a:hover {
    border-bottom: 1px solid currentColor;
}