/* ==========================================================================
   TotalSQL.com — Option B · "Console"
   One stylesheet for every page (becomes wwwroot/css/site.css).

   Idea: a DBA's instrument panel. White page, texture from LINES and TYPE:
   hairline rails framing a 1280px column for the full page height, horizontal
   rules between bands, "+" crosshairs at some intersections, mono micro-labels.
   Brand red is the single accent (logo, primary buttons, the active-TOC marker,
   the reading-progress hairline, one CTA eyebrow); green/amber appear only in
   status dots and callouts. Code is always a dark terminal on screen (both
   themes) and light on paper.

   Sections
     1. Tokens (light, dark, no-JS dark fallback)
     2. Reset / base
     3. Layout   (frame + rails, bands, header, mobile nav, footer)
     4. Components (eyebrow, buttons, links, dots, key/value, theme toggle,
                    dropdowns, file listing, terminal window)
     5. Home
     6. Article / prose (TOC rail, contents bar + sheet, headings, lists,
                    callouts, code, figures, end of article)
     7. Utilities + motion preferences
     8. Print

   Canonical breakpoints: 560 / 768 / 960 (desktop nav) / 1100 (TOC rail).
   (A few component tweaks use 380 / 640 / 1024 / 1280 where the content needs it.)

   Class names deliberately avoid Bootstrap's (.btn, .row, .col-*, .nav,
   .nav-link, .navbar, .dropdown-menu, .container …) so nothing collides if
   old CSS or renderer output lingers during the MVC port. Bootstrap is gone.

   Fonts: Geist + Geist Mono, SELF-HOSTED (fonts/*.woff2, variable, SIL OFL 1.1 —
   fonts/OFL.txt). Same files + unicode-range subsets Google Fonts serves; the two
   latin files are preloaded by the layout <head>.
   ========================================================================== */


/* ==========================================================================
   0. FONTS — self-hosted variable woff2 (see header). Paths are relative to this file.
   ========================================================================== */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/geist-mono-symbols.woff2") format("woff2"); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces & ink */
  --bg: #ffffff;
  --bg-sub: #fafafa;          /* quiet panels, table heads, callout header rows */
  --bg-hover: #f4f4f5;
  --bg-raised: #ffffff;       /* dropdowns, mobile panel, contents sheet */
  --fg: #0a0a0a;              /* headings, strong text */
  --fg-body: #262626;         /* long-form reading text */
  --fg-2: #404040;            /* nav, secondary text */
  --muted: #6b6b6b;           /* mono labels — 5.3:1 on white */
  --faint: #a3a3a3;           /* decorative marks only (never text) */

  /* Lines */
  --rule: #e8e8e8;            /* grid rails + band rules */
  --rule-strong: #d6d6d6;     /* component borders */
  --plus: #b4b4b4;            /* crosshair marks */

  /* Accent */
  --accent: #dc1f26;          /* brand red: primary buttons, markers (4.9:1 on white) */
  --accent-hover: #b8161c;
  --accent-text: #c81a21;     /* red used AS text (a touch deeper: 5.6:1) */
  --logo-accent: #dc1f26;

  /* Status / callout signal colours (only in dots + callouts) */
  --ok: #16a34a;
  --warn: #d97706;
  --note: var(--fg);

  /* Inline code */
  --code-inline-bg: #f1f1f2;
  --code-inline-fg: #1f1f1f;

  /* Screenshots */
  --fig-bg: var(--bg-sub);
  --fig-pad: 0px;
  --fig-img-rule: var(--rule);
  --fig-img-bw: 0 0 1px 0;
  --fig-img-radius: 0;
  --img-filter: none;

  /* Terminal (code blocks) — dark in BOTH themes */
  --term-bg: #0c0c0c;
  --term-bar: #141414;
  --term-border: #262626;
  --term-fg: #e6e6e6;
  --term-muted: #8a8a8a;      /* line numbers, labels: 5.6:1 on --term-bg */
  --term-hover-border: #555555;
  --term-focus: #ff7b7b;
  --term-lift: none;          /* dark theme adds a top highlight */
  --copy-done-fg: #86efac;
  --copy-done-border: #2f5f3f;
  --syn-kw: #82aaff;          /* keywords — SSMS-blue family; red stays for the brand */
  --syn-fn: #e9c46a;          /* functions / system objects */
  --syn-str: #9fd69f;
  --syn-num: #c3e88d;
  --syn-cmt: #8b949e;
  --syn-punct: #a3a3a3;

  /* Shape, depth, rhythm */
  --radius: 2px;              /* everything is squared — one radius for all */
  --shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px -12px rgba(0,0,0,.14);
  --header-h: 56px;
  --logo-h: 42px;             /* "TOTALSQL" letters ≈ 22% of this (≈9.2px phone, ≈10.1px desktop) */
  --doc-bar-h: 44px;
  --frame-max: 1280px;
  --rail-inset: 0px;          /* distance from viewport edge to the rails */
  --pad: clamp(16px, 3.6vw, 40px);  /* inner padding of the frame */
  --band-y: clamp(48px, 6vw, 80px);
  --measure: 36.5rem;         /* article text column: ≈ 70 characters per line at 17.5px Geist (measured) */
  --measure-wide: 50rem;      /* screenshots + code may run wider when the rail layout has room */

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --step--2: 0.6875rem;  /* 11px  mono micro labels (non-interactive only) */
  --step-ui-mono: 0.75rem; /* 12px  mono interactive labels */
  --step--1: 0.8125rem;  /* 13px  */
  --step-0: 1rem;        /* 16px  UI text */
  --step-prose: 1.0625rem; /* 17px article body */
}
@media (min-width: 960px) { :root { --header-h: 64px; --logo-h: 46px; } }

/* Dark tokens — applied when the user picks dark, OR when no data-theme is set
   (no JS) and the system prefers dark. Kept as two identical blocks on purpose
   (plain CSS can't share a rule between a selector and a media query). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-sub: #101010;
  --bg-hover: #181818;
  --bg-raised: #131313;
  --fg: #f2f2f2;
  --fg-body: #d4d4d4;
  --fg-2: #c2c2c2;
  --muted: #8f8f8f;
  --faint: #4a4a4a;
  --rule: rgba(255,255,255,.07);
  --rule-strong: rgba(255,255,255,.13);
  --plus: rgba(255,255,255,.28);
  --accent: #dc1f26;
  --accent-hover: #ef2f36;
  --accent-text: #ff5c61;
  --logo-accent: #e8262d;
  --ok: #22c55e;
  --warn: #f59e0b;
  --code-inline-bg: #1a1a1a;
  --code-inline-fg: #e5e5e5;
  --fig-bg: #161616;
  --fig-pad: 6px;
  --fig-img-rule: rgba(255,255,255,.08);
  --fig-img-bw: 1px;
  --fig-img-radius: 2px;
  --img-filter: brightness(.8) contrast(1.05);
  --term-bg: #141414;
  --term-bar: #1b1b1b;
  --term-border: rgba(255,255,255,.14);
  --term-lift: inset 0 1px 0 rgba(255,255,255,.05);
  --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -16px rgba(0,0,0,.9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0a0a0a;
    --bg-sub: #101010;
    --bg-hover: #181818;
    --bg-raised: #131313;
    --fg: #f2f2f2;
    --fg-body: #d4d4d4;
    --fg-2: #c2c2c2;
    --muted: #8f8f8f;
    --faint: #4a4a4a;
    --rule: rgba(255,255,255,.07);
    --rule-strong: rgba(255,255,255,.13);
    --plus: rgba(255,255,255,.28);
    --accent: #dc1f26;
    --accent-hover: #ef2f36;
    --accent-text: #ff5c61;
    --logo-accent: #e8262d;
    --ok: #22c55e;
    --warn: #f59e0b;
    --code-inline-bg: #1a1a1a;
    --code-inline-fg: #e5e5e5;
    --fig-bg: #161616;
    --fig-pad: 6px;
    --fig-img-rule: rgba(255,255,255,.08);
    --fig-img-bw: 1px;
    --fig-img-radius: 2px;
    --img-filter: brightness(.8) contrast(1.05);
    --term-bg: #141414;
    --term-bar: #1b1b1b;
    --term-border: rgba(255,255,255,.14);
    --term-lift: inset 0 1px 0 rgba(255,255,255,.05);
    --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -16px rgba(0,0,0,.9);
  }
}

/* Rails move in from the viewport edge once there's room for them. */
@media (min-width: 768px) { :root { --rail-inset: 24px; } }
@media (min-width: 1100px) { :root { --rail-inset: 32px; } }


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Anchored targets clear the sticky header (no smooth scrolling: long docs jump instantly) */
[id], .codeblock { scroll-margin-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul[class], ol[class], .site-header ul, .site-footer ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--fg); font-weight: 600; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
code, pre, kbd, samp { font-family: var(--font-mono); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 14px 16px;
  background: var(--fg); color: var(--bg);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* --- 3.1 Frame: the centred column whose side borders ARE the page rails --- */
.frame {
  position: relative;
  width: min(var(--frame-max), 100% - 2 * var(--rail-inset));
  margin-inline: auto;
  padding-inline: var(--pad);
  border-inline: 1px solid var(--rule);
}
@media (max-width: 767px) {
  .frame { border-inline-color: transparent; }   /* rails sit at the viewport edge on phones */
}

/* A band is a full-bleed horizontal slice; its top border is the section rule.
   Rule of thumb: a component never draws an outer bottom border when a band rule follows. */
.band { border-top: 1px solid var(--rule); }
.page-main > .band:first-child { border-top: 0; }
.band > .frame { padding-block: var(--band-y); }

/* Crosshair "+" marks where a band rule meets the rails (add .x to a band). */
.x > .frame::before,
.x > .frame::after,
.frame.x::before,
.frame.x::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--plus) 0 0) center / 11px 1px no-repeat,
    linear-gradient(var(--plus) 0 0) center / 1px 11px no-repeat;
  pointer-events: none;
}
.x > .frame::before, .frame.x::before { left: -6px; }
.x > .frame::after,  .frame.x::after  { right: -6px; }
@media (max-width: 767px) {
  .x > .frame::before, .x > .frame::after, .frame.x::before, .frame.x::after { display: none; }
}

