/* clogem-press default theme.
 *
 * vdoing's theming is verifiably just CSS custom properties plus classes
 * (DESIGN.md §1.2), so there is no build step here and never will be.
 *
 * Colour modes (Phase 4 B1, D-P4-2, D-P4-4). The classes are on <html>:
 * `theme-mode-*` and `theme-style-*`. The server stamps
 * `theme-mode-<:default-mode>`; the inline head script replaces it, before
 * the first paint, with the RESOLVED mode — light, dark or read (auto
 * becomes light or dark) — and sets <html data-mode> to the chosen one.
 * Without JS, `.theme-mode-auto` is the light palette plus the
 * `prefers-color-scheme: dark` block below, which must define exactly what
 * `.theme-mode-dark` defines (a test compares them).
 *
 * Every mode block defines vdoing's full variable set plus --accent,
 * --textColorSubtle (muted text) and (P4-B2a) the --error* colours of
 * Pagefind's error box. Text, link-hover, muted and accent reach WCAG AA
 * (4.5:1) on every surface (--bodyBg, --mainBg, --sidebarBg,
 * --customBlockBg, and the translucent --blurBg composited over the page
 * and over a card), and --codeColor on --codeBg, in both page styles;
 * `bb test` merges every rule that applies to <html>, in cascade order,
 * and checks every pair (test/clogem/css_palette.clj). Read mode's code block is
 * dark, as vdoing's is. Code blocks (Phase 4 C, §11.3 item 10) also take
 * --codeLineNumber (line numbers and the language label) and --codeHlBg (a
 * highlighted line): every Chroma token colour of highlight.css, the line
 * numbers and --codeColor reach 4.5:1 on both --codeBg and --codeHlBg
 * (highlight_test.clj).
 *
 * Selectors are unqualified (`.theme-mode-dark`): 0.2.0 put the classes on
 * <body>, and user CSS that qualified them with `body` must drop it.
 */

:root, .theme-mode-light {
  --bodyBg: #f4f5f7;
  --mainBg: #ffffff;
  --sidebarBg: #ffffff;
  --blurBg: #ffffffe6;
  --customBlockBg: #f1f3f5;
  --textColor: #2c3e50;
  --textLightenColor: #145c40;
  --textColorSubtle: #5f6873;
  --borderColor: #dfe2e6;
  --accent: #1a7350;
  --codeBg: #f6f8fa;
  --codeColor: #24292f;
  --codeLineNumber: #5f6873;
  --codeHlBg: #fffbdd;
  --errorBg: #fef2f2;
  --errorBorder: #fecaca;
  --errorText: #b91c1c;
  --shadowColor: rgba(0, 0, 0, 0.1);
  --linesColor: rgba(50, 0, 0, 0.05);
  color-scheme: light;
}

:root { --maxWidth: 62rem; --navbarHeight: 3.6rem; }

.theme-mode-read {
  --bodyBg: #ece6d6;
  --mainBg: #f5f2e9;
  --sidebarBg: #f5f2e9;
  --blurBg: #f5f2e9e6;
  --customBlockBg: #f0ebdf;
  --textColor: #3d362a;
  --textLightenColor: #145c40;
  --textColorSubtle: #5f5a50;
  --borderColor: #d9cfb8;
  --accent: #1a7350;
  --codeBg: #282c34;
  --codeColor: #dcdfe4;
  --codeLineNumber: #9aa3ad;
  --codeHlBg: #1e2620;
  --errorBg: #f6e7df;
  --errorBorder: #e8c4b4;
  --errorText: #9f1d1d;
  --shadowColor: rgba(0, 0, 0, 0.1);
  --linesColor: rgba(50, 0, 0, 0.03);   /* lighter: the accent on pattern 1's crossings (B2b.1) */
  color-scheme: light;
}

.theme-mode-dark {
  --bodyBg: #22252b;
  --mainBg: #16181d;
  --sidebarBg: #1b1e24;
  --blurBg: #16181de6;
  --customBlockBg: #1f2329;
  --textColor: #d5d8dc;
  --textLightenColor: #6cc99c;
  --textColorSubtle: #9aa3ad;
  --borderColor: #2c313a;
  --accent: #3eaf7c;
  --codeBg: #1f2329;
  --codeColor: #dcdfe4;
  --codeLineNumber: #9aa3ad;
  --codeHlBg: #1a2620;
  --errorBg: #2a1a1a;
  --errorBorder: #5c2828;
  --errorText: #f87171;
  --shadowColor: rgba(0, 0, 0, 0.4);
  --linesColor: rgba(125, 125, 125, 0.05);
  color-scheme: dark;
}

/* the no-JS fallback for :auto — identical to .theme-mode-dark */
@media (prefers-color-scheme: dark) {
  .theme-mode-auto {
    --bodyBg: #22252b;
    --mainBg: #16181d;
    --sidebarBg: #1b1e24;
    --blurBg: #16181de6;
    --customBlockBg: #1f2329;
    --textColor: #d5d8dc;
    --textLightenColor: #6cc99c;
    --textColorSubtle: #9aa3ad;
    --borderColor: #2c313a;
    --accent: #3eaf7c;
    --codeBg: #1f2329;
    --codeColor: #dcdfe4;
    --codeLineNumber: #9aa3ad;
    --codeHlBg: #1a2620;
    --errorBg: #2a1a1a;
    --errorBorder: #5c2828;
    --errorText: #f87171;
    --shadowColor: rgba(0, 0, 0, 0.4);
    --linesColor: rgba(125, 125, 125, 0.05);
    color-scheme: dark;
  }
}

