/* editing.help site system · tokens and base (step 4, direction D3 "the sticky canvas").
   One file of custom properties plus the base type, grid and spacing utilities every page builds on.
   Namespaced: tokens are --sx-*, classes are .sx-*. The one exception is --display, the display face switch.
   No web fonts, no third-party anything. Dark mode follows the system unless html[data-theme] says otherwise.
   Spec: overhaul/system/system.md */

/* ---------- 1 · Tokens ---------- */
:root {
  /* faces */
  --sx-face-a: "Helvetica Neue", Helvetica, Arial, sans-serif;                                  /* A: the homepage today */
  --sx-face-b: "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;         /* B: the subpages today */
  --sx-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;                                       /* body and UI, always */

  /* type: sizes, fluid between 390 and 1440 (slope = (max - min) / 1050 px) */
  --sx-d1: clamp(42px, 29.37px + 3.238vw, 76px);   /* hero */
  --sx-d2: clamp(34px, 27.31px + 1.714vw, 52px);   /* section */
  --sx-d3: clamp(22px, 20.51px + 0.381vw, 26px);   /* step, sub-section */
  --sx-d4: clamp(19px, 18.63px + 0.095vw, 20px);   /* small heading, FAQ question */
  --sx-lede: clamp(18px, 17.26px + 0.190vw, 20px);
  --sx-body: 17px;
  --sx-small: 15px;
  --sx-caption: 13px;
  --sx-eyebrow: 12px;

  /* spacing: one scale, 4 px base */
  --sx-s1: 4px; --sx-s2: 8px; --sx-s3: 12px; --sx-s4: 16px; --sx-s5: 24px;
  --sx-s6: 32px; --sx-s7: 48px; --sx-s8: 64px; --sx-s9: 96px; --sx-s10: 128px;
  --sx-section: clamp(64px, 40.23px + 6.095vw, 128px); /* section padding, 64 at 390 -> 128 at 1440 */
  --sx-head-gap: clamp(32px, 24.57px + 1.905vw, 52px); /* section head -> its content */

  /* grid: 12 columns in 1180 px of content */
  --sx-content: 1180px;
  --sx-pad: 16px;            /* page side padding: 16 on phones, 32 from 720 */
  --sx-gutter: 16px;         /* column gutter: 16 on phones, 24 from 900 */

  /* shape and motion */
  --sx-radius: 12px; --sx-radius-s: 8px;
  --sx-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* "arrive", the one ease (system.md § 6; R3-1 replaced 0.22, 1, 0.36, 1) */
  --sx-dur-1: 160ms;         /* hover and press feedback */
  --sx-dur-2: 350ms;         /* state changes: active marks, a menu or row opening */
  --sx-dur-3: 550ms;         /* arrivals: copy arriving when reached */
  --sx-fade: 360ms;          /* the sticky window's crossfade (<= 420) */
  --sx-nav-h: 64px;
}
@media (min-width: 720px) { :root { --sx-pad: 32px; } }
@media (min-width: 900px) { :root { --sx-gutter: 24px; } }

