, so a leading 's own top margin would drop the text a
line below its own number. */
.steps > li > p:first-child { margin-top: 0; }
.steps > li > p:last-child { margin-bottom: 0; }
.steps > li > ul { margin: 0.35rem 0; }
.steps > li::before {
content: counter(step); position: absolute; left: 0; top: 0.05rem;
width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--crf-cyan);
color: var(--crf-ink); font-weight: 700; font-size: 0.85rem;
display: flex; align-items: center; justify-content: center;
}
/* ------------------------------------------------------------- [SEARCH] --- */
/* Two boxes, one set of rules. The small one sits at the right of every page
header; the wide one is on the landing page only, between the three guide
cards and the prose. They are the same markup from the same emitter
(tools/DocGen/Pipeline/HtmlEmitter.cs, SearchBox) and the same script
(assets/js/docs-search.js) — the classes below differ only in SIZE and in
whether the result panel floats over the page or pushes it down.
Both are rendered `hidden` and unhidden by the script, so a page with no
JavaScript shows no search field rather than one that does nothing. */
.doc-search, .search-hero { position: relative; }
.doc-search { margin-left: 0.8rem; flex: 0 1 15rem; min-width: 9rem; }
.search-hero { margin: 1.6rem 0 2.2rem; }
.search-input {
width: 100%; font: inherit; font-size: 0.92rem; color: var(--text);
background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 0.4rem 0.9rem;
transition: border-color 0.15s, background 0.15s;
/* The platform's own clear button and magnifier are drawn in the platform's
colours and are invisible on the dark palette — so neither is used. */
-webkit-appearance: none; appearance: none;
}
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
outline: none; background: var(--bg);
border-color: var(--crf-cyan);
/* Stated twice on purpose: a browser without color-mix() drops that declaration
entirely, and would then draw no focus ring at all. The flat variable above it
is the one it keeps. */
box-shadow: 0 0 0 3px var(--focus-ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--crf-cyan) 25%, transparent);
}
.search-hero .search-input {
font-size: 1.05rem; padding: 0.75rem 1.1rem; border-radius: var(--radius);
}
/* The results. In the header they float over the page — the header is fixed
furniture and pushing the article down on every keystroke is unreadable. On
the landing page the box is IN the article, so its panel is too. */
.search-panel {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
}
.doc-search .search-panel {
position: absolute; z-index: 40; top: calc(100% + 0.45rem); right: 0;
width: min(30rem, 88vw); max-height: min(28rem, 70vh);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.search-hero .search-panel { margin-top: 0.6rem; max-height: 32rem; }
.search-hit {
display: block; padding: 0.6rem 0.9rem; color: inherit; text-decoration: none;
border-bottom: 1px solid var(--border);
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover { text-decoration: none; }
/* One highlight for hover AND for the keyboard cursor: the arrow keys and the
mouse are picking the same thing, so they must not be able to point at two. */
.search-hit:hover, .search-hit.is-active { background: var(--surface); }
.search-hit.is-active { box-shadow: inset 3px 0 0 var(--crf-cyan); }
.hit-title { display: block; font-weight: 600; color: var(--link); font-size: 0.98rem; }
.hit-crumb {
display: block; font-size: 0.76rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.1rem;
}
.hit-text {
display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.5;
margin-top: 0.25rem;
}
.search-hit mark {
background: var(--hilite);
background: color-mix(in srgb, var(--crf-cyan) 30%, transparent);
color: var(--text); border-radius: 3px; padding: 0 0.1em;
}
.search-empty { margin: 0; padding: 0.8rem 0.9rem; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 34rem) {
/* Below this the header's three items cannot share a line. The search box takes
its own, full width, rather than shrinking to a field too narrow to read. */
.doc-search { flex: 1 0 100%; margin-left: 0; }
.doc-search .search-panel { width: 100%; }
}
@media print {
.doc-header .doc-kind, nav.toc, nav.page-nav,
.doc-search, .search-hero { display: none; }
a { color: var(--text); text-decoration: underline; }
body { font-size: 11pt; }
}
/* ------------------------------------------------------------------ [NAV] -- */
/* The Previous/Next chain and the complete table of contents. Both are
GENERATED from docs/user/src/_nav.txt — the one reading order through the
whole set — so a page can never be in the contents but out of the chain, or
reachable from neither. See tools/DocGen/Pipeline/SiteNav.cs. */
nav.page-nav {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
margin: 3rem 0 0.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
}
nav.page-nav a {
display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.9rem;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); text-decoration: none;
}
nav.page-nav a:hover { border-color: var(--crf-cyan); text-decoration: none; }
nav.page-nav a.next { text-align: right; }
nav.page-nav .dir {
font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
nav.page-nav .name { font-weight: 600; color: var(--link); }
.site-toc { margin: 1.2rem 0 0; }
.site-toc h3 {
margin: 1.6rem 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted); border: 0;
}
.site-toc ul { list-style: none; margin: 0; padding: 0; }
.site-toc li {
padding: 0.4rem 0; border-top: 1px solid var(--border);
display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr; gap: 0.2rem 1rem; align-items: baseline;
}
.site-toc li a { font-weight: 600; }
.site-toc li span { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 40rem) {
nav.page-nav { grid-template-columns: 1fr; }
nav.page-nav a.next { text-align: left; }
.site-toc li { grid-template-columns: 1fr; }
}
/* ==== BEGIN GENERATED FONT BLOCK (tools/DocGen) ==== */
/* ---------------------------------------------------------------- [FONTS] --
GENERATED BLOCK - do not hand-edit. Rewritten by tools/DocGen on every run;
see FontExtractor.cs. The .ttf files beside it are extracted from the
application's own assets, so a doc page renders with the exact typefaces the
captured figures were drawn with rather than a browser substitution.
Licences: assets/fonts/OFL.txt (Inter, IBM Plex Sans) and
assets/fonts/DejaVu Fonts License.txt (DejaVu Sans).
------------------------------------------------------------------------- */
@font-face {
font-family: "Inter";
src: url("../fonts/Inter-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/Inter-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/Inter-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/Inter-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("../fonts/IBMPlexSans-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("../fonts/IBMPlexSans-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DejaVu Sans";
src: url("../fonts/DejaVuSans.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DejaVu Sans";
src: url("../fonts/DejaVuSans-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DejaVu Sans";
src: url("../fonts/DejaVuSans-Oblique.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ==== END GENERATED FONT BLOCK ==== */