/* P4-B2a: the line page style (vdoing's pageStyle: line) draws the page in
 * the card's colour, in every mode. After every mode block, which it ties
 * on specificity; print's html[class] (0,1,1) still wins. */
.theme-style-line { --bodyBg: var(--mainBg); }

* { box-sizing: border-box; }

/* the background is the root's, so the very first frame (and any overscroll)
 * is in the mode */
html {
  background: var(--bodyBg);
  color: var(--textColor);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* P4-B2b: every scroll into view — a #fragment (an id or an <a name>), a
 * focus move, scrollIntoView() — lands below the navbar. A margin on every
 * element outside the navbar, not a scroll-padding on the root, which
 * covered the navbar's own controls too, and Chromium centred one on focus,
 * moving the page (B2b.1). --navbarMeasured is the navbar's height, set by
 * js/nav.js: a long nav wraps */
:root { --jumpOffset: calc(var(--navbarMeasured, var(--navbarHeight)) + 0.75rem); }
:where(body *) { scroll-margin-top: var(--jumpOffset); }
.clogem-navbar * { scroll-margin-top: 0; }

body {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: normal;   /* §6.9: CJK wraps between characters, Tamil must not
                           break inside a grapheme cluster */
}

/* §6.9 — the two Chinese scripts need separate rules, because CSS :lang()
   matches on the tag prefix and :lang(zh) alone would collapse them onto one
   stack and produce visibly wrong shapes for one of the two.
   :where() keeps them at zero specificity, so `code`, `pre` and `kbd` keep
   the monospace stack on zh and ta pages (0.2.0 rendered code in PingFang or
   Noto Sans Tamil there, because :lang(ta) outranked `code`). */
:where(:lang(zh-Hans)) { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
:where(:lang(zh-Hant)) { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; }
:where(:lang(ta)) {
  font-family: "Noto Sans Tamil", "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, sans-serif;
  line-height: 1.85;   /* taller than the Latin default — Tamil glyphs are tall */
}

/* P4-B2a (D-P4-9): one focus ring for everything focusable — links,
 * <summary>, buttons, heading anchors, Pagefind's trigger — in the accent,
 * which reaches 3:1 (WCAG 1.4.11) on every surface. Inside a code block
 * the ring is --codeFocusRing, the code's own colour: the accent on read
 * mode's dark block was 2.41:1. The scrollable <code> draws it inset,
 * since its <pre> clips. */
:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }
pre.clogem-code :focus-visible { outline-color: var(--codeFocusRing); }
pre.clogem-code > code:focus-visible { outline-offset: -2px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--textLightenColor); text-decoration: underline; }

/* WCAG 1.4.1: a link inside prose must not rely on colour alone — the accent
 * against body text is only about 1.9:1 — so prose links are underlined.
 * Navigation and chrome links are recognisable by place and need not be. */
.clogem-content a:not(.header-anchor):not(.card-item),
.clogem-catalogue__desc a, .clogem-feature a, .clogem-post-card__excerpt a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Icons (D-P4-6): `<svg class="clogem-icon"><use href="…icons.svg#name"/>`,
 * sized by the text around them and coloured by it (currentColor). */
.clogem-icon {
  width: 1em; height: 1em; flex: none;
  vertical-align: -0.125em;
  overflow: visible;
}

/* P4-B2b: one row, --navbarHeight tall; a long nav wraps inside it. The
 * backdrop-filter makes it the containing block of anything fixed in it */
.clogem-navbar {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--navbarHeight); padding: 0 1.25rem;
  border-bottom: 1px solid var(--borderColor);
  position: sticky; top: 0; background: var(--blurBg); z-index: 10;
  -webkit-backdrop-filter: saturate(150%) blur(6px); backdrop-filter: saturate(150%) blur(6px);
}
.clogem-navbar__brand { font-weight: 700; font-size: 1.1rem; color: var(--textColor);
  flex: none; max-width: 40%; margin-inline-end: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clogem-navbar__nav { min-width: 0; }
.clogem-navbar__nav > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; padding: 0; }
.clogem-search { display: flex; }
/* the drawer's toggle and the drawer (P4-B2b): see 50rem and below */
.clogem-navbar__toggle { display: none; }
.clogem-navbar__toggle > summary { display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 1.3rem; color: var(--textColor); list-style: none; cursor: pointer; }
.clogem-navbar__toggle > summary::-webkit-details-marker { display: none; }
.clogem-navbar__toggle .is-close, .clogem-navbar__toggle[open] .is-menu { display: none; }
.clogem-navbar__toggle[open] .is-close { display: inline; }
.clogem-navbar__drawer { display: contents; }
.clogem-navbar__item { position: relative; }
.clogem-navbar__item details > summary { list-style: none; cursor: pointer; }
.clogem-navbar__item details > summary::-webkit-details-marker { display: none; }
.clogem-navbar__caret { margin-left: 0.2em; font-size: 0.8em; color: var(--textColorSubtle); }
.clogem-navbar__item details[open] .clogem-navbar__caret { transform: rotate(180deg); }
.clogem-navbar__menu { list-style: none; position: absolute; top: 100%; left: 0; min-width: 10rem; margin: 0;
  padding: 0.4rem 0.8rem; background: var(--mainBg); border: 1px solid var(--borderColor); border-radius: 6px; z-index: 20; }

/* D-P4-3: the colour-mode menu button. The button shows the icon of the
 * mode in <html data-mode> (set by the head script); the menu lists all four. */
