/* Created by systemBlue.

   The whole stylesheet. Until 2026-08-13 this file was a handful of rules on
   top of a vendored, compiled Tailwind sheet; that sheet came down with the
   documentation site it was built for. Two shapes are left, the root and a
   legal document, and neither loads a script, so light and dark are answered
   by `prefers-color-scheme` rather than by a class some JavaScript sets.

   Every color pair below was measured from resolved pixels against WCAG AA,
   not eyeballed, and `verify.sh` runs axe over every page in both appearances
   rather than trusting the numbers in this comment:

     light   #0072e0 wordmark on #ffffff    4.68:1   needs 3.0
             #18181b headings               17.4:1
             #3f3f46 body text              10.8:1
             #005cb8 links                   6.5:1
     dark    #0072e0 wordmark on #18181b     3.78:1   needs 3.0
             #fafafa headings               16.4:1
             #d4d4d8 body text              11.4:1
             #6cb6ff links                   8.0:1

   THE WORDMARK IS #0072e0 IN BOTH APPEARANCES. It is the systemBlue blue and
   there is no second version of it (Shelton, 2026-08-13: "it needs to be blue
   not sure where the confusion is coming from"). Earlier pages used a lighter
   #3d97fb in dark mode, and the reason was real at the time and does not apply
   here: that wordmark sat at 18px in a header, where 3.78:1 is at the very
   edge of the large-text threshold, and the site also carried full-width
   colored bands that needed their own pairs. The bands are gone and this
   wordmark is 50 to 72px bold, which is large text under WCAG 1.4.3, so the
   AA threshold is 3.0 and 3.78:1 clears it with room.

   Do not "fix" dark mode back to a lighter tint. Tools/check-wordmark.swift
   measures both appearances from resolved pixels on every verify.sh run and
   prints the numbers, so this is checked rather than believed. */

:root {
  --bg: #fff;
  --ink: #3f3f46;
  --strong: #18181b;
  --link: #005cb8;
  --mark: #0072e0;
  --rule: rgb(24 24 27 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18181b;
    --ink: #d4d4d8;
    --strong: #fafafa;
    --link: #6cb6ff;
    --rule: rgb(255 255 255 / 0.12);
  }
}

/* San Francisco on Apple devices, which is where our readers are, asked for by
   keyword so the reader's own operating system supplies it: nothing is
   downloaded, embedded or redistributed, which is the only route Apple's font
   licence leaves open. Everyone else gets their own system font. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* The wordmark. Named separately from the body text on purpose: if the site's
   typeface ever changes, the wordmark should not follow it by accident. The
   descender on the y is clipped at this size without the padding. */

.sb-wordmark {
  font-family: -apple-system, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mark);
}

/* The root: the wordmark, centered, and nothing else. */

.sb-root {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* min() rather than clamp(): the size must be whatever fits, with no floor.
   A clamp floor in rem was 2.75rem, which doubles with the reader's text size
   and ran the wordmark off the right edge of a 390pt phone at 200%, clipping
   "systemBlue" mid-word. Losing content at 200% is a WCAG 1.4.4 failure, and
   a 50px wordmark that declines to grow further is not. The narrow-and-scaled
   pass in Tools/check-a11y.swift fails the build on any horizontal overflow,
   which is how this was caught rather than shipped. */

.sb-root h1 {
  margin: 0;
  font-size: min(4.5rem, 13vw);
  line-height: 1.15;
  padding-bottom: 0.12em;
}

/* A legal document. One column at a readable measure, the same on a phone in
   a web view as in a browser, because a web view is where most readers will
   meet these. */

.sb-doc > main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  overflow-wrap: break-word;
}

.sb-doc h1,
.sb-doc h2,
.sb-doc h3 {
  color: var(--strong);
  line-height: 1.25;
  text-wrap: balance;
}

.sb-doc h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.sb-doc h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.375rem;
}

.sb-doc h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.0625rem;
}

/* A heading that links to itself, which is how a clause is cited. It reads as
   a heading rather than as a link: the underline would be noise on every one
   of eighteen sections, and the address bar is the feedback. */

.sb-doc h2 a,
.sb-doc h3 a {
  color: inherit;
  text-decoration: none;
}

.sb-doc h2 a:hover,
.sb-doc h3 a:hover {
  text-decoration: underline;
}

.sb-doc p,
.sb-doc ul,
.sb-doc ol {
  margin: 0 0 1rem;
}

.sb-doc ul,
.sb-doc ol {
  padding-left: 1.25rem;
}

.sb-doc li {
  margin-bottom: 0.375rem;
}

.sb-doc strong {
  color: var(--strong);
}

/* The effective date, directly under the title. */

.sb-doc .lead {
  color: var(--strong);
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

/* The notices that travel with a published document: who owns it, and the
   attribution the Blue Guard icon's licence requires. */

.sb-fine {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
}

.sb-fine p {
  margin: 0 0 0.25rem;
}