/* === Logo: dark-mode variant ===
   theme.logo is a single file, so swap the source in slate. Covers both the
   header button and the drawer title on small screens. */
[data-md-color-scheme="slate"] .md-logo img {
    content: url("assets/CL_Icon_dark.svg");
}

/* === Sidebar collapse toggle === */
.sidebar-toggle-btn {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 300;
    width: 26px;
    height: 34px;
    background: var(--md-default-bg-color);
    border: 1px solid var(--md-default-fg-color--light);
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--md-default-fg-color);
    font-size: 17px;
    line-height: 1;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: color 0.15s, box-shadow 0.15s;
}

.sidebar-toggle-btn:hover {
    color: var(--md-accent-fg-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


@media screen and (min-width: 76.25em) {
    .sidebar-toggle-btn {
        display: flex;
    }
}

body.nav-collapsed .md-sidebar--primary {
    display: none !important;
}

.MathJax {
    font-size: 1.1em !important;
}

/* === Integrated per-page TOC (toc.integrate) ===
   These are the IN-PAGE HEADINGS of the currently open page (injected into the
   left sidebar by toc.integrate), NOT navigable sub-pages. Style them as the
   ONLY italic entries in the nav so "italic == a section inside the open page"
   is an unambiguous signal — actual pages stay upright (set in mkdocs.yml).
   Muted + indented to read as subordinate to their parent page link. */
.md-sidebar--primary .md-nav--secondary .md-nav__link {
    font-size: 1.00em; /* DGF: changed from 0.85 */
    font-style: italic;
    color: var(--md-default-fg-color--light);
    padding-left: 0.1rem; /* DGF: changed from 1.4*/
    /* transparent by default so the active marker below costs no layout shift */
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

/* Scroll-spy: Material already tracks which heading is in view and marks its
   TOC entry .md-nav__link--active as you scroll. The muted rule above is more
   specific than Material's own active colour, so it was silently masking the
   highlight — restore it here (same specificity) with an accent bar so the
   current (sub)section is obvious at a glance. */
.md-sidebar--primary .md-nav--secondary .md-nav__link--active {
    color: var(--md-typeset-a-color);
    border-left-color: var(--md-typeset-a-color);
    font-weight: 700;
}

/* Added by DGF on June 15th 2026, to justify all text paragraphs in the website 	*/
.md-typeset p {
    text-align: justify;
}

/* === Native (Pygments) code blocks ===
   Material fills the background of every <code>; inside a <pre> that turns a
   fenced block into a grey slab. Revert it so blocks sit flat on the page
   background. (This started life as part of an "emgithub isolation" block that
   fought the unscoped hljs github.min.css; that stylesheet is gone from
   mkdocs.yml now, so what remains here is purely the flat-block look.) */
.highlight pre > code,
.md-typeset pre > code {
    background: revert;
}

/* Hide emgithub's "view raw" link (points to jsDelivr) — we inject our own via JS */
.emgithub-file .file-meta a[href*="cdn.jsdelivr.net"] {
    display: none;
}

/* === emgithub dark mode ===
   emgithub bakes its theme into each embed at build time (style=github in the
   <script> URL from hooks/resolve_emgithub.py): it fetches the *light* GitHub
   highlight.js theme, scopes it to .hljs-style-github, and tags the chrome with
   -light class variants. So the snippets stayed white when Material's palette
   toggle switched to slate. Repaint them here: tokens use the github-dark
   palette (highlight.js 11.6 github-dark.css), the surrounding chrome uses
   Material's own variables so the embeds match the natively-highlighted code
   blocks on the same page.

   These selectors are intentionally one class more specific than emgithub's
   scoped theme (.hljs-style-github .hljs-*) and than the unscoped github.min.css
   pulled in from mkdocs.yml — both are injected *after* extra.css, so equal
   specificity would lose. */

/* Frame, meta bar and copy button (emgithub emitted the -light variants) */
[data-md-color-scheme="slate"] .emgithub-file.emgithub-file-light {
    border-color: var(--md-default-fg-color--lightest);
    background-color: var(--md-code-bg-color);
}

[data-md-color-scheme="slate"] .emgithub-file .file-meta.file-meta-light {
    color: var(--md-default-fg-color--light);
    background-color: var(--md-default-fg-color--lightest);
    border-top-color: var(--md-default-fg-color--lightest);
}

[data-md-color-scheme="slate"] .emgithub-file .file-meta a {
    color: var(--md-typeset-a-color);
}

[data-md-color-scheme="slate"] .emgithub-file .code-area .copy-btn {
    color: var(--md-default-fg-color--light);
    background-color: var(--md-code-bg-color);
    border-color: var(--md-default-fg-color--lighter);
}

[data-md-color-scheme="slate"] .emgithub-file .code-area .copy-btn:hover {
    color: var(--md-code-bg-color);
    background-color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .emgithub-file .code-area .hljs-ln-numbers {
    color: var(--md-default-fg-color--lighter);
}

/* Syntax tokens: highlight.js "GitHub Dark" palette */
[data-md-color-scheme="slate"] .emgithub-file .code-area pre code.hljs {
    color: #c9d1d9;
    background: var(--md-code-bg-color);
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-doctag,
[data-md-color-scheme="slate"] .emgithub-file .hljs-keyword,
[data-md-color-scheme="slate"] .emgithub-file .hljs-meta .hljs-keyword,
[data-md-color-scheme="slate"] .emgithub-file .hljs-template-tag,
[data-md-color-scheme="slate"] .emgithub-file .hljs-template-variable,
[data-md-color-scheme="slate"] .emgithub-file .hljs-type,
[data-md-color-scheme="slate"] .emgithub-file .hljs-variable.language_ {
    color: #ff7b72;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-title,
[data-md-color-scheme="slate"] .emgithub-file .hljs-title.class_,
[data-md-color-scheme="slate"] .emgithub-file .hljs-title.class_.inherited__,
[data-md-color-scheme="slate"] .emgithub-file .hljs-title.function_ {
    color: #d2a8ff;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-attr,
[data-md-color-scheme="slate"] .emgithub-file .hljs-attribute,
[data-md-color-scheme="slate"] .emgithub-file .hljs-literal,
[data-md-color-scheme="slate"] .emgithub-file .hljs-meta,
[data-md-color-scheme="slate"] .emgithub-file .hljs-number,
[data-md-color-scheme="slate"] .emgithub-file .hljs-operator,
[data-md-color-scheme="slate"] .emgithub-file .hljs-selector-attr,
[data-md-color-scheme="slate"] .emgithub-file .hljs-selector-class,
[data-md-color-scheme="slate"] .emgithub-file .hljs-selector-id,
[data-md-color-scheme="slate"] .emgithub-file .hljs-variable {
    color: #79c0ff;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-meta .hljs-string,
[data-md-color-scheme="slate"] .emgithub-file .hljs-regexp,
[data-md-color-scheme="slate"] .emgithub-file .hljs-string {
    color: #a5d6ff;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-built_in,
[data-md-color-scheme="slate"] .emgithub-file .hljs-symbol {
    color: #ffa657;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-code,
[data-md-color-scheme="slate"] .emgithub-file .hljs-comment,
[data-md-color-scheme="slate"] .emgithub-file .hljs-formula {
    color: #8b949e;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-name,
[data-md-color-scheme="slate"] .emgithub-file .hljs-quote,
[data-md-color-scheme="slate"] .emgithub-file .hljs-selector-pseudo,
[data-md-color-scheme="slate"] .emgithub-file .hljs-selector-tag {
    color: #7ee787;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-subst,
[data-md-color-scheme="slate"] .emgithub-file .hljs-emphasis,
[data-md-color-scheme="slate"] .emgithub-file .hljs-strong {
    color: #c9d1d9;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-section {
    color: #1f6feb;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-bullet {
    color: #f2cc60;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}

[data-md-color-scheme="slate"] .emgithub-file .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}
/* === Sector color palette ===
   One accent color per physics sector, shared by the Home-page sector cards
   and the highlighted terms of the action equation. Slate (dark) scheme gets
   brighter variants for contrast. */
:root {
    --cl-scalar:  #3f51b5; /* scalar-scalar: indigo */
    --cl-u1:      #00897b; /* U(1) scalar-gauge: teal */
    --cl-su2:     #8e24aa; /* SU(2) scalar-gauge: purple */
    --cl-alp:     #ef6c00; /* axion-gauge: orange */
    --cl-nmc:     #c2185b; /* non-minimal gravity: pink */
    --cl-defects: #6d4c41; /* cosmic defects: brown */
    --cl-gw:      #0288d1; /* gravitational waves: light blue */
    --cl-dims:    #43a047; /* scalars in (1+n)-dimensions: green */
    --cl-upcoming: #78909c; /* upcoming features: muted blue-grey */
}

[data-md-color-scheme="slate"] {
    --cl-scalar:  #7986cb;
    --cl-u1:      #4db6ac;
    --cl-su2:     #ba68c8;
    --cl-alp:     #ffb74d;
    --cl-nmc:     #f06292;
    --cl-defects: #a1887f;
    --cl-gw:      #4fc3f7;
    --cl-dims:    #81c784;
    --cl-upcoming: #90a4ae;
}

/* === Sector-colored terms in the action equation ===
   Applied through MathJax's \class{...}{...} in the LaTeX source of CL.md;
   colors match the sector cards below. */
.cl-eq-scalar                    { --cl-accent: var(--cl-scalar); }
.cl-eq-u1-kin, .cl-eq-u1-gauge   { --cl-accent: var(--cl-u1); }
.cl-eq-su2-kin, .cl-eq-su2-gauge { --cl-accent: var(--cl-su2); }
.cl-eq-alp-kin, .cl-eq-alp-coup  { --cl-accent: var(--cl-alp); }
.cl-eq-nmc-kin, .cl-eq-nmc-coup  { --cl-accent: var(--cl-nmc); }

/* The MathJax-generated elements carry exactly one class, so a prefix
   selector covers every boxed term without listing all nine classes. */
[class^="cl-eq-"] {
    position: relative;
    cursor: pointer;
    border: 1.5px solid var(--cl-accent);
    border-radius: 0.3em;
    padding: 0.15em 0.15em 0.1em;
    background: color-mix(in srgb, var(--cl-accent) 6%, transparent);
}

[class^="cl-eq-"]:hover {
    background: color-mix(in srgb, var(--cl-accent) 16%, transparent);
}

/* Small bold sector label sitting on top of each box */
[class^="cl-eq-"]::before {
    position: absolute;
    top: -1.45em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cl-accent);
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}
.cl-eq-scalar::before    { content: "Singlet scalars"; }
.cl-eq-u1-kin::before    { content: "Complex scalars"; }
.cl-eq-u1-gauge::before  { content: "U(1) gauge flds"; }
.cl-eq-su2-kin::before   { content: "Doublet scalars"; }
.cl-eq-su2-gauge::before { content: "SU(2) gauge fld"; }
.cl-eq-alp-kin::before   { content: "Axion(s)"; }
.cl-eq-alp-coup::before  { content: "Axion-like coupling"; }
.cl-eq-nmc-coup::before  { content: "Gravitational NMC"; }
.cl-eq-nmc-kin::before { content: "NMC scalars";}
    /* two lines: \A is a forced line break, needs white-space: pre */
/*     content: "non-minimally coupled\A (NMC) scalars"; 
     white-space: pre; 
     line-height: 1.15; 
     top: -2.6em; 
 }*/ 

/* The equation container clips content that sticks out above the math
   (Material makes mjx-container horizontally scrollable). Give the action
   equation enough top padding for the two-line label to fit inside. */
.md-typeset mjx-container:has(.cl-eq-nmc-kin) {
    padding-top: 1.5em;
}

/* Tooltip under the hovered box, naming the sector + where the click goes */
[class^="cl-eq-"]:hover::after {
    position: absolute;
    top: calc(100% + 0.55em);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.55em;
    font-weight: 400;
    background: var(--cl-accent);
    color: var(--md-default-bg-color);
    padding: 0.45em 0.9em;
    border-radius: 0.5em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 10;
    pointer-events: none;
}
.cl-eq-scalar:hover::after { content: "Scalar–Scalar Interactions · User Manual →"; }
.cl-eq-u1-kin:hover::after, .cl-eq-u1-gauge:hover::after {
    content: "Abelian U(1) Scalar–Gauge Interactions · User Manual →";
}
.cl-eq-su2-kin:hover::after, .cl-eq-su2-gauge:hover::after {
    content: "Non-Abelian SU(2) Scalar–Gauge Interactions · User Manual →";
}
.cl-eq-alp-kin:hover::after, .cl-eq-alp-coup:hover::after {
    content: "Axion–Gauge Interactions · User Manual →";
}
.cl-eq-nmc-kin:hover::after, .cl-eq-nmc-coup:hover::after {
    content: "Non-Minimal Couplings to Gravity · User Manual →";
}

/* === Gravitational-wave equation panel ===
   The GW evolution + source equations are boxed as a whole: the LaTeX tags
   the math with the invisible marker \class{cl-gw-mark}{...} (deliberately
   NOT prefixed cl-eq-, so the per-term box styles don't apply), and the panel
   is drawn on the surrounding MathJax container. The container clips content
   outside it (it scrolls horizontally), so label and tooltip sit inside. */
.md-typeset mjx-container:has(.cl-gw-mark) {
    position: relative;
    cursor: pointer;
    border: 1.5px solid var(--cl-gw);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cl-gw) 5%, transparent);
    padding: 1.7em 0.6em 1.9em;
}

.md-typeset mjx-container:has(.cl-gw-mark):hover {
    background: color-mix(in srgb, var(--cl-gw) 12%, transparent);
}

.md-typeset mjx-container:has(.cl-gw-mark)::before {
    content: "Gravitational Waves";
    position: absolute;
    top: 0.55em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cl-gw);
    white-space: nowrap;
    pointer-events: none;
}

.md-typeset mjx-container:has(.cl-gw-mark):hover::after {
    content: "Gravitational Waves · User Manual →";
    position: absolute;
    bottom: 0.55em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.6em;
    font-weight: 400;
    background: var(--cl-gw);
    color: var(--md-default-bg-color);
    padding: 0.45em 0.9em;
    border-radius: 0.5em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 10;
    pointer-events: none;
}

/* === Sector cards on the Home page ===
   Colored, fully-clickable boxes for the matter/gauge sectors, each linking to
   its user-manual section. Built on Material's "grid cards" (attr_list +
   md_in_html); per-card accent colors are assigned by position below. */
.md-typeset .grid.cl-sectors > ul > li {
    position: relative;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-top: 4px solid var(--cl-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cl-accent) 5%, var(--md-default-bg-color));
    transition: transform 0.15s, box-shadow 0.15s;
}

.md-typeset .grid.cl-sectors > ul > li:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Card title picks up the accent color */
.md-typeset .grid.cl-sectors > ul > li > p:first-child strong {
    color: var(--cl-accent);
}

/* The "User Manual →" link stretches invisibly over the whole card,
   making the entire box clickable. */
.md-typeset .grid.cl-sectors > ul > li > p:last-child > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.md-typeset .grid.cl-sectors > ul > li > p:last-child > a {
    font-weight: 700;
    color: var(--cl-accent);
}

/* Per-card accent colors (order must match the card order in CL.md) */
.md-typeset .grid.cl-sectors > ul > li:nth-child(1) { --cl-accent: var(--cl-scalar); }
.md-typeset .grid.cl-sectors > ul > li:nth-child(2) { --cl-accent: var(--cl-u1); }
.md-typeset .grid.cl-sectors > ul > li:nth-child(3) { --cl-accent: var(--cl-su2); }
.md-typeset .grid.cl-sectors > ul > li:nth-child(4) { --cl-accent: var(--cl-alp); }
.md-typeset .grid.cl-sectors > ul > li:nth-child(5) { --cl-accent: var(--cl-nmc); }
.md-typeset .grid.cl-sectors > ul > li:nth-child(6) { --cl-accent: var(--cl-defects); }
.md-typeset .grid.cl-sectors > ul > li:nth-child(7) { --cl-accent: var(--cl-gw); }

/* === "At a glance" fact chips ===
   Compact highlight strip under the sector cards in Features & Capabilities.
   Kept neutral on purpose: on this page color always means a physics sector. */
.md-typeset .cl-facts {
    margin: 1.2em 0 0.4em;
}

/* Override the site-wide justified paragraphs, which would stretch the
   chip row across the full line width. */
.md-typeset .cl-facts p {
    text-align: left;
}

.md-typeset .cl-fact {
    display: inline-block;
    margin: 0.2em 0.25em 0.2em 0;
    padding: 0.3em 0.85em;
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 2em;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--md-default-fg-color--light);
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
    white-space: nowrap;
}

.md-typeset .cl-fact:hover {
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-fg-color);
}

/* When a fact chip trails a claim paragraph, keep it on its own baseline
   with a little breathing room above. */
.md-typeset .cl-claim p.cl-fact-row {
    margin-top: 0.7em;
}

/* === Paragraph mini-titles ===
   Bold run-in titles above long paragraphs ({: .cl-minihead } in the
   Markdown). Deliberately plain paragraphs, not headings, so they stay out
   of the sidebar TOC. */
.md-typeset p.cl-minihead {
    margin: 1.8em 0 0.4em;
    font-size: 1.12em;
    text-align: left;
}

.md-typeset p.cl-minihead + p {
    margin-top: 0.4em;
}

/* === Full-width claim blocks (Home page, Manual introduction) ===
   The prose of "Features & Capabilities" and "What makes CL different?" on
   the Home page, and of "Capabilities and structure" in the Manual's
   introduction: each block is a <div class="cl-claim" markdown> holding a mini-title
   (restyled as a small eyebrow label) plus its full paragraph, always
   visible at full line measure behind a thin left rule. No fold, no JS.
   Kept neutral on purpose: on this page color always means a physics
   sector. */
.md-typeset .cl-claim {
    margin: 1.7em 0;
    padding-left: 1.1em;
    border-left: 2px solid var(--md-default-fg-color--lightest);
}

.md-typeset .cl-claim p.cl-minihead {
    margin: 0 0 0.45em;
    font-size: 0.74em;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
}

.md-typeset .cl-claim p {
    margin: 0;
}

.md-typeset .cl-claim p + p {
    margin-top: 0.7em;
}

/* === Upcoming-feature cards ===
   Same card language as the sector grid, but uniformly grayed out: one muted
   accent, no links (these features have no manual chapter yet), no hover
   lift. A small "in development" tag replaces the "User Manual" link. */
.md-typeset .grid.cl-upcoming > ul > li {
    position: relative;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-top: 4px solid var(--cl-upcoming);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cl-upcoming) 4%, var(--md-default-bg-color));
    color: var(--md-default-fg-color--light);
}

.md-typeset .grid.cl-upcoming > ul > li strong {
    color: var(--cl-upcoming);
}

/* These cards go nowhere, so they must not behave like something clickable:
   kill Material's .grid.cards hover border/shadow/transition and keep the
   default cursor. */
.md-typeset .grid.cl-upcoming > ul > li,
.md-typeset .grid.cl-upcoming > ul > li:hover,
.md-typeset .grid.cl-upcoming > ul > li:focus-within {
    cursor: default;
    transform: none;
    transition: none;
    box-shadow: none;
    border-color: var(--md-default-fg-color--lightest);
    border-top-color: var(--cl-upcoming);
}

.md-typeset .grid.cl-upcoming > ul > li::after {
    content: "in development";
    position: absolute;
    top: 0.6em;
    right: 0.8em;
    font-size: 0.62em;
    font-style: italic;
    color: var(--md-default-fg-color--lighter);
}

/* === Prose-card grids ===
   Mini-titled paragraph trios (used on the Manual's introduction pages;
   the Home page now uses the full-width .cl-claim blocks above) wrapped in
   <div class="cl-prose-grid" markdown> holding one
   <div class="cl-prose-card" markdown> per minihead + paragraph pair.
   javascripts/prose-fold.js activates the grid by adding .cl-managed: three
   columns of cards, each showing its mini-title plus its full, untouched text.
   With JS disabled — and in print — the cards simply stack as the plain
   full-width prose they contain. Cards stay neutral on purpose: on this page
   color always means a physics sector. */
.md-typeset .cl-prose-grid.cl-managed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
    margin: 1.2em 0;
}

.md-typeset .cl-prose-grid.cl-managed .cl-prose-card {
    --cl-card-bg: color-mix(in srgb, var(--md-default-fg-color) 2.5%, var(--md-default-bg-color));
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.9em 1em 0.6em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    background: var(--cl-card-bg);
}

/* The mini-titles double as card headers */
.md-typeset .cl-prose-grid.cl-managed .cl-prose-card p.cl-minihead {
    margin: 0 0 0.5em;
    font-size: 1em;
    line-height: 1.35;
}

/* Card body: full text, left-aligned (the column is too narrow for justified
   text, which would make rivers) */
.md-typeset .cl-prose-grid.cl-managed .cl-prose-card p:not(.cl-minihead) {
    margin: 0 0 0.7em;
    text-align: left;
}

/* Toggle pill pinned to the card bottom, same family as the .cl-fact chips */
.md-typeset .cl-prose-toggle {
    display: block;
    align-self: center;
    margin-top: auto;
    padding: 0.28em 1em;
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 2em;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--md-default-fg-color--light);
    background: transparent;
    cursor: pointer;
}

.md-typeset .cl-prose-toggle:hover {
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-fg-color);
}