.clogem-mode { position: relative; }
.clogem-mode[hidden], .clogem-mode__menu[hidden] { display: none; }
.clogem-mode__button {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1.1rem; line-height: 1; color: var(--textColor);
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 0.3rem 0.4rem; cursor: pointer;
}
.clogem-mode__button:hover { border-color: var(--borderColor); }
.clogem-mode__button .clogem-icon { display: none; }
.clogem-mode__button .clogem-icon.is-auto,
[data-mode="light"] .clogem-mode__button .clogem-icon.is-light,
[data-mode="dark"] .clogem-mode__button .clogem-icon.is-dark,
[data-mode="read"] .clogem-mode__button .clogem-icon.is-read { display: inline-block; }
[data-mode="light"] .clogem-mode__button .clogem-icon.is-auto,
[data-mode="dark"] .clogem-mode__button .clogem-icon.is-auto,
[data-mode="read"] .clogem-mode__button .clogem-icon.is-auto { display: none; }
.clogem-mode__menu {
  list-style: none; position: absolute; top: calc(100% + 0.3rem); right: 0; z-index: 20;
  min-width: 11rem; margin: 0; padding: 0.3rem;
  background: var(--mainBg); border: 1px solid var(--borderColor); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.clogem-mode__menu button {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  font: inherit; font-size: 0.9rem; color: var(--textColor); text-align: start;
  background: none; border: 0; border-radius: 4px; padding: 0.35rem 0.6rem; cursor: pointer;
}
.clogem-mode__menu button:hover { background: var(--customBlockBg); }
.clogem-mode__menu button[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
.clogem-navbar__menu li { padding: 0.2rem 0; }

/* the list wraps: a long :label widened a 360 px page. P4-B2b: above 50rem
 * it is a dropdown, opened by the <details> before it */
.clogem-langs { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.clogem-langs__label { color: var(--textColorSubtle); font-size: 0.85rem; }
.clogem-langs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0; padding: 0; }
.clogem-langs .is-current { color: var(--textColorSubtle); font-weight: 600; }
.clogem-langs__toggle { display: none; }
.clogem-langs__toggle > summary { display: flex; align-items: center; gap: 0.3rem; list-style: none; cursor: pointer;
  white-space: nowrap; color: var(--textColor); }
.clogem-langs__toggle > summary::-webkit-details-marker { display: none; }
.clogem-langs__toggle[open] .clogem-navbar__caret { transform: rotate(180deg); }
@media not all and (max-width: 50rem) {
  .clogem-langs { flex: none; }   /* shrunk, its summary overlapped the search trigger (B2b.1) */
  .clogem-langs__toggle { display: block; }
  .clogem-langs__label, .clogem-langs__toggle:not([open]) + ul { display: none; }
  .clogem-langs ul { position: absolute; top: calc(100% + 0.6rem); inset-inline-end: 0; z-index: 20;
    flex-direction: column; flex-wrap: nowrap; min-width: 10rem; padding: 0.4rem 0.8rem;
    background: var(--mainBg); border: 1px solid var(--borderColor); border-radius: 6px; }
}
/* the trigger is its icon alone (Pagefind's rules are (3,1,0); the dialog
 * has a .pf-trigger-shortcut too) */
@media (max-width: 64rem) {
  pagefind-modal-trigger :is(.pf-trigger-text, .pf-trigger-shortcut) { display: none !important; }
  pagefind-modal-trigger .pf-trigger-btn { width: 36px !important; height: 36px !important;
    padding: 0 !important; justify-content: center !important; }
}

.clogem-shell {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 2rem;
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}
@media (max-width: 50rem) {
  .clogem-shell { grid-template-columns: minmax(0, 1fr); }
  .clogem-sidebar { order: 2; }
}
/* P4-B2b: 50rem and below. Outside any scripting query, so a browser
 * without the feature gets them: the navbar of old, static, wrapping, every
 * link shown; jumps need no navbar offset */
@media (max-width: 50rem) {
  :root { --jumpOffset: 0.75rem; }
  .clogem-navbar { position: static; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.5rem 1.25rem; }
  .clogem-navbar__brand { max-width: 100%; }
  .clogem-navbar__menu { position: static; }
}
/* with scripting: one sticky row (toggle, brand, search, mode) and a drawer
 * below it, shown while the toggle is open. Absolute, not fixed: the
 * navbar's backdrop-filter would size a fixed drawer to the navbar. A
 * failed js/nav.js leaves the toggle working, and the sidebar in place */
@media (scripting: enabled) and (max-width: 50rem) {
  :root { --jumpOffset: calc(var(--navbarMeasured, var(--navbarHeight)) + 0.75rem); }
  .clogem-navbar { position: sticky; flex-wrap: nowrap; gap: 0.5rem; padding: 0 0.75rem; }
  .clogem-navbar__toggle:not([hidden]) { display: block; margin-inline-start: -0.5rem; }
  .clogem-navbar__brand { flex: 1 1 auto; min-width: 0; }
  .clogem-navbar__drawer { display: none; }
  .clogem-navbar__toggle[open] ~ .clogem-navbar__drawer {
    display: block; position: absolute; top: 100%; inset-inline-start: 0; width: min(20rem, 100%);
    max-height: calc(100vh - var(--navbarHeight)); max-height: calc(100dvh - var(--navbarHeight));
    overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 1.25rem 1.25rem;
    background: var(--mainBg); border: 1px solid var(--borderColor); border-width: 0 1px 1px 0;
  }
  .clogem-navbar__drawer .clogem-navbar__nav > ul { flex-direction: column; }
  .clogem-navbar__drawer .clogem-langs { flex-wrap: wrap; margin-top: 0.5rem; padding-top: 0.5rem;
    border-top: 1px solid var(--borderColor); }
  .clogem-navbar__drawer > .clogem-sidebar { margin-top: 0.75rem; }
}

.clogem-sidebar { background: var(--sidebarBg); border-radius: 5px; padding: 1rem; align-self: start; }
.clogem-sidebar__group h2 { font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--textColorSubtle); margin: 1rem 0 0.4rem; }
.clogem-sidebar ul { list-style: none; margin: 0; padding: 0; }
.clogem-sidebar li { padding: 0.15rem 0; }
.clogem-sidebar li.is-active > a { font-weight: 700; color: var(--accent); }

.clogem-fallback {
  font-size: 0.7rem; margin-left: 0.35rem; padding: 0 0.3rem;
  border: 1px solid var(--borderColor); border-radius: 3px; color: var(--textColorSubtle);
}

.clogem-main { min-width: 0; }
/* focus lands here when the banner is dismissed (js/lang.js); the column
 * itself is not a control, so it draws no ring */
.clogem-main[tabindex="-1"]:focus { outline: none; }
.clogem-article h1 { margin-top: 0; }
.clogem-meta { color: var(--textColorSubtle); font-size: 0.85rem; display: flex; gap: 1rem; flex-wrap: wrap; }
/* muted rather than faded: opacity took the accent below AA */
.clogem-langs a.is-untranslated { color: var(--textColorSubtle); }
.clogem-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.clogem-variants { font-size: 0.9rem; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: baseline; }
.clogem-variants__links { display: flex; gap: 0.6rem; }

/* D-P3-14: the "also available" note js/lang.js inserts at the top of the
 * main column — in the flow, so it moves the page down by its own height and
 * covers nothing */
.clogem-lang-banner {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--borderColor);
  border-left: 3px solid var(--accent); border-radius: 4px; font-size: 0.9rem;
}
/* min-width:0 lets the text shrink below its longest word, and the link may
 * break anywhere: a long :label used to push the dismiss button off-screen
 * at 360 px */