/* --- 3.2 Header ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--fg);          /* "TOTAL" path uses currentColor */
  text-decoration: none;
  margin-inline-end: 20px;
}
.logo { height: var(--logo-h); width: auto; }
.hdr .brand:hover .logo { --logo-accent: var(--accent-hover); }
/* Header logo is ~46px tall: the traced ring would be ~1.6px wide there and anti-aliases unevenly on 1x screens
   (looks jagged). Thicken ONLY the ring (6 viewBox units ≈ 0.4px) so it renders ~2px, matching the 60px footer logo. */
.hdr .logo { --logo-ring-boost: 6px; }

/* Desktop nav: list on the left, tools (theme + CTA) pushed right */
.hnav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  flex: 1;
  min-width: 0;
}
.hnav-list { display: flex; align-items: stretch; gap: 2px; margin: 0; }
.hnav-list > li { display: flex; align-items: center; position: relative; }
.hnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 11px;
  border: 0;
  background: none;
  border-radius: var(--radius);
  color: var(--fg-2);
  font: 500 .78125rem/1 var(--font-mono);   /* 12.5px */
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.hnav-link:hover, .hnav-link[aria-expanded="true"] { color: var(--fg); background: var(--bg-hover); }
.hnav-arr { display: none; }
.chev { width: 10px; height: 10px; transition: transform .18s ease; }
.hnav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.hnav-tools { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }

/* Header CTA: the primary conversion — solid brand red, same as the hero / CTA-band buttons. */
.hnav .hnav-cta {          /* scoped: must beat the generic .button rules below */
  --hcta-bg: var(--accent);
  --hcta-fg: #fff;
  --hcta-hover: var(--accent-hover);
  min-height: 38px;
  padding: 0 15px;
  background: var(--hcta-bg);
  border-color: var(--hcta-bg);
  color: var(--hcta-fg);
  font-size: .875rem;
}
.hnav .hnav-cta:hover { background: var(--hcta-hover); border-color: var(--hcta-hover); color: #fff; }

/* Mobile menu button (hidden on desktop) */
.menu-btn {
  display: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  place-items: center;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--fg);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-icon { position: relative; background: transparent; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -3px; }
.menu-icon::after  { top: 3px; }
.menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::after  { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 959px) {
  .js .menu-btn { display: grid; }
  .hdr .brand { margin-inline-end: 0; }

  /* The panel hangs from the header (absolute, not fixed: the header's
     backdrop-filter makes it the containing block for fixed children).
     It covers the page below, which is also made inert + scroll-locked by JS. */
  .js .hnav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: -1px; right: -1px;
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    gap: 24px;
    padding: 12px var(--pad) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-raised);
    border-inline: 1px solid var(--rule);
  }
  .js .hnav.is-open { display: flex; }
  .hnav-list { flex-direction: column; gap: 0; }
  .hnav-list > li { display: block; border-bottom: 1px solid var(--rule); }
  .hnav-link {
    width: 100%;
    min-height: 52px;
    padding: 0 4px;
    justify-content: space-between;
    font-size: var(--step--1);
  }
  .hnav-link:hover, .hnav-link[aria-expanded="true"] { background: none; }
  .hnav-arr { display: inline; color: var(--muted); font-family: var(--font-sans); }
  .hnav-tools {
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .hnav .hnav-cta {
    order: -1;
    min-height: 48px;
    font-size: 1rem;
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .hnav .hnav-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  html.menu-open { overflow: hidden; }
}

/* No-JS (or site.js failed) on small screens: the nav renders inline, compactly. */
@media (max-width: 959px) {
  .no-js .site-header { position: static; }
  .no-js .hdr { flex-wrap: wrap; height: auto; padding-block: 8px 16px; row-gap: 4px; }
  .no-js .hnav { flex-basis: 100%; flex-direction: column; gap: 12px; }
  .no-js .dd-btn { pointer-events: none; min-height: 36px; }
  .no-js .dd-btn .chev { display: none; }
  .no-js .dd-panel { display: block; }
  .no-js .dd-panel ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .no-js .dd-panel a { min-height: 40px; padding: 0; }
  .no-js .hnav-list > li { border: 0; }
  .no-js .hnav .hnav-cta { order: 0; align-self: start; }
}

/* --- 3.3 Footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}
.ftr {
  display: grid;
  gap: 40px;
  padding-block: 56px 48px;
}
/* Brand block beside the nav only from 1024px — below that it sits on top, so 4 nav columns keep room. */
@media (min-width: 1024px) {
  .ftr { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.3fr); }
}
.ftr-brand .brand { margin: 0 0 14px; }
.ftr-brand .logo { height: 60px; }
.tagline {
  color: var(--fg);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.ftr-note { margin-top: 6px; color: var(--muted); max-width: 34ch; }
/* One column per link group, however many there are (3 or 4 today); 2-up grid on phones. */
.ftr-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (max-width: 559px) {
  .ftr-nav { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
.ftr-h {
  margin-bottom: 10px;
  color: var(--muted);
  font: 500 var(--step--2)/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ftr-nav ul { display: grid; }
.ftr-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--fg-2);
  text-decoration: none;
}
.ftr-nav a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.ftr-base { border-top: 1px solid var(--rule); }
.ftr-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 12px;
  color: var(--muted);
  font: 400 var(--step--1)/1.5 var(--font-sans);
}
.ftr-links { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.ftr-links a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  color: var(--fg-2);
  text-decoration: none;
}
.ftr-links a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.ftr-links svg { width: 15px; height: 15px; }

/* "For Robots" chip: a tiny stand-alone inverse card — mono label + the For Robots card header's robot-head glyph
   (e.g. llms.txt in the footer's bottom bar). Same ink-on-light / near-white-on-dark tokens as .robots--inverse,
   so it reads as part of the same robots-friendly family. Scoped with .ftr-links so the bar's link rules don't win. */
.robots-chip,
.ftr-links a.robots-chip {
  display: inline-flex;
  align-items: center;
  align-self: center;                  /* don't stretch to the bar's 40px link rows */
  gap: 8px;
  min-height: 28px;
  padding: 0 8px 0 10px;               /* label first, robot-head glyph after it */
  background: var(--fg);
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  color: color-mix(in srgb, var(--bg) 82%, var(--fg));
  font: 500 var(--step-ui-mono)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none;
}
.robots-chip svg,
.ftr-links .robots-chip svg {
  flex: none;
  width: 14px; height: 14px;
  color: var(--bg);                    /* full brightness */
  transform: translateY(-1.5px);       /* the glyph's mass sits low (antenna on top) — optically centre it on the text */
}
.robots-chip:hover,
.ftr-links a.robots-chip:hover { background: color-mix(in srgb, var(--bg) 12%, var(--fg)); color: var(--bg); text-decoration: none; }
.robots-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Eyebrow / mono labels: "[ CONSULTING ]" (non-interactive, 11px) --- */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6em;
  color: var(--muted);
  font: 500 var(--step--2)/1.6 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow .tag { color: var(--fg); white-space: nowrap; }
.eyebrow .tag::before { content: "[\00a0" / ""; color: var(--muted); }
.eyebrow .tag::after  { content: "\00a0]" / ""; color: var(--muted); }
.eyebrow .tag.is-accent { color: var(--accent-text); }

/* --- Buttons (.button, not .btn — see header note) --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 500 .9375rem/1 var(--font-sans);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button svg { width: 14px; height: 14px; transition: transform .18s ease; }
.button:hover svg { transform: translateX(2px); }
.button--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.button--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Mono text link: "READ THE LIBRARY →" (interactive mono: 12px) */
.link-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--fg);
  font: 500 var(--step-ui-mono)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
}
.link-mono .arr { transition: transform .18s ease; }
.link-mono:hover { text-decoration-color: var(--accent); }
.link-mono:hover .arr { transform: translateX(3px); }

/* --- Status dots --- */
.dot {
  display: inline-block;
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
}
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }

/* --- Key / value metadata (dl.kv > div > dt + dd) --- */
.kv {
  display: flex;
  flex-wrap: wrap;
  border-block: 1px solid var(--rule);
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kv > div {
  display: flex;
  gap: 8px;
  padding: 10px 16px 10px 0;
  margin-inline-end: 16px;
  border-inline-end: 1px solid var(--rule);
}
.kv > div:last-child { border-inline-end: 0; margin-inline-end: 0; }
.kv dt { color: var(--muted); }
.kv dt::after { content: ":"; }
.kv dd { color: var(--fg); }

/* --- Theme menu: one icon button showing the current PREFERENCE (sun / monitor / moon) + a small menu.
   It sits in the header bar itself (outside the nav), so it stays visible next to the menu button on phones.
   <html data-theme-pref> (light | auto | dark) is set by the head script before first paint, so the right
   glyph shows immediately; js/site.js keeps it in sync. Without JS it is hidden (system preference applies). */
.theme-dd {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;       /* full header height, so the menu hangs from the header rule like .dd-panel */
  flex: none;
  margin-inline-start: 4px;
}
.no-js .theme-dd { display: none; }
.theme-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 9px 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg-2);
  cursor: pointer;
}
.theme-trigger:hover, .theme-trigger[aria-expanded="true"] { background: var(--bg-hover); color: var(--fg); }
.theme-trigger .chev { color: var(--muted); }
.theme-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.theme-cur { display: grid; }
.theme-cur .ti { display: none; width: 15px; height: 15px; }
:root[data-theme-pref="light"] .theme-cur .ti-light,
:root[data-theme-pref="dark"] .theme-cur .ti-dark,
:root:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-cur .ti-auto { display: block; }

.theme-menu {                /* squared hairline panel, same family as .dd-panel */
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  z-index: 2;                /* above the mobile menu panel */
  min-width: 196px;
  padding: 0 6px 6px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-top-color: var(--rule);
  box-shadow: var(--shadow);
}
.theme-menu[hidden] { display: none; }
.theme-menu-k {              /* mono caption row, like the dropdowns' .dd-path */
  margin: 0 -6px 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sub);
  color: var(--muted);
  font: 400 var(--step--2)/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--fg-2);
  font: 500 .9375rem/1 var(--font-sans);
  text-align: start;
  cursor: pointer;
}
.theme-item svg { flex: none; width: 15px; height: 15px; }
.theme-item .ck { margin-inline-start: auto; color: var(--accent-text); visibility: hidden; }
.theme-item:hover, .theme-item:focus-visible { background: var(--bg-hover); color: var(--fg); }
.theme-item[aria-checked="true"] { color: var(--fg); }
.theme-item[aria-checked="true"] .ck { visibility: visible; }

