/* Your site's stylesheet. Nothing here is shared with the CMS editor — replace all of it.

   The one part worth keeping is `.rte`, which styles WYSIWYG output. A template cannot know
   which tags an author will produce, so those rules are written against the container rather
   than against classes that will never be applied. */

:root {
    --ink: #14181f;
    --ink-muted: #5c6673;
    --paper: #ffffff;
    --paper-sunken: #f5f6f8;
    --rule: #e2e6ec;
    --accent: #2f6df0;
    --radius: 10px;
    /* Content grows with the screen up to 1680px (about two-thirds of a 2560px monitor); the
       side gutter grows with it, 24px on a phone to 64px on a large screen. */
    --wrap: 105rem;
    --gutter: clamp(1.5rem, 4vw, 4rem);
}

/* Dark is an explicit choice, never a system default.

   prefers-color-scheme is deliberately NOT consulted: with no cookie a visitor gets light,
   whatever their operating system says. The alternative hands half of all visitors a theme nobody
   on this side chose, and makes "what does the site look like?" a question with two answers.

   The attribute is written on <html> by the server (see _SiteLayout and ThemePreference), so the
   first paint is already correct — no flash of the wrong theme. */
:root[data-theme="dark"] {
    --ink: #e8ecf2;
    --ink-muted: #a3adbb;
    --paper: #14171c;
    --paper-sunken: #1b1f26;
    --rule: #2a2f38;
    --accent: #6d9bff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- chrome ------------------------------------------------------------------------------- */

.site__header {
    border-bottom: 1px solid var(--rule);
}

.site__header .wrap {
    display: flex;
    align-items: center;
    height: 4rem;
}

.site__brand {
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

/* Language switcher. Pushed to the far end of the header bar; the current language is stated
   rather than merely styled, so it still reads correctly with CSS off or to a screen reader
   (aria-current carries the same fact). */
.site__bar { justify-content: space-between; gap: 1rem; }

.site__langs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.site__lang {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) / 2);
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--ink-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.site__lang:hover { background: var(--paper-sunken); color: var(--ink); }

.site__lang.is-current {
    color: var(--ink);
    font-weight: 650;
    background: var(--paper-sunken);
}

.site__footer {
    margin-top: 5rem;
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

main.wrap { padding-top: 3rem; }

/* --- headings ----------------------------------------------------------------------------- */

h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 680;
}

/* --- WYSIWYG output ----------------------------------------------------------------------- */

.rte { max-width: 42rem; }

.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }

.rte p { margin: 0 0 1.15em; }

.rte h2, .rte h3, .rte h4 {
    margin: 2em 0 0.6em;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.rte h2 { font-size: 1.5rem; }
.rte h3 { font-size: 1.25rem; }
.rte h4 { font-size: 1.0625rem; }

.rte a { color: var(--accent); text-underline-offset: 0.15em; }

.rte ul, .rte ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.rte li { margin: 0.3em 0; }

.rte blockquote {
    margin: 1.75em 0;
    padding: 0.1em 0 0.1em 1.25rem;
    border-left: 3px solid var(--rule);
    color: var(--ink-muted);
}

.rte img { max-width: 100%; height: auto; border-radius: var(--radius); }

.rte table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9375rem;
}

.rte th, .rte td {
    border: 1px solid var(--rule);
    padding: 0.5rem 0.7rem;
    text-align: left;
}

.rte th { background: var(--paper-sunken); font-weight: 600; }