.md-typeset .cl-prose-toggle .cl-prose-chevron {
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.55em;
    margin-bottom: 0.15em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.md-typeset .cl-prose-toggle[aria-expanded="true"] .cl-prose-chevron {
    transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

/* Keep the 3-column row alive under heavy zoom / narrow windows by first
   tightening the gaps; only true phone widths stack to a single column */
@media screen and (max-width: 44.9375em) {
    .md-typeset .cl-prose-grid.cl-managed,
    .md-typeset .cl-art-grid {
        gap: 0.45rem;
    }
    .md-typeset .cl-prose-grid.cl-managed .cl-prose-card {
        padding: 0.7em 0.75em 0.5em;
    }
}

@media screen and (max-width: 37.4375em) {
    .md-typeset .cl-prose-grid.cl-managed,
    .md-typeset .cl-art-grid {
        grid-template-columns: 1fr;
    }
}

/* === Manual landing: "The Art" monograph cards ===
   The three parts of the monographic series as a compact 3-column strip;
   text untouched, the nickname tag is drawn by CSS. */
.md-typeset .cl-art-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 1em 0;
}

.md-typeset .cl-art-grid .cl-art-card {
    position: relative;
    margin: 0;
    padding: 2em 1em 0.8em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-default-fg-color) 2.5%, var(--md-default-bg-color));
}

.md-typeset .cl-art-grid .cl-art-card::before {
    position: absolute;
    top: 0.7em;
    left: 1em;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--md-accent-fg-color);
}

.md-typeset .cl-art-grid .cl-art-card:nth-child(1)::before { content: "The Art — I"; }
.md-typeset .cl-art-grid .cl-art-card:nth-child(2)::before { content: "The Art — II"; }
.md-typeset .cl-art-grid .cl-art-card:nth-child(3)::before { content: "The Art — III"; }

.md-typeset .cl-art-grid .cl-art-card p {
    margin: 0;
    text-align: left;
}

/* === Sector accent hooks ===
   .cl-ch-<sector> loads the sector's color into --cl-accent for whatever
   component it sits on (manual contents rail, chapter map tiles, ...).
   Chapters without a sector class stay neutral on purpose. */
.md-typeset .cl-ch-scalar  { --cl-accent: var(--cl-scalar); }
.md-typeset .cl-ch-u1      { --cl-accent: var(--cl-u1); }
.md-typeset .cl-ch-su2     { --cl-accent: var(--cl-su2); }
.md-typeset .cl-ch-alp     { --cl-accent: var(--cl-alp); }
.md-typeset .cl-ch-nmc     { --cl-accent: var(--cl-nmc); }
.md-typeset .cl-ch-defects { --cl-accent: var(--cl-defects); }
.md-typeset .cl-ch-gw      { --cl-accent: var(--cl-gw); }

/* === Manual landing: contents rail ===
   The chapter list as a compact table of contents: one .cl-toc-row per
   chapter holding a one-line summary (p.cl-toc-line: numbered title link +
   brief + version chip) followed by the full, untouched chapter description.
   prose-fold.js adds .cl-managed to the .cl-toc wrapper and collapses each
   row to its line; clicking a row (or its chevron) reveals the description
   underneath. With JS disabled — and in print — rows render as plain
   title + paragraph prose. Small .cl-toc-group eyebrow labels split the
   rail into reading stages; numbering runs through them. */
.md-typeset .cl-toc {
    counter-reset: cl-chapter;
    margin: 1.2em 0 1.6em;
}

.md-typeset .cl-toc p.cl-toc-group {
    margin: 1.5em 0 0.15em;
    padding-left: calc(2.3em + 3px); /* align with the row content edge */
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: var(--md-default-fg-color--lighter);
}

.md-typeset .cl-toc p.cl-toc-group:first-of-type {
    margin-top: 0;
}

/* "Expand all" master toggle at the rail's top right (added by
   prose-fold.js, so it never renders without the folding behavior) */
.md-typeset .cl-toc .cl-prose-toggle.cl-toc-master {
    margin: 0 0 0.7em auto;
}

