:root { color-scheme: light; --ink: #202020; --muted: #666666; --line: #d9ddd8; --paper: #ffffff; --wash: #f5f6f4; --brand-dark: #387c2b; --brand-light: #7ac143; --accent: #387c2b; --accent-dark: #2b6321; --accent-soft: #e7f2df; --card: #fbfcfc; --code-bg: #edf2f1; --pre-bg: #202020; --pre-ink: #f4f6f4; --shadow: 0 12px 32px rgba(24, 35, 43, .07); --shadow-hover: 0 6px 18px rgba(24, 35, 43, .08); /* Syntax highlighting. Pandoc ships skylighting's pygments palette, which is dark ink meant for a white code background; --pre-bg is dark in the light theme, the dark theme and on paper, so the whole palette is restated here against it. Every value clears 4.5:1 on #202020, the lightest --pre-bg. */ --syn-keyword: #8fd36b; --syn-function: #7fc7ff; --syn-string: #f0c08a; --syn-number: #d7b6ff; --syn-type: #ffb3a7; --syn-comment: #9fb0a6; --syn-attribute: #c3e88d; --syn-variable: #ffd479; --syn-preproc: #f5b76b; --syn-operator: #d6dbd7; --syn-alert: #ff9b8f; --syn-special: #ff9ecb; /* Typography. Families are named here and nowhere else, for the same reason colours are: a literal added elsewhere is invisible until someone notices one panel in the wrong face. The stack is the system stack, which is what Fluent 2, Material 3 and Apple's HIG all resolve to. Nothing is downloaded, so there is no web font to go missing when these pages are read from a USB stick or an air-gapped network, and no flash of unstyled text. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Fluent's own monospace token is Consolas, "Courier New", Courier, monospace, which lands macOS and Linux on Courier New. Courier New has no box-drawing glyphs, and per-glyph fallback would shear the ASCII-art diagrams apart without erroring, so this is the one Fluent token deliberately rejected. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono", monospace; --font-body: var(--font-sans); --font-head: var(--font-sans); --font-ui: var(--font-sans); --font-code: var(--font-mono); /* Fluent 2's web type ramp. The sizes and leadings are Fluent's, but every role sits one step above Fluent's own assignment: Fluent sizes application chrome, where 14px body is right, and these are documents meant to be read at length. Fluent has no 16px Regular step, so body takes Subtitle 2's metrics at Regular weight and everything above shifts up to match. */ --text-caption: 0.75rem; /* 12px - Fluent Caption 1 */ --text-small: 0.875rem; /* 14px - Fluent Body 1 */ --text-body: 1rem; /* 16px - Fluent Subtitle 2 */ --text-subtitle: 1.25rem; /* 20px - Fluent Subtitle 1 */ --text-title-3: 1.5rem; /* 24px - Fluent Title 3 */ --text-title-2: 1.75rem; /* 28px - Fluent Title 2 */ --text-title-1: 2rem; /* 32px - Fluent Title 1 */ --text-display: 2.5rem; /* 40px - Fluent Large Title */ --leading-body: 1.6; --leading-ui: 1.43; /* Fluent Body 1, 14/20 */ --leading-head: 1.29; /* Fluent Title 2, 28/36 */ --leading-tight: 1.25; /* Fluent Title 1, 32/40 */ --leading-display: 1.3; /* Fluent Large Title, 40/52 */ /* Fluent's headings are Semibold, not Bold. The system faces all have a real 600, so this is never synthesised. */ --weight-head: 600; } /* The display step is the only one that needs a narrow-screen answer; the rest of the ramp is already small enough to survive a phone. Overriding the token rather than the rules keeps the one-step-per-role mapping intact. */ @media (max-width: 760px) { :root { --text-display: 1.75rem; --text-title-1: 1.625rem; } } /* Dark theme. --brand-dark and --brand-light are deliberately not overridden: they are the fixed brand colors, and the header banner is dark in both themes. */ [data-theme="dark"] { color-scheme: dark; --ink: #e7ebe8; --muted: #9ba5a0; --line: #333b36; --paper: #1b1f1d; --wash: #121513; --accent: #7ac143; --accent-dark: #93d45f; --accent-soft: #24331d; --card: #222724; --code-bg: #2a302c; --pre-bg: #0e100f; --pre-ink: #f4f6f4; --shadow: 0 12px 32px rgba(0, 0, 0, .45); --shadow-hover: 0 6px 18px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } /* Never let the browser fake a weight or a slant. Every family in the stacks above ships real faces, and CSS font matching will pick the nearest real weight on its own; a synthesised 600 is the smeared look that gives system stacks a bad name. */ :root { font-synthesis: none; } body { margin: 0; background: var(--wash); color: var(--ink); font-family: var(--font-sans); font-size: 100%; line-height: var(--leading-body); } .site-header { position: relative; background: linear-gradient(115deg, #202020 0%, #303530 68%, var(--brand-dark) 100%); color: #fff; padding: 2.4rem max(1.25rem, calc((100% - 1120px) / 2)); margin: 0; text-align: left; border-bottom: 5px solid var(--brand-light); } .site-header h1 { max-width: 1000px; margin: 0; color: #fff; font-family: var(--font-head); font-size: var(--text-display); font-weight: var(--weight-head); line-height: var(--leading-display); letter-spacing: .01em; } .brand-lockup { display: inline-flex; align-items: center; margin-bottom: 1.2rem; } .brand-lockup img { display: block; width: min(230px, 58vw); height: auto; } .brand-lockup:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 5px; } .site-header p { margin: .55rem 0 0; color: #c9d7d8; } .site-nav { display: flex; gap: .6rem; margin-top: 1.4rem; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-ui); } .site-nav a, .site-nav a:visited { color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: .4rem .8rem; } .site-nav a:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } /* Pinned to the same inset the header padding uses, so it lines up with the content edge. */ .theme-toggle { position: absolute; top: 1.4rem; right: max(1.25rem, calc((100% - 1120px) / 2)); display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: .4rem .8rem; background: transparent; color: #fff; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-ui); cursor: pointer; } .theme-toggle:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } .theme-toggle:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 3px; } .theme-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .theme-toggle-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; } [data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; } /* Revealed by assets/js/back-to-top.js once the header has scrolled away, so it stays out of the way on pages short enough not to need it. */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 10; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--accent); box-shadow: var(--shadow-hover); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .back-to-top[data-visible] { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { border-color: var(--accent); color: var(--accent-dark); } .back-to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .back-to-top svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } } /* The label names the theme the button switches TO, and is CSS-driven so it is correct on first paint rather than waiting for theme.js. */ .theme-toggle-text::after { content: "Dark"; } [data-theme="dark"] .theme-toggle-text::after { content: "Light"; } body { max-width: none; padding: 0; hyphens: none; } main { width: min(1280px, calc(100% - 2.5rem)); margin: 2.5rem auto 4rem; } /* The middle column is the drag handle, so it is also the gutter. --toc-width is set by assets/js/toc-resizer.js; the clamp keeps a stored value sane when the window is narrower than it was when the reader chose it. */ .document-layout { display: grid; grid-template-columns: clamp(220px, var(--toc-width, 340px), 40%) .9rem minmax(0, 1fr); align-items: start; } .toc-resizer { position: sticky; top: 1rem; height: calc(100vh - 2rem); padding: 0; border: 0; background: none; cursor: col-resize; touch-action: none; } .toc-resizer::before { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; border-radius: 2px; background: var(--line); } .toc-resizer:hover::before, .toc-resizer:focus-visible::before, .is-resizing .toc-resizer::before { background: var(--accent); } .toc-resizer:focus-visible { outline: none; } body.is-resizing { cursor: col-resize; user-select: none; } .doc-toc, article, .index-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.25rem, 3vw, 3rem); box-shadow: var(--shadow); } .doc-toc { position: sticky; top: 1rem; padding: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } /* Sentence case, not all caps. Fluent is explicit that all caps is harder to read, and the label is doing navigation work, not decoration. */ .doc-toc::before { content: "On this page"; display: block; margin-bottom: .8rem; color: var(--accent); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--weight-head); line-height: var(--leading-ui); } .doc-toc nav { font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--leading-ui); overflow-x: auto; } .doc-toc a { white-space: nowrap; } .doc-toc ul { padding-left: 1.1rem; } .doc-toc li { margin: .35rem 0; } /* 80ch, measured in the article's own font, is the classic 45-75 character measure once the padding is taken off; box-sizing is border-box, so it is included here. */ article { min-width: 0; margin: 0; max-width: 80ch; } .index-panel { max-width: 1100px; margin: 0 auto; } h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-head); font-weight: var(--weight-head); line-height: var(--leading-tight); text-wrap: balance; } article h1 { font-size: var(--text-title-1); border-bottom: 3px solid var(--accent-soft); padding-bottom: .65rem; } h2 { margin-top: 2.4rem; padding-top: .5rem; border-top: 1px solid var(--line); font-size: var(--text-title-2); line-height: var(--leading-head); } h3 { margin-top: 2rem; font-size: var(--text-title-3); } h4 { margin-top: 1.6rem; font-size: var(--text-subtitle); } /* Pandoc's inline defaults set a:visited to #1a1a1a, which outranks a bare `a`. */ a, a:visited { color: var(--accent-dark); } .breadcrumb { margin: .35rem 0 0; color: #c9d7d8; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-ui); } .breadcrumb a { color: inherit; } .index-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: .85rem; } /* The top margin only separates the list from something above it, as on the search page. */ .index-list:first-child { margin-top: 0; } .index-list li { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 5px; background: var(--card); padding: .9rem 1rem; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .index-list li:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px); } .index-list a { font-family: var(--font-sans); font-size: var(--text-subtitle); font-weight: var(--weight-head); line-height: var(--leading-tight); text-decoration: none; } .index-list small { display: block; color: var(--muted); margin-top: .3rem; font-size: var(--text-small); line-height: var(--leading-ui); } .index-list small a { font: inherit; color: inherit; text-decoration: underline; } .index-list small a:hover { color: var(--accent-dark); } .search-box { display: flex; gap: .7rem; margin: 1.5rem 0; } .search-box input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: .85rem 1rem; font: inherit; background: var(--paper); color: inherit; box-shadow: inset 0 1px 2px rgba(24, 35, 43, .04); } .search-box button { border: 0; border-radius: 999px; padding: .8rem 1.25rem; background: var(--brand-light); color: #202020; font-family: var(--font-sans); font-size: var(--text-small); font-weight: var(--weight-head); line-height: var(--leading-ui); cursor: pointer; } .search-box button:hover { background: #8fd152; } .search-box input:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); } .search-status { color: var(--muted); font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-ui); } article { font-family: var(--font-body); } /* pre.sourceCode is spelled out because pandoc's stylesheet sets .sourceCode { background-color: transparent }, which outweighs a bare `pre` and would otherwise drop highlighted blocks onto the page background while they keep the light --pre-ink. */ pre, pre.sourceCode { overflow-x: auto; padding: 1rem; background: var(--pre-bg); color: var(--pre-ink); border-radius: 5px; border-left: 4px solid var(--brand-light); } /* Scoped to `pre` so these beat pandoc's own `code span.xx` on specificity rather than on load order, and so only the colour is taken: the weight and slant pandoc sets alongside it still carry. */ pre code span.al { color: var(--syn-alert); } pre code span.an { color: var(--syn-comment); } pre code span.at { color: var(--syn-attribute); } pre code span.bn { color: var(--syn-number); } pre code span.bu { color: var(--syn-function); } pre code span.cf { color: var(--syn-keyword); } pre code span.ch { color: var(--syn-string); } pre code span.cn { color: var(--syn-type); } pre code span.co { color: var(--syn-comment); } pre code span.cv { color: var(--syn-comment); } pre code span.do { color: var(--syn-comment); } pre code span.dt { color: var(--syn-type); } pre code span.dv { color: var(--syn-number); } pre code span.er { color: var(--syn-alert); } pre code span.fl { color: var(--syn-number); } pre code span.fu { color: var(--syn-function); } pre code span.im { color: var(--syn-keyword); } pre code span.in { color: var(--syn-comment); } pre code span.kw { color: var(--syn-keyword); } pre code span.op { color: var(--syn-operator); } pre code span.ot { color: var(--syn-keyword); } pre code span.pp { color: var(--syn-preproc); } pre code span.sc { color: var(--syn-special); } pre code span.ss { color: var(--syn-special); } pre code span.st { color: var(--syn-string); } pre code span.va { color: var(--syn-variable); } pre code span.vs { color: var(--syn-string); } pre code span.wa { color: var(--syn-alert); } /* Monospace faces run visually larger than the sans at the same nominal size, so the ramp is nudged down a step here to match. em, not rem, so inline code tracks whatever it is sitting in. */ /* Monospace faces run visually larger than the sans at the same nominal size, so the ramp is nudged down a step here to match. em, not rem, so inline code tracks whatever it is sitting in. */ /* Pandoc injects its own stylesheet ahead of this one, and it sets code { white-space: pre-wrap }. It guards its own blocks with pre > code.sourceCode { white-space: pre }, but these render as 
 with no sourceCode class, so that guard never fires and
   every box-drawing diagram wraps into rubble. Pin it. overflow-x above then gives
   a long line somewhere to go. */
pre, pre code { white-space: pre; }
code { font-family: var(--font-code); font-size: .9375em; font-variant-numeric: tabular-nums; }
:not(pre) > code { background: var(--code-bg); padding: .12em .3em; border-radius: 3px; }
/* Version numbers and table columns only line up if the digits are the same width.
   Every family in the stacks has tabular figures; this just asks for them. */
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
th { background: var(--accent-soft); }
img { max-width: 100%; height: auto; }
blockquote { margin: 1.25rem 0; padding: .2rem 1rem; border-left: 4px solid var(--accent); color: var(--muted); }
/* Avoids the one-word last line. Ignored by browsers that do not know it. */
article p, article li { text-wrap: pretty; }
@media (max-width: 760px) { main { width: min(100% - 1rem, 1120px); margin-top: 1rem; } .site-header { padding: 1.5rem 1rem; } .document-layout { grid-template-columns: 1fr; gap: 1rem; } .toc-resizer { display: none; } .doc-toc { position: static; max-height: none; } article, .index-panel { padding: 1rem; } .search-box { flex-direction: column; } }

/* Front and back matter. Rendered only for documents carrying a directive. */
.front-matter { margin: 0 0 2.5rem; }
.cover-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 0 3rem; font-family: var(--font-sans); }
.cover-logo { width: min(320px, 70%); height: auto; margin-bottom: 3rem; }
/* The colour logo is dark green on transparent, so swap in the white one.
   These URLs resolve against this stylesheet, not the page, so one path serves every depth. */
