/* editing.help site system · the chrome's additions, on top of site-chrome.css (direction B). Every product page loads it,
   so it stands alone: no tokens.css needed. Spec: overhaul/system/system.md, "The Product menu" and "Icons".
   - The flat bar (Randall, 23 Oct): plain links; Guide carries a small ↗ (it opens in the app). The Product menu is gone.
   - The one icon family in the chrome (/system/icons.svg): 20 px grid, 1.5 stroke (the menu and close buttons).
   - The page you are on is not a link in the menus (aria-current="page", no href).
   - One contrast fix: the footer's muted text, 4.28:1 -> 4.57:1 on the release 6 footer ground #ebe8e1 (light only; the chrome's dark rule outranks it). */
.sc-nav .sx-icon, .sc-sheet .sx-icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -0.2em; color: currentColor; }
.sc-foot { --sc-bg2: #f3f2ee; --sc-muted: #65686e; } /* release 7 (Randall's "B"): the footer a hair below the page (#f8f7f4; was #ebe8e1 under #f0eee8); muted 4.57:1 on it */
.sc-row:not([href]), .sc-menu > a:not([href]) { cursor: default; }

/* ---------- R3-2: the chrome on the motion grammar (system.md § 6) ----------
   One ease ("arrive"), --sx-dur-1 for hover and press, --sx-dur-2 for opens and state changes; transforms and opacity only (plus
   colour on small things); focus rings never animate. These rules live here, not in site-chrome.css, so the older pages that share
   site-chrome.css stay exactly as they are; site-chrome.js only waits for a closing transition when one is defined (here). */
.sc-nav, .sc-sheet, .sc-foot, .sc-skip { --sc-ease: var(--sx-ease, cubic-bezier(0.2, 0.7, 0.3, 1)); --sc-d1: var(--sx-dur-1, 160ms); --sc-d2: var(--sx-dur-2, 350ms); }
.sc-menu > a, .sc-signin, .sc-row, .sc-foot ul a, .sc-foot-bar a, .sc-from {
  transition: color var(--sc-d1) var(--sc-ease), background-color var(--sc-d1) var(--sc-ease), text-decoration-color var(--sc-d1) var(--sc-ease);
}
.sc-foot ul a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; }
.sc-foot ul a:hover { text-decoration-color: currentColor; }
.sc-btn, .sc-burger { transition: background-color var(--sc-d1) var(--sc-ease), transform var(--sc-d1) var(--sc-ease); }
.sc-btn:active, .sc-burger:active { transform: translateY(1px); }   /* the press: 1 px */
/* the phone sheet: slides up 8 px and fades in (--sx-dur-2), out faster; without scripts it opens through :target, at once */
.sc-sheet { opacity: 0; transform: translateY(8px); transition: opacity var(--sc-d1) var(--sc-ease), transform var(--sc-d1) var(--sc-ease); }
.sc-sheet.is-shown, .sc-sheet:target:not(.is-open) { opacity: 1; transform: none; transition-duration: var(--sc-d2); }
/* the skip link arrives by transform, not by moving top */
.sc-skip { top: 12px; transform: translateY(calc(-100% - 24px)); transition: transform var(--sc-d2) var(--sc-ease); }
.sc-skip:focus { top: 12px; transform: none; }
/* focus rings: visible and steady (no property list above includes outline) */
@media (prefers-reduced-motion: reduce) { .sc-sheet, .sc-skip { transition: none; } }

/* ---------- Release 6: the nav lifts once the page scrolls (system.md § 5) ----------
   At rest the nav has no edge: it is the lightest surface (the app's paper) on the page's ground. Once the page scrolls, a hairline and
   a soft shadow fade in under it (opacity, --sx-dur-2), drawn by a pseudo-element so nothing per frame repaints a shadow.
   site-chrome.js reads --sc-lift here; it adds a sentinel at the top of the page and an IntersectionObserver that toggles .is-stuck
   (no scroll handler), and marks the nav .is-observed. Without scripts, or on the older pages (no chrome.css), the hairline stays. */
.sc-nav { --sc-lift: 1; --sc-lift-shadow: 0 1px 2px rgb(31 34 38 / 0.04), 0 8px 24px -12px rgb(31 34 38 / 0.16); }
@media (prefers-color-scheme: dark) { html.sc-auto:not([data-theme="light"]) .sc-nav { --sc-lift-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 28px -12px rgb(0 0 0 / 0.6); } }
html.sc-auto[data-theme="dark"] .sc-nav { --sc-lift-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 28px -12px rgb(0 0 0 / 0.6); }
.sc-nav.is-observed { border-bottom-color: transparent; }
.sc-nav.is-observed::after { content: ""; position: absolute; inset: 0; box-shadow: 0 1px 0 var(--sc-line), var(--sc-lift-shadow); opacity: 0; pointer-events: none; transition: opacity var(--sc-d2) var(--sc-ease); }
.sc-nav.is-observed.is-stuck::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sc-nav.is-observed::after { transition: none; } }
/* Release 6, dark: the chrome joins the ground order. The page is #0e0f11; the nav and the phone sheet are surfaces (the sheet colour,
   --sx-ground-2 #1f2023), as the nav is the app's paper in light; the footer sits a hair below the page, as it does in light. */
@media (prefers-color-scheme: dark) {
  html.sc-auto:not([data-theme="light"]) :is(.sc-nav, .sc-sheet) { --sc-bg: #1f2023; }
  html.sc-auto:not([data-theme="light"]) .sc-foot { --sc-bg2: #0b0c0e; }
}
html.sc-auto[data-theme="dark"] :is(.sc-nav, .sc-sheet) { --sc-bg: #1f2023; }
html.sc-auto[data-theme="dark"] .sc-foot { --sc-bg2: #0b0c0e; }

/* release 7, the ornament inventory P15 (Randall): the phone menu's section labels in sentence case as written, not tracked caps (overrides /site-chrome.css, which the retired pages also load) */
.sc-sheet h2 { text-transform: none; letter-spacing: 0; font: 600 13px/1 var(--sc-ui, var(--sx-ui)); }