.md-typeset .cl-toc .cl-toc-row {
    position: relative;
    counter-increment: cl-chapter;
    margin: 0;
    padding: 0.55em 1.9em 0.55em 2.3em; /* right gutter hosts the chevron */
    border-left: 3px solid var(--cl-accent, var(--md-default-fg-color--lightest));
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* The one-line summary: number | title | brief ... version chip | chevron */
.md-typeset .cl-toc p.cl-toc-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.55em;
    row-gap: 0.1em;
    margin: 0;
    text-align: left;
}

.md-typeset .cl-toc p.cl-toc-line::before {
    content: counter(cl-chapter);
    position: absolute;
    left: 0.8em;
    margin-top: 0.2em;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.68em;
    font-weight: 700;
    color: var(--md-default-fg-color--lighter);
}

.md-typeset .cl-toc p.cl-toc-line a {
    color: var(--cl-accent, var(--md-typeset-a-color));
}

/* The brief shares the line with the title when there is room, and drops
   to its own full-width line (aligned under the title) when there is not —
   the generous flex-basis is what forces the clean drop. */
.md-typeset .cl-toc .cl-toc-brief {
    flex: 1 1 16em;
    font-size: 0.78em;
    color: var(--md-default-fg-color--light);
}

/* Version chip at the line's right edge (content set per .cl-v-* class) */
.md-typeset .cl-toc p.cl-toc-line::after {
    order: 98;
    margin-left: auto;
    align-self: center;
    font-size: 0.6em;
    font-style: italic;
    white-space: nowrap;
    color: var(--md-default-fg-color--lighter);
}

.md-typeset .cl-toc .cl-v-all p.cl-toc-line::after { content: "all versions"; }
.md-typeset .cl-toc .cl-v-20 p.cl-toc-line::after  { content: "requires v2.0+"; }
.md-typeset .cl-toc .cl-v-20r p.cl-toc-line::after { content: "v2.0+ recommended"; }

/* The full chapter description under the line */
.md-typeset .cl-toc .cl-toc-row > p:not(.cl-toc-line) {
    margin: 0.5em 0 0.6em;
    text-align: left;
}

/* JS active: rows collapse to their summary line */
.md-typeset .cl-toc.cl-managed .cl-toc-row > :not(.cl-toc-line) {
    display: none;
}

.md-typeset .cl-toc.cl-managed .cl-toc-row.cl-open > :not(.cl-toc-line) {
    display: block;
}

.md-typeset .cl-toc.cl-managed .cl-toc-row:not(.cl-open) {
    cursor: pointer;
}

.md-typeset .cl-toc.cl-managed .cl-toc-row:not(.cl-open):hover {
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
}

.md-typeset .cl-toc.cl-managed .cl-toc-row.cl-open {
    background: color-mix(in srgb, var(--md-default-fg-color) 2%, transparent);
}

/* Chevron toggle appended to the line by prose-fold.js; pinned to the
   row's right gutter so it never disturbs the line's flex wrapping. */
.md-typeset .cl-toc-toggle {
    position: absolute;
    top: 0.5em;
    right: 0.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--md-default-fg-color--lighter);
    cursor: pointer;
}

.md-typeset .cl-toc-toggle:hover {
    color: var(--md-accent-fg-color);
}

.md-typeset .cl-toc-toggle:focus-visible {
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: 2px;
}

.md-typeset .cl-toc-toggle .cl-prose-chevron {
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.md-typeset .cl-toc-toggle[aria-expanded="true"] .cl-prose-chevron {
    transform: rotate(-135deg);
}

@media screen and (max-width: 44.9375em) {
    .md-typeset .cl-toc .cl-toc-row {
        padding-left: 1.9em;
    }
    .md-typeset .cl-toc p.cl-toc-group {
        padding-left: calc(1.9em + 3px);
    }
    .md-typeset .cl-toc p.cl-toc-line::before {
        left: 0.6em;
    }
}

@media print {
    .md-typeset .cl-toc.cl-managed .cl-toc-row > :not(.cl-toc-line) {
        display: block;
    }
    .md-typeset .cl-toc-toggle {
        display: none;
    }
}

/* Print: plain stacked prose, no masking, no controls */
@media print {
    .md-typeset .cl-prose-grid.cl-managed {
        display: block;
    }
    .md-typeset .cl-prose-toggle {
        display: none;
    }
}

/* === Sector chips (Manual introduction) ===
   The capability and upcoming-feature lists rendered as wrapping pills, each
   in its sector color (the .cl-chip-upcoming ones stay muted, no link). */
.md-typeset .cl-sector-chips {
    margin: 0.8em 0 1em;
}

.md-typeset .cl-sector-chips p {
    text-align: left;
    margin: 0;
}

.md-typeset .cl-sector-chips .cl-chip {
    display: inline-block;
    margin: 0.22em 0.28em 0.22em 0;
    padding: 0.3em 0.9em;
    border: 1px solid var(--cl-accent, var(--md-default-fg-color--lighter));
    border-radius: 2em;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--cl-accent, var(--md-default-fg-color--light));
    background: color-mix(in srgb, var(--cl-accent, var(--md-default-fg-color)) 6%, transparent);
}

.md-typeset a.cl-chip:hover {
    background: color-mix(in srgb, var(--cl-accent, var(--md-default-fg-color)) 16%, transparent);
    color: var(--cl-accent, var(--md-default-fg-color));
}

.md-typeset .cl-sector-chips .cl-chip-scalar  { --cl-accent: var(--cl-scalar); }
.md-typeset .cl-sector-chips .cl-chip-u1      { --cl-accent: var(--cl-u1); }
.md-typeset .cl-sector-chips .cl-chip-su2     { --cl-accent: var(--cl-su2); }
.md-typeset .cl-sector-chips .cl-chip-alp     { --cl-accent: var(--cl-alp); }
.md-typeset .cl-sector-chips .cl-chip-nmc     { --cl-accent: var(--cl-nmc); }
.md-typeset .cl-sector-chips .cl-chip-defects { --cl-accent: var(--cl-defects); }
.md-typeset .cl-sector-chips .cl-chip-gw      { --cl-accent: var(--cl-gw); }
.md-typeset .cl-sector-chips .cl-chip-upcoming { --cl-accent: var(--cl-upcoming); }

/* === Single-paragraph folds ===
   Long reference/literature paragraphs tagged {: .cl-fold } collapse to a
   short faded preview with a centered pill (prose-fold.js adds .cl-managed;
   no JS or print = full text, same as the cards). */
.md-typeset p.cl-fold.cl-managed:not(.cl-open) {
    position: relative;
    max-height: 6.4em;
    overflow: hidden;
    cursor: pointer;
}

.md-typeset p.cl-fold.cl-managed:not(.cl-open)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--md-default-bg-color) 92%);
    pointer-events: none;
}

.md-typeset .cl-prose-toggle.cl-fold-toggle {
    margin: 0.4em auto 1.2em;
}

@media print {
    .md-typeset p.cl-fold.cl-managed:not(.cl-open) {
        max-height: none;
        cursor: auto;
    }
    .md-typeset p.cl-fold.cl-managed:not(.cl-open)::after,
    .md-typeset .cl-fold-toggle {
        display: none;
    }
}

/* === Sector tags on manual equations ===
   Small colored labels over individual equations of the EOM block in the
   manual introduction (same look as the Home action-equation labels, but
   plain: no boxes, no links). Named cl-tag-* on purpose — the cl-eq-*
   prefix would inherit the Home page's boxed/tooltip styling. */
[class^="cl-tag-"] {
    position: relative;
}

[class^="cl-tag-"]::before {
    position: absolute;
    top: -1.35em;
    left: 0;
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cl-accent);
    white-space: nowrap;
    pointer-events: none;
}

.cl-tag-scalar { --cl-accent: var(--cl-scalar); }
.cl-tag-u1s,
.cl-tag-u1g    { --cl-accent: var(--cl-u1); }
.cl-tag-su2s,
.cl-tag-su2g   { --cl-accent: var(--cl-su2); }

.cl-tag-scalar::before { content: "scalar"; }
.cl-tag-u1s::before    { content: "U(1) scalar"; }
.cl-tag-su2s::before   { content: "SU(2) doublet"; }
.cl-tag-u1g::before    { content: "U(1) gauge"; }
.cl-tag-su2g::before   { content: "SU(2) gauge"; }

/* Room inside the (scrollable) math container for the first row's label */
.md-typeset mjx-container:has([class^="cl-tag-"]) {
    padding-top: 1.4em;
}

/* === Labeled equation panels (manual introduction) ===
   Neutral boxed panels — like the GW panel on Home, but non-interactive —
   drawn around the constraint/expansion equations via invisible cl-panel-*
   markers in the LaTeX. */
.md-typeset mjx-container:has([class^="cl-panel-"]) {
    position: relative;
    border: 1.5px solid var(--md-default-fg-color--lighter);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
    padding: 1.9em 0.6em 0.9em;
}

.md-typeset mjx-container:has([class^="cl-panel-"])::before {
    position: absolute;
    top: 0.6em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--md-default-fg-color--light);
    white-space: nowrap;
    pointer-events: none;
}

.md-typeset mjx-container:has(.cl-panel-gauss)::before     { content: "Gauss constraints"; }
.md-typeset mjx-container:has(.cl-panel-friedmann)::before { content: "self-consistent expansion"; }
.md-typeset mjx-container:has(.cl-panel-hubble)::before    { content: "Hubble constraint"; }
.md-typeset mjx-container:has(.cl-panel-fixed)::before     { content: "fixed-background expansion"; }

/* === Linked folder tree (manual introduction) ===
   Interactive replacement for the LaTeX folder-tree figure: CSS connector
   lines, one pill per node linking to the file/folder on GitHub. Dashed
   nodes are locally generated build artifacts; accent pills link out to the
   external dependency repositories. */
.md-typeset .cl-tree {
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.72rem;
    margin: 0.8em 0 0.3em;
    overflow-x: auto;
}

/* Horizontal (left-to-right) layout, mirroring the brace diagram it
   replaces: each node's children stack in a column to its right, the parent
   pill vertically centered on that column. Connector geometry: a stub from
   the parent pill to a vertical rail, and one horizontal branch from the
   rail into each child. */
.md-typeset .cl-tree ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.md-typeset .cl-tree li {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 !important;
    padding: 0.18em 0;
}

.md-typeset .cl-tree li > ul {
    position: relative;
    margin-left: 2rem !important;
    flex: none;
}

/* stub leaving the parent pill, at the children-column center */
.md-typeset .cl-tree li > ul::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: 50%;
    width: 1rem;
    border-top: 1.5px solid var(--md-default-fg-color--lighter);
}

/* horizontal branch from the rail into each child */
.md-typeset .cl-tree ul ul > li::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 1rem;
    border-top: 1.5px solid var(--md-default-fg-color--lighter);
}

/* vertical rail: per-child segments, trimmed at the first and last child */
.md-typeset .cl-tree ul ul > li::after {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    border-left: 1.5px solid var(--md-default-fg-color--lighter);
}

.md-typeset .cl-tree ul ul > li:first-child::after {
    top: 50%;
}

.md-typeset .cl-tree ul ul > li:last-child::after {
    bottom: 50%;
}

.md-typeset .cl-tree ul ul > li:only-child::after {
    display: none;
}

.md-typeset .cl-tree .cl-tnode {
    display: inline-block;
    padding: 0.02em 0.55em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.7em;
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
    color: var(--md-default-fg-color);
}

.md-typeset a.cl-tnode:hover {
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-fg-color);
    background: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent);
}

.md-typeset .cl-tree .cl-tnode-root {
    font-weight: 700;
    background: var(--md-accent-fg-color);
    border-color: var(--md-accent-fg-color);
    color: var(--md-default-bg-color);
}

.md-typeset a.cl-tnode-root:hover {
    color: var(--md-default-bg-color);
    opacity: 0.85;
}

.md-typeset .cl-tree .cl-tnode-dir {
    font-weight: 700;
}

.md-typeset .cl-tree .cl-tnode-file {
    background: transparent;
    border-color: transparent;
    color: var(--md-default-fg-color--light);
}

.md-typeset .cl-tree .cl-tnode-ext {
    border-color: color-mix(in srgb, var(--md-accent-fg-color) 45%, transparent);
    background: color-mix(in srgb, var(--md-accent-fg-color) 6%, transparent);
    color: var(--md-accent-fg-color);
}

.md-typeset .cl-tree .cl-tnode-ext::after {
    content: " \2197";
    font-size: 0.85em;
}

.md-typeset .cl-tree .cl-tnode-gen {
    border-style: dashed;
    background: transparent;
    color: var(--md-default-fg-color--lighter);
}

.md-typeset .cl-tree-hint {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--md-default-fg-color--light);
    text-align: left;
}

