/* ============================================================================
   SWISSWIKI — International Typographic Style for GitHub wikis
   Layout is a hairline grid; type does the work; colour is used once, on purpose.
   Every colour and font here resolves from config.php via Theme::css().
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    --bg: #F5F5F5;
    --surface: #FFFFFF;
    --surface-2: #EDEDED;
    --fg: #111111;
    --fg-2: rgba(17, 17, 17, .66);
    --fg-3: rgba(17, 17, 17, .44);
    --line: rgba(0, 0, 0, .13);
    --line-soft: rgba(0, 0, 0, .06);
    --a: var(--accent);
    --a-rgb: var(--accent-rgb);
    --code-bg: #121316;
    --code-fg: #E9E9E9;
    /* Text drawn on top of the accent colour. Dark mode lightens the accent,
       so white-on-accent would fail contrast there. */
    --on-accent: #FFFFFF;
    --shadow: 0 40px 90px -40px rgba(0, 0, 0, .45);
    --grain-opacity: .035;

    --c-note: var(--a);
    --c-tip: #2C7A57;
    --c-important: #6A4FB3;
    --c-warning: #A97316;
    --c-caution: #B23A2B;

    --topbar-h: 4rem;
    --sidebar-w: 17rem;
    --rail-w: 14.5rem;
    --shell-max: 105rem;
    --pad: clamp(1.25rem, 3.5vw, 3.5rem);
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #111111;
    --surface: #171717;
    --surface-2: #1E1E1E;
    --fg: #F2F2F2;
    --fg-2: rgba(242, 242, 242, .64);
    --fg-3: rgba(242, 242, 242, .40);
    --line: rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .07);
    --a: var(--accent-dk);
    --a-rgb: var(--accent-dk-rgb);
    --code-bg: #0B0B0C;
    --on-accent: #101A12;
    --shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
    --grain-opacity: .05;

    --c-tip: #63B98F;
    --c-important: #A28AE0;
    --c-warning: #D8A245;
    --c-caution: #E0705E;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 1.5rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: calc(1rem * var(--type-scale, 1));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    transition: background-color .35s ease, color .35s ease;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, pre, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--a); color: var(--on-accent); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--a); }

:focus-visible {
    outline: 2px solid var(--a);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 200;
    padding: .6rem 1rem;
    background: var(--a);
    color: var(--on-accent);
    font-family: var(--font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ── Texture ──────────────────────────────────────────────────────────────── */

.grain {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Shared primitives ────────────────────────────────────────────────────── */

.label {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--fg-3);
}

.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--fg-3);
}

.icon { display: inline-block; vertical-align: -.125em; }

.button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.4rem;
    border: 1px solid var(--fg);
    border-radius: var(--radius);
    background: transparent;
    color: var(--fg);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.button:hover { background: var(--fg); color: var(--bg); }
.button--primary { background: var(--a); border-color: var(--a); color: var(--on-accent); }
.button--primary:hover { background: transparent; color: var(--a); }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--fg-2);
    font-size: 1.05rem;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.icon-button:hover { color: var(--a); background: var(--surface-2); border-color: var(--line-soft); }

/* ── Topbar ───────────────────────────────────────────────────────────────── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* The bottom border counts toward --topbar-h. Everything that pins itself
       below the bar (both sticky columns, scroll-padding, the mobile menu)
       offsets by exactly that variable — if the bar were 1px taller than it
       claims, each of them would snap by 1px the moment sticky engaged. */
    height: calc(var(--topbar-h) - 1px);
    padding: 0 clamp(.75rem, 1.6vw, 1.25rem);
}
.topbar__actions { margin-left: auto; }

/* The nav collapse button sits where the sidebar starts, so the two read as
   one control surface. */
.collapse-toggle--nav { flex: 0 0 auto; }
:root.nav-collapsed .collapse-toggle--nav,
:root.rail-collapsed .collapse-toggle--rail { color: var(--fg-3); }

.brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }

.brand__mark {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    background: var(--a);
    color: var(--on-accent);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.brand:hover .brand__mark { transform: rotate(-90deg); }
.brand__mark svg { width: 1.15rem; height: 1.15rem; }
.brand__mark iconify-icon { font-size: 1.15rem; }

.brand__name {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    /* Tight tracking is for display sizes; at 16px uppercase needs a little air
       or the letters crowd. Kept modest because letter-spacing is added on top
       of kerning, so a wide pair like Ť-A only gets wider. */
    letter-spacing: .02em;
    /* Caps with carons and acutes (Ť, Í, Ř) sit well above the cap height —
       a line box of 1em clips them, and the clipping is invisible in English. */
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: .4rem; }

.topbar__link {
    padding: .45rem .7rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--fg-2);
    transition: color .2s ease;
}
.topbar__link:hover { color: var(--a); }

.search-trigger {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 2.25rem;
    padding: 0 .55rem 0 .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg-3);
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.search-trigger:hover { border-color: var(--a); color: var(--fg); }
.search-trigger__label { min-width: 7rem; text-align: left; }

.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: inline-flex; }

.nav-toggle { display: none; }
.nav-toggle__close { display: none; }
body.nav-open .nav-toggle__open { display: none; }
body.nav-open .nav-toggle__close { display: inline-flex; }

/* ── Shell ────────────────────────────────────────────────────────────────── */

/* Columns are anchored to the viewport edges; the reading column centres
   itself in whatever space is left. */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w);
    min-height: 70vh;
    transition: grid-template-columns .28s cubic-bezier(.2, .8, .2, 1);
}

:root.nav-collapsed { --sidebar-w: 0rem; }
:root.rail-collapsed { --rail-w: 0rem; }
:root.nav-collapsed .sidebar,
:root.rail-collapsed .rail { border-color: transparent; }

/* Padding keeps a border-box element from ever reaching zero width, so the
   inner box has to be emptied out as well — otherwise the collapsed column
   leaves a sliver hanging over the text. */
:root.nav-collapsed .sidebar__inner,
:root.rail-collapsed .rail__inner {
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.sidebar {
    border-right: 1px solid var(--line);
    background: var(--bg);
}

/* The column itself must NOT clip: overflow on a sticky element's ancestor
   turns that ancestor into the scrollport and the stickiness silently dies.
   Clipping happens on the inner box, which is the sticky element itself. */
.sidebar__inner {
    position: sticky;
    top: var(--topbar-h);
    width: var(--sidebar-w);
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 2.25rem 1.25rem 3rem 1.5rem;
}

.navgroup + .navgroup { margin-top: 1.9rem; }

.navgroup__label {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin-bottom: .7rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--fg-3);
}
.navgroup__index { color: var(--a); }

.navlist { display: flex; flex-direction: column; }

.navlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem 0 .38rem .85rem;
    font-size: .875rem;
    white-space: nowrap;
    color: var(--fg-2);
    border-left: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease, padding-left .18s ease;
}
.navlink:hover { color: var(--fg); border-color: var(--a); padding-left: 1.05rem; }
.navlink.is-active {
    color: var(--a);
    font-weight: 600;
    border-left: 2px solid var(--a);
    padding-left: 1.05rem;
}
.navlink.is-missing { color: var(--fg-3); text-decoration: line-through; }
.navlink__ext { font-size: .7em; opacity: .5; }
.navlink__icon { font-size: .9em; opacity: .6; }
.navlist--sub { margin-left: .85rem; }
.navlink--sub { font-size: .8125rem; }

/* ── Main column ──────────────────────────────────────────────────────────── */

.main {
    /* Display type sizes itself against this column, not the viewport. */
    container-type: inline-size;
    min-width: 0;
    width: 100%;
    max-width: var(--content-w, 54rem);
    margin: 0 auto;
    padding: clamp(2.25rem, 4.5vw, 4.25rem) var(--pad) 5rem;
}

/* ── Rail (table of contents) ─────────────────────────────────────────────── */

.rail { border-left: 1px solid var(--line); }
.rail--empty { border-left: 0; }

.rail__inner {
    position: sticky;
    top: var(--topbar-h);
    width: var(--rail-w);
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2.25rem 1.5rem 3rem;
}

.rail__label {
    margin-bottom: .9rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--fg-3);
}

