/* Shared look for the documents in docs/share, from the product's own palette (docs/design-system.md):
   graphite neutrals, hi-vis amber where the eye must go, safety green for what works today, blue for what is planned.
   Covers and the footer sit on the product's dark control-room canvas; the reading pages are light paper.
   Layout: one paper sheet (A4 when printed) with a sticky doc bar above it and, on wide screens, a rail of its sections.
   Icons are Lucide outlines (ISC licence), inlined as CSS masks.
   The decks do not load this file: they copy the token values into their own :root. */

@import url("meta.css"); /* PDF running footer: version and credits (written by build-pdfs.sh) */

@font-face { font-family: "Red Hat Display Local"; src: url("fonts/RedHatDisplay.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Red Hat Text Local"; src: url("fonts/RedHatText.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Red Hat Mono Local"; src: url("fonts/RedHatMono.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: only light; /* "only": browsers' forced dark modes must not repaint the light theme; the dark one is ours */
  --pad: clamp(16px, 5vw, 56px);
  --page: 960px;            /* one width for every page in the set */
  --rail: 224px;            /* the "On this page" rail, from 1200px */
  --canvas: #eef1f5;
  --paper: #ffffff;
  --surface-2: #f3f5f8;
  --surface-3: #e8ecf1;
  --hairline: #dde2ea;
  --rule: #c5cdd7;
  --text: #11151b;
  --text-2: #3e4854;
  --text-3: #5b6673;         /* captions and meta only, 13px or more */
  --ink: #0e1217;            /* dark bands (cover, footer) in both themes */
  --ink-2: #171d25;
  --ink-line: #2a333e;
  --ink-text: #eef1f5;
  --ink-muted: #a6b0bd;
  --amber: #7f5400;          /* amber text on paper */
  --amber-fill: #f5b700;     /* hi-vis fill, always with dark ink */
  --amber-ink: #1a1400;
  --amber-soft: #fff2c2;
  --green: #12784a;
  --green-soft: #dcf4e7;
  --blue: #1d5bc2;
  --blue-soft: #e0ebfc;
  --blue-ink: #ffffff;       /* text on a solid blue pill */
  --red: #c0352d;
  --red-soft: #fde8e6;
  --frame: #0e1217;
  --mark-ring: #2a333e;
  --sh-float: 0 10px 30px -14px rgb(14 18 23 / .30);
  --sans: "Red Hat Text", "Red Hat Text Local", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Red Hat Display", "Red Hat Display Local", "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
  --mono: "Red Hat Mono", "Red Hat Mono Local", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 72ch;
  /* Type scale (screen; print keeps its own sizes). */
  --fs-h1: clamp(30px, 3.4vw, 42px);
  --fs-h2: clamp(24px, 2.4vw, 28px);
  --fs-h3: 19px;
  --fs-h4: 16px;
  --fs-lead: clamp(17px, 1.4vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-num: clamp(28px, 2.6vw, 34px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #090c10; --paper: #12171e; --surface-2: #19212a; --surface-3: #212a35; --hairline: #2b3540; --rule: #3a4654;
    --text: #e9edf2; --text-2: #b3bdc8; --text-3: #97a2ae; --ink: #1a2029; --ink-2: #222a33; --ink-line: #323d4a; --ink-muted: #aeb8c4;
    --amber: #f5b700; --amber-soft: #f5b70024; --green: #3ecf8e; --green-soft: #3ecf8e24;
    --blue: #7cb6ff; --blue-soft: #7cb6ff24; --blue-ink: #0b1220; --red: #ff6b6b; --red-soft: #ff6b6b24; --frame: #07090c;
    --mark-ring: rgb(255 255 255 / .16); --sh-float: 0 10px 30px -10px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #090c10; --paper: #12171e; --surface-2: #19212a; --surface-3: #212a35; --hairline: #2b3540; --rule: #3a4654;
  --text: #e9edf2; --text-2: #b3bdc8; --text-3: #97a2ae; --ink: #1a2029; --ink-2: #222a33; --ink-line: #323d4a; --ink-muted: #aeb8c4;
  --amber: #f5b700; --amber-soft: #f5b70024; --green: #3ecf8e; --green-soft: #3ecf8e24;
  --blue: #7cb6ff; --blue-soft: #7cb6ff24; --blue-ink: #0b1220; --red: #ff6b6b; --red-soft: #ff6b6b24; --frame: #07090c;
  --mark-ring: rgb(255 255 255 / .16); --sh-float: 0 10px 30px -10px rgb(0 0 0 / .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 68px; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font: 400 var(--fs-body)/1.62 var(--sans); padding: 0 16px 64px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* Icons: <i class="ico i-name"></i> takes the current text colour. */
.ico { display: inline-block; width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.i-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.i-check-circle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.i-info { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.i-alert { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.i-book { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.i-file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.i-code { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E"); }
.i-building { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); }
.i-user { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.i-users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.i-calendar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.i-tag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E"); }
.i-monitor { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E"); }
.i-camera { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.i-shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.i-eye { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-trending { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E"); }
.i-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.i-server { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cpath d='M6 6h.01'/%3E%3Cpath d='M6 18h.01'/%3E%3C/svg%3E"); }
.i-map { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z'/%3E%3Cpath d='M15 5.764v15'/%3E%3Cpath d='M9 3.236v15'/%3E%3C/svg%3E"); }
.i-list { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); }
.i-slides { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E"); }
.i-download { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.i-arrow { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); }
.i-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.i-layers { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.i-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); }
.i-zap { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); }
.i-hardhat { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M14 6a6 6 0 0 1 6 6v3'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6'/%3E%3Crect x='2' y='15' width='20' height='4' rx='1'/%3E%3C/svg%3E"); }

/* The sheet of paper on screen; the page itself when printed. */
.doc {
  max-width: var(--page); margin-inline: auto; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 14px; padding: var(--pad);
}

h1, h2, h3, h4 { text-wrap: balance; color: var(--text); margin: 0; font-family: var(--display); }
p, li { text-wrap: pretty; }
.brand, .kicker, .figures b, .sf-grid dd:first-of-type { font-family: var(--display); }
h1 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin-top: 48px; margin-bottom: 14px; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; margin-top: 32px; margin-bottom: 8px; }
h4 { font: 600 var(--fs-h4)/1.35 var(--sans); margin-top: 20px; margin-bottom: 6px; }
p, ul, ol, dl { margin: 0 0 12px; }
li + li { margin-top: 6px; }
ul, ol { padding-left: 22px; }
strong { font-weight: 600; }
small, .small { font-size: var(--fs-caption); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 60ch; }
p.summary { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 60ch; margin: 0 0 24px; }
.mono, code { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; }
pre { font-family: var(--mono); font-size: 13px; line-height: 1.55; background: var(--ink); color: #e3e8ee; border: 1px solid var(--ink-line);
  border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 24px; max-width: 100%; }
pre code { background: none; border: 0; padding: 0; white-space: pre; color: inherit; }
kbd { font-family: var(--mono); font-size: 12px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px;
  background: var(--surface-2); min-width: 1.6em; text-align: center; display: inline-block; line-height: 1.5; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }
.num { font-variant-numeric: tabular-nums; }

/* Reading column: prose stops at the measure; tables, boards, grids and figures take the full sheet. Zero specificity,
   so any class below sets its own width. */
:where(main.doc) :is(p, ul, ol, dl, figcaption), :where(main.doc .callout, main.doc ol.steps, main.doc ul.check) { max-width: var(--measure); }
:where(main.doc) :is(.features, .chips, .cb-meta, .toc, .board ul, ul.sub, .ledger, dl.spec, dl.defs, .future-grid, .future-strip, .shelf) { max-width: none; }

/* Brand row: the mark is the platform's, the name is generic because the software is white-label. */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--frame); display: grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.brand-mark::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--amber-fill); }

/* Cover band: the opening of every document, on the dark canvas, with the hi-vis edge on top. */
.cover-band { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 32px; padding: 40px var(--pad) 32px;
  background: var(--ink); color: var(--ink-text); border-radius: 13px 13px 0 0; border-top: 3px solid var(--amber-fill); display: grid; gap: 12px; }
.cover-band .brand { color: #fff; }
.cover-band .brand-mark { background: var(--ink-2); box-shadow: 0 0 0 1px var(--mark-ring); }
.cb-top { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.wl-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  border: 1px solid var(--ink-line); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.wl-badge .ico { color: var(--amber-fill); }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--amber-fill); font-weight: 600; font-size: 14px; }
.cover-band h1 { color: #fff; font-size: var(--fs-h1); max-width: 30ch; }
.cover-band .lead { color: var(--ink-muted); margin: 0; max-width: 74ch; text-align: left; }
.cb-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 6px 0 0; }
.cb-meta li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-muted); background: none; border: 0; padding: 0; margin: 0; }
.cb-meta .ico, .kicker .ico { color: var(--amber-fill); }
.cover-band.compact { gap: 10px; }
.cover-band.compact h1 { font-size: 30px; }

/* Screenshot frame: the product's own canvas around every capture, so dark UI never floats on paper. */
.shot { margin: 24px 0; break-inside: avoid; }
.shot .frame { background: var(--frame); border-radius: 10px; padding: 6px; border: 1px solid var(--hairline); position: relative; }
.shot img, .shot video { border-radius: 7px; width: 100%; height: auto; display: block; }
/* Video on screen, its still on paper. Scoped by medium so no other img rule can show both. */
@media screen { .print-still { display: none !important; } }
@media print { video, .demo-video { display: none !important; } .print-still { display: block !important; } }
/* A figure that is only a video has nothing to print. */
@media print { .shot.screen-only { display: none !important; } }
.shot figcaption { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-2); margin-top: 9px; max-width: 72ch; }
.cap-h { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.cap-h b { color: var(--text); font-weight: 600; }

/* One status vocabulary for every document: Available (live), In progress (building), Next, Planned, Later. */
.pill, .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font: 600 var(--fs-micro)/1 var(--sans);
  white-space: nowrap; border: 1px solid transparent; vertical-align: middle; text-align: left; hyphens: manual; }
.pill.live, .tag.live { background: var(--green-soft); color: var(--green); }
.pill.building, .tag.building { background: var(--amber-soft); color: var(--amber); }
.pill.next, .tag.next { background: var(--blue); color: var(--blue-ink); }
.pill.planned, .tag.planned { background: var(--blue-soft); color: var(--blue); }
.pill.later, .tag.later { background: var(--surface-3); color: var(--text-2); }
.pill.high { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.pill.medium { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.pill.low { color: var(--text-2); border-color: var(--hairline); }

/* Future screens: previews of planned pages, grouped by milestone; the status sits in the caption, off the picture. */
.future-h { display: flex; align-items: center; gap: 10px; margin-top: 32px; margin-bottom: 8px; font-size: var(--fs-h3); font-weight: 600; }
.future-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-items: start; }
.future-grid .shot { margin: 8px 0 16px; }

/* Hub preview strip: 2x2 grid on desktop so UI screenshots are large and clear, filling the container width. */
.future-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; margin: 16px 0 32px; width: 100%; }
.future-strip figure { margin: 0; break-inside: avoid; display: flex; flex-direction: column; }
.future-strip .frame { position: relative; background: var(--frame); border-radius: 10px; padding: 6px; border: 1px solid var(--hairline); }
.future-strip img { border-radius: 7px; width: 100%; height: auto; display: block; }
.future-strip figcaption { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--text); text-align: left; hyphens: manual; }

.future-strip.mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.future-strip.mini .frame { padding: 4px; border-radius: 6px; }
.future-strip.mini img { border-radius: 4px; }
.future-strip.mini .tag { display: none; }
.future-strip.mini figcaption { font-size: 7pt; margin-top: 2px; font-weight: 400; color: var(--text-2); }

/* Hub: every screen of the finished system as a contact sheet, grouped by status; each opens in the viewer. */
.future-sheet { display: grid; gap: 22px; margin: 14px 0 8px; }
.fs-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; font-size: 15px; }
.fs-n { margin-left: auto; font: 500 12.5px/1 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 14px 14px; }
.fs-grid figure { margin: 0; display: grid; gap: 6px; align-content: start; }
.fs-grid .frame { position: relative; background: var(--frame); border: 1px solid var(--hairline); border-radius: 9px; padding: 3px; transition: border-color .15s; }
.fs-grid img { border-radius: 6px; width: 100%; height: auto; display: block; }
.fs-grid figure:hover .frame, .fs-grid figure:focus-visible .frame { border-color: var(--amber-fill); }
.fs-grid figcaption { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); }
.fs-grid .zoom-hint { width: 24px; height: 24px; right: 7px; top: 7px; }
.fs-grid .zoom-hint .ico { width: 12px; height: 12px; }

/* Segmented control: the download OS switch and the hub tour's status tabs. */
.seg, .tour-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); }
.seg button, .tour-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font: 600 13.5px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.seg button:hover, .tour-tab:hover { color: var(--text); }
.seg [aria-pressed="true"], .seg [aria-selected="true"], .tour-tab[aria-selected="true"] { background: var(--paper); color: var(--text); box-shadow: 0 0 0 1px var(--hairline); }
.tour-tab small { font: 500 12px/1 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Hub tour (docs.js adds .tour): status tabs, one screen large enough to read, and the group's screens in a strip. */
.future-sheet.tour { gap: 0; }
.tour-tabs { max-width: 100%; }
.tour-tab:focus-visible, .ts-frame:focus-visible, .ts-full:focus-visible, .ts-demo:focus-visible, .tour .fs-grid figure:focus-visible { outline: 2px solid var(--amber-fill); outline-offset: 2px; }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.tt-dot.live { background: var(--green); } .tt-dot.building { background: var(--amber-fill); } .tt-dot.next { background: var(--blue); }
.tt-dot.planned { background: color-mix(in srgb, var(--blue) 55%, transparent); } .tt-dot.later { background: var(--text-3); }
/* The picture beside its words: a reader sees the screen, what it is and the way into the demo without scrolling. */
.tour-stage { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px 22px; margin-top: 12px; align-items: start; }
.ts-pic { position: relative; }
.ts-frame { background: var(--frame); border: 1px solid var(--hairline); border-radius: 10px; padding: 6px; cursor: zoom-in; }
.ts-frame img { width: 100%; height: auto; display: block; border-radius: 7px; }
.ts-nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / .22); background: rgb(23 29 37 / .86); color: #fff; }
.ts-nav .ico { width: 18px; height: 18px; }
.ts-prev { left: 14px; } .ts-next { right: 14px; }
.ts-nav:hover { background: var(--amber-fill); border-color: var(--amber-fill); color: var(--amber-ink); }
.ts-info { display: grid; gap: 10px; align-content: start; }
.ts-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ts-title { font: 600 17px/1.3 var(--display); color: var(--text); }
.ts-count { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ts-cap { margin: 0; color: var(--text-2); font-size: 14px; max-width: 70ch; }
.ts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-demo, .ts-full { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font: 600 13.5px/1 var(--sans); white-space: nowrap; }
.ts-demo { background: var(--amber-fill); color: var(--amber-ink); text-decoration: none; }
.ts-demo:hover { background: #ffc61a; }
.ts-full { border: 1px solid var(--hairline); background: var(--paper); color: var(--text); cursor: pointer; }
.ts-full:hover { border-color: var(--text-3); }
.ts-demo .ico, .ts-full .ico, .ts-play .ico { width: 15px; height: 15px; }
.ts-play { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font: 600 13.5px/1 var(--sans);
  white-space: nowrap; border: 1px solid var(--hairline); background: var(--paper); color: var(--text); cursor: pointer; }
.ts-play:hover { border-color: var(--text-3); }
.ts-play:focus-visible { outline: 2px solid var(--amber-fill); outline-offset: 2px; }
/* The autoplay timer: a bar along the picture's bottom edge that fills, then the next screen comes (docs.js). */
.ts-timer { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 3px; border-radius: 0 0 8px 8px; overflow: hidden; pointer-events: none; }
.ts-timer i { display: block; height: 100%; background: var(--amber-fill); transform: scaleX(0); transform-origin: left; }
.tour.playing .ts-timer i { animation: ts-run 6s linear forwards; }
.tour.playing:hover .ts-timer i, .tour.ts-away .ts-timer i, .dv-open .tour .ts-timer i { animation-play-state: paused; }
@keyframes ts-run { to { transform: scaleX(1); } }
.tour .fs-h { display: none; }
.tour .fs-grid { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; margin-top: 14px; scroll-snap-type: x proximity; }
.tour .fs-grid figure { flex: 0 0 136px; scroll-snap-align: start; cursor: pointer; }
.tour .fs-grid figcaption { font-size: 12px; font-weight: 500; color: var(--text-2); }
.tour .fs-grid figure[aria-current] .frame { border-color: var(--amber-fill); box-shadow: 0 0 0 2px var(--amber-fill); }
.tour .fs-grid figure[aria-current] figcaption { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .tour-stage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ts-nav { width: 32px; height: 32px; } .ts-prev { left: 8px; } .ts-next { right: 8px; }
  .tour .fs-grid figure { flex-basis: 112px; }
}

/* Table of contents: a real sequence, so it is numbered. */
.toc { columns: 2 260px; column-gap: 32px; padding: 0; list-style: none; counter-reset: toc; margin: 8px 0 0; }
.toc li { counter-increment: toc; break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--amber); font-weight: 600; margin-right: 10px; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--blue); }

/* Section opener: a rule with a short amber tab. Scoped to the reading documents; the hub, decks and one-pager keep their own. */
main.doc h2 { position: relative; display: block; margin: 64px 0 16px; padding-top: 20px; border-top: 1px solid var(--rule); }
main.doc h2::after { content: ""; position: absolute; left: 0; top: -2px; width: 40px; height: 3px; background: var(--amber-fill); }
main.doc .cover-band + h2, main.doc .jump + h2, main.doc .cover-band + .jump + h2 { border-top: 0; padding-top: 0; margin-top: 32px; }
main.doc .cover-band + h2::after, main.doc .jump + h2::after { content: none; }

/* Numbered chapters for manuals (class="doc chapters", chapter headings h2.ch). */
.chapters { counter-reset: chapter; }
.chapters h2.ch { counter-increment: chapter; }
main.doc.chapters h2.ch { display: flex; align-items: center; gap: 12px; }
.chapters h2.ch::before { content: counter(chapter); min-width: 32px; padding: 1px 8px; border-radius: 7px;
  background: var(--amber-soft); color: var(--amber); font: 600 15px/1.4 var(--display); text-align: center; font-variant-numeric: tabular-nums; flex: none; }

/* Steps: an ordered procedure. */
ol.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 12px; margin: 10px 0 24px; }
ol.steps > li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 12px; margin: 0; break-inside: avoid; }
ol.steps > li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--amber-soft); color: var(--amber);
  display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
ol.steps > li > :first-child { margin-top: 2px; }
ol.steps > li > :last-child { margin-bottom: 0; }

/* Callouts: tinted fill, an icon, a bar and a lead word. */
.callout { --k: var(--text-3); position: relative; border-radius: 10px; padding: 12px 16px 12px 44px; margin: 24px 0; font-size: var(--fs-small);
  break-inside: avoid; background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--k); }
.callout::before { content: ""; position: absolute; left: 16px; top: 14px; width: 17px; height: 17px; background: var(--k);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.callout > :last-child { margin-bottom: 0; }
.callout b:first-child { font-weight: 600; color: var(--k); }
.callout.tip { --k: var(--green); background: var(--green-soft); }
.callout.note { --k: var(--blue); background: var(--blue-soft); }
.callout.warn { --k: var(--amber); background: var(--amber-soft); }
.callout.warn.strong { --k: var(--red); background: var(--red-soft); }
.callout + .callout { margin-top: -12px; }
.callout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.callout.tip { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.callout.warn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

/* Tables: a framed block with a tinted header row; a cut-off column shows a soft shadow at the edge. */
.table-wrap { overflow-x: auto; margin: 24px 0; max-width: 100%; border: 1px solid var(--hairline); border-radius: 10px;
  background:
    linear-gradient(to right, var(--paper) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .2), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .2), transparent) right center / 12px 100% no-repeat scroll,
    var(--paper); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
td { color: var(--text); }
th { font-weight: 600; font-size: var(--fs-caption); color: var(--text-2); background: var(--surface-2); border-bottom-color: var(--rule); }
tr:last-child > td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.first-strong td:first-child { font-weight: 600; }
tr.grp > th { background: var(--surface-2); color: var(--text); font-size: var(--fs-caption); font-weight: 600; text-align: left; }
table.matrix td:first-child, table.matrix th:first-child { position: sticky; left: 0; background: var(--paper); }
table.matrix th:first-child { background: var(--surface-2); }
tr { break-inside: avoid; }
@media (max-width: 640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody { display: block; }
  table.stack tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { display: block; padding: 2px 0; border: 0; }
  table.stack td::before { content: attr(data-label); display: block; font: 600 12px var(--sans); color: var(--text-3); }
  table.stack td.n { text-align: left; }
}

/* Label-value facts, a definition grid and keyboard keys. */
dl.spec { display: grid; grid-template-columns: max-content 1fr; gap: 0 16px; }
dl.spec dt, dl.spec dd { padding: 8px 0; border-top: 1px solid var(--hairline); margin: 0; }
dl.spec dt { font-weight: 600; color: var(--text-2); font-size: var(--fs-small); }
dl.spec dd { font-size: var(--fs-small); }
dl.defs { columns: 2 300px; column-gap: 32px; }
dl.defs > div { break-inside: avoid; margin-bottom: 12px; }
dl.defs dt { font-weight: 600; }
dl.defs dd { margin: 2px 0 0; font-size: var(--fs-small); }
dl.keys { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: baseline; }
dl.keys dt, dl.keys dd { margin: 0; }
@media (max-width: 640px) { dl.spec { grid-template-columns: minmax(0, 1fr); } dl.spec dd { border-top: 0; padding-top: 0; } }

/* Chips and pills: PPE types are neutral chips with their product colour as the dot (--c). */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 10px 2px 8px; background: var(--paper); white-space: nowrap; margin: 0; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); flex: none; }