/* === Citations (javascripts/citations.js) ===
   Runs of 3+ citation superscripts collapse into one "[49–56]" chip; the
   page-bottom bibliography sits open under a static "References (N)" header
   as a compact two-column list. No JS = stock footnote rendering. */
.md-typeset .cl-cite-group:not(.cl-open) sup {
    display: none;
}

.md-typeset .cl-cite-toggle {
    padding: 0 0.5em 0.05em;
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 2em;
    background: transparent;
    font-size: 0.62em;
    font-weight: 600;
    color: var(--md-default-fg-color--light);
    vertical-align: super;
    cursor: pointer;
}

.md-typeset .cl-cite-toggle:hover {
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-fg-color);
}

.md-typeset .cl-cite-group.cl-open .cl-cite-toggle {
    margin-right: 0.2em;
}

/* Adjacent citation numbers render glued together ("34" for refs 3 and 4);
   space out every consecutive pair — ungrouped short runs and expanded
   chips alike. */
.md-typeset sup:has(> a.footnote-ref) + sup:has(> a.footnote-ref) {
    margin-left: 0.25em;
}

/* The "References (N)" header, same design family as the collapsible notes */
.md-typeset .cl-bib-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 2em 0 0;
    padding: 0.55em 1em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
    font-weight: 700;
    color: var(--md-default-fg-color--light);
    text-align: left;
}

/* Compact two-column list, the header already separates it */
.md-typeset .footnote.cl-bib > hr {
    display: none;
}

.md-typeset .footnote.cl-bib > ol {
    columns: 2;
    column-gap: 2.2rem;
    margin-top: 0.8em;
}

.md-typeset .footnote.cl-bib > ol > li {
    break-inside: avoid;
    margin-bottom: 0.7em;
}

/* Bibliography typography: left-aligned (justify makes rivers in narrow
   columns), muted, tight */
.md-typeset .footnote.cl-bib p {
    text-align: left;
    color: var(--md-default-fg-color--light);
    margin: 0 0 0.2em;
}

/* arXiv / DOI links as small chips (classes added by citations.js); the
   .md-tooltip2 scope styles the cloned copy inside citation hover tooltips */
.md-tooltip2 .cl-ref-chip,
.md-typeset .footnote .cl-ref-chip {
    display: inline-block;
    padding: 0 0.55em;
    border: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
    border-radius: 2em;
    background: color-mix(in srgb, var(--md-accent-fg-color) 5%, transparent);
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.86em;
    line-height: 1.6;
    color: var(--md-accent-fg-color);
}

.md-tooltip2 .cl-ref-chip:hover,
.md-typeset .footnote .cl-ref-chip:hover {
    background: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
}

@media screen and (max-width: 44.9375em) {
    .md-typeset .footnote.cl-bib > ol {
        columns: 1;
    }
}

/* Print: every citation number visible, chip controls hidden */
@media print {
    .md-typeset .cl-cite-group:not(.cl-open) sup {
        display: inline;
    }
    .md-typeset .cl-cite-toggle {
        display: none;
    }
}

/* === Manual call-to-action banner ===
   Full-width, deliberately visible strip after the GW equations of the
   Nutshell section: the public-availability sentence plus buttons to the
   manual and the installation page. Accent-colored buttons (site accent =
   interactive), neutral box, so it does not read as a physics-sector
   element. */
.md-typeset .cl-manual-banner {
    margin: 1.4em 0 1.6em;
    padding: 0.9em 1.4em 1em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    text-align: center;
}

.md-typeset .cl-manual-banner p {
    margin: 0 0 0.55em;
    text-align: center;
}

.md-typeset .cl-manual-banner p:last-child {
    margin-bottom: 0;
}

.md-typeset .cl-manual-banner .cl-manual-link {
    display: inline-block;
    padding: 0.32em 1.2em;
    border: 1px solid var(--md-accent-fg-color);
    border-radius: 2em;
    font-weight: 700;
}

.md-typeset .cl-manual-banner .cl-manual-link:hover {
    background: color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent);
}

/* Side-by-side buttons: breathing room between them, and between them and
   the sentence above when they wrap on narrow screens */
.md-typeset .cl-manual-banner .cl-manual-link + .cl-manual-link {
    margin-left: 0.7em;
}

.md-typeset .cl-manual-banner .cl-manual-link {
    margin-top: 0.15em;
}

/* === Embedded Streamlit input-file builder === */
.inputgen-frame {
    width: 100%;
    height: 92vh;
    min-height: 1000px;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 6px;
}

/* Let the input-builder page use the full content width (override the
   theme's narrow text column) so the embedded app has more room. */
.md-content:has(.inputgen-frame) {
    max-width: none;
}
.md-content:has(.inputgen-frame) .md-grid {
    max-width: none;
}

/* === Hero panel ===
   A highlighted container for the "get started" centerpiece of a page (build
   steps, environment recipes, ...). Accent left-border + tint + soft shadow
   mark it as the focal point. Uses the site UI accent (light blue), never a
   physics-sector color. .cl-steps below is a specialised hero for numbered
   procedures. */
.md-typeset .cl-hero {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-left: 4px solid var(--md-accent-fg-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-accent-fg-color) 4%, var(--md-default-bg-color));
    padding: 1.2em 1.5em 0.7em;
    margin: 1.2em 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Let the tab set sit flush inside the hero panel. */
.md-typeset .cl-hero > .tabbed-set {
    margin: 0;
}

/* === Numbered "quick start" steps ===
   A guided, copy-paste happy path: an ordered list wrapped in
   <div class="cl-steps" markdown> becomes a panel of numbered steps with a
   badge per step and a connecting spine. Used for the Installation build path;
   reusable on any short procedure. The badge uses the site UI accent (light
   blue), NOT a physics-sector color, so it never collides with the semantic
   color scheme. */
.md-typeset .cl-steps {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-left: 4px solid var(--md-accent-fg-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-accent-fg-color) 4%, var(--md-default-bg-color));
    padding: 1.3em 1.6em 0.4em;
    margin: 1.2em 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.md-typeset .cl-steps > ol {
    counter-reset: cl-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.md-typeset .cl-steps > ol > li {
    counter-increment: cl-step;
    position: relative;
    margin: 0 0 0.4em;
    padding: 0 0 1.1em 3em;
}

.md-typeset .cl-steps > ol > li > :first-child {
    margin-top: 0;
}

/* Left-align step prose (override the site-wide justified paragraphs, which
   look gappy in this narrower column). */
.md-typeset .cl-steps p {
    text-align: left;
}

/* Numbered badge */
.md-typeset .cl-steps > ol > li::before {
    content: counter(cl-step);
    position: absolute;
    left: 0;
    top: -0.1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--md-accent-fg-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 2em;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Connecting spine between badges */
.md-typeset .cl-steps > ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1em - 1px);
    top: 2.2em;
    bottom: 0;
    width: 2px;
    background: var(--md-default-fg-color--lightest);
}

/* === Installation page: prerequisites strip ===
   The chip row under the intro (class cl-prereqs) lists the handful of tools
   needed before building. Monospace chips read as tool/command names; a
   CSS-generated label makes the row self-explanatory. Neutral on purpose —
   no physics-sector colors. */
.md-typeset .cl-prereqs {
    margin: 1.4em 0 0.2em;
    padding: 0.6em 1em 0.4em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-accent-fg-color) 3%, var(--md-default-bg-color));
}

.md-typeset .cl-prereqs p::before {
    content: "You'll need";
    display: inline-block;
    margin-right: 0.7em;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
    vertical-align: middle;
}

.md-typeset .cl-prereqs .cl-fact {
    font-family: var(--md-code-font);
    font-size: 0.7em;
}

/* === Installation page: section rhythm & card accents ===
   Scoped to this page via :has(.cl-prereqs) so every other page is untouched.
   A light rule under each top-level section heading gives the long page a
   clear beat, and a neutral top-accent ties the option cards (device backends,
   optional features) into the site's card language without borrowing the
   physics-sector colors. */
.md-content:has(.cl-prereqs) .md-typeset h2 {
    margin-top: 2.4em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--md-default-fg-color--lightest);
}

.md-content:has(.cl-prereqs) .md-typeset .grid.cards > ul > li {
    border-top: 3px solid var(--md-default-fg-color--lighter);
}

/* === Installation page: compact Requirements ===
   The two requirement tables sit side by side (a .grid of two cells) and read
   as reference, so they are tightened up: smaller type, tight margins, and a
   small run-in caption in place of the former subsection headings. */
.md-typeset .grid.cl-req {
    gap: 0.4rem 1.4rem;
    margin: 0.8em 0 0.4em;
}

.md-typeset .cl-req .cl-req-cap {
    margin: 0 0 0.3em;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: left;
    color: var(--md-default-fg-color--light);
}

.md-typeset .cl-req table {
    margin: 0;
    width: 100%;
    font-size: 0.74em;
}

.md-typeset .cl-req table th,
.md-typeset .cl-req table td {
    padding: 0.35em 0.6em;
}

/* === "My first model of (singlet) scalar fields" page: section rhythm ===
   Scoped via :has(.cl-roadmap) so only this page is affected. A light rule
   under each top-level (h3) section heading gives the long tutorial a clear
   beat, mirroring the Installation page's h2 treatment. Neutral on purpose —
   color always means a physics sector on this site. */
.md-content:has(.cl-roadmap) .md-typeset h3 {
    margin-top: 2.4em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--md-default-fg-color--lightest);
}

/* === Output-file cards (reusable component) ===
   Turns the manual's recurring "boring list of generated files" (the Outputs
   sections) into a scannable grid of file "spec cards", built on Material's
   grid cards. Deliberately NEUTRAL: the site UI accent is reserved for build/
   interactive elements (the run hero), while output files are *reference*, so
   their signature is structural, not colour — a monospace file name used as a
   card title plus a labelled COLUMNS strip. Per card:
     `name.ext`{ .cl-fname }   monospace file name, styled as the card title
     [ cols ]{ .cl-schema }    the printed columns as a labelled schema strip
   A companion .cl-outkinds grid gives the three output *kinds* an overview.
   All three card families on the page (roadmap, kinds, files) share the one
   quiet top-rule below, so the page reads as a single system. */

/* One shared, neutral top-rule for every content-card family on the page */
.md-typeset .grid.cards.cl-roadmap > ul > li,
.md-typeset .grid.cards.cl-outkinds > ul > li,
.md-typeset .grid.cards.cl-files > ul > li {
    border-top: 3px solid var(--md-default-fg-color--lighter);
}

/* File name = card title: monospace, bold, with a quiet neutral underline so
   it reads as a title/tab without borrowing the build accent */
.md-typeset code.cl-fname {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 0 0 0.12em;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--md-default-fg-color--light);
    border-radius: 0;
    font-weight: 700;
    font-size: 0.9em;
    color: var(--md-default-fg-color);
    overflow-wrap: anywhere;
}

/* "Schema" strip: the file's printed columns, one scrollable line under a
   small COLUMNS caption (replaces the old $\hspace{1cm}$-indented lists) */
.md-typeset .cl-schema {
    display: block;
    margin: 0.45em 0 0.2em;
    padding: 0.5em 0.7em 0.45em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-left: 3px solid var(--md-default-fg-color--lighter);
    border-radius: 4px;
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
    font-size: 0.82em;
    text-align: left;
    overflow-x: auto;
}

.md-typeset .cl-schema::before {
    content: "columns";
    display: block;
    margin-bottom: 0.25em;
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
    white-space: normal;
}

/* === People page: filterable contributor badges ===
   Each person carries a cloud of module chips in the canonical sector colors
   (see the palette at the top of this file). Clicking a chip — in the filter
   bar or under a person — filters the roster to everyone who touched that
   module (union / OR). people-filter.js wires the interaction; without JS the
   full roster and all badges still render, just non-clickable.
   Chip kinds: physics sectors are filled + hued; Core / Templat are neutral
   dashed (infrastructure, not a physics sector — the site rule "color means a
   physics sector" is preserved); upcoming modules are grey dashed. */

.md-typeset .cl-ppl-lede {
    color: var(--md-default-fg-color--light);
    text-align: left;
}

/* --- filter bar --- */
.md-typeset .cl-people-filter {
    margin: 1.8em 0 1.4em;
    padding: 1em 1.1em;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 12px;
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
}
.md-typeset .cl-ppl-filter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.75em;
}
.md-typeset .cl-ppl-filter-label {
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.62em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--md-default-fg-color--light);
}
.md-typeset .cl-ppl-count {
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.72em;
    color: var(--md-default-fg-color--light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.md-typeset .cl-ppl-count b {
    color: var(--md-default-fg-color);
    font-weight: 700;
}
.md-typeset .cl-ppl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 0.45em;
    align-items: center;
}
.md-typeset .cl-ppl-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.1em 0.3em;
    background: var(--md-default-fg-color--lightest);
}
.md-typeset .cl-ppl-grouplabel {
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.58em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
}
.md-typeset .cl-ppl-clear {
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.68em;
    letter-spacing: 0.03em;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-default-fg-color--light);
    padding: 0.34em 0.5em;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.md-typeset .cl-ppl-clear:hover {
    color: var(--md-default-fg-color);
    background: color-mix(in srgb, var(--md-default-fg-color) 7%, transparent);
}
.md-typeset .cl-ppl-clear:disabled {
    opacity: 0;
    pointer-events: none;
}
/* Footnote under the chips: says what the two neutral dashed chips mean, since
   "Core" alone reads ambiguously (framework layer, not "the core team"). */