.toc { display: flex; flex-direction: column; gap: .1rem; counter-reset: toc; }
.toc__item a {
    display: block;
    padding: .3rem 0 .3rem .75rem;
    border-left: 1px solid transparent;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--fg-3);
    transition: color .18s ease, border-color .18s ease;
}
.toc__item a:hover { color: var(--fg); border-color: var(--fg-3); }
.toc__item--3 a { padding-left: 1.5rem; font-size: .78125rem; }
.toc__item.is-current > a { color: var(--a); border-left: 2px solid var(--a); font-weight: 500; }

.rail__progress {
    margin-top: 1.5rem;
    height: 1px;
    background: var(--line);
}
.rail__progress span {
    display: block;
    height: 1px;
    width: 0;
    background: var(--a);
    transition: width .1s linear;
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.pagehead { max-width: var(--measure, 46rem); margin-bottom: 2.75rem; }

.pagehead__kicker {
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--a);
}

.pagehead__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, min(5.2vw, calc(100cqw / var(--display-chars, 12) * 1.5)), 3.75rem);
    font-weight: 800;
    line-height: .95;
    --tracking: -.035em;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    text-wrap: balance;
}

.pagehead__lede {
    margin-top: 1.35rem;
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--fg-2);
}

.pagemeta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.4rem;
    margin-top: 1.9rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-3);
}
.pagemeta__item { display: inline-flex; align-items: center; gap: .45rem; }
.pagemeta__edit { transition: color .2s ease; }
.pagemeta__edit:hover { color: var(--a); }

/* ── Prose ────────────────────────────────────────────────────────────────── */

.prose {
    max-width: var(--measure, 46rem);
    font-size: 1.0625rem;
    line-height: 1.72;
}

.prose > * + * { margin-top: 1.15rem; }

.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-display);
    scroll-margin-top: calc(var(--topbar-h) + 1.5rem);
    text-wrap: balance;
}

.prose h1 {
    margin-top: 3rem;
    font-size: clamp(1.85rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    text-transform: uppercase;
}

.prose h2 {
    margin-top: 3.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-transform: uppercase;
}

.prose h3 {
    margin-top: 2.4rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.25;
}
.prose h3::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .55rem;
    vertical-align: .08em;
    background: var(--a);
}

.prose h4 {
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--fg-2);
}

.heading-anchor {
    margin-left: .5rem;
    font-family: var(--font-mono);
    font-size: .7em;
    color: var(--fg-3);
    opacity: 0;
    transition: opacity .18s ease, color .18s ease;
}
.heading-anchor::before { content: "#"; }
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--a); }

.prose p { text-wrap: pretty; }

.prose a:not(.heading-anchor) {
    color: var(--fg);
    background-image: linear-gradient(to right, rgba(var(--a-rgb), .5), rgba(var(--a-rgb), .5));
    background-position: 0 100%;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    padding-bottom: .06em;
    transition: color .18s ease, background-size .18s ease;
}
.prose a:not(.heading-anchor):hover {
    color: var(--a);
    background-size: 100% 2px;
}
.prose a.link-external::after {
    content: "↗";
    display: inline-block;
    margin-left: .18em;
    font-size: .8em;
    color: var(--fg-3);
}
.prose a.link-missing {
    color: var(--fg-3);
    background-image: linear-gradient(to right, var(--fg-3) 40%, transparent 40%);
    background-size: 6px 1px;
    background-repeat: repeat-x;
}

.prose ul, .prose ol { padding-left: 1.35rem; }
.prose ul { list-style: none; }
.prose ol { list-style: decimal; }
.prose ol::marker, .prose li::marker { font-family: var(--font-mono); font-size: .85em; color: var(--fg-3); }
.prose li + li { margin-top: .45rem; }
.prose ul > li { position: relative; }
.prose ul > li::before {
    content: "";
    position: absolute;
    left: -1.15rem;
    top: .72em;
    width: .35rem;
    height: 1px;
    background: var(--a);
}
.prose li > ul, .prose li > ol { margin-top: .45rem; }
.prose li::marker { color: var(--fg-3); }

.prose li.task-list-item::before { display: none; }
.prose input[type="checkbox"] {
    margin-right: .5rem;
    accent-color: var(--a);
    width: .9rem;
    height: .9rem;
    vertical-align: -.08em;
}

.prose strong { font-weight: 700; }
.prose em { font-style: italic; }

.prose blockquote {
    padding: .35rem 0 .35rem 1.35rem;
    border-left: 2px solid var(--a);
    color: var(--fg-2);
}