/* Feature lists: hairline-separated rows in two columns; class "checks" adds a green tick to each item. */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; margin: 12px 0 24px; padding: 0; list-style: none; }
.features > li { position: relative; padding: 14px 0; border-top: 1px solid var(--hairline); margin: 0; break-inside: avoid; min-width: 0; }
.features > li > b { display: block; font: 600 var(--fs-h4)/1.35 var(--sans); }
.features > li > span { display: block; font-size: var(--fs-small); color: var(--text); line-height: 1.5; margin-top: 2px; }
.features.checks > li { padding-left: 27px; }
.features.checks > li::before { content: ""; position: absolute; left: 0; top: 17px; width: 17px; height: 17px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Split, don't hide: the rest of a long item sits under its first sentence as a short list. */
ul.sub { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-small); }
ul.sub li + li { margin-top: 4px; }
.cluster { min-width: 0; }
.cluster > h3 { margin-top: 0; }

/* Utility grids, chosen by item count so no row has a hole. Defined after .features so the count wins. */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features.grid-2, .features.grid-3, .features.grid-4 { gap: 0 32px; }
@media (max-width: 900px) { .grid-3, .grid-4, .features.grid-3, .features.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .features, .features.grid-2, .features.grid-3, .features.grid-4, .future-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-4.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card: for things that are objects (documents, apps, options). A text list is never a card. */
.card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card > :last-child { margin-top: auto; margin-bottom: 0; }
.card > h3, .card > h4 { margin-top: 0; }
.card > p { margin: 0; }
.card .pill { margin-left: auto; }

/* Section heading with an icon tile (feature groups). */
.group-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.group-h h3 { margin: 0; }
.group-h .n { font-size: var(--fs-caption); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.gi { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); display: inline-grid; place-items: center; flex: none; }
.gi .ico { width: 16px; height: 16px; }

/* Key figures: only where the numbers are the point. */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 24px 0; }
.figures div { border-top: 1px solid var(--rule); padding-top: 12px; }
.figures b { display: block; font-size: var(--fs-num); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.figures span { font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 640px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Status ledger and bar: the head of every status overview (roadmap board, hub roadmap, hub AI jobs). */
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; list-style: none; }
.ledger > * { padding: 4px 20px; border-left: 1px solid var(--hairline); display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit; margin: 0; }
.ledger > :first-child { border-left: 0; padding-left: 0; }
.lg b { font: 600 var(--fs-num)/1.05 var(--display); font-variant-numeric: tabular-nums; color: var(--text); }
.lg .pill { justify-self: start; }
.lg small { font-size: var(--fs-caption); color: var(--text-2); }
a.lg:hover b { text-decoration: underline; }
.ledger-bar { display: flex; gap: 2px; height: 6px; margin: 16px 0 32px; }
.ledger-bar i { flex: var(--n) 1 0; min-width: 4px; border-radius: 3px; }
.ledger-bar i.live { background: var(--green); } .ledger-bar i.building { background: var(--amber-fill); } .ledger-bar i.next { background: var(--blue); }
.ledger-bar i.planned { background: color-mix(in srgb, var(--blue) 55%, transparent); } .ledger-bar i.later { background: var(--text-3); }
@media (max-width: 640px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; } .ledger > :nth-child(odd) { border-left: 0; padding-left: 0; } }