.md-typeset .cl-ppl-filter-note {
    margin: 0.9em 0 0;
    padding-top: 0.75em;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    font-size: 0.72em;
    line-height: 1.55;
    color: var(--md-default-fg-color--light);
}
.md-typeset .cl-ppl-filter-note b {
    font-weight: 700;
    color: var(--md-default-fg-color);
}

/* --- chip (shared by the filter bar and each person's badge cloud) --- */
.md-typeset .cl-people .cl-ppl-chip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    padding: 0.34em 0.62em;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    border-radius: 2em;
    border: 1px solid color-mix(in srgb, var(--cl-accent, var(--md-default-fg-color--light)) 32%, transparent);
    color: var(--cl-accent, var(--md-default-fg-color--light));
    background: color-mix(in srgb, var(--cl-accent, var(--md-default-fg-color)) 10%, transparent);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.md-typeset .cl-people .cl-ppl-chip::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--cl-accent, var(--md-default-fg-color--light));
    flex: 0 0 auto;
}
.md-typeset .cl-people .cl-ppl-chip:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--cl-accent, var(--md-default-fg-color)) 18%, transparent);
}
.md-typeset .cl-people .cl-ppl-chip:focus-visible {
    outline: 2px solid var(--cl-accent, var(--md-accent-fg-color));
    outline-offset: 2px;
}
.md-typeset .cl-people .cl-ppl-chip.is-active {
    background: var(--cl-accent, var(--md-default-fg-color));
    color: #fff;
    border-color: var(--cl-accent, var(--md-default-fg-color));
}
[data-md-color-scheme="slate"] .md-typeset .cl-people .cl-ppl-chip.is-active {
    color: #14171f; /* slate accents are lighter — dark text keeps contrast */
}

/* accent per module (folds gauge into Core, so no scalar/u1/su2 chips) */
.md-typeset .cl-people .m-alp      { --cl-accent: var(--cl-alp); }
.md-typeset .cl-people .m-nmc      { --cl-accent: var(--cl-nmc); }
.md-typeset .cl-people .m-defects  { --cl-accent: var(--cl-defects); }
.md-typeset .cl-people .m-gw       { --cl-accent: var(--cl-gw); }
.md-typeset .cl-people .m-dims     { --cl-accent: var(--cl-dims); }
.md-typeset .cl-people .m-fluid,
.md-typeset .cl-people .m-su2axion { --cl-accent: var(--cl-upcoming); }

/* structural chips (Core, Templat): neutral, dashed, hollow dot */
.md-typeset .cl-people .cl-ppl-chip--struct {
    color: var(--md-default-fg-color);
    background: transparent;
    border-style: dashed;
    border-color: var(--md-default-fg-color--lighter);
}
.md-typeset .cl-people .cl-ppl-chip--struct::before {
    background: transparent;
    border: 1px solid var(--md-default-fg-color--lighter);
    width: 0.46em;
    height: 0.46em;
}
.md-typeset .cl-people .cl-ppl-chip--struct:hover {
    background: color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
}
.md-typeset .cl-people .cl-ppl-chip--struct.is-active {
    background: var(--md-default-fg-color);
    color: var(--md-default-bg-color);
    border-style: solid;
    border-color: var(--md-default-fg-color);
}
.md-typeset .cl-people .cl-ppl-chip--struct.is-active::before {
    background: var(--md-default-bg-color);
    border-color: var(--md-default-bg-color);
}
[data-md-color-scheme="slate"] .md-typeset .cl-people .cl-ppl-chip--struct.is-active {
    color: var(--md-default-bg-color);
}

/* upcoming chips (Fluid Dynamics, SU(2) Axion): grey, dashed, hollow dot */
.md-typeset .cl-people .cl-ppl-chip--upcoming {
    border-style: dashed;
    opacity: 0.92;
}
.md-typeset .cl-people .cl-ppl-chip--upcoming::before {
    background: transparent;
    border: 1px solid var(--cl-accent);
}

/* the matching badge(s) under a person get a ring when a filter is active */
.md-typeset .cl-people .cl-ppl-badges .cl-ppl-chip.is-match {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cl-accent, var(--md-default-fg-color)) 55%, transparent);
}
.md-typeset .cl-people .cl-ppl-badges .cl-ppl-chip--struct.is-match {
    box-shadow: 0 0 0 2px var(--md-default-fg-color--lighter);
}

/* --- sections, grid, person cards --- */
.md-typeset .cl-ppl-section {
    margin-top: 2.2em;
}
.md-typeset .cl-ppl-section[hidden] {
    display: none;
}
.md-typeset .cl-ppl-heading {
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.74em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--md-default-fg-color--light);
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin: 0 0 1.2em;
}
.md-typeset .cl-ppl-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--md-default-fg-color--lightest);
}
.md-typeset .cl-ppl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    align-items: start;
}
@media (max-width: 720px) {
    .md-typeset .cl-ppl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .md-typeset .cl-ppl-grid { grid-template-columns: 1fr; }
}
.md-typeset .cl-ppl-card {
    text-align: center;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.md-typeset .cl-ppl-card[hidden] {
    display: none;
}
.md-typeset .cl-ppl-card.is-leaving {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}
.md-typeset .cl-ppl-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}
.md-typeset .cl-ppl-name {
    font-weight: 700;
    margin: 0.7em 0 0.1em;
}
.md-typeset .cl-ppl-affil {
    font-style: italic;
    color: var(--md-default-fg-color--light);
    font-size: 0.88em;
}
.md-typeset .cl-ppl-role {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-default-fg-color--light);
    margin-top: 0.2em;
}
.md-typeset .cl-ppl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32em;
    justify-content: center;
    margin-top: 0.65em;
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset .cl-people .cl-ppl-card,
    .md-typeset .cl-people .cl-ppl-chip { transition: none; }
}


/* ===================================================================
   Publications / Citations interactive view  (javascripts/publications.js)
   Scoped under .cl-pubs; neutrals derive from Material's own tokens so
   light/dark just work. The blue histogram ramp is defined for both schemes.
   =================================================================== */