.prose hr {
    height: 0;
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.prose code {
    font-family: var(--font-mono);
    font-size: .875em;
    padding: .1em .38em;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    word-break: break-word;
}

.prose pre {
    position: relative;
    padding: 1.35rem 1.4rem;
    background: var(--code-bg);
    color: var(--code-fg);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.65;
}
.prose pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    color: inherit;
}

.codeblock { position: relative; }
.codeblock__lang {
    position: absolute;
    top: 0;
    left: 0;
    padding: .3rem .6rem;
    background: rgba(255, 255, 255, .07);
    font-family: var(--font-mono);
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
}
.codeblock__copy {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .7);
    font-family: var(--font-mono);
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, color .18s ease, border-color .18s ease;
}
.codeblock:hover .codeblock__copy, .codeblock__copy:focus-visible { opacity: 1; }
.codeblock__copy:hover { color: #FFF; border-color: rgba(255, 255, 255, .4); }
.codeblock__copy.is-done { color: var(--accent-dk); border-color: var(--accent-dk); }
.codeblock:has(.codeblock__lang) pre { padding-top: 2.2rem; }

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.prose th {
    padding: .75rem .95rem;
    border-bottom: 1px solid var(--fg);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: left;
    white-space: nowrap;
}
.prose td {
    padding: .7rem .95rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: var(--surface); }

.prose img {
    background: #FFFFFF;
    border: 1px solid var(--line);
    padding: 1rem;
    width: 100%;
}
.prose figure figcaption,
.prose img + em {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--fg-3);
}

.prose mark {
    background: rgba(var(--a-rgb), .22);
    color: inherit;
    padding: .05em .15em;
}

.prose kbd {
    font-family: var(--font-mono);
    font-size: .8em;
    padding: .12em .4em;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    background: var(--surface);
}

.prose--small { font-size: .875rem; }
.prose--home { margin-top: 3rem; }

/* Footnotes */
.footnotes {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--fg-2);
}
.footnote-ref a { font-family: var(--font-mono); font-size: .8em; }

/* ── Callouts ─────────────────────────────────────────────────────────────── */

.callout {
    --callout-color: var(--c-note);
    padding: 1.05rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--callout-color);
    border-radius: var(--radius);
}
.callout--tip { --callout-color: var(--c-tip); }
.callout--important { --callout-color: var(--c-important); }
.callout--warning { --callout-color: var(--c-warning); }
.callout--caution { --callout-color: var(--c-caution); }

.callout__label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--callout-color);
}
.callout__body > * + * { margin-top: .8rem; }
.callout__body > :first-child { margin-top: 0; }

/* ── Backlinks / pager ────────────────────────────────────────────────────── */

.backlinks {
    max-width: var(--measure, 46rem);
    margin-top: 3.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.backlinks__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
}
.backlinks__list a {
    display: inline-block;
    padding: .35rem .7rem;
    border: 1px solid var(--line);
    font-size: .8125rem;
    color: var(--fg-2);
    transition: border-color .18s ease, color .18s ease;
}
.backlinks__list a:hover { border-color: var(--a); color: var(--a); }

.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    max-width: var(--measure, 46rem);
    margin-top: 3.5rem;
    background: var(--line);
    border: 1px solid var(--line);
}
.pager__link {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.35rem 1.5rem;
    background: var(--bg);
    transition: background-color .2s ease;
}
.pager__link:hover { background: var(--surface); }
/* An absent neighbour still needs a filled cell, or the grid's separator
   colour shows through as a slab. */
.pager__link--empty { background: var(--bg); }
.pager__link--empty:hover { background: var(--bg); }
.pager__link--next { text-align: right; align-items: flex-end; }
.pager__dir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--a);
}
.pager__title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

/* ── Home ─────────────────────────────────────────────────────────────────── */

.hero { padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem); }

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--fg-3);
}
.hero__dot { color: var(--a); }