.clogem-lang-banner__text { flex: 1; min-width: 0; }
.clogem-lang-banner__text a { overflow-wrap: anywhere; }
.clogem-lang-banner__dismiss {
  flex: none; font: inherit; font-size: 1.1rem; line-height: 1; color: inherit;
  background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 0.15rem 0.45rem; cursor: pointer;
}
.clogem-lang-banner__dismiss:hover { border-color: var(--borderColor); }

/* D-P3-15: the giscus widget below the article */
.clogem-comments { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--borderColor); }

.header-anchor { opacity: 0; margin-left: 0.35rem; text-decoration: none; }
:is(h1, h2, h3, h4, h5, h6):hover .header-anchor { opacity: 0.5; }
.header-anchor:focus-visible { opacity: 1; }   /* a ring on nothing is no ring */

/* Code blocks (§11.3 item 10). The <code> is the scroll box, not the <pre>,
 * so the language label and the copy button (both pinned to the <pre>'s
 * corner) stay put while wide code scrolls on its own — never the page.
 * Highlighted code is one `.line` per line; the <code> is a one-column
 * grid, so every line is as wide as the widest and a highlighted line's
 * background runs the whole scroll width. Line numbers are a CSS counter,
 * never text: nothing to copy, nothing for Pagefind to glue to the code. */
pre.clogem-code {
  position: relative;
  background: var(--codeBg); color: var(--codeColor); padding: 0; border-radius: 6px;
  max-width: 100%; min-width: 0;
  overflow: hidden;   /* a clipping box: its content never widens the layout */
}
pre.clogem-code > code {
  display: grid; grid-template-columns: minmax(100%, max-content);
  overflow-x: auto;   /* wide code scrolls inside its own box, never the page */
  padding: 0.9rem 1rem; counter-reset: clogem-ln;
}
pre.clogem-code[data-lang] > code, pre.clogem-code.has-copy > code { padding-top: 1.9rem; }
pre.clogem-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 0.35rem; right: 0.8rem;
  font-size: 0.75rem; line-height: 1.2; color: var(--codeLineNumber);
  pointer-events: none;
}
pre.clogem-code.has-copy[data-lang]::before { right: 2.6rem; }
pre.clogem-code .line { display: block; }
pre.clogem-code .line.hl { background: var(--codeHlBg); box-shadow: inset 3px 0 0 var(--accent); }
pre.clogem-code.line-numbers .line::before {
  counter-increment: clogem-ln; content: counter(clogem-ln);
  display: inline-block; width: 2ch; margin-right: 1.25ch; text-align: right;
  color: var(--codeLineNumber); -webkit-user-select: none; user-select: none;
}
pre.clogem-code.ln-w3 .line::before { width: 3ch; }
pre.clogem-code.ln-w4 .line::before { width: 4ch; }
pre.clogem-code.ln-w5 .line::before { width: 5ch; }
pre.clogem-code.ln-w6 .line::before { width: 6ch; }
.clogem-copy {
  position: absolute; top: 0.25rem; right: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 1.6rem; padding: 0; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--codeLineNumber); cursor: pointer; font: inherit;
}
.clogem-copy:hover { border-color: var(--codeLineNumber); }
.clogem-copy.is-copied { color: var(--codeColor); }
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
code { font-size: 0.9em; }
/* inline code sits in the text, so it takes the text's colours, not the
 * code block's (read mode's block is dark) */
:not(pre) > code { background: var(--customBlockBg); padding: 0.1em 0.35em; border-radius: 3px; }

table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
th, td { border: 1px solid var(--borderColor); padding: 0.4rem 0.7rem; }

blockquote {
  margin: 1rem 0; padding: 0.1rem 1rem; border-left: 3px solid var(--borderColor);
  color: var(--textColorSubtle);
}

.clogem-list { list-style: none; padding: 0; }
.clogem-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--borderColor);
  display: flex; justify-content: space-between; gap: 1rem; }