.cl-pubs {
    --cl-pub-ink:        var(--md-default-fg-color);
    --cl-pub-muted:      var(--md-default-fg-color--light);
    --cl-pub-faint:      var(--md-default-fg-color--lighter);
    --cl-pub-line:       var(--md-default-fg-color--lightest);
    --cl-pub-surface:    var(--md-default-bg-color);
    --cl-pub-surface2:   var(--md-code-bg-color);
    --cl-pub-accent:     var(--md-accent-fg-color, #2f7fc4);
    --cl-pub-accent-ink: var(--md-typeset-a-color, #1d5a94);
    --cl-pub-accent-soft: rgba(47, 127, 196, .12);
    --cl-pub-dim:        var(--md-default-fg-color--lightest);
    /* blue sequential ramp: older -> lighter, recent -> deeper */
    --cl-pub-y0:#cfe1f2; --cl-pub-y1:#a9cbe9; --cl-pub-y2:#83b3de; --cl-pub-y3:#5e9bd1;
    --cl-pub-y4:#4083bd; --cl-pub-y5:#2f6aa3; --cl-pub-y6:#234f7d;
    --cl-pub-serif:"Iowan Old Style",Georgia,"Palatino Linotype",Palatino,"Times New Roman",serif;
    --cl-pub-mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    display: block;
    margin: 1.2rem 0 0;
}
[data-md-color-scheme="slate"] .cl-pubs {
    --cl-pub-accent-soft: rgba(90, 168, 224, .17);
    --cl-pub-y0:#26384e; --cl-pub-y1:#2f4f70; --cl-pub-y2:#3a6791; --cl-pub-y3:#4682b3;
    --cl-pub-y4:#579bd2; --cl-pub-y5:#72b1e4; --cl-pub-y6:#93c6ef;
}

/* ---- stat strip ---- */
.cl-pubs .cl-pubs-stats {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    font-family: var(--cl-pub-mono); font-size: .74rem; color: var(--cl-pub-muted);
    border-top: 1px solid var(--cl-pub-line); border-bottom: 1px solid var(--cl-pub-line);
    padding: 12px 2px; margin: 0 0 1.6rem;
}
.cl-pubs .cl-pubs-stats .s { display: flex; align-items: baseline; gap: 7px; }
.cl-pubs .cl-pubs-stats b {
    color: var(--cl-pub-ink); font-weight: 700; font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.cl-pubs .cl-pubs-stats .sep { color: var(--cl-pub-faint); }

/* the "researchers" stat, linked to the researcher map */
.cl-pubs .cl-pubs-stats a.cl-pubs-maplink {
    display: inline-flex; align-items: baseline; gap: 6px;
    color: var(--cl-pub-accent-ink); text-decoration: none;
    padding: 2px 8px; margin: -2px 0; border-radius: 7px; transition: background .15s;
}
.cl-pubs .cl-pubs-stats a.cl-pubs-maplink:hover,
.cl-pubs .cl-pubs-stats a.cl-pubs-maplink:focus-visible {
    background: var(--cl-pub-accent-soft); outline: none;
}
.cl-pubs .cl-pubs-stats a.cl-pubs-maplink b { color: var(--cl-pub-accent-ink); }
.cl-pubs .cl-pubs-stats a.cl-pubs-maplink .lbl {
    text-decoration: underline; text-decoration-style: dotted;
    text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.cl-pubs .cl-pubs-stats a.cl-pubs-maplink .pin {
    width: 11px; height: 11px; align-self: center; flex: none;
}

/* ---- two-column layout ---- */
.cl-pubs .cl-pubs-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.cl-pubs .cl-pubs-main { min-width: 0; }
.cl-pubs .cl-pubs-side { display: flex; flex-direction: column; gap: 1.4rem; }
@media screen and (min-width: 60em) {
    .cl-pubs .cl-pubs-layout {
        grid-template-columns: minmax(0, 1fr) 350px; gap: 2.6rem; align-items: start;
    }
    .cl-pubs .cl-pubs-side { position: sticky; top: 4rem; }
}

/* ---- sidebar cards ---- */
.cl-pubs .cl-card {
    border: 1px solid var(--cl-pub-line); border-radius: 12px;
    background: var(--cl-pub-surface); padding: 15px 15px 13px;
    box-shadow: 0 1px 2px rgba(20,40,70,.05), 0 6px 20px rgba(20,40,70,.06);
}
[data-md-color-scheme="slate"] .cl-pubs .cl-card {
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.4);
}
.cl-pubs .cl-card-title {
    font-family: var(--cl-pub-serif); font-size: 1rem; font-weight: 600;
    color: var(--cl-pub-ink); margin: 0 0 2px; line-height: 1.2; border: 0; padding: 0;
}
.cl-pubs .cl-card-note {
    font-family: var(--cl-pub-mono); font-size: .62rem; color: var(--cl-pub-faint);
    margin: 0 0 11px; line-height: 1.4;
}
.cl-pubs .cl-pubs-updated {
    font-family: var(--cl-pub-mono); font-size: .64rem; color: var(--cl-pub-faint);
    margin: 0; padding: 0 4px;
}
.cl-pubs .cl-pubs-updated strong { color: var(--cl-pub-muted); font-weight: 600; }

/* ---- mini histogram ---- */
.cl-pubs .cl-pubs-hist {
    display: flex; align-items: flex-end; gap: clamp(3px, 1.2vw, 6px);
    padding: 4px 0 0; border-bottom: 2px solid var(--cl-pub-line); margin: 0 0 4px;
}
.cl-pubs .cl-pubs-col { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
.cl-pubs .cl-pubs-stack { display: flex; flex-direction: column-reverse; gap: 1px; width: 76%; align-items: center; }
.cl-pubs .cl-pubs-cell {
    width: 100%; height: var(--cl-pub-brick, 8px); border-radius: 1.5px;
    background: var(--cl-pub-cell, var(--cl-pub-accent)); cursor: pointer;
    transition: transform .12s ease, background .2s ease;
}
.cl-pubs .cl-pubs-cell:hover { transform: scaleX(1.2) scaleY(1.5); position: relative; z-index: 3; }
.cl-pubs .cl-pubs-cell.is-dim { background: var(--cl-pub-dim); cursor: default; }
.cl-pubs .cl-pubs-cell.is-dim:hover { transform: none; }
.cl-pubs .cl-pubs-xlabels { display: flex; gap: clamp(3px, 1.2vw, 6px); }
.cl-pubs .cl-pubs-xtick {
    flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--cl-pub-mono);
    background: none; border: 0; padding: 5px 0 0; cursor: pointer; color: var(--cl-pub-muted); line-height: 1.1;
}
.cl-pubs .cl-pubs-xtick .yr { font-size: .68rem; font-weight: 700; color: var(--cl-pub-ink); }
.cl-pubs .cl-pubs-xtick .ct { display: block; font-size: .58rem; color: var(--cl-pub-faint); font-variant-numeric: tabular-nums; }
.cl-pubs .cl-pubs-xtick:hover .yr,
.cl-pubs .cl-pubs-xtick[aria-pressed="true"] .yr { color: var(--cl-pub-accent-ink); }
.cl-pubs .cl-pubs-xtick[aria-pressed="true"]::after {
    content: ""; display: block; height: 2px; background: var(--cl-pub-accent);
    margin: 4px auto 0; width: 70%; border-radius: 2px;
}

/* ---- contributors / users ---- */
.cl-pubs .cl-pubs-contrib { display: flex; flex-direction: column; gap: 2px; }
.cl-pubs .cl-pubs-crow {
    display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center;
    background: none; border: 0; text-align: left; cursor: pointer; padding: 5px 6px;
    border-radius: 7px; font-family: var(--md-text-font-family, sans-serif);
    color: var(--cl-pub-ink); width: 100%; transition: background .15s;
}
.cl-pubs .cl-pubs-crow:hover { background: var(--cl-pub-surface2); }
.cl-pubs .cl-pubs-crow .nm { font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pubs .cl-pubs-crow .val { font-family: var(--cl-pub-mono); font-size: .68rem; color: var(--cl-pub-muted); font-variant-numeric: tabular-nums; }
.cl-pubs .cl-pubs-crow .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--cl-pub-surface2); overflow: hidden; }
.cl-pubs .cl-pubs-crow .bar i { display: block; height: 100%; background: var(--cl-pub-accent); border-radius: 2px; }
.cl-pubs .cl-pubs-crow[aria-pressed="true"] { background: var(--cl-pub-accent-soft); }
.cl-pubs .cl-pubs-crow[aria-pressed="true"] .nm { color: var(--cl-pub-accent-ink); font-weight: 600; }

/* ---- search / controls ---- */
.cl-pubs .cl-pubs-controls { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; margin: 0 0 4px; }
.cl-pubs .cl-pubs-search { flex: 1 1 220px; position: relative; min-width: 180px; }
.cl-pubs .cl-pubs-search input {
    width: 100%; font-family: inherit; font-size: .84rem; color: var(--cl-pub-ink);
    background: var(--cl-pub-surface); border: 1px solid var(--cl-pub-line); border-radius: 9px;
    padding: 10px 14px 10px 36px;
}
.cl-pubs .cl-pubs-search input::placeholder { color: var(--cl-pub-faint); }
.cl-pubs .cl-pubs-search input:focus { outline: 2px solid var(--cl-pub-accent); outline-offset: 1px; border-color: transparent; }
.cl-pubs .cl-pubs-search svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--cl-pub-faint); pointer-events: none;
}
.cl-pubs .cl-pubs-count { font-family: var(--cl-pub-mono); font-size: .7rem; color: var(--cl-pub-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-pubs .cl-pubs-clear {
    font-family: var(--cl-pub-mono); font-size: .68rem; color: var(--cl-pub-accent-ink);
    background: none; border: 1px solid var(--cl-pub-line); border-radius: 20px;
    padding: 5px 12px; cursor: pointer; display: none;
}
.cl-pubs .cl-pubs-clear.is-shown { display: inline-block; }
.cl-pubs .cl-pubs-clear:hover { background: var(--cl-pub-accent-soft); }

.cl-pubs .cl-pubs-crow:focus-visible,
.cl-pubs .cl-pubs-xtick:focus-visible,
.cl-pubs .cl-pubs-clear:focus-visible,
.cl-pubs .cl-pubs-cell:focus-visible { outline: 2px solid var(--cl-pub-accent); outline-offset: 2px; }

/* ---- list (enhanced <ol>) ---- */
.cl-pubs .cl-pub-list { list-style: none; margin: .8rem 0 0; padding: 0; border-top: 1px solid var(--cl-pub-line); }
.cl-pubs .cl-pub {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 14px;
    padding: 14px 4px; margin: 0; border-bottom: 1px solid var(--cl-pub-line);
    align-items: start; scroll-margin-top: 4rem;
}
.cl-pubs .cl-pub.is-hidden { display: none; }
.cl-pubs .cl-pub .idx {
    font-family: var(--cl-pub-mono); font-size: .72rem; font-weight: 700;
    color: var(--cl-pub-accent-ink); background: var(--cl-pub-accent-soft); border-radius: 6px;
    text-align: center; padding: 4px 0; font-variant-numeric: tabular-nums; align-self: start;
}
.cl-pubs .cl-pub .body { min-width: 0; }
.cl-pubs .cl-pub .title {
    font-family: var(--cl-pub-serif); font-size: 1rem; font-weight: 600; line-height: 1.28;
    color: var(--cl-pub-ink); margin: 0 0 4px;
}
.cl-pubs .cl-pub .authors { font-size: .8rem; color: var(--cl-pub-muted); margin: 0; }
.cl-pubs .cl-pub .authors .me { cursor: pointer; }
.cl-pubs .cl-pub .authors .me:hover { color: var(--cl-pub-accent-ink); text-decoration: underline; }
.cl-pubs .cl-pub .meta {
    font-family: var(--cl-pub-mono); font-size: .7rem; color: var(--cl-pub-muted);
    text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.cl-pubs .cl-pub .meta .yr { color: var(--cl-pub-ink); font-weight: 700; }
.cl-pubs .cl-pub .meta .jr { color: var(--cl-pub-faint); max-width: 20ch; white-space: normal; text-align: right; font-size: .64rem; }
.cl-pubs .cl-pub .meta a { color: var(--cl-pub-accent-ink); display: inline-flex; align-items: center; gap: 3px; }
.cl-pubs .cl-pub.is-target { background: var(--cl-pub-accent-soft); border-radius: 8px; box-shadow: 0 0 0 1px var(--cl-pub-accent) inset; }
.cl-pubs .cl-pubs-empty { display: none; padding: 32px 4px; color: var(--cl-pub-muted); font-family: var(--cl-pub-mono); font-size: .78rem; }
.cl-pubs .cl-pubs-empty.is-shown { display: block; }

@media screen and (max-width: 34em) {
    .cl-pubs .cl-pub { grid-template-columns: 34px 1fr; gap: 10px; }
    .cl-pubs .cl-pub .meta { grid-column: 2; text-align: left; align-items: flex-start; }
    .cl-pubs .cl-pub .meta .jr { text-align: left; }
}

/* ---- floating tooltip (appended to <body>) ---- */
.cl-pubs-tt {
    position: fixed; z-index: 210; max-width: 300px; display: none;
    background: var(--md-default-bg-color); color: var(--md-default-fg-color);
    border: 1px solid var(--md-default-fg-color--lightest); border-radius: 9px;
    padding: 9px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
    font-size: .8rem; line-height: 1.35; pointer-events: none;
}
.cl-pubs-tt.is-open { display: block; }
.cl-pubs-tt .tt-t { font-weight: 600; margin-bottom: 3px; }
.cl-pubs-tt .tt-a { color: var(--md-default-fg-color--light); font-size: .74rem; }
.cl-pubs-tt .tt-y { font-family: "Roboto Mono", monospace; font-size: .66rem; color: var(--md-accent-fg-color); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .cl-pubs .cl-pubs-cell, .cl-pubs .cl-pubs-crow, .cl-pubs .cl-pub { transition: none; }
}

/* ---- tabs (Using CL / Citing CL) — shown only when the page has >1 list ---- */
.cl-pubs[hidden] { display: none; }
.cl-pubs-tabbar {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 2px solid var(--md-default-fg-color--lightest);
    margin: 1.4rem 0 0;
}
.cl-pubs-tabbar + .cl-pubs, .cl-pubs-tabbar ~ .cl-pubs { margin-top: 1.1rem; }
.cl-pubs-tab {
    font-family: var(--md-text-font-family, sans-serif);
    font-size: .94rem; font-weight: 600; line-height: 1.2;
    color: var(--md-default-fg-color--light);
    background: none; border: 0; border-bottom: 2px solid transparent;
    margin-bottom: -2px; padding: 9px 15px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .15s, border-color .15s;
}
.cl-pubs-tab .tc {
    font-family: "Roboto Mono", ui-monospace, monospace; font-size: .68rem; font-weight: 600;
    color: var(--md-default-fg-color--lighter); font-variant-numeric: tabular-nums;
    background: var(--md-code-bg-color); border-radius: 20px; padding: 1px 8px;
}
.cl-pubs-tab:hover { color: var(--md-default-fg-color); }
.cl-pubs-tab.is-active { color: var(--md-typeset-a-color); border-bottom-color: var(--md-accent-fg-color); }
.cl-pubs-tab.is-active .tc { color: var(--md-typeset-a-color); background: var(--md-accent-fg-color--transparent, var(--md-code-bg-color)); }
.cl-pubs-tab:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; border-radius: 6px; }

/* === Citation card (CLcitation.md "If you use CosmoLattice") ===
   A tabbed card — Citation / LaTeX / BibTeX — with per-pane copy buttons.
   Wired by javascripts/citation-box.js; degrades to plain visible panes
   with JS off (see the JS-off fallback at the end of this block). */
.md-typeset .cl-cite {
    margin: 1.6em 0;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 10px;
    background: color-mix(in srgb, var(--md-default-fg-color) 2.5%, transparent);
    overflow: hidden;
}

.md-typeset .cl-cite__tabs {
    display: flex;
    gap: 2px;
    padding: 0 0.6em;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
}

.md-typeset .cl-cite__tab {
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--md-default-fg-color--light);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.7em 1em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.md-typeset .cl-cite__tab:hover { color: var(--md-default-fg-color); }

.md-typeset .cl-cite__tab.is-active {
    color: var(--md-typeset-a-color);
    border-bottom-color: var(--md-accent-fg-color);
}

.md-typeset .cl-cite__tab:focus-visible {
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: -2px;
    border-radius: 4px;
}

.md-typeset .cl-cite__pane {
    position: relative;
    padding: 1.1em 1.2em;
}

/* Reading pane: the acknowledgement as a quote-styled sentence */
.md-typeset .cl-cite__quote {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--md-default-fg-color);
    border-left: 3px solid var(--md-accent-fg-color);
    padding-left: 0.9em;
}

.md-typeset .cl-cite__logo,
.md-typeset .cl-cite__refs {
    font-weight: 600;
    color: var(--md-typeset-a-color);
    white-space: nowrap;
}

.md-typeset .cl-cite__hint {
    margin: 0.9em 0 0;
    font-size: 0.8rem;
    color: var(--md-default-fg-color--light);
}

/* Code panes: monospace, scrollable, room for the copy button */
.md-typeset .cl-cite__code {
    margin: 0;
    padding: 0.9em 1em;
    padding-right: 6.5em;
    border-radius: 6px;
    background: var(--md-code-bg-color);
    overflow-x: auto;
}

.md-typeset .cl-cite__code code {
    display: block;
    font-family: var(--md-code-font-family, "Roboto Mono", ui-monospace, monospace);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--md-code-fg-color);
    white-space: pre;
    background: none;
    padding: 0;
    box-shadow: none;
}