[data-theme="dark"] .cover-logo { content: url("../images/surepassid-logo-white.png"); }
[data-theme="dark"] .cover-footer-logo { content: url("../images/surepassid-logo-white.png"); }
.cover-title { margin: 0; border: 0; padding: 0; font-size: var(--text-display); line-height: var(--leading-display); color: var(--accent); text-wrap: balance; }
.cover-subtitle { margin: .75rem 0 0; font-size: var(--text-subtitle); line-height: var(--leading-tight); color: var(--muted); text-wrap: balance; }
.cover-version { margin: .5rem 0 0; color: var(--muted); font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-ui); font-variant-numeric: tabular-nums; }
.cover-footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 4rem; color: var(--muted); font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--leading-ui); }
.cover-footer-logo { width: 120px; height: auto; }
.front-matter-toc h2 { margin-top: 0; }
.front-matter-toc ul { padding-left: 1.2rem; }
.back-matter { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-body); }
.copyright-notice { margin: 0 0 1.25rem; }
.company-block { font-style: normal; }
.company-name, .address-line, .company-phone { display: block; }
.company-name { font-weight: var(--weight-head); color: var(--ink); }

/* Screen density, chosen per document by the front matter `display` key.
   `full` needs no rules: it is the unmodified cover, which is also what prints. */