/* Colour, light: the default, and .sx-theme-light to show light locally inside a dark page */
:root, .sx-theme-light {
  /* colour: grounds */
  --sx-ground: #f8f7f4;      /* the page (release 7, Randall's "B": a touch lighter, was #f0eee8): still below the sheet, so the app's paper is the lightest surface (release 6) */
  --sx-ground-2: #fbfaf7;    /* canvas ground, cards, callouts, the nav (matches the app's paper): the lightest surface */
  --sx-ground-3: #f1f0ec;    /* hover wells, tags: one step below the page */
  /* colour: text (every one >= 4.5:1 on all three grounds; ratios in system.md) */
  --sx-ink: #16181b;         /* headings, lead text */
  --sx-soft: #3f444b;        /* body */
  --sx-muted: #65686e;       /* captions, inactive steps, meta (release 6: #6a6e74 fell below 4.5 on the new ground-3; this is 4.52) */
  /* colour: lines */
  --sx-line: #ebe9e4;        /* hairlines: decorative only */
  --sx-line-2: #d6d2c8;      /* card and panel borders: decorative only */
  --sx-ui-line: #808489;     /* a boundary that identifies a control (>= 3:1) */
  /* colour: accent */
  --sx-accent: #2f5b82;      /* links, the button, focus, the active step */
  --sx-accent-ink: #244a6b;  /* hover */
  --sx-on-accent: #ffffff;
  --sx-focus: #2f5b82;
  --sx-gold: #d4b46a;        /* decoration only: dots, underlines on ink. 2:1 on white, never carries meaning */
  --sx-ring: rgb(127 127 127 / 0.26); /* a surface's edge (release 6: one step stronger, was 0.18) */
  --sx-highlight: 0 0 #0000; /* dark only: a surface's 1 px top highlight (none in light) */
  --sx-shadow: rgb(31 34 38 / 0.16);
  --sx-mark-filter: none;    /* the dotted mark is drawn in ink */
  /* colour: the app's extension (step 8c, from 10 · App Overhaul's gaps; ratios in system.md, "App tokens") */
  --sx-ground-2b: #f7f5f2;   /* between ground-2 and ground-3: the subtext panel, the margin (as 10) */
  --sx-raised: #ffffff;      /* above the paper: menus, popovers, cards, fields (as 10) */
  --sx-hover: #f2f1ee;       /* a hovered row: ink 4% on ground-2 (10 had 7%, #ebeae8: muted on it 4.26 < 4.5) */
  --sx-press: #ebeae8;       /* a pressed row: ink 7% (10 had 11%, #e2e1df: muted 3.92). Muted never sits on it: use --sx-soft */
  --sx-selected: #f4f3f0;    /* a selected row: ink 3% (10 had 4%, #f2f1ee: now hover's value, so one step lower keeps them distinct) */
  --sx-accent-wash: #e7eaeb; /* accent 10% on ground-2 (as 10) */
  --sx-accent-wash-2: #d6dde2; /* accent 18% on ground-2 (as 10) */
  --sx-accent-line: #7693ab; /* accent 65% on ground-2, a control edge >= 3:1 (10 had 55%: 2.51) */
  --sx-inverse: #242629;     /* toast, tooltip: ink 94% (as 10) */
  --sx-on-inverse: #ffffff;
  --sx-danger: #a3312c;      /* (as 10) */
  --sx-ok: #3d7049;          /* (as 10) */
  --sx-gold-wash: #f1e9d4;   /* gold 25% on ground-2 (as 10): decoration only, never carries meaning */
  --sx-mono: ui-monospace, "SF Mono", Menlo, monospace; /* key fields, code (as 10) */
  /* elevation (release 6, system.md § 5): two layers, a contact shadow and a soft ambient one, low contrast */
  --sx-shadow-lift: 0 1px 2px rgb(31 34 38 / 0.06), 0 24px 64px -10px rgb(31 34 38 / 0.13); /* large surfaces: canvases, the window, the hero, cards */
  --sx-shadow-pop: 0 1px 2px rgb(31 34 38 / 0.06), 0 16px 40px -8px rgb(31 34 38 / 0.09); /* small surfaces: callouts, summaries, tiles, menus */
  --sx-surface: 0 0 0 1px var(--sx-ring), var(--sx-highlight), var(--sx-shadow-lift); --sx-surface-s: 0 0 0 1px var(--sx-ring), var(--sx-highlight), var(--sx-shadow-pop); /* ring + highlight + shadow: what a lifted surface wears */
  --sx-shadow-in: 0 1px 2px rgb(31 34 38 / 0.06), 0 6px 16px -4px rgb(31 34 38 / 0.08); --sx-shadow-in-x: -6px 0 14px rgb(31 34 38 / 0.07); /* inside a picture: the sheet over the shell, the panel over the page (leftward, a filter) */
  color-scheme: light;

}