/* Roadmap board: Available in balanced areas, then the pipeline (In progress beside Planned above Later). */
.board { margin: 8px 0 40px; }
.board h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 var(--fs-h4)/1.35 var(--sans); }
.board h3 small, .rb-area h4 small { color: var(--text-3); font: 500 13px var(--sans); font-variant-numeric: tabular-nums; }
.rb-avail { border-top: 3px solid var(--green); padding-top: 12px; }
.rb-areas { columns: 2 320px; column-gap: 24px; }
.rb-area { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 16px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; }
.rb-area h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.board ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.board li { margin: 0; padding: 7px 0; border-top: 1px solid var(--hairline); }
.rb-area li:first-child { border-top: 0; }
.rb-pipe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 24px; margin-top: 16px; align-items: start; grid-template-rows: auto 1fr; }
.rb-pipe > section { padding: 14px 18px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; border-top: 3px solid var(--st); }
.rb-pipe > section:first-child { grid-row: span 2; --st: var(--amber-fill); }
.rb-pipe > section:nth-child(2) { --st: var(--blue); }
.rb-pipe > section:nth-child(3) { --st: var(--text-3); }
.rb-pipe > section:first-child ul { columns: 1; }
details.rb-area > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
details.rb-area > summary::-webkit-details-marker { display: none; }
details.rb-area > summary h4 { margin: 0; flex: 1; }
details.rb-area > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); rotate: 45deg; margin-right: 4px; transition: rotate .15s; }
details.rb-area[open] > summary::after { rotate: 225deg; }
details.rb-area[open] > summary { margin-bottom: 4px; }
@media (max-width: 640px) { .rb-areas { columns: 1; } .rb-pipe { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .rb-pipe > section:first-child { grid-row: auto; } }

/* Checklists (print as empty boxes). */
ul.check { list-style: none; padding: 0; }
ul.check > li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hairline); margin: 0; break-inside: avoid; }
ul.check > li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--text-3); border-radius: 3px; margin-top: 4px; }