.rte code {
    background: var(--paper-sunken);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* WYSIWYG Styles menu. The classes an author picks from the editor's Styles menu
   (CendiaOptions.Wysiwyg) — the CMS names them, the site decides what they look like. Add a rule
   here for every style the site adds to the menu, such as a font.

   Site-wide, not under .rte: rich text renders in page bodies and inside blocks alike, and a
   block's wrapper is its own (design-block-*-body), so .btn has to work wherever the HTML lands.
   The variants are written .btn.btn-primary so they outrank a block's own `.x a` link rule. */

.text-large { font-size: 1.25em; }
.text-small { font-size: 0.875em; }

/* Square and on the --block-button-* tokens, like the CTA's and the intro's buttons, so a button
   typed into rich text matches the ones the blocks draw. */
.btn {
    display: inline-block;
    padding: 12px 18px;
    border: 2px solid transparent;
    font-size: var(--block-button-size, 0.9375rem);
    font-weight: 700;
    letter-spacing: var(--block-button-tracking, 0.12em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn:focus-visible { outline: 2px solid var(--block-focus, #1a1a1a); outline-offset: 3px; }

.btn.btn-primary { background: var(--block-button-bg, #111); border-color: var(--block-button-bg, #111); color: var(--block-button-ink, #fff); text-decoration: none; }
.btn.btn-primary:hover { background: var(--block-button-bg-hover, #333); border-color: var(--block-button-bg-hover, #333); }
.btn.btn-secondary { background: transparent; color: var(--ink-muted); text-decoration: none; }
.btn.btn-secondary:hover { color: var(--block-button-bg, #111); }
.btn.btn-outline { background: transparent; border-color: var(--block-button-bg, #111); color: var(--block-button-bg, #111); text-decoration: none; }
.btn.btn-outline:hover { background: var(--block-button-bg, #111); color: var(--block-button-ink, #fff); }

.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 1.5em 0 0.5em;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.h1 { font-size: 2.25rem; }
.h2 { font-size: 1.75rem; }
.h3 { font-size: 1.375rem; }
.h4 { font-size: 1.125rem; font-weight: 700; }
.h5 { font-size: 1rem; font-weight: 700; }
.h6 { font-size: 0.875rem; font-weight: 700; }

.columns-2, .columns-3, .columns-4 { column-gap: 2rem; margin: 0 0 1.15em; }
.columns-2 { column-count: 2; }
.columns-3 { column-count: 3; }
.columns-4 { column-count: 4; }
[class^="columns-"] > :first-child { margin-top: 0; }

/* One column on a phone: four columns of a 375px screen is a word per line. */
@media (max-width: 40rem) {
    .columns-2, .columns-3, .columns-4 { column-count: 1; }
}

/* --- StandardPage ------------------------------------------------------------------------- */

.page__flag {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--paper-sunken);
    border: 1px solid var(--rule);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.page__summary {
    max-width: 42rem;
    margin: 0 0 2rem;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--ink-muted);
}

.page__hero {
    margin: 0 0 2.5rem;
    max-width: 42rem;
}

.page__hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: var(--rule);
}

.page__cta { margin: 2.5rem 0 0; }

/* --- landing page hero -------------------------------------------------------------------- */

/* Edge to edge under the header (the layout's Hero section sits outside .wrap). The image fills
   the box, cropped from the centre; a translucent band across the bottom carries the label,
   heading and introduction, lined up with the page content by the .wrap inside it. */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(360px, 30vw, 600px);
    overflow: hidden;
    background: #1a1a1a;
    color: #fff;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__band {
    position: relative;
    width: 100%;
    padding: 1.25rem 0 2.25rem;
    background: rgba(10, 20, 30, 0.55);
}

/* The thin light rule across the top of the text, as on the block's dark rule. */
.hero__text {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.hero__label,
.intro__label {
    margin: 0 0 0.25rem;
    font-size: var(--block-label-size, 0.875rem);
    font-weight: var(--block-label-weight, 700);
    letter-spacing: var(--block-label-tracking, 0.12em);
    text-transform: uppercase;
}

/* Over a video: the label on the left, Pause and Sound at the right of the same row. */
.hero__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.hero__controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 0.25rem auto;
}

/* The Pause button and the Sound checkbox read as a pair: both in the label's small caps. */
.hero__control {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--block-label-size, 0.875rem);
    font-weight: var(--block-label-weight, 700);
    letter-spacing: var(--block-label-tracking, 0.12em);
    text-transform: uppercase;
    cursor: pointer;
}

.hero__control:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero__control input { margin: 0; accent-color: #fff; cursor: pointer; }
button.hero__control:focus-visible,
.hero__control input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A page title: bigger than a block's 36px title, same serif. */
.hero__title,
.intro__title {
    margin: 0 0 0.75rem;
    font-family: var(--block-title-font, Georgia, "Times New Roman", serif);
    font-size: clamp(2rem, 1.25rem + 2.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.hero__title { color: #fff; }

.hero__body,
.intro__body {
    font-size: var(--block-body-size, 1.0625rem);
    line-height: 1.6;
}

.hero__body { color: rgba(255, 255, 255, 0.92); }

    .hero__body a { color: #fff; text-decoration: underline; }

.intro { margin: 0 0 2.5rem; }

/* The introduction and the buttons on one row: the text up to 75% of the width, so it never runs
   into the buttons on a laptop or tablet; the buttons bottom-right, level with its last line. */
.hero__footer,
.intro__footer {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
}

.hero__footer > .hero__body,
.intro__footer > .intro__body {
    flex: 0 1 75%;
    min-width: 0;
    max-width: none; /* over .rte's 42rem reading measure: here the row sets the width */
}

/* Up to two buttons: a solid primary on the left and an outline beside it. margin-left: auto keeps
   them at the right even with no introduction. White on the hero's dark band; dark on a plain
   page, like the CTA's button. */
.hero__actions,
.intro__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.hero__button,
.intro__button {
    display: inline-block;
    padding: 12px 18px;
    border: 2px solid transparent;
    font-size: var(--block-button-size, 0.9375rem);
    font-weight: 700;
    letter-spacing: var(--block-button-tracking, 0.12em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.hero__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero__button--primary { background: #fff; border-color: #fff; color: var(--block-ink, #1a1a1a); }
.hero__button--primary:hover { background: #e8e8e8; border-color: #e8e8e8; color: var(--block-ink, #1a1a1a); }
.hero__button--outline { background: transparent; border-color: #fff; color: #fff; }
.hero__button--outline:hover { background: #fff; color: var(--block-ink, #1a1a1a); }

.intro__button:focus-visible { outline: 2px solid var(--block-focus, #1a1a1a); outline-offset: 3px; }
.intro__button--primary { background: var(--block-button-bg, #111); border-color: var(--block-button-bg, #111); color: var(--block-button-ink, #fff); }
.intro__button--primary:hover { background: var(--block-button-bg-hover, #333); border-color: var(--block-button-bg-hover, #333); color: var(--block-button-ink, #fff); }
.intro__button--outline { background: transparent; border-color: var(--block-button-bg, #111); color: var(--block-button-bg, #111); }
.intro__button--outline:hover { background: var(--block-button-bg, #111); color: var(--block-button-ink, #fff); }

/* Under a hero the first block meets it directly -- no gap of plain page between them. */
.hero + main.wrap { padding-top: 0; }

@media (max-width: 700px) {
    .hero { min-height: 320px; }
    .hero__band { padding: 1rem 0 1.5rem; }

    /* A phone has no room beside the text: the buttons go under it. */
    .hero__footer,
    .intro__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .hero__footer > .hero__body,
    .intro__footer > .intro__body { flex-basis: auto; }
}

.page__related,
.page__download,
.page__reflink { margin: 1rem 0 0; }

/* The field sheet: the read-back harness at the foot of the StandardPage template. */

.page__fields {
    margin: 4rem 0 0;
    padding: 1.5rem 1.5rem 1.75rem;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.page__fields dt {
    margin: 0.9rem 0 0.1rem;
    font-weight: 650;
    color: var(--ink-muted);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.page__fields dt:first-child { margin-top: 0; }

.page__fields dd {
    margin: 0;
    color: var(--ink);
}

.button {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--paper);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}

.button:hover { filter: brightness(1.08); }

/* --- documentation shell ------------------------------------------------------------------

   The guides at /guides. Three columns on a wide screen — section rail, prose, page headings —
   collapsing to one on narrow. Everything here uses the tokens above, so the docs follow the
   site into dark mode rather than carrying a second palette that drifts. */

.wrap--wide { max-width: 88rem; }

.site__nav {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.site__nav-link {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.site__nav-link:hover { color: var(--ink); }

.docs {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 13rem;
    gap: 3rem;
    align-items: start;
    padding: 2.5rem 0 4rem;
}

.docs__rail,
.docs__toc {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.docs__group { margin-bottom: 1.75rem; }

.docs__group-title {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.docs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--rule);
}

.docs__link {
    display: block;
    padding: 0.3rem 0 0.3rem 0.85rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.9375rem;
}

.docs__link:hover { color: var(--ink); }

.docs__link.is-current {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.docs__main { min-width: 0; }

.docs__header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.docs__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.docs__header h1 {
    margin: 0;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.docs__summary {
    margin: 0.75rem 0 0;
    color: var(--ink-muted);
    font-size: 1.0625rem;
}

.docs__toc-title {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.docs__toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs__toc a {
    display: block;
    padding: 0.25rem 0;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
}

.docs__toc a:hover { color: var(--ink); }

/* --- index cards --- */

.docs__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.docs__card {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.docs__card:hover { border-color: var(--accent); }

.docs__card h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }

.docs__card p { margin: 0 0 0.75rem; color: var(--ink-muted); font-size: 0.9375rem; }

.docs__card-count { font-size: 0.8125rem; color: var(--ink-muted); }

/* --- pager --- */

.docs__pager {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.docs__pager-link {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.docs__pager-link:hover { border-color: var(--accent); }

.docs__pager-link--next { text-align: right; }

.docs__pager-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.docs__pager-title { display: block; margin-top: 0.2rem; font-weight: 600; }

/* --- prose -------------------------------------------------------------------------------

   Markdown output. Same reasoning as .rte: the rules are written against the container, because
   nothing applies a class to a <p> that Markdig produced. */

.prose { font-size: 1.0625rem; }

.prose h2 {
    margin: 2.75rem 0 0.75rem;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
    scroll-margin-top: 2rem;
}

.prose h3 {
    margin: 2rem 0 0.5rem;
    font-size: 1.1875rem;
    scroll-margin-top: 2rem;
}

.prose p { margin: 0 0 1.1rem; }

.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }

.prose li { margin-bottom: 0.4rem; }

.prose a { color: var(--accent); }

.prose strong { font-weight: 650; }

.prose code {
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: var(--paper-sunken);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875em;
}

.prose pre {
    margin: 0 0 1.4rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-sunken);
    overflow-x: auto;
    line-height: 1.55;
}

.prose pre code {
    padding: 0;
    background: none;
    font-size: 0.875rem;
}

.prose table {
    width: 100%;
    margin: 0 0 1.4rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    display: block;
    overflow-x: auto;
}

.prose th, .prose td {
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.prose th { font-weight: 600; white-space: nowrap; }

.prose blockquote {
    margin: 0 0 1.4rem;
    padding: 0.1rem 0 0.1rem 1.1rem;
    border-left: 3px solid var(--accent);
    color: var(--ink-muted);
}

@media (max-width: 68rem) {
    .docs { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; }
    .docs__toc { display: none; }
}

@media (max-width: 48rem) {
    .docs { grid-template-columns: 1fr; }
    .docs__rail { position: static; max-height: none; }
}

/* --- releases -----------------------------------------------------------------------------

   The release index and a single announcement. Same tokens as everything else, so these follow
   the site into dark mode rather than carrying a palette of their own. */

.releases, .release {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2.5rem 0 4rem;
}

.releases__header { margin-bottom: 2rem; }

.releases__header h1,
.release__header h1 {
    margin: 0;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.releases__intro { margin-top: 0.75rem; color: var(--ink-muted); }

.releases__empty {
    padding: 1.5rem;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    color: var(--ink-muted);
}

.releases__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.releases__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}

.releases__link {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
}

.releases__link:hover { color: var(--accent); }

.releases__date { color: var(--ink-muted); font-size: 0.875rem; white-space: nowrap; }

.releases__pager {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.5rem;
}

.releases__page-of { color: var(--ink-muted); font-size: 0.875rem; }

/* --- one announcement --- */

.release__header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.release__meta {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin: 0 0 0.6rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.release__version {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--paper-sunken);
    border: 1px solid var(--rule);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--ink);
}

.release__summary {
    margin: 0.75rem 0 0;
    color: var(--ink-muted);
    font-size: 1.0625rem;
}

/* Border-led rather than a saturated fill: this has to stay legible in both themes, and a warning
   colour dark enough for light mode is unreadable on the dark ground. */
.release__breaking {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rule);
    border-left: 3px solid #d9822b;
    border-radius: var(--radius);
    background: var(--paper-sunken);
    font-size: 0.9375rem;
}

.release__upgrade {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.release__upgrade h2 { margin: 0 0 0.75rem; font-size: 1.375rem; }

/* --- theme switcher ----------------------------------------------------------------------- */

.site__theme {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1.25rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
}

.site__theme:hover {
    color: var(--ink);
    border-color: var(--accent);
}

@media (max-width: 40rem) {
    /* The glyph carries the meaning on a narrow screen; the label is what gives way. */
    .site__theme-text { display: none; }
}

/* --- Search (Pages/Search.cshtml) -------------------------------------------------------------
   The search page and the box in the header. Yours to restyle; the class names are only what
   Search.cshtml happens to use. */
.search { max-width: 52rem; }
.search__form { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.search__input {
    flex: 1; min-width: 0; padding: .6rem .8rem; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.search__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search__button {
    padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--paper); background: var(--accent); border: 0; border-radius: var(--radius);
}
.search__bar {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
    padding-bottom: .75rem; border-bottom: 1px solid var(--rule);
}
.search__count, .search__empty { margin: 0; color: var(--ink-muted); }
.search__sort { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; }
.search__sort-link { color: var(--ink-muted); text-decoration: none; }
.search__sort-link:hover { color: var(--accent); }
.search__sort-link.is-current { color: var(--ink); font-weight: 600; }
.search__results { list-style: none; margin: 0; padding: 0; }
.search__result { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.search__result-title { font-size: 1.15rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.search__result-title:hover { text-decoration: underline; }
.search__result-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .15rem; font-size: .85rem; color: var(--ink-muted); }
.search__result-summary { margin: .4rem 0 0; }
.search__pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.search__page-of { color: var(--ink-muted); }

/* Featured search results (Pages/Shared/_FeaturedSearchResult.cshtml). The --search-featured-*
   properties are set by an administrator on Settings > Designer > Featured Search and arrive on
   .search__featured; each falls back to this site's own choice when it is not set. */
.search__featured { display: grid; gap: .6rem; margin: 1.1rem 0 .4rem; }
.search__featured-result {
    padding: 1rem 1.15rem; border-radius: var(--radius); border-left: 4px solid var(--accent);
    background: var(--search-featured-bg, var(--paper-sunken));
}
.search__featured-label {
    display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.search__featured-result .search__result-title {
    font-size: var(--search-featured-title-size, 1.25rem);
    color: var(--search-featured-title-color, var(--accent));
}
.search__featured-result .search__result-summary {
    font-size: var(--search-featured-text-size, inherit);
    color: var(--search-featured-text-color, inherit);
}

.site__search { display: flex; gap: .35rem; margin-left: auto; }
.site__search-input {
    width: 11rem; padding: .35rem .6rem; font: inherit; font-size: .9rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.site__search-button {
    padding: .35rem .7rem; font: inherit; font-size: .9rem; cursor: pointer;
    color: var(--ink); background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: var(--radius);
}

/* Beside the section menu the box sits next to it rather than taking the free space a second
   time, and on a narrow screen the button gives way: Enter still submits. */
.site__nav + .site__search { margin-left: 1.25rem; }
@media (max-width: 40rem) {
    .site__search-input { width: 7rem; }
    .site__search-button { display: none; }
}