.hero__title {
    font-family: var(--font-display);
    /* Fit the longest word instead of breaking it: --display-chars comes from
       PHP, 1.55 approximates Inter Black's average uppercase advance. */
    font-size: clamp(2.25rem, min(12vw, calc(100cqw / var(--display-chars, 9) * 1.55)), 8.5rem);
    word-break: normal;
    overflow-wrap: normal;
    font-weight: 900;
    line-height: .85;
    --tracking: -.05em;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    word-break: break-word;
}
.hero__title.is-outline {
    -webkit-text-stroke: 1.5px var(--fg);
    color: transparent;
}

.hero__lede {
    max-width: 34rem;
    margin-top: 1.75rem;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: var(--fg-2);
    text-wrap: balance;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.marquee {
    margin: 2.5rem calc(var(--pad) * -1) 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    user-select: none;
}
.marquee__track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    animation: marquee var(--marquee-duration, 180s) linear infinite;
}
.marquee__item {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.03em;
    -webkit-text-stroke: 1px var(--fg);
    color: transparent;
    opacity: .25;
    white-space: nowrap;
}
.marquee__sep { color: var(--a); opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }

.index-band { margin-top: 4.5rem; }
.index-band__head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; }
.index-band__rule { flex: 1; height: 1px; background: var(--line); }

.index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}
.index-card {
    padding: 1.6rem 1.5rem;
    background: var(--bg);
    transition: background-color .25s ease;
}
.index-card:hover { background: var(--surface); }
.index-card__num {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .16em;
    color: var(--a);
}
.index-card__title {
    margin: .55rem 0 1rem;
    font-size: 1.0625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.015em;
}
.index-card__list { display: flex; flex-direction: column; gap: .45rem; }
.index-card__list a {
    display: block;
    font-size: .875rem;
    color: var(--fg-2);
    transition: color .18s ease, transform .18s ease;
}
.index-card__list a:hover { color: var(--a); transform: translateX(3px); }

.recent { margin-top: 4.5rem; }
.recent__list { border-top: 1px solid var(--line); }
.recent__item { border-bottom: 1px solid var(--line-soft); }
.recent__item a {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.1rem .25rem;
    transition: background-color .2s ease, padding-left .2s ease;
}
.recent__item a:hover { background: var(--surface); padding-left: .75rem; }
.recent__title { font-weight: 600; letter-spacing: -.01em; }
.recent__excerpt {
    font-size: .875rem;
    color: var(--fg-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.recent__date {
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-3);
    white-space: nowrap;
}

/* ── Contents ─────────────────────────────────────────────────────────────── */

.contents__group + .contents__group { margin-top: 3.25rem; }
.contents__label {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--fg);
    font-size: 1.0625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.contents__num { font-family: var(--font-mono); font-size: .75rem; color: var(--a); letter-spacing: .1em; }

.contents__item { border-bottom: 1px solid var(--line-soft); }
.contents__item a {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: .95rem .25rem;
    transition: background-color .2s ease, padding-left .2s ease;
}
.contents__item a:hover { background: var(--surface); padding-left: .75rem; }
.contents__title { font-weight: 600; }
.contents__excerpt { font-size: .875rem; color: var(--fg-3); }
.contents__meta {
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-3);
    white-space: nowrap;
}

/* ── Search ───────────────────────────────────────────────────────────────── */

.searchform {
    position: relative;
    display: flex;
    gap: .5rem;
    align-items: center;
    max-width: 42rem;
    margin-top: 2rem;
}
.searchform input {
    flex: 1;
    height: 3.1rem;
    padding: 0 1rem 0 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 1rem;
}
.searchform input:focus { outline: none; border-color: var(--a); }
.searchform__icon {
    position: absolute;
    left: 1rem;
    font-size: 1.05rem;
    color: var(--fg-3);
    pointer-events: none;
}

.results { margin-top: 2.5rem; max-width: 52rem; }
.results__count { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.result { border-bottom: 1px solid var(--line-soft); }
.result__link {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .5rem;
    padding: 1.15rem .25rem;
    transition: background-color .2s ease, padding-left .2s ease;
}
.result__link:hover { background: var(--surface); padding-left: .6rem; }
.result__num { font-family: var(--font-mono); font-size: .6875rem; color: var(--a); letter-spacing: .1em; }
.result__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.result__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.result__heading {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fg-3);
}
.result__snippet { font-size: .9375rem; color: var(--fg-2); line-height: 1.55; }
.result mark, .palette mark { background: rgba(var(--a-rgb), .24); color: inherit; }

.empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    color: var(--fg-2);
}
.empty .button { padding: .5rem 1rem; }
.notfound__slug { margin-top: 1.25rem; }
.notfound__actions { display: flex; gap: .75rem; margin-top: 3rem; }

/* ── Command palette ──────────────────────────────────────────────────────── */

.palette { position: fixed; inset: 0; z-index: 120; }
.palette[hidden] { display: none; }
.palette__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(6px);
    animation: fade .18s ease;
}
.palette__panel {
    position: relative;
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 8rem));
    margin: 9vh auto 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: rise .2s cubic-bezier(.2, .8, .2, 1);
    overflow: hidden;
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.palette__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--line);
}
.palette__icon { font-size: 1.15rem; color: var(--fg-3); }
.palette__input {
    flex: 1;
    border: 0;
    background: none;
    font-size: 1.0625rem;
    outline: none;
}
.palette__results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: .5rem;
}
.palette__hint, .palette__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--fg-3);
}
.palette__item {
    display: block;
    padding: .7rem .85rem;
    border-left: 2px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
}
.palette__item.is-active, .palette__item:hover {
    background: var(--surface-2);
    border-left-color: var(--a);
}
.palette__item-title { font-weight: 600; font-size: .9375rem; }
.palette__item-heading {
    margin-left: .5rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--fg-3);
}
.palette__item-snippet {
    margin-top: .2rem;
    font-size: .8125rem;
    color: var(--fg-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.palette__foot {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .7rem 1.15rem;
    border-top: 1px solid var(--line);
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fg-3);
}
.palette__foot a { margin-left: auto; color: var(--a); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); background: var(--bg); }
.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    max-width: 82rem;
    margin: 0 auto;
    padding: 3.5rem var(--pad);
}
.footer__col .label { display: block; margin-bottom: 1rem; }
.footer__note { max-width: 32rem; font-size: .9375rem; color: var(--fg-2); }
.footer__wiki { margin-top: 1rem; color: var(--fg-3); }
.footer__links { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.footer__links a { color: var(--fg-2); transition: color .18s ease; }
.footer__links a:hover { color: var(--a); }

.statlist { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.statlist div { display: flex; justify-content: space-between; gap: 1rem; }
.statlist dt { color: var(--fg-3); font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; }
.statlist dd { margin: 0; font-family: var(--font-mono); font-size: .8125rem; }

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    max-width: 82rem;
    margin: 0 auto;
    padding: 1.1rem var(--pad);
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--fg-3);
}
.footer__sep { color: var(--a); }
.footer__bar a:hover { color: var(--a); }

/* ── Setup screen ─────────────────────────────────────────────────────────── */

.setup { max-width: 46rem; margin: 0 auto; padding: 18vh var(--pad) 6rem; }
.setup__label { display: block; margin-bottom: 1.5rem; }
.setup__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.045em;
    text-transform: uppercase;
}
.setup__lede { margin-top: 1.75rem; font-size: 1.0625rem; color: var(--fg-2); }
.setup__code {
    margin-top: 1.75rem;
    padding: 1.15rem 1.25rem;
    background: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--font-mono);
    font-size: .8125rem;
    overflow-x: auto;
}
.setup__steps {
    margin-top: 2.5rem;
    padding-left: 1.25rem;
    list-style: decimal;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    font-size: .9375rem;
    color: var(--fg-2);
}
.setup__steps::marker { font-family: var(--font-mono); }
.setup code { font-family: var(--font-mono); font-size: .875em; background: var(--surface-2); padding: .1em .35em; }
/* …but not inside the dark command block, where the pale chip background would
   sit under equally pale text and swallow the command whole. */
.setup__code code { background: none; padding: 0; color: inherit; }
.setup__foot { display: block; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
    .rail { display: none; }
    .collapse-toggle--rail { display: none; }
}