/* ---------- 2 · Tokens (dark): system setting, unless the page says light; or forced dark ----------
   Rule 11 (8c): the app keeps theme names in data-theme and sets data-tone="light" for any light theme, so a light app theme
   under a dark system reads light. html[data-theme="dark"] still forces dark. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-tone="light"]) {
    --sx-ground: #0e0f11; --sx-ground-2: #1f2023; --sx-ground-3: #0a0b0c;
    --sx-ink: #e4e2dd; --sx-soft: #c3c1bb; --sx-muted: #9a9892;
    --sx-line: #2c2e33; --sx-line-2: #3a3d42; --sx-ui-line: #7b7e84;
    --sx-accent: #8fb4d8; --sx-accent-ink: #b8d0e8; --sx-on-accent: #10161d; --sx-focus: #8fb4d8;
    --sx-gold: #d4b46a; --sx-ring: rgb(255 255 255 / 0.09); --sx-shadow: rgb(0 0 0 / 0.5);
    --sx-mark-filter: invert(0.9);
    /* the app's extension (8c): as 10 except --sx-press (9%, 10 had 11%: muted 4.24) */
    --sx-ground-2b: #1a1b1d; --sx-raised: #292a2c; --sx-hover: #2d2e30; --sx-press: #313134; --sx-selected: #27282a;
    --sx-accent-wash: #2f353c; --sx-accent-wash-2: #38414b; --sx-accent-line: #5d7187;
    --sx-inverse: #44474b; --sx-on-inverse: #ffffff; --sx-danger: #e4897f; --sx-ok: #7fb08a; --sx-gold-wash: #403b30;
    --sx-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.50), 0 32px 80px -8px rgb(0 0 0 / 0.75); --sx-shadow-pop: 0 1px 2px rgb(0 0 0 / 0.45), 0 18px 44px -8px rgb(0 0 0 / 0.62);
    --sx-highlight: inset 0 1px 0 rgb(255 255 255 / 0.07); --sx-shadow-in: 0 1px 2px rgb(0 0 0 / 0.40), 0 6px 18px -4px rgb(0 0 0 / 0.45); --sx-shadow-in-x: -6px 0 16px rgb(0 0 0 / 0.40); --sx-surface: 0 0 0 1px var(--sx-ring), var(--sx-highlight), var(--sx-shadow-lift); --sx-surface-s: 0 0 0 1px var(--sx-ring), var(--sx-highlight), var(--sx-shadow-pop);
    color-scheme: dark;
  }
}
html[data-theme="dark"], .sx-theme-dark {
  --sx-ground: #0e0f11; --sx-ground-2: #1f2023; --sx-ground-3: #0a0b0c;
  --sx-ink: #e4e2dd; --sx-soft: #c3c1bb; --sx-muted: #9a9892;
  --sx-line: #2c2e33; --sx-line-2: #3a3d42; --sx-ui-line: #7b7e84;
  --sx-accent: #8fb4d8; --sx-accent-ink: #b8d0e8; --sx-on-accent: #10161d; --sx-focus: #8fb4d8;
  --sx-gold: #d4b46a; --sx-ring: rgb(255 255 255 / 0.09); --sx-shadow: rgb(0 0 0 / 0.5);
  --sx-mark-filter: invert(0.9);
  /* the app's extension (8c): as 10 except --sx-press (9%, 10 had 11%: muted 4.24) */
  --sx-ground-2b: #1a1b1d; --sx-raised: #292a2c; --sx-hover: #2d2e30; --sx-press: #313134; --sx-selected: #27282a;
  --sx-accent-wash: #2f353c; --sx-accent-wash-2: #38414b; --sx-accent-line: #5d7187;
  --sx-inverse: #44474b; --sx-on-inverse: #ffffff; --sx-danger: #e4897f; --sx-ok: #7fb08a; --sx-gold-wash: #403b30;
  --sx-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.50), 0 32px 80px -8px rgb(0 0 0 / 0.75); --sx-shadow-pop: 0 1px 2px rgb(0 0 0 / 0.45), 0 18px 44px -8px rgb(0 0 0 / 0.62);
  --sx-highlight: inset 0 1px 0 rgb(255 255 255 / 0.07); --sx-shadow-in: 0 1px 2px rgb(0 0 0 / 0.40), 0 6px 18px -4px rgb(0 0 0 / 0.45); --sx-shadow-in-x: -6px 0 16px rgb(0 0 0 / 0.40); --sx-surface: 0 0 0 1px var(--sx-ring), var(--sx-highlight), var(--sx-shadow-lift); --sx-surface-s: 0 0 0 1px var(--sx-ring), var(--sx-highlight), var(--sx-shadow-pop);
  color-scheme: dark;
}