@media (max-width: 959px) {
  .theme-dd { margin-inline-start: 0; }
  .theme-trigger { height: 44px; padding: 0 11px 0 12px; }   /* matches the 44px menu button */
  .theme-item { min-height: 44px; }
}

/* --- Dropdowns: squared hairline panels hanging from the header rule --- */
.dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: -8px;
  min-width: 260px;
  padding: 0 6px 6px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-top-color: var(--rule);
  box-shadow: var(--shadow);
}
.dd-btn[aria-expanded="true"] + .dd-panel { display: block; }
.no-js .dd:hover .dd-panel, .no-js .dd:focus-within .dd-panel { display: block; }
.dd-path {   /* mono path hint — the section's real URL root */
  margin: 0 -6px 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sub);
  color: var(--muted);
  font: 400 var(--step--2)/1.3 var(--font-mono);
  letter-spacing: .04em;
}
.dd-panel ul { display: grid; }
.dd-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--fg-2);
  font-size: .9375rem;
  text-decoration: none;
}
.dd-panel a::after { content: "\2192" / ""; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.dd-panel a:hover { background: var(--bg-hover); color: var(--fg); }
.dd-panel a:hover::after, .dd-panel a:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 959px) {
  .dd-panel {
    position: static;
    min-width: 0;
    padding: 0 0 12px;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .dd-path { display: none; }
  .dd-panel a { min-height: 44px; font-size: 1rem; }
  .dd-panel a::after { content: none; }
}

/* --- File listing (KB / tips rows): "KB  Title  2025-07-28" — a date only where one is known --- */
.files { border-top: 1px solid var(--rule-strong); }
.files li { border-bottom: 1px solid var(--rule); }
.files a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  margin-inline: -10px;
  padding: 15px 10px;
  color: var(--fg);
  text-decoration: none;
  transition: background-color .15s ease;
}
.files .f-type {
  color: var(--muted);
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .08em;
}
.files .f-title { grid-column: 2; font-weight: 500; line-height: 1.4; letter-spacing: -.005em; }
.files .f-date {
  grid-column: 3;
  padding: 3px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--fg-2);
  font: 400 var(--step--2)/1 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.files a:hover { background: var(--bg-sub); }
.files a:hover .f-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
@media (max-width: 559px) {
  .files a { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: 6px; }
  .files .f-date { grid-column: 2; justify-self: start; }
}

/* --- Terminal bar + syntax tokens (article code blocks; site.js builds the bar) --- */
.term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 6px 0 14px;
  background: var(--term-bar);
  border-bottom: 1px solid var(--term-border);
  color: var(--term-muted);
  font: 400 var(--step--2)/1 var(--font-mono);
  letter-spacing: .06em;
}
.term-tab {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: stretch;
  padding: 0 12px;
  border-inline: 1px solid var(--term-border);
  background: var(--term-bg);
  color: var(--term-fg);
  margin-bottom: -1px;
  text-transform: none;
}
.term-tab::before { content: ""; width: 6px; height: 6px; background: var(--term-muted); }

/* Syntax tokens (hand-highlighted spans; also used by the article demo block) */
.tk-k { color: var(--syn-kw); }
.tk-f { color: var(--syn-fn); }
.tk-s { color: var(--syn-str); }
.tk-n { color: var(--syn-num); }
.tk-c { color: var(--syn-cmt); font-style: italic; }
.tk-p { color: var(--syn-punct); }
/* highlight.js token classes -> the same palette (the live site highlights pre > code.language-* with highlight.js;
   either client-side or build-time output gets the theme's colours — no highlight.js theme stylesheet needed) */
.hljs { background: none; color: inherit; }
.hljs-keyword, .hljs-literal, .hljs-type, .hljs-selector-tag, .hljs-meta .hljs-keyword { color: var(--syn-kw); }
.hljs-built_in, .hljs-title, .hljs-title.function_, .hljs-function .hljs-title, .hljs-variable.language_ { color: var(--syn-fn); }
.hljs-string, .hljs-regexp, .hljs-char.escape_ { color: var(--syn-str); }
.hljs-number { color: var(--syn-num); }
.hljs-comment, .hljs-quote { color: var(--syn-cmt); font-style: italic; }
.hljs-punctuation, .hljs-operator { color: var(--syn-punct); }
/* T-SQL grammar (lib/highlightjs/languages.min.js): @variables + [bracketed] names are "symbol" (PowerShell $vars are
   "variable"); system procedures (sp_executesql …) are "function" - scoped to SQL, since other grammars use
   .hljs-function to wrap a whole function definition. */
.hljs-symbol, .hljs-variable { color: var(--syn-num); }
:is(.language-sql, .language-tsql) .hljs-function { color: var(--syn-fn); }


/* ==========================================================================
   5. HOME
   ========================================================================== */

/* --- Hero --- */
.hero > .frame { padding-block: 0; }
.hero-grid { display: grid; }
.hero-eyebrow > span { white-space: nowrap; }
.hero-copy { container-type: inline-size; padding-block: clamp(48px, 8vw, 104px) clamp(40px, 5vw, 64px); }
.hero-title {
  margin-top: 28px;
  max-width: 13ch;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-lede {
  margin-top: 24px;
  max-width: 46ch;
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.55;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 36px;
}
.hero-ctas .button--accent { min-height: 48px; padding-inline: 22px; font-size: 1rem; }
.hero-kv { margin-top: 48px; max-width: 560px; }
@container (max-width: 520px) {
  .hero-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  .hero-kv > div { flex-direction: column; gap: 4px; padding: 12px 10px 12px 0; margin-inline-end: 10px; }
  .hero-kv dt::after { content: none; }
}
@container (max-width: 340px) { .hero-kv { letter-spacing: .03em; } .hero-kv > div { padding-inline-end: 6px; margin-inline-end: 8px; } }

.hero-visual {
  position: relative;
  display: grid;
  align-items: center;
  padding: 0 0 48px;
}
/* Faint dot lattice behind the hero visual — an instrument-panel texture */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--rule-strong) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 55% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 55% 50%, #000 45%, transparent 100%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .hero-visual {
    padding: 56px 0 56px clamp(32px, 4vw, 56px);
    margin-inline-end: calc(var(--pad) * -1);
    padding-inline-end: var(--pad);
    border-inline-start: 1px solid var(--rule);
  }
  /* crosshair where the hero's column rule meets the next band rule */
  .hero-visual::after {
    content: "";
    position: absolute;
    bottom: -6px; left: -6px;
    width: 11px; height: 11px;
    background:
      linear-gradient(var(--plus) 0 0) center / 11px 1px no-repeat,
      linear-gradient(var(--plus) 0 0) center / 1px 11px no-repeat;
  }
}


/* --- Featured KB article panel (hero, right column) ---
   Option C's featured-article card in Console dress: squared hairline panel, a light "window bar" with a
   mono path + FEATURED flag, mono key/value meta, the article's own section labels drawn as a tree,
   and a mono footer row. The title link's ::after covers the whole panel (one tab stop, whole card clickable). */
.feat {
  position: relative;
  z-index: 1;                                   /* above the dot lattice */
  display: flex;
  flex-direction: column;
  max-width: 560px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.feat:hover { border-color: var(--fg-2); }
.feat:has(.feat-title a:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.feat-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sub);
  color: var(--muted);
  font: 400 var(--step--2)/1 var(--font-mono);
  letter-spacing: .06em;
}
.feat-path { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.feat-path::before { content: ""; width: 6px; height: 6px; background: var(--faint); }
.feat-path span { color: var(--muted); }
.feat-flag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-inline-start: auto;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.feat-flag .dot { background: var(--accent); }
.feat-body { padding: 22px 24px 4px; }
.feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feat-meta > div { display: flex; gap: 6px; }
.feat-meta dt { color: var(--muted); }
.feat-meta dt::after { content: ":"; }
.feat-meta dd { color: var(--fg); }
.feat-title {
  margin-top: 16px;
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.feat-title a { color: var(--fg); text-decoration: none; }
.feat-title a::after { content: ""; position: absolute; inset: 0; }    /* whole panel is the link target */
.feat-title a:focus-visible { outline: none; }                        /* ring drawn on .feat instead */
.feat:hover .feat-title a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.feat-excerpt { margin-top: 12px; color: var(--fg-2); font-size: .9375rem; line-height: 1.6; }
.feat-toc {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-strong);
  color: var(--fg-2);
  font: 400 var(--step--1)/1.9 var(--font-mono);
}
.feat-toc li::before { content: "\251C\2500\00a0" / ""; color: var(--faint); }        /* ├─ */
.feat-toc li:last-child::before { content: "\2514\2500\00a0" / ""; }                    /* └─ */
.feat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 24px;
  border-top: 1px solid var(--rule);
  font: 500 var(--step-ui-mono)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feat-cta { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 5px; }
.feat-cta .arr { display: inline-block; transition: transform .18s ease; }
.feat:hover .feat-cta { text-decoration-color: var(--accent); }
.feat:hover .feat-cta .arr { transform: translateX(3px); }
.feat-count { color: var(--muted); font-weight: 400; }
@media (max-width: 559px) {
  .feat-body { padding: 18px 18px 2px; }
  .feat-foot { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { .feat, .feat-cta .arr { transition: none; } }

/* --- Home (index.html): the TOTALSQL logo in the hero's right column instead of the panel ---
   Centered on the dot lattice. Hidden below 1024px, where the column stacks under the copy and the
   logo would only repeat the header logo. */
.hero-visual--logo { justify-items: center; }
.hero-logo {
  position: relative;
  z-index: 1;                                   /* above the dot lattice */
  width: min(100%, 460px);
  height: auto;
  color: var(--fg);                             /* "TOTAL" = currentColor; ring + SQL = --logo-accent */
}
@media (max-width: 1023px) { .hero-visual--logo { display: none; } }


/* ==========================================================================
   5b. SIMPLE CONTENT PAGES (about.html — reusable for other plain pages)
   ========================================================================== */

/* Page head: eyebrow + H1 + lede + key/values (a quieter cousin of the home hero) */
.page-head > .frame { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.page-title {
  margin-top: 24px;
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-lede {
  margin-top: 22px;
  max-width: 60ch;
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
}
.page-kv { margin-top: 40px; width: fit-content; max-width: 100%; }
@media (max-width: 559px) {   /* same treatment as the home hero's key/values: 3 equal columns, label over value */
  .page-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
  .page-kv > div { flex-direction: column; gap: 4px; padding: 12px 10px 12px 0; margin-inline-end: 10px; }
  .page-kv dt::after { content: none; }
}

/* About: bio + portrait */
.about-grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
}
.about-bio { max-width: 64ch; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.75; }
.portrait {
  justify-self: start;
  width: 100%;
  max-width: 340px;
  margin: 0;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 900px) { .portrait { justify-self: end; } }
.portrait-img {                       /* solid light panel in BOTH themes: the photo is a transparent cut-out */
  background: #f4f4f4;
  background-image: radial-gradient(#d9d9d9 1px, transparent 1.2px);
  background-size: 14px 14px;
  border-bottom: 1px solid var(--rule);
}
.portrait-img img { display: block; width: 100%; height: auto; }
.portrait figcaption {
  display: grid;
  gap: 4px;
  padding: 12px 16px 14px;
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.portrait figcaption b { color: var(--fg); font-weight: 500; }
@media print { .portrait { box-shadow: none; max-width: 200px; } }

/* --- Jump row: in-page section links for long plain pages (experience.html) --- */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 28px; }
.jump-k { margin-inline-end: 6px; color: var(--muted); font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--fg-2);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.jump a:hover { color: var(--fg); border-color: var(--fg); }
@media (max-width: 959px), (pointer: coarse) { .jump a { min-height: 40px; } }

/* --- Two-column band (heading + copy side by side, or two topics side by side) --- */
.split { display: grid; gap: 48px; }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px); } }
/* A heading column (.band-head is itself a grid) must not stretch to the row: when the other column changes height
   (e.g. an accordion opens), the stretched rows would spread the eyebrow / title / lede apart and make them jump. */
.split > .band-head { align-self: start; }
.flow { max-width: 62ch; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.7; }
.flow > * + * { margin-top: 1em; }
.flow strong, .band-lede strong { color: var(--fg); font-weight: 600; }
.ticks { border-top: 1px solid var(--rule); }
.ticks li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); color: var(--fg); }
.ticks li::before { content: "\25B8" / ""; position: absolute; left: 2px; color: var(--accent-text); }