/* Two columns that stack on phones. */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 32px; }
.cols > * { min-width: 0; }

.page-break { break-before: page; }
.keep { break-inside: avoid; }
.qr-page { break-before: page; }
.qr-page > :first-child:not(.cover-band) { margin-top: 0; }

/* Footer: who owns and wrote the software, which version the document describes. Dark in both themes. */
.site-footer { margin: 64px calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 28px var(--pad) 22px; background: var(--ink);
  color: var(--ink-muted); border-radius: 0 0 13px 13px; display: grid; gap: 18px; font-size: 13px; break-inside: avoid; }
.site-footer .brand { color: #fff; }
.site-footer .brand-mark { background: var(--ink-2); box-shadow: 0 0 0 1px var(--mark-ring); }
.sf-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 32px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-line); }
.sf-tag { display: flex; gap: 9px; margin: 0; max-width: 46ch; color: var(--ink-muted); }
.sf-tag .ico { color: var(--amber-fill); margin-top: 3px; }
.sf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin: 0; max-width: none; }
.sf-grid > div { min-width: 0; }
.sf-grid dt { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: #c3ccd6; }
.sf-grid dt .ico { color: var(--amber-fill); width: 13px; height: 13px; }
.sf-grid dd { margin: 0; color: #fff; font-weight: 500; overflow-wrap: anywhere; }
.sf-grid dd + dd { margin-top: 2px; color: #c3ccd6; font-weight: 400; font-size: 12.5px; }
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink-line); transition: color .15s, border-color .15s; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--amber-fill); border-bottom-color: var(--amber-fill); }
.sf-legal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; padding-top: 14px; border-top: 1px solid var(--ink-line); font-size: 12px; }
.sf-legal > :first-child { grid-column: 1 / 3; }
.sf-legal > :last-child { grid-column: 3 / 5; }
.sf-legal span { display: inline-flex; align-items: center; gap: 7px; }
.sf-legal .ico { color: var(--amber-fill); }
@media (max-width: 640px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-legal { grid-template-columns: 1fr; } .sf-legal > * { grid-column: auto !important; } }
table.tiers td { min-width: 9.5em; }