/* ---------- 3 · The display face: one token, two candidates, tuned per face ----------
   html[data-face="a"|"b"] sets the site's face; any element may carry data-face to show the other locally. */
:root, [data-face="a"] {
  --display: var(--sx-face-a);
  --sx-d1-wt: 400; --sx-d1-ls: -0.035em; --sx-d1-lh: 1.00;
  --sx-d2-wt: 400; --sx-d2-ls: -0.026em; --sx-d2-lh: 1.06;
  --sx-d3-wt: 500; --sx-d3-ls: -0.014em; --sx-d3-lh: 1.22;
  --sx-d4-wt: 500; --sx-d4-ls: -0.006em; --sx-d4-lh: 1.32;
  --sx-d-scale: 1;
}
[data-face="b"] {
  --display: var(--sx-face-b);
  --sx-d1-wt: 400; --sx-d1-ls: -0.016em; --sx-d1-lh: 1.04;
  --sx-d2-wt: 400; --sx-d2-ls: -0.012em; --sx-d2-lh: 1.10;
  --sx-d3-wt: 400; --sx-d3-ls: -0.004em; --sx-d3-lh: 1.24;
  --sx-d4-wt: 400; --sx-d4-ls: 0em;      --sx-d4-lh: 1.34;
  --sx-d-scale: 1.03; /* Iowan's lowercase is a touch smaller than Helvetica Neue's at the same px */
}

/* ---------- 4 · Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sx-nav-h) + 16px); } /* focused and anchored targets clear the sticky nav (QA 6a, D6) */
body {
  margin: 0; background: var(--sx-ground); color: var(--sx-ink);
  font: var(--sx-body)/1.6 var(--sx-ui); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { max-width: 100%; }
a { color: var(--sx-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--sx-dur-1) var(--sx-ease), text-decoration-color var(--sx-dur-1) var(--sx-ease); }
a:hover { color: var(--sx-accent-ink); }
:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 3px; border-radius: 4px; }
.sx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 5 · Type ---------- */
.sx-d1, .sx-d2, .sx-d3, .sx-d4 { margin: 0; font-family: var(--display); color: var(--sx-ink); font-kerning: normal; text-wrap: balance; }
.sx-d1 { font-size: calc(var(--sx-d1) * var(--sx-d-scale)); font-weight: var(--sx-d1-wt); letter-spacing: var(--sx-d1-ls); line-height: var(--sx-d1-lh); }
.sx-d2 { font-size: calc(var(--sx-d2) * var(--sx-d-scale)); font-weight: var(--sx-d2-wt); letter-spacing: var(--sx-d2-ls); line-height: var(--sx-d2-lh); }
.sx-d3 { font-size: calc(var(--sx-d3) * var(--sx-d-scale)); font-weight: var(--sx-d3-wt); letter-spacing: var(--sx-d3-ls); line-height: var(--sx-d3-lh); }
.sx-d4 { font-size: calc(var(--sx-d4) * var(--sx-d-scale)); font-weight: var(--sx-d4-wt); letter-spacing: var(--sx-d4-ls); line-height: var(--sx-d4-lh); }
.sx-d1 .sx-quiet, .sx-d2 .sx-quiet { color: var(--sx-muted); } /* the second line of a two-line headline */
.sx-lede { margin: 0; max-width: 34em; font-size: var(--sx-lede); line-height: 1.5; color: var(--sx-soft); text-wrap: pretty; }
.sx-lede.sx-strong, .sx-lede strong { color: var(--sx-ink); font-weight: 600; }
.sx-body { font-size: var(--sx-body); line-height: 1.6; color: var(--sx-soft); text-wrap: pretty; }
.sx-small { font-size: var(--sx-small); line-height: 1.5; color: var(--sx-soft); text-wrap: pretty; }
.sx-caption { margin: 0; font-size: var(--sx-caption); line-height: 1.45; color: var(--sx-muted); text-wrap: pretty; }
.sx-eyebrow { margin: 0; font: 600 var(--sx-eyebrow)/1 var(--sx-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sx-muted); }
.sx-num { font: 600 13px/1 var(--sx-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--sx-accent); }
p, li, dd, figcaption, summary { text-wrap: pretty; }
h1, h2, h3, h4, .sx-center { text-wrap: balance; }