/* --- Client logos: hairline matrix of light tiles (light in BOTH themes — the logos are greyscale art on white;
       in dark mode the tiles are dimmed so 44 white squares don't glare; hover restores full brightness) --- */
.logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;                  /* separate tiles (not a shared-border matrix): stays crisp when tiles are dimmed in dark mode */
}
@media (min-width: 560px)  { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .logos { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.logos li { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); transition: filter .15s ease; }
.logos a { display: grid; place-items: center; aspect-ratio: 1; padding: 10%; }
.logos a:focus-visible { outline-offset: -4px; }
.logos img { width: 100%; max-width: 140px; height: auto; transition: transform .15s ease; }
.logos a:hover img { transform: scale(1.05); }
:root[data-theme="dark"] .logos li { filter: brightness(.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logos li { filter: brightness(.8); } }
:root .logos li:hover, :root .logos li:focus-within { filter: none; }

/* --- Testimonials: quote cards in (up to) two balanced columns --- */
.quotes { columns: 2 340px; column-gap: 24px; }
.quote {
  position: relative;
  break-inside: avoid;
  margin: 0 0 24px;
  padding: 24px 24px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.quote::before {           /* decorative mark */
  content: "\201C" / "";
  position: absolute;
  top: 6px; right: 16px;
  color: var(--rule-strong);
  font: 600 3.25rem/1 var(--font-sans);
}
.quote blockquote { margin: 0; }
.quote p { padding-inline-end: 24px; color: var(--fg); font-size: 1.0625rem; line-height: 1.6; }
.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule-strong);
  color: var(--muted);
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quote figcaption b { color: var(--fg); font-weight: 500; }
.quote cite { font-style: normal; }
.quote cite::before { content: "/ " / ""; color: var(--faint); }

/* --- Resume: company (mono, left) | bullet points (right) --- */
.resume { border-top: 1px solid var(--rule-strong); }
.resume-item { display: grid; gap: 12px 48px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .resume-item { grid-template-columns: 260px minmax(0, 1fr); } }
.resume-co { color: var(--fg); font: 600 var(--step-ui-mono)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.resume-co::before { content: "\25B8\00a0" / ""; color: var(--accent-text); }
.resume-points { max-width: 72ch; }
.resume-points li { position: relative; padding-left: 20px; color: var(--fg-2); line-height: 1.65; }
.resume-points li + li { margin-top: 10px; }
.resume-points li::before { content: "\2013" / ""; position: absolute; left: 0; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .logos img, .logos li { transition: none; } }

/* --- AVAILABILITY (availability.html) ----------------------------------------------------------------- */
.av-ctas { margin-top: 32px; }

/* Numbered steps: three hairline columns */
.steps { display: grid; border-top: 1px solid var(--rule-strong); counter-reset: none; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { padding: 22px 0 6px; border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) {
  .steps li { padding: 24px 28px 8px 0; border-bottom: 0; }
  .steps li + li { padding-inline-start: 28px; border-inline-start: 1px solid var(--rule); }
}
.steps-n { display: block; margin-bottom: 14px; color: var(--accent-text); font: 500 var(--step-ui-mono)/1 var(--font-mono); letter-spacing: .08em; }
.steps h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.steps p { margin-top: 8px; color: var(--fg-2); font-size: .9375rem; line-height: 1.6; max-width: 46ch; }

/* Calendar window: Console frame around the third-party OnceHub iframe. OnceHub's booking UI is light-only,
   so the body stays white in both themes (like the portrait/logo tiles) — the frame + bar carry the theme. */
.cal {
  max-width: 940px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cal-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 38px; padding: 0 14px;
  background: var(--bg-sub);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: 400 var(--step--2)/1 var(--font-mono);
  letter-spacing: .06em;
}
.cal-live { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--fg); letter-spacing: .1em; text-transform: uppercase; }
.cal-body { min-height: 600px; background: #fff; }   /* = data-height on #SOIDIV_totalsql (was 720 while OnceHub showed its profile sidebar, ~699px tall) */
.cal-body iframe { display: block; width: 100% !important; max-width: 100% !important; border: 0 !important; }   /* OnceHub sets inline sizes */
.cal-nojs { padding: 24px; color: #333; }
.cal-alt { margin-top: 14px; color: var(--muted); font-size: .9375rem; }
.cal-alt .link-mono { margin-inline-start: 6px; }
@media print { .cal, .cal-alt, .av-ctas { display: none !important; } }

/* --- LIBRARY LISTINGS (articles.html + articles_variant_simple.html — one template for KB / Tips / Articles / Documentation) ---------- */
/* Type tabs: hairline tab strip under the page title */
.type-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-top: 32px; border-bottom: 1px solid var(--rule-strong); }
.type-tabs > a, .type-tabs > span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 22px 0 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--fg-2);
  font: 500 var(--step-ui-mono)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.type-tabs > a:hover { color: var(--fg); }
.type-tabs > a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.type-tabs span span, .type-tabs a span { color: var(--muted); font-weight: 400; }
.type-tabs .is-soon { color: var(--muted); cursor: default; }

/* List header (articles_variant_simple.html) */
.lib-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lib-bar-title, .lib-group-title { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; }
.lib-bar-title span, .lib-group-n { margin-inline-start: 6px; color: var(--muted); font: 500 var(--step-ui-mono)/1 var(--font-mono); letter-spacing: .06em; vertical-align: .25em; }

/* Rows: the .files listing + an optional summary line and a SAMPLE tag (prototype placeholders) */
.lib-files .f-title { display: block; }
.files .f-date:empty { display: none; }        /* no known date: no pill */
.lib-files .f-sum { display: block; margin-top: 4px; color: var(--fg-2); font-size: .9375rem; font-weight: 400; line-height: 1.55; max-width: 72ch; }
.f-sample {
  margin-inline-start: 8px; padding: 2px 6px;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  color: var(--muted); font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  vertical-align: .15em;
}
.lib-files a[aria-disabled="true"] { cursor: default; }
.lib-files a[aria-disabled="true"] .f-title { color: var(--fg-2); }
.lib-files a[aria-disabled="true"]:hover .f-title { text-decoration: none; }

/* Category groups (articles.html, library.html) */
.lib-jump { margin-top: 0; margin-bottom: 8px; }
.lib-group { padding-top: 40px; }
.lib-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 10px; }
.lib-group-blurb { color: var(--muted); font: 400 var(--step--2)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* --- LIBRARY OVERVIEW (library.html) ------------------------------------------------------------------- */
.lib-latest { display: grid; gap: 40px; }
@media (min-width: 1024px) { .lib-latest { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; } }
.lib-feat { display: grid; }
@media (min-width: 1024px) { .lib-feat { padding-top: 6px; } }
.lib-more { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9375rem; line-height: 1.6; }

/* --- SITE MAP (sitemap.html): 2-column page head (intro | "For Robots" card) + sections of .files rows -- */
.map-head { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .map-head { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
  .map-head-aside { display: grid; place-items: center; }      /* card floats centred in the right column */
  .map-head-aside .map-robots { width: min(100%, 290px); }
}
.map-sec + .map-sec { padding-top: 64px; }
.map-sec-title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.map-sub { padding-top: 32px; }
.map-sub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 8px; }
.map-sub-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.files .map-nolink { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 15px 0; }
.files .map-nolink .f-title { color: var(--fg-2); }
.files .f-title .arr { color: var(--muted); font-weight: 400; }
@media (max-width: 559px) {
  .files .map-nolink { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: 6px; }
  .files .map-nolink .f-date { grid-column: 2; justify-self: start; }
}
.files a[aria-current="page"] .f-date { border-color: var(--fg); color: var(--fg); }
.map-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.map-soon > span { padding: 5px 8px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--muted); font: 400 var(--step--2)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.map-soon > .map-soon-k { padding-inline: 0 6px; border: 0; letter-spacing: .1em; }
.map-robots { max-width: 420px; }
.robots-note { margin: 0; padding: 10px 12px 4px; color: var(--r-fg-2); font-size: .875rem; line-height: 1.5; }
.robots-note--foot { margin: 6px 12px 0; padding: 10px 0 12px; border-top: 1px dashed var(--r-rule-strong); color: var(--r-muted); font-size: .8125rem; }
.robots-note code { font: 500 .95em var(--font-mono); color: var(--r-fg); }
.robots .robots-actions--files a { text-transform: none; }   /* file names */

/* --- FREE CONSULTATION (consulting.html) ------------------------------------------------------------------ */
.flow a:not(.link-mono), .page-lede a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 65%, transparent); text-underline-offset: 3px; }
.flow a:not(.link-mono):hover, .page-lede a:hover { color: var(--accent-text); }

/* Calendar grid */
.book-grid { display: grid; gap: 32px; }
/* Side-by-side only from 1280px: OnceHub switches to its one-column phone layout below ~800px of width, so the
   calendar column must stay wider than that (it stacks full-width below 1280px instead). */
@media (min-width: 1280px) {
  .book-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 40px; }
  .book-grid--hero { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: center; }   /* calendar centred against the pitch */
}
.book-cal { min-width: 0; }
.book-cal .cal { max-width: none; }