.md-typeset .cl-cite__copy {
    position: absolute;
    top: 1.55em;
    right: 1.75em;
    z-index: 1;
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    color: var(--md-accent-fg-color);
    background: var(--md-default-bg-color);
    border: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
    border-radius: 6px;
    padding: 0.5em 0.8em;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.md-typeset .cl-cite__copy:hover {
    background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
}

.md-typeset .cl-cite__copy:focus-visible {
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: 2px;
}

.md-typeset .cl-cite__copy.is-copied {
    color: #fff;
    background: var(--cl-dims, #43a047);
    border-color: var(--cl-dims, #43a047);
}

/* JS enhances: hide inactive panes. Without JS every pane stays visible
   (the [hidden] attribute still applies, so reveal them here for no-JS). */
.md-typeset .cl-cite__pane { display: none; }
.md-typeset .cl-cite__pane.is-active { display: block; }
.no-js .md-typeset .cl-cite__pane { display: block; }
.no-js .md-typeset .cl-cite__tabs,
.no-js .md-typeset .cl-cite__copy { display: none; }

@media screen and (max-width: 44.9375em) {
    .md-typeset .cl-cite__tab { padding: 0.7em 0.7em; font-size: 0.78rem; }
    .md-typeset .cl-cite__copy { top: auto; bottom: 1.55em; }
}

/* Print: show every pane, drop the interactive chrome */
@media print {
    .md-typeset .cl-cite__pane { display: block; }
    .md-typeset .cl-cite__tabs,
    .md-typeset .cl-cite__copy { display: none; }
}

/* ============================================================
   Researcher map (publications/Researcher-map.html)
   Rendered by javascripts/researcher-map.js into .cl-map-mount.
   Tokens derive from Material's own colours; the blue ramp and
   neutrals mirror the .cl-pubs widget for a consistent look.
   ============================================================ */
.cl-map {
    --clm-ink:      var(--md-default-fg-color);
    --clm-muted:    var(--md-default-fg-color--light);
    --clm-faint:    var(--md-default-fg-color--lighter);
    --clm-line:     var(--md-default-fg-color--lightest);
    --clm-bg:       var(--md-default-bg-color);
    --clm-panel:    var(--md-code-bg-color);
    --clm-accent:   var(--md-accent-fg-color, #2f7fc4);
    --clm-accent-ink: var(--md-typeset-a-color, #1d5a94);
    --clm-accent-soft: rgba(47, 127, 196, .10);
    --clm-hot:      #d99a2b;
    --clm-ocean:    #eef4fa;  --clm-ocean-edge:#dfe9f3;  --clm-grat:#d6e3f0;
    --clm-land:     #dde7f1;  --clm-land-edge:#c4d4e4;
    --clm-pt-lo:    #3f74a6;  --clm-pt-hi:#8fd6ff;       --clm-glow:#4aa6e6;
    --clm-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --clm-mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --clm-shadow:0 1px 2px rgba(20,40,60,.05),0 8px 24px -12px rgba(20,40,60,.18);
    color: var(--clm-ink);
}
[data-md-color-scheme="slate"] .cl-map {
    --clm-accent-soft: rgba(90, 168, 224, .14);
    --clm-hot:      #e6b448;
    --clm-ocean:    #0f1822;  --clm-ocean-edge:#1a2836;  --clm-grat:#213141;
    --clm-land:     #20303f;  --clm-land-edge:#33495c;
    --clm-pt-lo:    #3d6d9d;  --clm-pt-hi:#9fdcff;       --clm-glow:#54abe8;
    --clm-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
}

/* header */
.cl-map-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 30px; margin: 0 0 18px; }
.cl-map-top .lead { flex: 1; min-width: 260px; }
.cl-map-eyebrow { font: 600 .64rem/1.4 var(--clm-mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--clm-accent-ink); margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-map-eyebrow a.back { color: var(--clm-faint); text-decoration: none; letter-spacing: .04em; text-transform: none; }
.cl-map-eyebrow a.back:hover { color: var(--clm-ink); }
.cl-map-methodchip { position: relative; text-transform: none; letter-spacing: .02em; color: var(--clm-muted);
    border: 1px solid var(--clm-line); border-radius: 20px; padding: 3px 9px; cursor: help; font-weight: 600; }
.cl-map-methodchip:hover, .cl-map-methodchip:focus-visible { color: var(--clm-ink); border-color: var(--clm-accent);
    background: var(--clm-accent-soft); outline: none; }
.cl-map-methodchip .mhint { position: absolute; left: 0; top: calc(100% + 9px); width: 300px; max-width: 78vw;
    background: var(--clm-bg); color: var(--clm-muted); border: 1px solid var(--clm-line); border-radius: 11px;
    padding: 11px 13px; box-shadow: var(--clm-shadow); font: 400 .72rem/1.5 var(--md-text-font-family, system-ui);
    letter-spacing: 0; text-transform: none; opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .16s, transform .16s; z-index: 12; }
.cl-map-methodchip .mhint b { color: var(--clm-ink); font-weight: 700; }
.cl-map-methodchip:hover .mhint, .cl-map-methodchip:focus-visible .mhint { opacity: 1; transform: none; }
.cl-map-title { font-family: var(--clm-serif); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    margin: 0; letter-spacing: -.01em; text-wrap: balance; border: 0; padding: 0; }
.cl-map-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.cl-map-stat b { display: block; font: 700 1.7rem/1 var(--clm-serif); color: var(--clm-ink); font-variant-numeric: tabular-nums; }
.cl-map-stat span { font: 600 .62rem/1.3 var(--clm-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--clm-faint); }

/* layout */
.cl-map-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 940px) { .cl-map-grid { grid-template-columns: minmax(0, 1fr) 280px; } }
.cl-map-mapcol { min-width: 0; }

/* continent tabs (map switcher) */
.cl-map-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cl-map-tab { font: 600 .64rem/1 var(--clm-mono); letter-spacing: .07em; text-transform: uppercase;
    color: var(--clm-muted); background: var(--clm-panel); border: 1px solid var(--clm-line); border-radius: 20px;
    padding: 7px 13px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.cl-map-tab:hover { color: var(--clm-ink); border-color: var(--clm-accent); }
.cl-map-tab[aria-selected="true"] { color: var(--clm-accent-ink); background: var(--clm-accent-soft);
    border-color: var(--clm-accent); }
.cl-map-tab .n { margin-left: 7px; font-weight: 500; color: var(--clm-faint); font-variant-numeric: tabular-nums; }
.cl-map-tab[aria-selected="true"] .n { color: var(--clm-accent-ink); opacity: .7; }

/* the map */
.cl-map-frame { position: relative; border: 1px solid var(--clm-ocean-edge); border-radius: 16px; overflow: hidden;
    background: radial-gradient(120% 130% at 50% 0%, var(--clm-panel) 0%, var(--clm-ocean) 55%); box-shadow: var(--clm-shadow); }
.cl-map-frame svg { display: block; width: 100%; height: auto; }
/* vector-effect keeps strokes a constant screen width; the marker/label sizes
   are counter-scaled in researcher-map.js so nothing balloons when zoomed. */
.cl-map .land { fill: var(--clm-land); stroke: var(--clm-land-edge); stroke-width: .5; vector-effect: non-scaling-stroke; }
.cl-map .grat { stroke: var(--clm-grat); stroke-width: .5; fill: none; vector-effect: non-scaling-stroke; }
.cl-map .glow { fill: var(--clm-glow); }
.cl-map .core { stroke: #fff; stroke-width: .8; cursor: pointer; transform-box: fill-box; transform-origin: center;
    transition: transform .18s; vector-effect: non-scaling-stroke; }
[data-md-color-scheme="slate"] .cl-map .core { stroke: rgba(255,255,255,.55); }
.cl-map .core.dim { opacity: .28; }
.cl-map .ptlabel { font: 600 10px/1 var(--clm-mono); fill: var(--clm-ink); paint-order: stroke;
    stroke: var(--clm-ocean); stroke-width: 2.8px; stroke-linejoin: round; pointer-events: none; letter-spacing: .02em;
    vector-effect: non-scaling-stroke; }
.cl-map .hotring { fill: none; stroke: var(--clm-hot); stroke-width: 1.4; opacity: .9; vector-effect: non-scaling-stroke; }
.cl-map .reveal .core { transform: scale(0); }
.cl-map .reveal.on .core { transform: scale(1); }
.cl-map .reveal .ptlabel { opacity: 0; transition: opacity .4s; }
.cl-map .reveal.on .ptlabel { opacity: 1; transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
    .cl-map .reveal .core { transform: none; } .cl-map .reveal .ptlabel { opacity: 1; }
}
.cl-map-legend { position: absolute; left: 14px; bottom: 12px; background: color-mix(in srgb, var(--clm-bg) 84%, transparent);
    backdrop-filter: blur(4px); border: 1px solid var(--clm-line); border-radius: 10px; padding: 9px 12px;
    font: .6rem/1.3 var(--clm-mono); color: var(--clm-muted); display: flex; align-items: flex-end; gap: 12px; }
.cl-map-legend .t { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--clm-faint); align-self: center; }
.cl-map-legend .lg { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cl-map-legend .lg .d { border-radius: 50%; background: var(--clm-glow); opacity: .75; }
/* city card — hover peeks at the city and its papers, click pins it so the
   paper rows become arXiv links. The card is anchored to its point by
   researcher-map.js; only the pinned state takes pointer events. */
.cl-map-tt { position: absolute; pointer-events: none; z-index: 8; width: min(364px, 86%);
    box-sizing: border-box;                       /* max-height is measured against the frame */
    display: flex; flex-direction: column;
    background: var(--clm-bg); border: 1px solid var(--clm-line); border-radius: 10px; padding: 10px 12px;
    box-shadow: var(--clm-shadow); opacity: 0; transform: translateY(4px); transition: opacity .13s, transform .13s; }
.cl-map-tt.on { opacity: 1; transform: none; }
.cl-map-tt.pin { pointer-events: auto; border-color: var(--clm-accent);
    box-shadow: 0 2px 6px rgba(20,40,60,.08), 0 18px 40px -16px rgba(20,40,60,.42); }
[data-md-color-scheme="slate"] .cl-map-tt.pin { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px -16px rgba(0,0,0,.75); }
.cl-map-tt .c { font: 600 .82rem/1.2 var(--md-text-font-family, system-ui); color: var(--clm-ink);
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cl-map-tt.pin .c { padding-right: 18px; }        /* room for the close button */
.cl-map-tt .c .n { font: 700 .9rem/1 var(--clm-mono); color: var(--clm-accent-ink); }
.cl-map-tt .co { font: .6rem/1 var(--clm-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--clm-faint); margin: 2px 0 7px; }
.cl-map-tt .inst { font-size: .72rem; color: var(--clm-muted); line-height: 1.4; }
/* papers written from this city */
.cl-map-tt .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--clm-line);
    font: 600 .56rem/1 var(--clm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--clm-faint); }
.cl-map-tt .ph span + span { letter-spacing: 0; font-weight: 700; color: var(--clm-accent-ink); font-variant-numeric: tabular-nums; }
.cl-map-tt .pl { margin-top: 4px; }
.cl-map-tt.pin .pl { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cl-map-tt.pin.fades .pl { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
/* newest first, so the id column reads as a descending timeline */
.cl-map-tt .pp { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 0 8px; align-items: start;
    padding: 5px 3px; border-radius: 5px; text-decoration: none; color: inherit;
    transition: background .12s, color .12s; }
.cl-map-tt .pp + .pp { border-top: 1px solid color-mix(in srgb, var(--clm-line) 55%, transparent); }
/* the id column holds a full 10-char arXiv id (~70px) with slack for wider mono
   fallbacks; the ellipsis is a last-resort guard, not something real ids hit */
.cl-map-tt .pp .id { font: .58rem/1.6 var(--clm-mono); color: var(--clm-faint); font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-map-tt .pp .t { font-size: .7rem; line-height: 1.35; color: var(--clm-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-map-tt .pp .n { font: 600 .56rem/1.6 var(--clm-mono); color: var(--clm-faint); font-variant-numeric: tabular-nums; }
.cl-map-tt a.pp:hover { background: var(--clm-accent-soft); }
.cl-map-tt a.pp:hover .t { color: var(--clm-ink); }
.cl-map-tt a.pp:hover .id { color: var(--clm-accent-ink); }
.cl-map-tt a.pp:focus-visible { outline: 2px solid var(--clm-accent); outline-offset: 1px; }
.cl-map-tt .more { flex: none; font: .58rem/1.4 var(--clm-mono); color: var(--clm-faint);
    margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--clm-line); }
.cl-map-tt .x { position: absolute; top: 6px; right: 7px; width: 20px; height: 20px; padding: 0;
    display: none; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: none; color: var(--clm-faint); font: 400 1rem/1 var(--md-text-font-family, system-ui); cursor: pointer; }
.cl-map-tt.pin .x { display: flex; }
.cl-map-tt .x:hover { background: var(--clm-accent-soft); color: var(--clm-ink); }

/* hub side panel */
.cl-map-hubs { border: 1px solid var(--clm-line); border-radius: 14px; background: var(--clm-panel); padding: 14px 15px; box-shadow: var(--clm-shadow); }
.cl-map-hubs h2 { font-family: var(--clm-serif); font-size: 1rem; font-weight: 600; margin: 0 0 2px; border: 0; padding: 0; }
.cl-map-hubs .note { font: .58rem/1.4 var(--clm-mono); color: var(--clm-faint); margin: 0 0 12px; }
.cl-map-hub { width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 8px; border-radius: 8px;
    display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 9px; transition: background .15s; }
.cl-map-hub:hover, .cl-map-hub.hot { background: var(--clm-accent-soft); }
.cl-map-hub .rk { font: 600 .64rem/1 var(--clm-mono); color: var(--clm-faint); }
.cl-map-hub .nm { font-size: .82rem; color: var(--clm-ink); }
.cl-map-hub .nm small { color: var(--clm-faint); font-family: var(--clm-mono); font-size: .6rem; margin-left: 5px; letter-spacing: .04em; }
.cl-map-hub .val { display: flex; align-items: center; gap: 7px; }
.cl-map-hub .val .bar { width: 46px; height: 5px; border-radius: 3px; background: var(--clm-line); overflow: hidden; }
.cl-map-hub .val .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--clm-pt-lo), var(--clm-pt-hi)); border-radius: 3px; }
.cl-map-hub .val .n { font: 700 .72rem/1 var(--clm-mono); color: var(--clm-muted); width: 16px; text-align: right; }
.cl-map-hubs .foot { font: .58rem/1.4 var(--clm-mono); color: var(--clm-faint); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--clm-line); }

/* === "definitions/" reference block ("Inside CosmoLattice" page) ===
   Replaces a flat 14-bullet list of physics-formula headers with five role
   groups, each labelled in a left gutter. Deliberately NEUTRAL: on this site
   colour always means a physics sector, and these formulae are cross-cutting,
   so the signature here is structural, not colour.
     .cl-defs-label   group name in the gutter (+ optional .cl-defs-note)
     .cl-use          "who calls this" chip: evolve / initialize / measure
     .cl-defs-chain   group whose entries are a real include chain (↓ rail)
   The .cl-use chips share the pill shape of the Home page's .cl-fact chips so
   the two read as one system. */
.md-typeset .cl-defs {
    margin: 1.2em 0 1.4em;
}

.md-typeset .cl-defs-group {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    gap: 0 1.6rem;
    padding-top: 0.9em;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .cl-defs-group + .cl-defs-group {
    margin-top: 1.1em;
}

/* Gutter label. text-align is reset because the site justifies paragraphs. */
.md-typeset .cl-defs-label {
    margin: 0;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    color: var(--md-default-fg-color--light);
}

.md-typeset .cl-defs-note {
    display: block;
    margin-top: 0.35em;
    font-size: 0.92em;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--md-default-fg-color--lighter);
}

.md-typeset .cl-defs-group > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.md-typeset .cl-defs-group > ul > li {
    margin: 0 0 1em;
}

.md-typeset .cl-defs-group > ul > li:last-child {
    margin-bottom: 0.9em;
}

/* Title line (file name + chips) and the description below it */
.md-typeset .cl-defs-group > ul > li > p {
    margin: 0;
    text-align: left;
}

/* Flex row so a long file name and its chips wrap and align predictably */
.md-typeset .cl-defs-group > ul > li > p:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em 0.45em;
}

.md-typeset .cl-defs-group > ul > li > p:first-child > code.cl-fname {
    margin-bottom: 0;
}

.md-typeset .cl-defs-group > ul > li > p:first-child > .cl-use {
    margin-left: 0;
}

.md-typeset .cl-defs-group > ul > li > p + p {
    margin-top: 0.25em;
    font-size: 0.85em;
    line-height: 1.55;
    color: var(--md-default-fg-color--light);
}

/* "Who calls this" chip */
.md-typeset .cl-use {
    display: inline-block;
    margin: 0 0 0 0.4em;
    padding: 0.15em 0.7em;
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 2em;
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: 0.22em;
    color: var(--md-default-fg-color--light);
    background: color-mix(in srgb, var(--md-default-fg-color) 3%, transparent);
}

/* Chain group: fieldfunctionals -> averages -> energies is a real include
   chain, so its entries are linked rather than merely stacked. */
.md-typeset .cl-defs-chain > ul > li + li::before {
    content: "↓";
    display: block;
    margin: -0.55em 0 0.3em;
    font-size: 0.85em;
    line-height: 1;
    color: var(--md-default-fg-color--lighter);
}

@media screen and (max-width: 44em) {
    .md-typeset .cl-defs-group {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .md-typeset .cl-defs-label {
        margin-bottom: 0.7em;
    }

    .md-typeset .cl-defs-note {
        display: inline;
        margin-left: 0.5em;
        font-size: 0.95em;
    }
}

/* === Variable-name reference (Appendix: Variable Names) ===
   Modifier on the .cl-defs group skeleton above: entries are name/symbol pairs
   rather than name + prose, so the rows form two real columns — monospace name
   | MathJax symbol — split by a hairline rule.

   The rule is painted as a 1px background bar on the <ul>, not as a border on
   the rows: a per-row border would be chopped up by the row spacing, and it
   would also have to sit on the symbol cell, which MathJax swaps out for an
   <mjx-container> once it typesets. Rows therefore carry their spacing as
   padding (not margin), so the bar spans the group with no gaps at either end.
   Column width and gutter live in variables because the bar has to land in the
   middle of the same gutter the grid uses. */
.md-typeset .cl-vars {
    --cl-var-col: 8.5rem;
    --cl-var-gap: 1.6rem;
}

.md-typeset .cl-vars .cl-defs-group > ul {
    padding: 0.15em 0 0.4em;
    background-image: linear-gradient(var(--md-default-fg-color--lightest),
                                      var(--md-default-fg-color--lightest));
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: calc(var(--cl-var-col) + var(--cl-var-gap) / 2) 0;
}

.md-typeset .cl-vars .cl-defs-group > ul > li {
    display: grid;
    grid-template-columns: var(--cl-var-col) 1fr;
    align-items: baseline;
    column-gap: var(--cl-var-gap);
    margin: 0;
    padding: 0.28em 0;
}

/* Variable name: deliberately left with Material's ordinary inline-code look,
   so a name reads the same here as it does in the prose above and in the rest
   of the manual. justify-self keeps the code background hugging the name — as
   a grid item it would otherwise stretch to the full column width and read as
   a filled cell rather than inline code. */
.md-typeset code.cl-vname {
    justify-self: start;
    overflow-wrap: anywhere;
}

/* Long averages (covariant gradients, sums over i and a) must not push the
   grid wider than the content column. */
.md-typeset .cl-vars .cl-defs-group > ul > li > .arithmatex,
.md-typeset .cl-vars .cl-defs-group > ul > li > mjx-container {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* The GW group's gutter note carries inline code; keep Material's own code
   background here too, just scaled down to the note's size. */
.md-typeset .cl-defs-note code {
    padding: 0 0.3em;
    font-size: 0.9em;
    background: var(--md-code-bg-color);
}

/* Narrow screens: no room for two columns, so the pair stacks and the rule
   that would separate them is dropped. */
@media screen and (max-width: 44em) {
    .md-typeset .cl-vars .cl-defs-group > ul {
        background-image: none;
    }

    .md-typeset .cl-vars .cl-defs-group > ul > li {
        grid-template-columns: 1fr;
        row-gap: 0.1em;
        padding: 0.3em 0;
    }
}

/* === Events overview page ===
   The page is a short list of links to Indico. The type roles are inverted
   with respect to the rest of the site: the monospace face carries the URLs
   and labels, and the body face is left to the lede. That is what the content
   is — addresses and event names — and mono URLs stay legible at small sizes
   without competing with the event names above them.

   Kept strictly neutral: on this site a color means a physics sector, so the
   only hue here is the UI accent (light blue), and only on hover/focus. */

/* The markup is raw HTML with no `markdown` attribute, so nothing here can
   rely on a wrapper element: every rule is keyed off its own cl-ev- class. */
.md-typeset .cl-ev-lede {
    text-align: left; /* the site justifies paragraphs; a lede column stretches badly */
    max-width: 44em;
    margin: 0 0 1.8em;
    line-height: 1.7;
}

/* "The Indico pages of the schools are:" — demoted to a small label sitting
   directly on top of the list it introduces, rather than reading as prose. */
.md-typeset .cl-ev-eyebrow {
    text-align: left;
    margin: 0 0 0.7em;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.72em;
    letter-spacing: 0.06em;
    color: var(--md-default-fg-color--light);
}

/* --- The link list ---
   One row per event, hairline-separated. Each row sets the event name in the
   body face and its address underneath in mono: the colon that used to join
   them becomes the line break, so the eye picks out the name first and the
   URL stays available without shouting. */
.md-typeset .cl-ev-list {
    max-width: 44em; /* same measure as the lede, so the two align */
    margin: 0 0 2em;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset a.cl-ev-row {
    position: relative;
    display: block;
    padding: 0.85em 2.2em 0.85em 0.9em;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s, padding-left 0.15s;
}

.md-typeset a.cl-ev-row:hover {
    background: color-mix(in srgb, var(--md-accent-fg-color) 7%, transparent);
    padding-left: 1.2em;
}

.md-typeset a.cl-ev-row:focus-visible {
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: -2px;
}

.md-typeset .cl-ev-name {
    display: block;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--md-default-fg-color);
}

.md-typeset a.cl-ev-row:hover .cl-ev-name {
    color: var(--md-accent-fg-color);
}

.md-typeset .cl-ev-url {
    display: block;
    margin-top: 0.25em;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.7em;
    letter-spacing: 0.01em;
    color: var(--md-default-fg-color--light);
    overflow-wrap: anywhere;
}

/* Every destination here is external; the mark says so once per row, at the
   row's right edge, instead of being repeated inside the URL text. */
.md-typeset a.cl-ev-row::after {
    content: "\2197";
    position: absolute;
    top: 0.9em;
    right: 0.9em;
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.8em;
    color: var(--md-default-fg-color--lighter);
    transition: color 0.15s, transform 0.15s;
}

.md-typeset a.cl-ev-row:hover::after {
    color: var(--md-accent-fg-color);
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset a.cl-ev-row,
    .md-typeset a.cl-ev-row::after {
        transition: none;
    }

    .md-typeset a.cl-ev-row:hover {
        padding-left: 0.9em;
    }

    .md-typeset a.cl-ev-row:hover::after {
        transform: none;
    }
}

/* === News page ===
   NOTE the `cl-newsfeed-` prefix: `.cl-news-*` is already taken by the header
   ticker (javascripts/news-bar.js + stylesheets/news-bar.css), and that
   stylesheet hides `.cl-news-item` unscoped — reusing the name blanks this
   whole page.

   Same system as the events page: monospace carries the labels, hairlines
   carry the structure, and the only hue is the UI accent on hover. The date
   line is promoted to a left-hand column so the feed can be scanned by when
   rather than by reading each title — on this page the date is the index.

   Replaces the previous rhythm of 42px <span> pseudo-titles separated by
   stacked 100px spacer <div>s and horizontal rules. */

.md-typeset .cl-newsfeed-item {
    display: grid;
    grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
    column-gap: 2.6em;
    padding: 2.2em 0;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* Date in column 1, everything else in column 2. Auto-placement then keeps
   the title on the date's own row, so the two line up at the top of the item. */
.md-typeset .cl-newsfeed-date {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 0.35em;
    text-align: left; /* the site justifies paragraphs */
    text-wrap: balance; /* longer date lines split evenly instead of orphaning "2026)" */
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.68em;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
}

.md-typeset .cl-newsfeed-item > *:not(.cl-newsfeed-date) {
    grid-column: 2;
}

.md-typeset .cl-newsfeed-item h2 {
    margin: 0 0 0.5em;
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.25;
    color: var(--md-default-fg-color);
}

/* Left-aligned, overriding the site-wide justification: the feed column is
   narrow and these paragraphs are dense with inline math, which justification
   pulls into rivers. */
.md-typeset .cl-newsfeed-item p {
    text-align: left;
}

.md-typeset .cl-newsfeed-item p:last-child {
    margin-bottom: 0;
}

/* "Read More" closes every entry, so it is given its own line rather than
   trailing whatever the last sentence happened to end on — otherwise it lands
   in a different place in each item. Set in the label face with the arrow that
   means "stays on this site" (the events list uses ↗ for links that leave it). */
.md-typeset .cl-newsfeed-item p > strong:last-child {
    display: block;
    margin-top: 0.9em;
}

.md-typeset .cl-newsfeed-item p > strong > a {
    font-family: var(--md-code-font-family, monospace);
    font-size: 0.78em;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.md-typeset .cl-newsfeed-item p > strong > a::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.4em;
    transition: transform 0.15s;
}

.md-typeset .cl-newsfeed-item p > strong > a:hover::after {
    transform: translateX(3px);
}

/* Narrow screens: no room for a date column, so it stacks above the title. */
@media screen and (max-width: 55em) {
    .md-typeset .cl-newsfeed-item {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.5em;
    }

    .md-typeset .cl-newsfeed-date {
        grid-row: auto;
        padding-top: 0;
    }

    .md-typeset .cl-newsfeed-item > *:not(.cl-newsfeed-date) {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset .cl-newsfeed-item p > strong > a::after {
        transition: none;
    }

    .md-typeset .cl-newsfeed-item p > strong > a:hover::after {
        transform: none;
    }
}