.clogem-footer {
  border-top: 1px solid var(--borderColor); padding: 1.5rem 1.25rem;
  color: var(--textColorSubtle); font-size: 0.85rem; text-align: center;
}

img { max-width: 100%; height: auto; }

/* ---- Phase 2: index pages, pagination, single-column shell ---- */
.clogem-shell--single { grid-template-columns: minmax(0, 1fr); }
.clogem-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1rem 0; }
.clogem-bar li { border: 1px solid var(--borderColor); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.9rem; }
.clogem-bar li.is-active { border-color: var(--accent); }
.clogem-bar__count { color: var(--textColorSubtle); margin-left: 0.35rem; font-size: 0.8rem; }
.clogem-row time { color: var(--textColorSubtle); font-size: 0.85rem; white-space: nowrap; margin-inline-start: auto; }
/* P4-E2.1/2: a row's title wraps, long words too; its badges (spans) keep one line, on its first */
.clogem-row { align-items: baseline; }
.clogem-row > span { white-space: nowrap; }
.clogem-row > a { min-width: 0; }
.clogem-pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1.5rem 0; }
.clogem-pagination .is-disabled { color: var(--textColorSubtle); }
.clogem-empty { color: var(--textColorSubtle); font-style: italic; }
.clogem-archive-month h3 { font-size: 0.95rem; color: var(--textColorSubtle); margin: 1rem 0 0.25rem; }

/* ---- Phase 2: sidebar tree ---- */
.clogem-sidebar__dir > summary { cursor: pointer; font-weight: 600; padding: 0.2rem 0; list-style: none; }
.clogem-sidebar__dir > summary::-webkit-details-marker { display: none; }
.clogem-sidebar__caret { color: var(--textColorSubtle); font-size: 0.85em; margin-right: 0.3em; }
.clogem-sidebar__dir[open] > summary > .clogem-sidebar__caret { transform: rotate(90deg); }
[dir="rtl"] .clogem-sidebar__dir:not([open]) > summary > .clogem-sidebar__caret { transform: scaleX(-1); }
.clogem-sidebar__dir > ul { padding-left: 0.9rem; border-left: 1px solid var(--borderColor); margin-left: 0.3rem; }
.clogem-sidebar .is-active-trail > summary { color: var(--accent); }

/* ---- Phase 2: homepage ---- */
.clogem-shell--home { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
@media (max-width: 50rem) { .clogem-shell--home { grid-template-columns: minmax(0, 1fr); } }
.clogem-home-right { align-self: start; }
.clogem-home-right h2 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--textColorSubtle); }
.clogem-post-card { padding: 1rem 0; border-bottom: 1px solid var(--borderColor); }
.clogem-post-card__title { margin: 0 0 0.4rem; font-size: 1.25rem; }
.clogem-sticky, .clogem-title-tag {
  font-size: 0.7rem; margin: 0 0.4rem; padding: 0.05rem 0.4rem; vertical-align: middle;
  border-radius: 3px; background: var(--accent); color: var(--mainBg);
}
.clogem-title-tag { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.clogem-post-card__more { font-size: 0.9rem; }
.clogem-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.clogem-feature { border: 1px solid var(--borderColor); border-radius: 8px; padding: 1rem; }
.clogem-tag::before { content: "#"; color: var(--textColorSubtle); }
.clogem-meta__tags .clogem-tag { margin-right: 0.4rem; }

/* ---- Phase 2: article chrome ---- */
.clogem-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0 0 1rem; font-size: 0.85rem; color: var(--textColorSubtle); }
.clogem-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.35rem; }
.clogem-breadcrumbs__sep { font-size: 0.9em; }
[dir="rtl"] .clogem-breadcrumbs__sep { transform: scaleX(-1); }
.clogem-prev-next { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--borderColor); }
.clogem-prev-next__next { margin-left: auto; text-align: right; }
.clogem-prev-next span { display: block; font-size: 0.75rem; color: var(--textColorSubtle); }
/* P4-E2: vdoing's PageEdit */
.clogem-page-edit { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1.5rem; font-size: 0.85rem; color: var(--textColorSubtle); }
.clogem-page-edit__updated { margin-inline-start: auto; }
.clogem-update-bar { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--borderColor); }
.clogem-update-bar h2 { font-size: 1rem; }
.clogem-navbar__logo { height: 2.2rem; width: auto; max-width: 8rem; vertical-align: middle; margin-inline-end: 0.5rem; }
@media (max-width: 64rem) {
  .has-logo .clogem-navbar__title, .clogem-navbar__repo-label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); }
}
@media (max-width: 50rem) {
  .clogem-navbar__repo-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* P4-B2b: vdoing's page buttons, fixed at the viewport's edges. The widest
 * shell is 80rem, so its gutter is (100vw - 80rem) / 2 + 1.25rem: 52px at
 * 84rem, 84px at 88rem. They show only from 84rem, 50px wide, then 80px —
 * never over a box (beside a classic scrollbar, a few px of the sidebar's
 * or the TOC's padding). Below the navbar and its drawer (z-index 10) */
.clogem-page-button { display: none; }
@media (min-width: 84rem) {
  .clogem-page-button { position: fixed; top: calc(50% - 35px); z-index: 5; display: flex; align-items: center;
    justify-content: center; width: 50px; height: 70px; font-size: 1.25rem; color: var(--textColorSubtle);
    border-radius: 3px; opacity: 0.55; transition: opacity 0.2s, background-color 0.2s; }
  .clogem-page-button:hover { opacity: 1; color: var(--textColorSubtle); background: rgba(153, 153, 153, 0.15); text-decoration: none; }
  .clogem-page-button.is-prev { inset-inline-start: 0; }
  .clogem-page-button.is-next { inset-inline-end: 0; }
  [dir="rtl"] .clogem-page-button .clogem-icon { transform: scaleX(-1); }
}
@media (min-width: 88rem) { .clogem-page-button { width: 80px; } }

/* P4-B2b: back to top, as vdoing's (Buttons.vue), below the navbar and its
 * drawer (z-index 10). js/nav.js shows it past 100 px of scrolling */
.clogem-back-to-top { position: fixed; right: 2rem; bottom: 2.5rem; z-index: 5; display: flex; align-items: center;
  justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; font: inherit; font-size: 1.1rem;
  color: var(--textColor); background: var(--blurBg); border: 0; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; }
.clogem-back-to-top:hover { color: var(--accent); }
.clogem-back-to-top[hidden] { display: none; }
@media (max-width: 50rem) { .clogem-back-to-top { right: 1rem; bottom: 1.5rem; } }

/* ---- Phase 2: catalogue pages ---- */
.clogem-catalogue__header { margin-bottom: 1.5rem; }
.clogem-catalogue__img { max-height: 12rem; border-radius: 8px; }
.clogem-catalogue__desc { color: var(--textColorSubtle); }
.clogem-catalogue__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.clogem-catalogue__card { border: 1px solid var(--borderColor); border-radius: 8px; padding: 1rem; }
.clogem-catalogue__card h3 { margin-top: 0; }
.clogem-catalogue__card h3 .clogem-bar__count { font-weight: 400; }
.clogem-catalogue__list { list-style: none; padding: 0; margin: 0; }
.clogem-catalogue__list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; }
.clogem-catalogue__sub { margin-top: 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--borderColor); }
.clogem-catalogue__sub h4 { margin: 0.25rem 0; }