.book-hero > .frame { padding-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.book-title { max-width: 16ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem); }
.book-pitch .page-lede { font-size: 1.0625rem; }
.who { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 12px 0; border-block: 1px solid var(--rule); }
.who img { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #f4f4f4; border: 1px solid var(--rule-strong); }
.who-name { color: var(--fg); font-weight: 600; }
.who-sub { margin-top: 2px; color: var(--muted); font: 400 var(--step--2)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.book-points { margin-top: 18px; border-top: 0; }
.steps--stack { grid-template-columns: 1fr !important; border-top: 1px solid var(--rule-strong); }
.steps--stack li { padding: 18px 0 14px !important; border-inline-start: 0 !important; border-bottom: 1px solid var(--rule); }
.book-note { margin-top: 16px; color: var(--muted); font-size: .9375rem; }
@media (min-width: 900px) { .quotes--3 { columns: 3 260px; } }
.alt-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 26px; background: var(--bg-sub); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.alt-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.alt-sub { margin-top: 4px; color: var(--fg-2); }
.alt-list { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media print { .book-cal, .alt-contact { display: none !important; } }

/* --- RATES (rates.html) ------------------------------------------------------------------------- */
/* Outline button (secondary CTAs) */

/* Rate card: Console window with one big numeral */
.ratecard { max-width: 460px; background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.ratecard-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; padding: 0 14px;
  background: var(--bg-sub); border-bottom: 1px solid var(--rule);
  color: var(--muted); font: 400 var(--step--2)/1 var(--font-mono); letter-spacing: .06em;
}
.ratecard-k { color: var(--fg); letter-spacing: .1em; }
.ratecard-body { padding: 26px 26px 22px; }
.ratecard-label { color: var(--muted); font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ratecard-price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.ratecard-amt { font-size: clamp(3.25rem, 2.4rem + 3.2vw, 4.75rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.ratecard-unit { color: var(--fg-2); font: 500 var(--step-ui-mono)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ratecard-note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); color: var(--fg-2); font-size: .9375rem; }
.rates-split { align-items: start; }

/* Pull-quote (rates.html: the Picasso line) */
.pullquote { margin: 0 auto; max-width: 34ch; text-align: center; }
.pullquote blockquote { margin: 0; }
.pullquote p { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.pullquote figcaption { margin-top: 18px; color: var(--fg); font: 500 var(--step-ui-mono)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pullquote figcaption span { color: var(--muted); font-weight: 400; }

/* --- FAQS (faq.html: TOC + content) — reuses the services directory layout ------------------------------ */
.faq-sec a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 65%, transparent); text-underline-offset: 3px; }
.faq-sec a:hover { color: var(--accent-text); }

/* --- SERVICES (services.html = directory; services_cards_variant.html = grouped cards) ------------------- */
.svc-ask { align-self: flex-start; }

/* Grouped cards (services_cards_variant.html) */
.svc-jump { margin-top: 0; }
.jump-n { margin-inline-start: 6px; color: var(--muted); }
.svc-group { padding-top: 48px; }
.svc-group:first-of-type { padding-top: 36px; }
.svc-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}
.svc-group-title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.025em; }
.svc-group-k { margin-inline-end: 6px; color: var(--muted); font: 500 var(--step-ui-mono)/1 var(--font-mono); letter-spacing: .08em; vertical-align: .2em; }
.svc-group-blurb { color: var(--muted); font: 400 var(--step--2)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.svc-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.svc-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease;
}
.svc-card:hover { border-color: var(--fg-2); }
.svc-card:target { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.svc-card h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.svc-card p { flex: 1; color: var(--fg-2); font-size: .9375rem; line-height: 1.6; }

/* Accordion rows (also reused by the consulting FAQ) */
.svc-acc { border-top: 1px solid var(--rule-strong); }
.svc-row { border-bottom: 1px solid var(--rule); }
.svc-row > summary {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 6px;
  list-style: none;
  cursor: pointer;
}
.svc-row > summary::-webkit-details-marker { display: none; }
.svc-row > summary:hover { background: var(--bg-sub); }
.svc-n { color: var(--muted); font: 400 var(--step--1)/1 var(--font-mono); }
.svc-t { color: var(--fg); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.svc-g { color: var(--muted); font: 400 var(--step--2)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.svc-x { position: relative; width: 14px; height: 14px; }
.svc-x::before, .svc-x::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--fg-2); transition: transform .2s ease; }
.svc-x::after { transform: rotate(90deg); }
.svc-row[open] .svc-x::after { transform: rotate(0deg); }
.svc-row[open] > summary .svc-n { color: var(--accent-text); }
.svc-body { padding: 0 6px 22px calc(2.75rem + 14px + 6px); }
.svc-body p { max-width: 68ch; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.7; }
.svc-body .svc-ask { margin-top: 8px; }
@media (max-width: 699px) {
  .svc-row > summary { grid-template-columns: 2rem minmax(0, 1fr) 16px; gap: 10px; }
  .svc-g { display: none; }
  .svc-body { padding-left: calc(2rem + 10px + 6px); }
}

/* Directory (services.html): sticky grouped index + full sections */
.svc-dir { display: grid; gap: 32px; }
.svc-index-box { padding: 2px 14px 14px; background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.svc-index-box:not([open]) { padding-bottom: 0; }   /* collapsed (phones): just the summary row */
.svc-index-box > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 46px;
  list-style: none;
  cursor: pointer;
  color: var(--fg);
  font: 500 var(--step-ui-mono)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.svc-index-box > summary::-webkit-details-marker { display: none; }
.svc-index-box > summary span { color: var(--muted); }
.svc-index-g { margin: 16px 0 6px; color: var(--muted); font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.svc-index ul { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--rule-strong); }
.svc-index a {
  display: block;
  margin-inline-start: -1px;
  padding: 7px 0 7px 14px;
  border-inline-start: 2px solid transparent;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.35;
  text-decoration: none;
}
.svc-index a:hover { color: var(--fg); }
.svc-index a[aria-current] { color: var(--fg); font-weight: 500; border-inline-start-color: var(--accent); }
@media (min-width: 1024px) {
  .svc-dir { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
  .svc-index { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; scrollbar-width: thin; }
  .svc-index-box { padding: 0; background: none; border: 0; }
  .svc-index-box > summary { display: none; }
  .svc-index-g:first-of-type { margin-top: 0; }
}
@media (max-width: 1023px) { .svc-index a { padding-block: 10px; } }
.svc-sec-group + .svc-sec-group { margin-top: 48px; }
.svc-sec-g { margin-bottom: 10px; }
.svc-sec { padding: 24px 0; border-top: 1px solid var(--rule); }
.svc-sec h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.svc-sec p { max-width: 68ch; margin-top: 10px; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.7; }
.svc-sec .svc-ask { margin-top: 6px; }
@media print {
  .svc-jump, .svc-index, .svc-ask { display: none !important; }
  .svc-row > .svc-body { display: block; }
  .svc-dir { display: block; }
}
@media print { .jump { display: none; } .logos li { filter: none !important; } .quote { box-shadow: none; } }

/* --- Band heads --- */
.band-head { display: grid; gap: 16px; margin-bottom: clamp(24px, 4vw, 40px); }
.band-title {
  max-width: 22ch;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem);
  letter-spacing: -.03em;
  line-height: 1.06;
}
.band-lede { max-width: 58ch; color: var(--fg-2); font-size: 1.0625rem; }
@media (min-width: 768px) {
  .band-head-split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 40px;
  }
  .band-head-split > .eyebrow { grid-column: 1 / -1; }
  .band-head-split > .band-aside { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
}

/* --- Features: 3 columns divided by hairlines, not cards --- */
.features {
  display: grid;
  border-top: 1px solid var(--rule);
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 0;
}
.feature + .feature { border-top: 1px solid var(--rule); }
.feature:last-child { padding-bottom: 0; }
.feature-path {
  color: var(--muted);
  font: 400 var(--step--2)/1 var(--font-mono);
  letter-spacing: .04em;
}
.feature h3 {
  margin-top: 10px;
  font-size: 1.5rem;
  letter-spacing: -.025em;
}
.feature p:not(.feature-path) { color: var(--fg-2); max-width: 42ch; }
.feature .link-mono { margin-top: auto; padding-top: 4px; align-self: start; }
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature { padding: 32px 32px 0; }
  .feature:first-child { padding-inline-start: 0; }
  .feature:last-child { padding-inline-end: 0; }
  .feature + .feature { border-top: 0; border-inline-start: 1px solid var(--rule); }
}

/* --- Library listings --- */
.listings { display: grid; gap: 48px; }
.listing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.listing-head h3 { font-size: 1.125rem; letter-spacing: -.015em; }
@media (min-width: 1024px) {
  .listings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .listing:first-child { padding-inline-end: 40px; }
  .listing + .listing { padding-inline-start: 40px; border-inline-start: 1px solid var(--rule); }
}

/* --- Hairline matrix (open source): cells share borders; empty
   trailing slots show the dot lattice instead of looking unfinished --- */
.oss {
  display: grid;
  border: 1px solid var(--rule);
  border-top-color: var(--rule-strong);
  overflow: hidden;
  background-image: radial-gradient(var(--rule-strong) 1px, transparent 1.2px);
  background-size: 8px 8px;
}
.oss > li {
  /* each cell draws its left/top hairline over its neighbour's edge (outer ones are clipped by the
     container border); the 1px shadow only survives where no cell follows — i.e. it outlines the
     empty trailing slot */
  margin: -1px;                        /* overlap by 1px on every side: no subpixel slivers */
  border-inline-start: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  box-shadow: 1px 1px 0 var(--rule);
  background: var(--bg);
}

/* Open source: project names (not links) + one GitHub link cell */
.oss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .oss { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 379px)  { .oss { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .oss > .o-all { grid-column: 1 / -1; } }
.oss > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 18px 20px;
}
.oss .o-name {
  color: var(--fg);
  font: 500 1.0625rem/1.25 var(--font-mono);
  letter-spacing: -.02em;
}
.oss .o-alt {
  color: var(--muted);
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.oss > .o-all { padding: 0; }
.oss .o-all a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 18px 20px;
  background: var(--bg-sub);
  color: var(--fg);
  text-decoration: none;
  transition: background-color .15s ease;
}
.oss .o-all svg { width: 20px; height: 20px; }
.oss .o-all-txt { display: grid; gap: 4px; }
.oss .o-all-t { font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.oss .o-arr { color: var(--muted); transition: transform .18s ease, color .18s ease; }
.oss .o-all a:hover { background: var(--bg-hover); }
.oss .o-all a:hover .o-all-t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.oss .o-all a:hover .o-arr { color: var(--fg); transform: translate(2px, -2px); }

/* --- Clients: slow mono ticker (restored from the first build) ---
   Default / no JS / prefers-reduced-motion: a static wrapped list inside the frame.
   js/site.js adds .is-live (and an aria-hidden duplicate list) only when motion is allowed. */
.ticker { position: relative; border-block: 1px solid var(--rule); }
.ticker-track { display: flex; width: max-content; }
.ticker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font: 400 var(--step--1)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ticker-list li {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 22px 20px 0;
  white-space: nowrap;
}
.ticker-list li::after { content: ""; width: 5px; height: 5px; background: var(--faint); }
/* static state wraps inside the frame */
.ticker:not(.is-live) .ticker-track { width: auto; }
.ticker:not(.is-live) .ticker-list li { padding-block: 12px; }
/* live state: one long row, faded at both edges, looping forever (the list is doubled, so -50% is seamless) */
.ticker.is-live {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker.is-live .ticker-list { flex-wrap: nowrap; }
.ticker.is-live .ticker-track { animation: ticker 70s linear infinite; }
.ticker.is-paused .ticker-track,
.ticker.is-live:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* Pause / Play: a compact chip hanging just below the ticker's bottom rule, right-aligned. It is absolutely
   positioned inside the band's bottom padding (--band-y, min 48px), so the section keeps its height.
   Visible chip is 28px; ::before stretches the hit area to 40px for touch. Hidden until the ticker is live. */
.ticker-wrap { position: relative; }
.ticker-toggle {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ticker-toggle::before { content: ; position: absolute; inset: -6px -2px; }
.ticker-toggle:hover { color: var(--fg); border-color: var(--fg); }
.ticker-toggle[hidden] { display: none; }
.ticker-toggle .i-play { display: none; }
.ticker-toggle.is-paused .i-pause { display: none; }
.ticker-toggle.is-paused .i-play { display: block; }
@media print {
  .ticker-toggle, .ticker-list[aria-hidden="true"] { display: none; }
  .ticker.is-live { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ticker.is-live .ticker-track { animation: none; width: auto; }
  .ticker.is-live .ticker-list { flex-wrap: wrap; }
}

/* --- Closing CTA band --- */
.cta { display: grid; gap: 36px; }
.cta .band-title { max-width: 18ch; margin-top: 16px; }
.cta-copy p:not(.eyebrow) { margin-top: 18px; max-width: 54ch; color: var(--fg-2); font-size: 1.0625rem; }
.cta-actions { display: grid; gap: 16px; align-content: end; }
.cta-actions .button--accent { justify-self: start; min-height: 48px; padding-inline: 22px; font-size: 1rem; }
.cta-links {
  display: flex; flex-wrap: wrap; gap: 0 22px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.cta-links .link-mono { min-width: 40px; justify-content: center; }
@media (min-width: 1024px) {
  .cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
}


/* ==========================================================================
   6. ARTICLE / PROSE
   The article body is generated from markdown (h1, dl, div.TOC, h2–h4[id],
   p, ul/ol, code, p > img.img-fluid, div.INFO/TIP/WARNING/CAUTION > h4, pre >
   code.language-*). Everything below is scoped to .prose so the MVC view can
   drop the generated HTML in as-is. The author's own "A. / B. / Appendix A"
   labels are the numbering scheme — no counters are added.
   ========================================================================== */

/* --- 6.1 Document grid: [ TOC rail | content ] --- */
.doc > .frame { padding-block: 0; }
.doc-grid { display: grid; }
.doc-main { min-width: 0; width: 100%; max-width: var(--measure); margin-inline: auto; padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.doc-rail { display: none; }

/* The rail needs JS and room (≥1100px). It always holds the For Robots card; the TOC part only shows when the article has a div.TOC. */
@media (min-width: 1100px) {
  .js:not(.no-rail) .doc-grid { grid-template-columns: 288px minmax(0, 1fr); padding-inline: 0; }
  /* rail comes AFTER the content in source order; grid places it on the left */
  .js:not(.no-rail) .doc-grid .doc-rail { display: block; grid-column: 1; grid-row: 1; border-inline-end: 1px solid var(--rule); }
  .js:not(.no-rail) .doc-grid .doc-main { grid-column: 2; grid-row: 1; max-width: calc(var(--measure-wide) + clamp(48px, 6.5vw, 112px) + var(--pad)); margin: 0; padding-inline: clamp(48px, 6.5vw, 112px) var(--pad); }
  .js:not(.no-rail) .prose .TOC { display: none; }  /* the rail replaces the inline TOC */
}

/* Rail */
.rail-inner {
  position: sticky;
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h));
  padding: 36px 20px 20px 24px;
}
.rail-label {
  display: flex; justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: 500 var(--step--2)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rail-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-inline: -8px;
  padding: 0 8px 24px;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
.rail-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}
.rail-foot .link-mono { text-decoration: none; color: var(--fg-2); }
.rail-foot .link-mono:hover { color: var(--fg); }
/* the TOC part of the rail is its own <nav>, so the "For Robots" card can sit beside it */
.rail-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* no div.TOC (most tips): the rail is just the Top / Free consultation links + the For Robots card */
.doc-grid:not(:has(.prose .TOC)) .rail-nav { flex: none; }
.doc-grid:not(:has(.prose .TOC)) :is(.rail-label, .rail-scroll) { display: none; }

/* --- "For Robots" card: Markdown download/view + llms.txt + keywords (article pages) ---
   Base tokens = a normal panel; the look is switched via local tokens:
     .robots--inverse  whole card in ink (black on the light theme, near-white on the dark theme)
   Placement: .robots--rail under the TOC rail (≥1100px wide AND ≥760px tall, so the TOC keeps room);
              .robots--end at the end of the article everywhere else. */
.robots {
  --r-bg: var(--bg-raised);
  --r-fg: var(--fg);
  --r-fg-2: var(--fg-2);
  --r-muted: var(--muted);
  --r-rule: var(--rule);
  --r-rule-strong: var(--rule-strong);
  --r-hover: var(--bg-hover);
  --r-head-bg: var(--bg-sub);
  --r-head-fg: var(--fg);
  background: var(--r-bg);
  color: var(--r-fg);
  border: 1px solid var(--r-rule-strong);
  border-radius: var(--radius);
}
.robots--inverse {
  --r-bg: var(--fg);
  --r-fg: var(--bg);
  --r-fg-2: color-mix(in srgb, var(--bg) 82%, var(--fg));
  --r-muted: color-mix(in srgb, var(--bg) 62%, var(--fg));
  --r-rule: color-mix(in srgb, var(--bg) 16%, var(--fg));
  --r-rule-strong: color-mix(in srgb, var(--bg) 30%, var(--fg));
  --r-hover: color-mix(in srgb, var(--bg) 12%, var(--fg));
  --r-head-bg: transparent;
  --r-head-fg: var(--bg);
  border-color: var(--fg);
}
.robots-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background: var(--r-head-bg);
  color: var(--r-head-fg);
  border-bottom: 1px solid var(--r-rule);
  font: 600 var(--step-ui-mono)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.robots-bot { flex: none; width: 15px; height: 15px; }
.robots .robots-actions { margin: 0; padding: 6px 6px 2px; list-style: none; }   /* .robots prefix: beats the ul[class] reset */
.robots-actions a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--r-fg-2);
  font: 500 var(--step-ui-mono)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.robots-actions li:last-child a { text-transform: none; }      /* llms.txt is a file name */
.robots-actions svg { flex: none; width: 14px; height: 14px; color: var(--r-muted); }
.robots-actions a:hover { background: var(--r-hover); color: var(--r-fg); }
.robots-actions a:hover svg { color: var(--r-fg); }
.robots a:focus-visible { outline: 2px solid var(--r-fg); outline-offset: -2px; }
.robots-k {
  margin: 4px 12px 0;
  padding-top: 10px;
  border-top: 1px dashed var(--r-rule-strong);
  color: var(--r-muted);
  font: 500 var(--step--2)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.robots .robots-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 10px 12px 12px; list-style: none; }
.robots-tags li {
  padding: 3px 6px;
  border: 1px solid var(--r-rule-strong);
  border-radius: var(--radius);
  color: var(--r-fg-2);
  font: 400 var(--step--2)/1.3 var(--font-mono);
  letter-spacing: .02em;
}
.robots--rail { flex: none; margin-top: 16px; }
.robots--end { max-width: 420px; margin-top: 56px; }
@media (min-width: 1100px) and (min-height: 760px) {
  .js:not(.no-rail) .doc-grid .robots--end { display: none; }
}
@media (max-height: 759px) { .robots--rail { display: none; } }
@media (max-width: 959px), (pointer: coarse) { .robots-actions a { min-height: 44px; } }
@media print { .robots { display: none; } }

/* TOC tree (rail + contents sheet): mono entries hanging off hairline guides
   (├ / └ elbows drawn in CSS) with the red ▸ scroll-spy marker. No numbers. */
.toc-tree { --elbow: 14px; --tree-rule: var(--rule-strong); }
.toc-tree, .toc-tree ul { list-style: none; margin: 0; padding: 0; }
.toc-tree a {
  position: relative;
  display: block;
  padding: 5px 8px 5px 16px;
  color: var(--muted);
  font: 400 var(--step-ui-mono)/1.45 var(--font-mono);
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--radius);
}
.toc-tree > li > a { color: var(--fg-2); font-weight: 500; }
.toc-tree a:hover { color: var(--fg); background: var(--bg-hover); }
.toc-tree ul { margin-inline-start: 9px; }
.toc-tree ul > li { position: relative; padding-inline-start: 11px; }
.toc-tree ul > li::before {          /* vertical guide (the stem of ├) */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-inline-start: 1px solid var(--tree-rule);
}
.toc-tree ul > li:last-child::before { bottom: auto; height: var(--elbow); }   /* └ stops at the elbow */
.toc-tree ul > li::after {           /* the elbow */
  content: "";
  position: absolute;
  left: 0; top: var(--elbow);
  width: 8px;
  border-top: 1px solid var(--tree-rule);
}
.toc-tree a::before {                /* the red ▸ scroll-spy marker */
  content: "";
  position: absolute;
  left: 4px; top: calc(var(--elbow) - 4px);
  border-block: 4px solid transparent;
  border-inline-start: 5px solid var(--accent);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s ease;
}
.toc-tree a[aria-current] { color: var(--fg); }
.toc-tree a[aria-current]::before { opacity: 1; transform: none; }
/* Rail: third-level groups stay collapsed until you're inside them */
.doc-rail .toc-tree ul ul { display: none; }
.doc-rail .toc-tree li.is-open > ul { display: block; }
.doc-rail .toc-tree ul li.has-kids:not(.is-open) > a::after { content: " +" / ""; color: var(--muted); }

/* Reading progress line under the header (article only, injected by JS into
   .hdr so it is bounded by the frame rails) */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- 6.1b Below 1100px: sticky "current section · Contents" bar + bottom sheet (JS) --- */
.doc-bar {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.doc-bar.is-shown { transform: none; opacity: 1; visibility: visible; transition: transform .2s ease, opacity .2s ease; }
.doc-bar-in { display: flex; align-items: center; gap: 12px; height: var(--doc-bar-h); }
.doc-bar-k {
  flex: none;
  color: var(--muted);
  font: 500 var(--step--2)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.doc-bar-k::before { content: "\25B8\00a0" / ""; color: var(--accent); }
.doc-bar-cur {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  font-size: .875rem;
  font-weight: 500;
}
.doc-bar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  min-height: 40px;
  margin-inline-end: -6px;
  padding: 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.doc-bar-btn svg { width: 14px; height: 14px; }
.doc-bar-btn:hover { border-color: var(--fg); }
@media (max-width: 379px) { .doc-bar-k { display: none; } }
@media (min-width: 1100px) { .doc-bar { display: none; } }

.toc-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: min(100%, 720px);
  max-width: none;
  max-height: 82dvh;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--bg-raised);
  color: var(--fg-body);
  box-shadow: 0 -24px 48px -16px rgba(0,0,0,.35);
}
.toc-sheet[open] { display: flex; flex-direction: column; }
.toc-sheet::backdrop { background: rgba(10,10,10,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 6px 4px var(--pad);
  border-bottom: 1px solid var(--rule);
}
.sheet-title {
  color: var(--muted);
  font: 500 var(--step--2)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sheet-close {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.sheet-close svg { width: 16px; height: 16px; }
.sheet-close:hover { background: var(--bg-hover); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px calc(var(--pad) - 8px) 24px; }
.toc-sheet .toc-tree { --elbow: 22px; }
.toc-sheet .toc-tree a { padding-block: 13px; font-size: .8125rem; line-height: 1.4; }
.toc-sheet .toc-tree a::before { left: 4px; }
html.sheet-open { overflow: hidden; }

/* --- 6.2 Breadcrumbs + title area --- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/" / ""; color: var(--faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 40px; color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--fg); }

.prose {
  max-width: var(--measure-wide);
  color: var(--fg-body);
  font-size: var(--step-prose);
  line-height: 1.66;
  overflow-wrap: break-word;
}
@media (min-width: 768px) { .prose { font-size: 1.09375rem; } }  /* 17.5px */
/* Text blocks keep the reading measure; wide media (screenshots, code) may use the wider one —
   left-aligned, so it reads as intentional in the rail layout (centred layouts cap the column anyway). */
.prose article > * { max-width: var(--measure); }
.prose article > :is(p.fig, p:has(> img), .codeblock, pre) { max-width: min(100%, var(--measure-wide)); }

.prose article > h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 18ch;
}

/* Meta strip (dl.doc-meta > div > dt + dd), rendered by the view: Released · [Updated] · Markdown (view / download).
   Each <div> is one column; the strip doesn't care whether there are 2 or 3 (Updated is optional). */
.prose .doc-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 28px 0 36px;
  border-block: 1px solid var(--rule);
  font: 400 var(--step--2)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg);
}
.prose .doc-meta > div {
  display: flex;
  align-items: center;
  gap: .6em;
  min-height: 42px;
  padding-inline-end: 16px;
  margin-inline-end: 16px;
  border-inline-end: 1px solid var(--rule);
}
.prose .doc-meta > div:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.prose .doc-meta dt { color: var(--muted); font-weight: 400; }
.prose .doc-meta dt::after { content: ":"; }
.prose .doc-meta dd { display: flex; align-items: center; gap: 2px; margin: 0; }
.meta-ico {                      /* icon-only links (labelled via aria-label + title) */
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius);
  color: var(--fg-2);
}
.meta-ico svg { width: 15px; height: 15px; }
.meta-ico:hover { background: var(--bg-hover); color: var(--fg); }
.prose .doc-meta a.meta-ico { text-decoration: none; color: var(--fg-2); }
.prose .doc-meta a.meta-ico:hover { color: var(--fg); }       /* beats .prose a:not(.hlink):hover (red) */
@media (max-width: 559px) {
  /* one equal column per item (2 or 3), label stacked over value */
  .prose .doc-meta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr); }
  .prose .doc-meta time { white-space: nowrap; }      /* never break a date mid-way (320px, 3 columns) */
  .prose .doc-meta > div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding-block: 10px 6px; padding-inline-end: 10px; margin-inline-end: 10px; }
  .prose .doc-meta dd { min-height: 40px; }   /* same row height for dates and the 40px icons, so labels + values line up */
  .prose .doc-meta dt::after { content: none; }
}
@media (max-width: 959px), (pointer: coarse) {
  .meta-ico { width: 40px; height: 40px; }
  .meta-ico:first-child { margin-inline-start: -10px; }   /* keep the first icon visually aligned with the column */
}

/* --- 6.3 Inline TOC (no-JS / narrow screens): a <details> block --- */
.prose .TOC {
  margin: 0 0 40px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-sub);
  font-size: .9375rem;
}
.prose .TOC > h2, .prose .TOC summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0;
  padding: 0 16px;
  min-height: 48px;
  color: var(--fg);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.prose .TOC summary { cursor: pointer; list-style: none; }
.prose .TOC summary::-webkit-details-marker { display: none; }
.prose .TOC summary h2 { all: unset; }
.prose .TOC summary::after {
  content: "+" / "";
  font: 400 1rem/1 var(--font-mono);
  color: var(--muted);
}
.prose .TOC details[open] summary::after { content: "\2212" / ""; }
.prose .TOC details[open] summary { border-bottom: 1px solid var(--rule); }
.prose .TOC summary .cnt { margin-inline-start: auto; color: var(--muted); }
.prose .TOC ul { margin: 0; padding: 0 0 0 1.1em; list-style: none; }
.prose .TOC > ul, .prose .TOC details > ul { padding: 10px 16px 14px; }
.prose .TOC li { margin: 0; padding: 0; }
.prose .TOC li::marker { content: none; }
.prose .TOC li > a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 0;
  color: var(--fg-2);
  text-decoration: none;
  line-height: 1.35;
}
.prose .TOC li > a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }
.prose .TOC ul ul { border-inline-start: 1px solid var(--rule-strong); margin-inline-start: 2px; }
@media (max-width: 959px), (pointer: coarse) { .prose .TOC li > a { min-height: 44px; } }