/* ---------- 6 · Grid and layout ---------- */
.sx-wrap { width: 100%; max-width: calc(var(--sx-content) + 2 * var(--sx-pad)); margin-inline: auto; padding-inline: var(--sx-pad); }
.sx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sx-gutter); }
.sx-grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) {
  .sx-span-3 { grid-column: span 3; } .sx-span-4 { grid-column: span 4; } .sx-span-5 { grid-column: span 5; }
  .sx-span-6 { grid-column: span 6; } .sx-span-7 { grid-column: span 7; } .sx-span-8 { grid-column: span 8; }
  .sx-span-9 { grid-column: span 9; } .sx-span-12 { grid-column: 1 / -1; }
}
.sx-section { padding-block: var(--sx-section); }
.sx-section + .sx-section { padding-top: 0; } /* one section gap between beats, never two */
.sx-measure { max-width: 34em; }
.sx-stack > * + * { margin-top: var(--sx-s4); }

/* The section head: headline left, one sentence right, bottom-aligned (from 900); stacked on phones. */
.sx-head { display: grid; gap: var(--sx-s5) var(--sx-gutter); margin-bottom: var(--sx-head-gap); }
.sx-head > :first-child { min-width: 0; }
.sx-head .sx-lede + .sx-lede { margin-top: var(--sx-s3); }
@media (min-width: 900px) {
  .sx-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .sx-head > :first-child { grid-column: 1 / span 6; }
  .sx-head > :nth-child(2) { grid-column: 7 / -1; }
}

/* ---------- 7 · Buttons and links ---------- */
/* The filled button is ink on the page's ground: black with white text in the light scheme, white with black text in the dark one, the same inversion
   as a selected row. It was the accent fill until 2026-11-01 (Randall: the pale blue in the dark scheme "drives me a little bit insane"); the accent stays
   for links, focus and the active step. Hover lightens it a step towards the ground; the press is the 1 px dip. */
.sx-button { display: inline-flex; align-items: center; gap: var(--sx-s2); min-height: 44px; padding: 0 18px; border-radius: var(--sx-radius-s); background: var(--sx-ink); color: var(--sx-ground); font: 600 15px/1.2 var(--sx-ui); text-decoration: none; transition: background-color var(--sx-dur-1) var(--sx-ease), transform var(--sx-dur-1) var(--sx-ease); }
.sx-button:active { transform: translateY(1px); } /* the press: 1 px, --sx-dur-1 (system.md § 6) */
.sx-button:hover { background: color-mix(in srgb, var(--sx-ink) 84%, var(--sx-ground)); color: var(--sx-ground); }
.sx-button.sx-ghost { background: transparent; color: var(--sx-ink); box-shadow: inset 0 0 0 1px var(--sx-ui-line); }
.sx-button.sx-ghost:hover { background: var(--sx-ground-3); }
.sx-more { font: 500 15px/1.4 var(--sx-ui); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; }
.sx-more:hover { text-decoration-color: currentColor; } /* the underline arrives by colour, never by layout */
.sx-more .sx-arrow, .sx-button .sx-arrow { display: inline-block; transition: transform var(--sx-dur-1) var(--sx-ease); }
.sx-more:hover .sx-arrow, .sx-button:hover .sx-arrow { transform: translateX(2px); }
.sx-practical { margin: var(--sx-s3) 0 0; font-size: var(--sx-caption); color: var(--sx-muted); }

/* ---------- 8 · Icons (overhaul/system/icons.svg): 20 px grid, 1.5 px stroke, round caps ---------- */
.sx-icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -0.2em; color: currentColor; }
.sx-icon-s { width: 16px; height: 16px; }

/* The arrival rule (system.md § 6): what is revealed arrives once, opacity and a 6 px rise, --sx-dur-3, --sx-ease */
@keyframes sx-arrive { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}