/* ---- Phase 2: TOC bar ----
 * P4-B2b: beside a sidebar the TOC shows from 80rem, as vdoing's, in a
 * shell 18rem wider; below that the page is sidebar | main. Without a
 * sidebar it shows above 64rem, in the 62rem shell. */
.clogem-shell--single.clogem-shell--toc { grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem); }
@media (max-width: 64rem) {
  .clogem-shell--single.clogem-shell--toc { grid-template-columns: minmax(0, 1fr); }
  .clogem-shell--single > .clogem-toc { display: none; }
}
@media not all and (min-width: 80rem) { .clogem-shell--toc:not(.clogem-shell--single) > .clogem-toc { display: none; } }
@media (min-width: 80rem) {
  .clogem-shell--toc:not(.clogem-shell--single) {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(11rem, 14rem);
    gap: 1.5rem; max-width: calc(var(--maxWidth) + 18rem);
  }
  .clogem-shell--toc:not(.clogem-shell--single) > .clogem-toc { padding-right: 0.5rem; }
  /* P4-B2b.1: :right-menu-bar false dropped the TOC; the article takes its
   * room (584 px at 1280 in the 62rem shell), as vdoing's does */
  .clogem-shell--wide { max-width: calc(var(--maxWidth) + 18rem); }
}
/* P4-B2b: the sidebar's collapse button, first in the main column. Only
 * js/nav.js reveals it and sets `is-sidebar-collapsed`, and only above
 * 50rem does either take effect: the drawer always shows the sidebar */
.clogem-sidebar-toggle { float: inline-start; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin: -0.15rem 0.5rem 0 -0.35rem; padding: 0; font: inherit; font-size: 1rem;
  color: var(--textColorSubtle); background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.clogem-sidebar-toggle:hover { border-color: var(--borderColor); color: var(--textColor); }
.clogem-sidebar-toggle[hidden], .clogem-sidebar-toggle[aria-expanded="false"] .is-expanded,
.clogem-sidebar-toggle[aria-expanded="true"] .is-collapsed { display: none; }
[dir="rtl"] .clogem-sidebar-toggle .clogem-icon { transform: scaleX(-1); }
@media (max-width: 50rem) { .clogem-sidebar-toggle { display: none; } }
@media not all and (max-width: 50rem) {
  .clogem-shell.is-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .clogem-shell.is-sidebar-collapsed > .clogem-sidebar { display: none; }
  /* widened past 50rem, the aside is in the drawer until js/nav.js moves it
   * back: never laid out in the navbar, main keeps its column, and the
   * reading position stays put (B2b.1) */
  .clogem-navbar__drawer > .clogem-sidebar { display: none; }
  .clogem-shell:not(.clogem-shell--single, .clogem-shell--home, .is-sidebar-collapsed):not(:has(> .clogem-sidebar)) > .clogem-main { grid-column: 2; }
}
@media (min-width: 80rem) {
  .clogem-shell--toc.is-sidebar-collapsed:not(.clogem-shell--single) { grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem); }
}
/* stuck, it stays clear of the back-to-top button's band */
.clogem-toc { position: sticky; top: calc(var(--navbarMeasured, var(--navbarHeight)) + 1rem); align-self: start; font-size: 0.85rem;
  border-left: 1px solid var(--borderColor); padding-left: 0.75rem;
  max-height: calc(100vh - var(--navbarMeasured, var(--navbarHeight)) - 6.2rem); overflow-y: auto; }
.clogem-toc ul { list-style: none; margin: 0; padding: 0; }
.clogem-toc li { padding: 0.15rem 0; }
.clogem-toc li.level-3 { padding-left: 0.9rem; }
.clogem-toc li.level-4 { padding-left: 1.8rem; }
.clogem-toc li.level-5, .clogem-toc li.level-6 { padding-left: 2.7rem; }
.clogem-toc a { color: var(--textColorSubtle); }
.clogem-toc li.is-active > a { color: var(--accent); font-weight: 600; }