/* --- 6.4 Headings: a hairline + crosshair opens each h2; permalinks wrap the text --- */
.prose article > :is(h2, h3, h4) { position: relative; }
.prose article > h2 {
  margin: 3.5rem 0 1.125rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  letter-spacing: -.03em;
}
.prose article > h2::before {       /* "+" registration mark where the section rule starts */
  content: "";
  position: absolute;
  top: -6px; left: -6px;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--plus) 0 0) center / 11px 1px no-repeat,
    linear-gradient(var(--plus) 0 0) center / 1px 11px no-repeat;
}
.prose article > h3 {
  margin: 2.75rem 0 .875rem;
  font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.5rem);
  letter-spacing: -.02em;
}
.prose article > h4 {
  margin: 2.25rem 0 .5rem;
  font-size: 1.1875rem;
  letter-spacing: -.015em;
}
/* First section right after the TOC doesn't need the big gap */
.prose .TOC + h2 { margin-top: 2.5rem; padding-top: 0; border-top: 0; }
.prose .TOC + h2::before { content: none; }
@media (max-width: 1099px) {
  .js .prose article > :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--header-h) + var(--doc-bar-h) + 20px); }
}

/* Heading permalinks (JS wraps the heading text: <h2 id><a class="hlink" href="#id">…</a></h2>).
   The "#" has empty alt text, so the heading's accessible name is just its text. */