@media (max-width: 900px) {
    /* No --topbar-h override here: the config-driven :root block is injected
       after this stylesheet, so a media query of equal specificity would lose
       to it and the rule would silently do nothing. One bar height, set once,
       in config.php (layout.topbar_height). */

    .shell { grid-template-columns: minmax(0, 1fr); border-left: 0; border-right: 0; }

    /* Full-screen navigation sheet. Nothing behind it, so no backdrop.
       The panel slides and clips; a separate inner box does the scrolling.
       One element doing both is how mobile Safari ends up with a scroll layer
       that ignores touch — the transform and the scroller must not be the
       same element. */
    .sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100vh - var(--topbar-h));
        height: calc(100dvh - var(--topbar-h)); /* survives the URL bar */
        z-index: 100;
        border-right: 0;
        background: var(--bg);
        overflow: hidden;
        transform: translateX(-101%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }
    body.nav-open .sidebar { transform: none; }

    .sidebar__inner {
        position: static;
        width: 100%;
        height: 100%;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 1.5rem clamp(1.25rem, 5vw, 2rem) calc(3rem + env(safe-area-inset-bottom));
    }

    /* Tap targets, not mouse targets. */
    .navgroup + .navgroup { margin-top: 2.25rem; }
    .navgroup__label { margin-bottom: .35rem; font-size: .6875rem; }
    .navlink {
        padding: .85rem 0 .85rem 1rem;
        font-size: 1.0625rem;
        border-left-width: 2px;
        border-bottom: 1px solid var(--line-soft);
    }
    .navlink:hover, .navlink.is-active { padding-left: 1rem; }
    .navlink--sub { font-size: .9375rem; }
    .navlist--sub { margin-left: 1rem; }

    .nav-toggle { display: inline-flex; }
    .collapse-toggle--nav { display: none; }
    .topbar__link { display: none; }
    .search-trigger__label, .search-trigger .kbd { display: none; }
    .search-trigger { padding: 0; width: 2.25rem; justify-content: center; border-color: transparent; background: none; }

    .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
    .pager { grid-template-columns: 1fr; }
    .recent__item a, .contents__item a { grid-template-columns: 1fr; gap: .3rem; }
    .recent__excerpt, .contents__excerpt { -webkit-line-clamp: 2; }
    .palette__panel { margin-top: 4vh; }
}

@media (max-width: 560px) {
    .prose { font-size: 1rem; }
    .hero__title { font-size: clamp(2.5rem, 15vw, 4rem); }
    .marquee { display: none; }
}

/* ── Motion & print ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .topbar, .sidebar, .rail, .footer, .palette, .grain, .pager, .backlinks { display: none !important; }
    .shell { display: block; border: 0; }
    .main { padding: 0; }
    body { background: #FFF; color: #000; }
    .prose { max-width: none; font-size: 11pt; }
    .prose a { background: none; }
    .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ── Scroll lock ──────────────────────────────────────────────────────────
   `overflow: hidden` on <body> is not a reliable page lock (iOS ignores it and
   scrolls the page behind the panel, which reads as "the menu won't scroll").
   JS pins the body instead and restores the offset on close. */
body.scroll-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* ── File browser ─────────────────────────────────────────────────────────
   A repository is mostly not markdown — compose files, configs, scripts. The
   browser keeps the same hairline rhythm as the rest of the site: no boxes,
   one rule per row, monospace for everything the machine wrote. */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--fg-3);
}
.crumbs a { transition: color .18s ease; }
.crumbs a:hover { color: var(--a); }
.crumbs__sep { color: var(--line); }
.crumbs__current { color: var(--fg); }

.filelist { margin-top: 2rem; max-width: 52rem; }

.filelist__filter {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg-3);
    margin-bottom: .25rem;
}
.filelist__filter:focus-within { border-color: var(--a); color: var(--fg); }
.filelist__filter input { flex: 1; border: 0; background: none; outline: none; font-size: .9375rem; }

.filelist__list { border-top: 1px solid var(--line); }

.fileitem { border-bottom: 1px solid var(--line-soft); }
.fileitem[hidden] { display: none; }
.fileitem a {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 5rem 6rem;
    gap: .75rem;
    align-items: center;
    padding: .6rem .35rem;
    transition: background-color .18s ease, padding-left .18s ease;
}
.fileitem a:hover { background: var(--surface); padding-left: .7rem; }
.fileitem__icon { color: var(--fg-3); font-size: 1rem; display: inline-flex; }
.fileitem--dir .fileitem__icon { color: var(--a); }
.fileitem__name {
    font-family: var(--font-mono);
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fileitem--dir .fileitem__name { font-weight: 500; }
.fileitem__size, .fileitem__date {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--fg-3);
    text-align: right;
    white-space: nowrap;
}
.filelist__empty {
    padding: 2rem .35rem;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--fg-3);
}