.front-matter--print { display: none; }
.front-matter--compact .cover-page { padding: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.front-matter--compact .cover-logo { width: 180px; margin-bottom: .75rem; }
.front-matter--compact .cover-title { font-size: var(--text-title-3); }
.front-matter--compact .cover-subtitle { font-size: var(--text-body); margin: .25rem 0 0; }
.front-matter--compact .cover-version { margin: .15rem 0 0; }
.front-matter--compact .cover-footer, .front-matter--compact .front-matter-toc { display: none; }

@page { size: letter; margin: 0.75in; }
@media print {
  /* Paper is always light. Re-declared rather than scoped away because
     [data-theme="dark"] would otherwise still be winning on the element. */
  :root, [data-theme="dark"] {
    color-scheme: light;
    --ink: #202020;
    --muted: #666666;
    --line: #d9ddd8;
    --paper: #ffffff;
    --wash: #ffffff;
    --accent: #387c2b;
    --accent-dark: #2b6321;
    --accent-soft: #e7f2df;
    --card: #fbfcfc;
    --code-bg: #edf2f1;
    --pre-bg: #202020;
    --pre-ink: #f4f6f4;

    /* Paper is not a screen. The ramp keeps Fluent's proportions but is restated
       in points, because that is the unit the page is actually measured in, and
       because rem would still be chasing the browser's screen root size. */
    --text-caption:  8pt;
    --text-small:    9.5pt;
    --text-body:     11pt;
    --text-subtitle: 13.5pt;
    --text-title-3:  16pt;
    --text-title-2:  19pt;
    --text-title-1:  22pt;
    --text-display:  28pt;

    /* Ink on paper needs less leading than light on glass. */
    --leading-body:  1.45;
    --leading-ui:    1.35;
  }
  body { font-size: var(--text-body); }
  [data-theme="dark"] .cover-logo, [data-theme="dark"] .cover-footer-logo { content: normal; }
  .site-header, .site-nav, .doc-toc, .toc-resizer, .theme-toggle, .back-to-top { display: none; }
  /* Without this the article lands in the (now empty) contents column and prints
     at that column's width. Portrait pages are narrow enough to hit the stacking
     breakpoint instead, but landscape ones are not. */
  .document-layout { display: block; }
  .front-matter { display: block; }
  /* The footer is pushed down by margin-top, which needs a page-tall box to be pushed within. */
  .cover-page { break-after: page; min-height: 9in; }
  .front-matter-toc { break-after: page; }
  .back-matter { break-before: page; }
  article { border: 0; box-shadow: none; padding: 0; max-width: none; }
  /* Listings are the one thing that must not reflow: the ASCII-art diagrams are
     drawn to a fixed column count, so they get their own smaller size to fit the
     page rather than being allowed to wrap. */
  pre, pre code { font-size: 9pt; }
  /* Paper cannot scroll, so here a line too long to fit has to wrap rather than be
     silently cut off at the edge. 9pt holds about 93 columns, which covers 98% of
     the listings in this repository. */
  pre, pre code { white-space: pre-wrap; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }

  /* Undo the compact screen density so every document prints the same full cover. */
  .front-matter--compact .cover-page { padding: 2rem 0 3rem; border-bottom: 0; }
  .front-matter--compact .cover-logo { width: min(320px, 70%); margin-bottom: 3rem; }
  .front-matter--compact .cover-title { font-size: var(--text-display); }
  .front-matter--compact .cover-subtitle { font-size: var(--text-subtitle); margin: .75rem 0 0; }
  .front-matter--compact .cover-footer { display: flex; }
  .front-matter--compact .cover-version { margin: .5rem 0 0; }
  .front-matter--compact .front-matter-toc { display: block; }
}