.prose .hlink { color: inherit; text-decoration: none; }
.prose .hlink::before {
  content: "#" / "";
  display: inline-block;
  width: 1.1em;
  margin-inline-start: -1.1em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .75em;
  font-weight: 400;
  opacity: 0;
  transition: opacity .15s ease;
}
.prose .hlink:hover::before, .prose .hlink:focus-visible::before { opacity: 1; color: var(--accent-text); }
@media (hover: none) { .prose .hlink::before { content: none; } }   /* touch: no hover to reveal it */

/* --- 6.5 Body text, lists, links, inline code --- */
.prose article > * + :is(p, ul, ol) { margin-top: 1.1em; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a:not(.hlink) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 65%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.prose a:not(.hlink):hover { color: var(--accent-text); text-decoration-color: currentColor; }

.prose :is(ul, ol) { padding-inline-start: 1.5em; }
.prose li { margin-top: .5em; padding-inline-start: .3em; }
.prose li > :is(ul, ol) { margin-top: .5em; }
.prose ul > li::marker { content: "\25AA\00a0\00a0"; color: var(--faint); font-size: .9em; }
.prose ul ul > li::marker { content: "\2013\00a0\00a0"; }
.prose ol { list-style: decimal-leading-zero; }
.prose ol > li::marker {
  color: var(--muted);
  font: 500 .8em var(--font-mono);
}

.prose :not(pre) > code {
  padding: .1em .35em;
  border-radius: var(--radius);
  background: var(--code-inline-bg);
  color: var(--code-inline-fg);
  font-size: .86em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- 6.6 Callouts: terminal-like boxes with a mono header row --- */
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) {
  --sig: var(--note);
  margin: 2rem 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: .97em;
}
.prose .TIP     { --sig: var(--ok); }
.prose .WARNING { --sig: var(--warn); }
.prose .CAUTION { --sig: var(--accent); }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--sig) 5%, var(--bg-sub));
  color: var(--fg);
  font: 500 var(--step--2)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > h4::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background: var(--sig);
}
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > :not(h4) { margin: 0; padding-inline: 18px; }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > h4 + * { padding-top: 14px; }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > * + :not(h4) { padding-top: .8em; }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > :last-child { padding-bottom: 16px; }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > :is(ul, ol) { padding-inline-start: calc(18px + 1.4em); }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > p.fig { margin: 0 18px; padding: var(--fig-pad); }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > p.fig:last-child { margin-bottom: 18px; padding-bottom: var(--fig-pad); }
.prose :is(.INFO, .TIP, .WARNING, .CAUTION) > * + p.fig { margin-top: 1em; }