.fileview { margin-top: 2rem; max-width: none; }
.fileview__code {
    padding: 2.2rem 0 1.25rem;
    background: var(--code-bg);
    color: var(--code-fg);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: .8125rem;
    /* Each line is its own block element, so the line box is the line height —
       no extra newline may leak out of the loop that renders them. */
    line-height: 1.55;
    tab-size: 4;
}
.fileview__line { display: block; white-space: pre; }
.fileview__line:hover { background: rgba(255, 255, 255, .04); }
.fileview__num {
    display: inline-block;
    width: 3.5rem;
    padding-right: 1rem;
    text-align: right;
    color: rgba(255, 255, 255, .28);
    user-select: none;
    -webkit-user-select: none;
}
.fileview__num::before { content: attr(data-line); }
.fileview__text { padding-right: 1.5rem; }

.fileview__image {
    margin-top: 2rem;
    padding: 2rem;
    border: 1px solid var(--line);
    background: #FFFFFF;
    display: grid;
    place-items: center;
}
.fileview__image img { max-height: 70vh; width: auto; }

@media (max-width: 700px) {
    .fileitem a { grid-template-columns: 1.5rem minmax(0, 1fr) 4.5rem; }
    .fileitem__date { display: none; }
    .fileview__num { width: 2.5rem; padding-right: .6rem; }
}

/* ── Embedded files inside articles ───────────────────────────────────────
   An article points at the real file instead of carrying a copy that rots.
   Same component as the file browser, sized to sit inside prose. */

.embed {
    position: relative;
    margin: 1.75rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.prose > .embed { max-width: none; }

.embed__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .8rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .6875rem;
}
.embed__name {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: var(--fg-2);
    transition: color .18s ease;
}
.embed__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed__name:hover { color: var(--a); }
.embed__icon { color: var(--a); font-size: .95rem; }
.embed__meta {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--fg-3);
    white-space: nowrap;
}
.embed__lang { text-transform: uppercase; letter-spacing: .12em; }

.embed--file .fileview__code { margin: 0; padding: 1rem 0; border-radius: 0; }
.embed--dir .filelist__list { border-top: 0; }
.embed--dir .fileitem a { grid-template-columns: 1.5rem minmax(0, 1fr) 5rem; padding: .5rem .8rem; }
.embed--dir .fileitem:last-child { border-bottom: 0; }

.embed--image {
    padding: 1.5rem;
    background: #FFFFFF;
    display: grid;
    place-items: center;
}
.embed--notice {
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--c-caution);
    background: var(--surface);
}

/* A link to a file in the repository, inline in a sentence. */
.filechip, .prose a.link-file {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .05em .45em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    background-image: none;
    font-family: var(--font-mono);
    font-size: .8125em;
    color: var(--fg-2);
    transition: border-color .18s ease, color .18s ease;
}
.filechip:hover, .prose a.link-file:hover { border-color: var(--a); color: var(--a); background-image: none; }
.filechip__size { color: var(--fg-3); font-size: .85em; }
.filechip__icon { color: var(--a); }

/* Prose list styling must not leak into an embedded listing — those rows are a
   component that happens to be a <ul>, not a bulleted list. */
.prose .embed ul, .prose .embed ol { padding-left: 0; }
.prose .embed li { margin-top: 0; }
.prose .embed li::before { display: none; }

/* A folder's article ends with what else is in that folder. */
.folder { max-width: var(--measure, 46rem); margin-top: 3.5rem; }
.folder--home { max-width: none; margin-top: 4.5rem; }
.folder .index-band__head { margin-bottom: 1rem; }
.folder .embed { margin-top: 0; }

/* ── Mermaid diagrams ─────────────────────────────────────────────────────
   The diagram brings its own colours; the frame keeps the page's. */
.diagram {
    margin: 2rem 0;
    padding: 1.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow-x: auto;
    text-align: center;
}
.diagram svg { max-width: 100%; height: auto; display: inline-block; }
.diagram:empty { display: none; }

@media print {
    .diagram { border-color: #ccc; break-inside: avoid; }
}