/* ---- Phase 2: containers and card lists (class names mirror vdoing) ---- */
.custom-block { margin: 1rem 0; padding: 0.6rem 1rem; border-left: 4px solid var(--borderColor); background: var(--customBlockBg); border-radius: 4px; }
.custom-block-title, .custom-block.theorem > .title { font-weight: 700; margin: 0 0 0.3rem; }
.custom-block.tip { border-color: var(--accent); }
.custom-block.warning { border-color: #e7c000; }
.custom-block.danger { border-color: #cc0000; }
.custom-block.note { border-color: #4a90e2; }
.custom-block.details > summary { cursor: pointer; font-weight: 600; }
.custom-block.theorem { border-left-width: 1px; border: 1px solid var(--borderColor); }
.card-list, .card-img-list { display: grid; gap: 1rem; margin: 1rem 0; }
.row-1 { grid-template-columns: 1fr; }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 50rem) { .card-list, .card-img-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-list .card-item { display: block; border: 1px solid var(--borderColor); border-radius: 8px; padding: 1rem; color: var(--textColor); }
.card-list .card-item .name { font-weight: 700; }
.card-list .card-item .desc, .card-img-list .desc { color: var(--textColorSubtle); font-size: 0.9rem; }
.card-list .avatar, .card-img-list .avatar { width: 2rem; height: 2rem; border-radius: 50%; }
.card-list .no-zoom { width: 100%; border-radius: 6px; }
.card-img-list .card-item { border: 1px solid var(--borderColor); border-radius: 8px; overflow: hidden; }
.card-img-list .box-img img { width: 100%; height: 100%; display: block; }
.card-img-list .box-info { padding: 0.75rem; }
.card-img-list .title { font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Phase 4 B2a: page styles (vdoing pageStyle, §11.3 item 1) ----
 * `:theme :page-style` puts theme-style-card (the default) or
 * theme-style-line on <html>. The boxes are the main column of every page
 * kind, the sidebar, and the home page's right-bar sections and post
 * cards. Card: --mainBg cards on the page's --bodyBg (darker in light and
 * read, lighter in dark, as vdoing's), with vdoing's 5px radius and
 * shadows. Line: the same boxes, flat — a 1px border, no shadow — on a
 * page of the same colour (above). */
.clogem-main { background: var(--mainBg); border-radius: 5px; padding: 1.25rem 1.5rem; align-self: start; }
@media (max-width: 50rem) { .clogem-main { padding: 1rem; } }
/* P4-B2b: vdoing's contentBgStyle patterns (Page.vue), on the main column of
 * articles and catalogues (`:theme :content-bg-style` 1–6), in --linesColor
 * over the card. Longhands only: the card's `background` above stays */
.clogem-main.clogem-bg-style-1 { background-image: linear-gradient(90deg, var(--linesColor) 3%, transparent 3%),
  linear-gradient(0deg, var(--linesColor) 3%, transparent 3%); background-position: center center; background-size: 20px 20px; }
.clogem-main.clogem-bg-style-2 { background-image: repeating-linear-gradient(0deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%); background-size: 30px 30px; }
.clogem-main.clogem-bg-style-3 { background-image: repeating-linear-gradient(90deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%); background-size: 30px 30px; }
.clogem-main.clogem-bg-style-4 { background-image: repeating-linear-gradient(-45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%); background-size: 20px 20px; }
.clogem-main.clogem-bg-style-5 { background-image: repeating-linear-gradient(45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%); background-size: 20px 20px; }
.clogem-main.clogem-bg-style-6 { background-image: radial-gradient(var(--linesColor) 1px, transparent 1px); background-size: 10px 10px; }
.clogem-home-right > section { background: var(--mainBg); border-radius: 5px; padding: 0.25rem 1rem 0.75rem; }
.clogem-home-right > section + section { margin-top: 1rem; }
/* P4-B2a.1: a home whose main column lists post cards is no box itself —
 * vdoing's post list is cards on the page, not cards in a card — and the
 * home's own text above the list is the card instead */
html[class] .clogem-main.clogem-main--posts { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.clogem-main--posts > .clogem-content { background: var(--mainBg); border-radius: 5px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
@media (max-width: 50rem) { .clogem-main--posts > .clogem-content { padding: 1rem; } }
.theme-style-card :is(.clogem-main, .clogem-sidebar, .clogem-home-right > section, .clogem-main--posts > .clogem-content) {
  box-shadow: 0 1px 2px var(--shadowColor);
}
.theme-style-card .clogem-post-card, .theme-style-line .clogem-post-card {
  background: var(--mainBg); border-radius: 5px; border-bottom: 0;
  padding: 1rem 1.25rem; margin: 0 0 1rem;
}
.theme-style-card .clogem-post-card { box-shadow: 0 0 4px var(--shadowColor); transition: box-shadow 0.2s; }
.theme-style-card .clogem-post-card:hover { box-shadow: 0 1px 15px var(--shadowColor); }
.theme-style-line :is(.clogem-main, .clogem-sidebar, .clogem-home-right > section, .clogem-post-card,
                       .clogem-main--posts > .clogem-content) {
  border: 1px solid var(--borderColor); box-shadow: none;
}

/* ---- Phase 4 B1: Pagefind follows the mode (D-P4-5) ----
 * Pagefind's Component UI declares its --pf-* defaults on :root, and its
 * stylesheet is linked after this one; `html[class]` (0,1,1) outranks
 * `:root` (0,1,0) wherever it is, and every page's <html> has a class. The
 * modal, the trigger, results and filters all draw from these. */
html[class] {
  --pf-text: var(--textColor);
  --pf-text-secondary: var(--textColorSubtle);
  --pf-text-muted: var(--textColorSubtle);
  --pf-background: var(--mainBg);
  --pf-border: var(--borderColor);
  --pf-border-focus: var(--accent);
  --pf-skeleton: var(--customBlockBg);
  --pf-skeleton-shine: var(--bodyBg);
  --pf-hover: var(--customBlockBg);
  --pf-mark: var(--textColor);
  --pf-outline-focus: var(--focusRing);
  /* P4-B2a: the focus ring (above), resolved per mode */
  --focusRing: var(--accent);
  --codeFocusRing: var(--codeColor);
  /* P4-B2a: the rest of what Pagefind 1.5.2 reads. Its error colours fail
   * AA (#dc2626 on #fef2f2 is 4.41:1), so they come from the palette;
   * shadows and the backdrop are Pagefind's light values */
  --pf-error-bg: var(--errorBg);
  --pf-error-border: var(--errorBorder);
  --pf-error-text: var(--errorText);
  --pf-error-text-secondary: var(--textColor);
  --pf-scroll-shadow: rgba(0, 0, 0, 0.08);
  --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);
  --pf-modal-backdrop: rgba(0, 0, 0, 0.5);
}
/* Pagefind keys its dark values to [data-pf-theme="dark"], which nothing
 * sets; these are they, at (0,1,1) so its later :root loses */
html.theme-mode-dark {
  --pf-scroll-shadow: rgba(255, 255, 255, 0.1);
  --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --pf-modal-backdrop: rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  html.theme-mode-auto {
    --pf-scroll-shadow: rgba(255, 255, 255, 0.1);
    --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --pf-modal-backdrop: rgba(0, 0, 0, 0.7);
  }
}

/* ---- Phase 4 B1: reduced motion and print (D-P4-4) ---- */
/* B2b.1: js/nav.js sets clogem-loading until the page has loaded, so the
 * browser's own jump to a fresh load's #fragment is instant; every jump after
 * it — a click, a tap, a key, history — is smooth. Without JS, all are */
@media (prefers-reduced-motion: no-preference) { html:not(.clogem-loading) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  /* the light palette whatever the mode: html[class] outranks every
   * .theme-mode-* block */
  html[class] {
    --bodyBg: #ffffff;
    --mainBg: #ffffff;
    --sidebarBg: #ffffff;
    --blurBg: #ffffff;
    --customBlockBg: #f1f3f5;
    --textColor: #1f2328;
    --textLightenColor: #145c40;
    --textColorSubtle: #5f6873;
    --borderColor: #dfe2e6;
    --accent: #1a7350;
    --codeBg: #f6f8fa;
    --codeColor: #24292f;
    --codeLineNumber: #5f6873;
    --codeHlBg: #fffbdd;
    --errorBg: #fef2f2;
    --errorBorder: #fecaca;
    --errorText: #b91c1c;
    color-scheme: light;
  }
  .clogem-navbar, .clogem-sidebar, .clogem-toc, .clogem-mode, .clogem-search,
  .clogem-comments, .clogem-lang-banner, .clogem-prev-next, .header-anchor,
  .clogem-navbar__toggle, .clogem-navbar__drawer, .clogem-langs__toggle,
  .clogem-sidebar-toggle, .clogem-page-button, .clogem-back-to-top,
  .clogem-hero, .clogem-title-badge { display: none !important; }
  .clogem-shell, .clogem-shell--toc, .clogem-shell--single.clogem-shell--toc {
    display: block; max-width: none; padding: 0;
  }
  /* P4-B2a: print draws no box, in either style — no shadow, no border, no
   * radius, no padding — and no transition into that. Only the boxes: a
   * highlighted code line keeps its inset accent bar, its only marker
   * when backgrounds are not printed */
  html[class] :is(.clogem-main, .clogem-home-right > section, .clogem-post-card,
                  .clogem-main--posts > .clogem-content) {
    border: 0; padding: 0; border-radius: 0; box-shadow: none; transition: none;
  }
  html[class] .clogem-main { background-image: none; }   /* no pattern */
  .clogem-content a { text-decoration: underline; }
  pre.clogem-code, pre.clogem-code > code { white-space: pre-wrap; overflow: visible; }
  pre.clogem-code > code { display: block; }
  .clogem-copy { display: none !important; }
  .clogem-page-edit__link, .clogem-update-bar { display: none !important; }
}

/* ---- Phase 4 E1a (§11.3 item 13): the title badge, vdoing's home banner
 * and the footer's lines; the opt-in rules are css/identity.css's. Auto is
 * white on #28282d; the action is --mainBg on --accent, never white */
.clogem-title-badge { width: auto; height: 1em; margin-inline-end: 0.3em; color: var(--accent); }
.clogem-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; padding: 3rem 1.25rem; text-align: center; color: #fff; --focusRing: #fff;
  background: linear-gradient(#ffffff0f 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, #ffffff0f 1px, transparent 1px) 0 0 / 24px 24px, #28282d; }
.clogem-hero--none, .clogem-hero--clear { color: var(--textColor); --focusRing: var(--accent); background: var(--mainBg); }
.clogem-hero--clear { background: none; }
.clogem-hero--image { text-shadow: 0 1px 3px #000; }
.clogem-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.clogem-hero__img { max-height: 10rem; }
.clogem-hero__title { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.3; }
.clogem-hero__tagline { margin: 0; }
.clogem-hero__action, .clogem-hero__action:hover { padding: 0.4rem 1.4rem; border-radius: 4px; color: var(--mainBg);
  background: var(--accent); text-shadow: none; }
.clogem-footer p { margin: 0.25rem 0; }