/* --- 6.7 Screenshots: framed, captioned from alt ("FIG. 03 — …").
   Dark: the bright Windows dialogs sit on a dark mat, dimmed, with their own hairline. --- */
.prose img {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-sub);         /* lazy-load placeholder */
  filter: var(--img-filter);
}
.prose p:has(> img), .prose p.fig {
  width: fit-content;
  max-width: 100%;
  margin-block: 1.75em;
  padding: 0;
}
.prose p.fig {
  padding: var(--fig-pad);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--fig-bg);
}
.prose p.fig img { border: 0 solid var(--fig-img-rule); border-width: var(--fig-img-bw); border-radius: var(--fig-img-radius); }
.fig-cap {
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  color: var(--muted);
  font: 400 var(--step--2)/1.45 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.prose p.fig .fig-cap { padding-inline: calc(12px - var(--fig-pad)); padding-bottom: calc(9px - var(--fig-pad)); }
.fig-cap b { color: var(--fg); font-weight: 500; white-space: nowrap; }

/* --- 6.8 Code blocks: always a dark terminal on screen --- */
.prose pre {
  margin: 1.75em 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--term-bg);
  color: var(--term-fg);
  border: 1px solid var(--term-border);
  border-radius: 4px;
  font-size: .8125rem;
  line-height: 1.7;
  tab-size: 4;
}
.prose pre code { font-size: inherit; }
.codeblock { margin: 1.75em 0; box-shadow: var(--term-lift); border-radius: 4px; }
.codeblock pre { margin: 0; border-top: 0; border-radius: 0 0 4px 4px; }
.codeblock .term-bar { border: 1px solid var(--term-border); border-radius: 4px 4px 0 0; padding-inline-start: 0; }
/* no window dots on code blocks: the language tab sits flush left, its marker aligned with the code's left edge */
.codeblock .term-tab { border-inline-start: 0; border-start-start-radius: 3px; padding-inline-start: 18px; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px;
  margin-inline-start: auto;
  padding: 0 10px;
  border: 1px solid var(--term-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--term-fg);
  font: 500 var(--step-ui-mono)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy-btn svg { width: 12px; height: 12px; }
.copy-btn:hover { border-color: var(--term-hover-border); }
.copy-btn.is-done { color: var(--copy-done-fg); border-color: var(--copy-done-border); }
.copy-btn:focus-visible { outline-color: var(--term-focus); }

/* --- 6.9 End of article --- */
.doc-end { margin-top: 72px; max-width: var(--measure); }
.eof {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 40px;
  color: var(--muted);
  font: 500 var(--step--2)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eof::before, .eof::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.end-cta {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--rule-strong);
  background:
    radial-gradient(var(--rule) 1px, transparent 1.2px) 0 0 / 14px 14px,
    var(--bg-sub);
}
.end-cta h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); letter-spacing: -.03em; max-width: 24ch; }
.end-cta p:not(.eyebrow) { max-width: 56ch; color: var(--fg-2); }
.end-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 4px; }
.end-related { margin-top: 56px; }
.end-related .listing-head h2 { font-size: 1.125rem; letter-spacing: -.015em; }

/* --- Touch: comfortable tap targets for the small UI links --- */
@media (max-width: 959px), (pointer: coarse) {
  .ftr-nav a { min-height: 44px; }
  .copy-btn { min-height: 40px; padding-inline: 12px; }
  .rail-foot .link-mono { min-height: 44px; }
}


/* ==========================================================================
   6b. ERROR PAGES (Views/Shared/NotFound + Error, served by ErrorsController)
   The status code as a big mono numeral beside the message; 404 lists closest matches + next steps, everything
   else gets an "incident card" (the squared window of the calendar / featured panels). Markers use the amber
   status colour: red stays reserved for the brand and the primary action ("Try again").
   ========================================================================== */
.err-split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .err-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); } }
.err-split .page-title { margin-top: 0; }
.err-code {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--fg);
  font: 600 clamp(5.5rem, 3rem + 11vw, 11rem)/.82 var(--font-mono);
  letter-spacing: -.06em;
}
.err-code::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: .08em; background: var(--warn); }
.err-code-k,
.err-sub-k { color: var(--muted); font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.err-code-k { margin-top: 18px; }
.err-sub { margin-top: 40px; }
.err-sub-k { margin-bottom: 12px; }
.err-files { max-width: 720px; }
.err-note { margin-top: 18px; color: var(--muted); font-size: .9375rem; }
.err-note code { color: var(--fg-2); font: 400 .875em var(--font-mono); overflow-wrap: anywhere; }
.err-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }

/* incident card (non-404) */
.err-card { max-width: 560px; margin-top: 36px; background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.err-card-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sub);
  color: var(--fg-2);
  font: 400 var(--step--2)/1 var(--font-mono);
  letter-spacing: .06em;
}
.err-card-flag { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--fg); letter-spacing: .1em; text-transform: uppercase; }
.err-card-flag .dot { background: var(--warn); }
.err-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; padding: 20px 22px; font: 400 var(--step--2)/1.5 var(--font-mono); letter-spacing: .04em; }
.err-card dt { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.err-card dd { color: var(--fg); overflow-wrap: anywhere; }


/* ==========================================================================
   7. UTILITIES + MOTION
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   8. PRINT — always black on white (whatever the on-screen theme), no chrome,
   expanded TOC, URLs after external prose links, nothing split awkwardly.
   ========================================================================== */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"], :root:not([data-theme]) {
    color-scheme: light;
    --bg: #fff; --bg-sub: #fff; --bg-hover: #fff; --bg-raised: #fff;
    --fg: #000; --fg-body: #111; --fg-2: #222; --muted: #444; --faint: #888;
    --rule: #ccc; --rule-strong: #999; --plus: #999;
    --accent: #b0161c; --accent-text: #b0161c; --logo-accent: #dc1f26;
    --ok: #15803d; --warn: #b45309;
    --code-inline-bg: #f2f2f2; --code-inline-fg: #000;
    --fig-bg: #fff; --fig-pad: 0px; --fig-img-rule: #ccc; --fig-img-bw: 0 0 1px 0; --fig-img-radius: 0; --img-filter: none;
    --term-bg: #f6f6f6; --term-bar: #f6f6f6; --term-border: #bbb; --term-fg: #111; --term-muted: #555;
    --term-lift: none; --shadow: none;
    --syn-kw: #0b3fb3; --syn-fn: #7a4b00; --syn-str: #a31515; --syn-num: #116644; --syn-cmt: #4d5a4d; --syn-punct: #444;
  }
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; color: #111; }
  body { font-size: 10.5pt; }

  /* chrome off */
  .skip-link, .site-header, .site-footer, .doc-rail, .doc-bar, .toc-sheet, .progress, .crumbs,
  .theme-dd, .menu-btn, .copy-btn, .term-bar, .eof, .end-cta, .end-related,
  .hero-ctas, .hero-visual, .cta-actions, .link-mono, .band-aside { display: none !important; }

  .frame { width: 100%; padding-inline: 0; border: 0; }
  .x > .frame::before, .x > .frame::after, .frame.x::before, .frame.x::after,
  .prose article > h2::before { display: none; }
  .band { border-top: 0; }
  .band > .frame, .hero-copy, .doc-main { padding-block: 0; }
  .band + .band { margin-top: 18pt; }
  .doc-grid, .js .doc-grid { display: block; }
  .doc-main, .js .doc-main, .prose { max-width: none; margin: 0; padding: 0; }
  .prose { font-size: 10.5pt; line-height: 1.5; }
  .prose article > * { max-width: 44em; }                       /* ≈ 85 characters on paper */
  .prose article > :is(p.fig, p:has(> img), .codeblock, pre, .TOC) { max-width: 100%; }

  /* TOC: shown, expanded (JS also opens the <details> on beforeprint) */
  .prose .TOC, .js .prose .TOC { display: block !important; background: #fff; break-inside: avoid; }
  .prose .TOC details > ul { display: block; }
  .prose .TOC details::details-content { display: block; content-visibility: visible; }
  .prose .TOC summary::after, .prose .TOC details[open] summary::after { content: none; }
  .prose .TOC li > a { min-height: 0; padding: 1pt 0; }

  /* URLs after external links in the prose only */
  .prose article a[href^="http"]::after { content: " (" attr(href) ")"; color: #444; font-size: .85em; overflow-wrap: anywhere; }

  /* keep things together */
  .prose article > :is(h2, h3, h4) { break-after: avoid; page-break-after: avoid; }
  .prose :is(.INFO, .TIP, .WARNING, .CAUTION), .prose pre, .codeblock, .prose p.fig, .prose p:has(> img), .oss { break-inside: avoid; page-break-inside: avoid; }
  .prose pre { white-space: pre-wrap; overflow: visible; border-radius: 0; }
  .codeblock pre { border-top: 1px solid var(--term-border); }
  .prose img { max-width: 100% !important; height: auto; }
  .prose .hlink::before { content: none; }
  .hero-title { font-size: 28pt; }
  .band-head-split { grid-template-columns: 1fr; }
  .band-head-split > .band-lede { grid-column: 1; }
  .oss { background-image: none; }
  .oss .o-all a { background: none; }
  .hero-grid, .cta { display: block; }
  .hero-kv { margin-top: 12pt; }
}