/* One-line credits for pages that must stay short (datasheet, quick reference). */
.sf-compact { margin-top: 24px; padding-top: 9px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 16px; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.sf-compact > span { display: inline-flex; align-items: center; gap: 6px; }
.sf-compact .ico { color: var(--amber); }
.sf-compact a { color: var(--text-2); }

/* Phone: full-bleed sheet and cover, 16px body text, nothing wider than the screen. */
@media (max-width: 640px) {
  html { scroll-padding-top: 60px; }
  body { padding: 0 0 40px; }
  h1 { font-size: 28px; }
  h2 { margin-top: 40px; }
  main.doc h2 { margin-top: 48px; }
  .doc { --pad: 16px; border: 0; border-radius: 0; }
  .cover-band { border-radius: 0; padding: 24px 16px 20px; }
  .site-footer { border-radius: 0; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  pre code { white-space: pre-wrap; }
  .sf-compact { gap: 3px 12px; }
}

/* Text: ragged right everywhere, never justified or auto-hyphenated. */
p, li, dd, figcaption, .callout { text-align: start; hyphens: manual; -webkit-hyphens: manual; }

/* Running footer on every page after the cover: document (set per page), version and credits (meta.css), page. */
@page {
  size: A4; margin: 15mm 15mm 19mm;
  @bottom-left { font: 600 8pt "Red Hat Text", "Red Hat Text Local", sans-serif; color: #2b333d; vertical-align: top; padding-top: 2.6mm; border-top: 0.7pt solid #cfd5dd; }
  @bottom-center { font: 8pt "Red Hat Text", "Red Hat Text Local", sans-serif; color: #4a5562; vertical-align: top; padding-top: 2.6mm; border-top: 0.7pt solid #cfd5dd; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt "Red Hat Text", "Red Hat Text Local", sans-serif; color: #4a5562; vertical-align: top; padding-top: 2.6mm; border-top: 0.7pt solid #cfd5dd; }
}
@page :first { @bottom-left { content: none; } @bottom-center { content: none; } @bottom-right { content: none; } }

/* Paper: the light palette with darker greys for crisp print, A4, no page shadow. */
@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"],
  :root:not([data-theme="light"]),
  html,
  body {
    color-scheme: light !important;
    --pad: 0px !important;
    --measure: none !important;
    --canvas: #ffffff !important;
    --paper: #ffffff !important;
    --surface-2: #f1f3f7 !important;
    --surface-3: #e8ecf1 !important;
    --hairline: #d4dae2 !important;
    --rule: #c5cdd7 !important;
    --text: #0d1116 !important;
    --text-2: #3e4854 !important;
    --text-3: #4d5865 !important;
    --ink: #0e1217 !important;
    --ink-2: #171d25 !important;
    --amber: #8a5b00 !important;
    --amber-soft: #fff0b8 !important;
    --green: #0f6e43 !important;
    --green-soft: #d9f2e4 !important;
    --blue: #1a55b8 !important;
    --blue-soft: #dde9fb !important;
    --blue-ink: #ffffff !important;
    --red: #b8322a !important;
    --red-soft: #fde8e6 !important;
    --frame: #0e1217 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0d1116 !important;
  }
  body { padding: 0; font-size: 10.6pt; background: #ffffff !important; }
  .doc, .sheet, .wrap { max-width: none; border: 0; border-radius: 0; padding: 0; background: #ffffff !important; background-color: #ffffff !important; box-shadow: none; }
  .cover-band { margin: 0 0 22px; border-radius: 12px; padding: 26px 28px 24px; }
  .site-footer { margin: 36px 0 0; border-radius: 12px; padding: 24px 26px 18px; }
  main.doc h2 { margin-top: 30px; padding-top: 10px; }
  a { color: inherit; text-decoration: none; }
  h2, h3, h4, .group-h, .future-h, .cap-h, p.summary { break-after: avoid; }
  h2 + p, h3 + p, .group-h + p, p:has(+ .table-wrap), p:has(+ table) { break-after: avoid; }
  tr, .card, .rb-area, .callout, figure, ol.steps > li, .features > li, dl.defs > div, dl.spec > dt, .future-grid .shot { break-inside: avoid; }
  .shot .frame:has(> img:only-child), .shot .frame:has(> .print-still) { width: fit-content; max-width: 100%; margin-inline: auto; }
  .shot .frame > img, .shot .frame > .print-still { max-height: 92mm; width: auto; max-width: 100%; }
  .fs-grid figure { break-inside: avoid; }
  .future-sheet.tour { gap: 22px; } .tour .fs-h { display: flex; } .tour .fs-group[hidden] { display: block !important; }
  .tour .fs-grid { display: grid; overflow: visible; margin-top: 0; } .tour .fs-grid figure[aria-current] .frame { border-color: var(--hairline); box-shadow: none; }
  .future-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6mm; }
  .future-grid .shot { margin: 2mm 0 4mm; }
  .future-grid .shot figcaption { font-size: 8.6pt; line-height: 1.4; margin-top: 5px; }
  .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rb-areas { columns: 2; } .rb-pipe > section { break-inside: avoid; }
  details::details-content { content-visibility: visible; display: contents; }
  details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
  details.rb-area > summary::after { content: none; }
  [role="tabpanel"][hidden] { display: block !important; }
  .dochead, .rail, .jump, .seg, .no-print { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}