/* ==========================================================================
   UTILITIES
   --------------------------------------------------------------------------
   Loaded LAST, after every page stylesheet, and that ordering is the whole
   point. A utility at the same specificity as a component rule loses to it when
   it is declared first: `.u-bg-inverse` was out-ordered by `.comp` in
   studio.css, which put the reverse logo specimen on the wrong ground and
   failed contrast in dark mode. Utilities exist to win, so they load where
   winning is guaranteed.

   They exist at all because the content security policy is `style-src 'self'`,
   which blocks the style ATTRIBUTE as well as the style ELEMENT: every
   `style="max-width:44rem"` on this site was being dropped in production while
   every local audit passed, because the audit server was not sending the site's
   own headers. It sends them now, and these are the replacements. Nothing is
   added here without a use, and a value that is not on the spacing or type
   scale does not get a utility.
   ========================================================================== */
.u-mw-23 { max-width: 23rem; }
.u-mw-34 { max-width: 34rem; }
.u-mw-38 { max-width: 38rem; }
.u-mw-40 { max-width: 40rem; }
.u-mw-44 { max-width: 44rem; }
.u-mw-46 { max-width: 46rem; }
.u-mw-52 { max-width: 52rem; }

.u-m-0 { margin: 0; }
.u-mt-hair { margin-top: -1px; }
.u-mt-1 { margin-top: .35rem; }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mb-1 { margin-bottom: .4rem; }
.u-mb-2 { margin-bottom: .5rem; }
.u-mb-3 { margin-bottom: .9rem; }
.u-pb-8-6 { padding-block: var(--s-8) var(--s-6); }
.u-pb-8-7 { padding-block: var(--s-8) var(--s-7); }
.u-pb-9 { padding-block: var(--s-9); }

.u-items-center { align-items: center; }
.u-items-baseline { align-items: baseline; }
.u-fw-400 { font-weight: 400; }
.u-fw-600 { font-weight: 600; }
.u-fs-1 { font-size: var(--step-1); }
.u-fs-2 { font-size: var(--step-2); }
.u-no-counter { counter-reset: none; }

.u-accent { color: var(--accent); }
.u-ink-2 { color: var(--ink-2); }
.u-inverse-ink-2 { color: var(--inverse-ink-2); }
.u-bg-accent { background: var(--accent); }
.u-bg-inverse { background: var(--inverse-bg); }
.u-border-inverse { border-color: var(--inverse-rule); }
/* `.u-btn-on-inverse` removed: `.section--inverse` now remaps the palette, so a
   ghost button inside a dark band is correct without a patch class. It was
   applied to five buttons and missed on three, which is what a patch class
   does. See the comment on `.section--inverse` in main.css. */

.u-cols-3rem { grid-template-columns: 3rem 1fr; }
.u-numbered { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-4); align-items: start; }
.u-row { display: flex; align-items: center; gap: var(--s-4); padding-block: .28rem; }

/* Mark specimens on the design system page, at the sizes that page shows. */
.u-mark-3 { width: 3rem; color: var(--ink); }
.u-mark-35 { width: 3.5rem; color: var(--ink); }
.u-mark-45-faint { width: 4.5rem; color: var(--ink-3); }
.u-mark-3-flag { width: 3rem; color: var(--flag); }
.u-mark-3-wide { width: 3rem; transform: scaleX(1.6); color: var(--ink); }
.u-mark-3-tilt { width: 3rem; transform: rotate(-12deg); color: var(--ink); }

/* Kit index swatches. The value is the kit's own token, set by the class. */
.u-sw-ink { --s: var(--k-ink); }
.u-sw-accent { --s: var(--k-accent); }
.u-sw-panel { --s: var(--k-panel); }
.u-sw-rule { --s: var(--k-rule-strong); }

/* Utilities used by markup the tools build at runtime. Same reason as above:
   an innerHTML string carrying style="..." is parsed markup, and the policy
   blocks it exactly like a style attribute written by hand. */
.u-mw-36 { max-width: 36rem; }
.u-border-accent { border-color: var(--accent); }
.u-border-flag { border-color: var(--flag); }
.u-col-full { grid-column: 1 / -1; }
.u-fs--1 { font-size: var(--step--1); }
.u-ink { color: var(--ink); }
.u-dim { opacity: .85; }
.u-mt-1b { margin: .35rem 0 0; }
.u-mt-2b { margin-top: .5rem; }
.u-mt-2c { margin: .5rem 0 0; }
.u-mt-4 { margin-top: var(--s-4); }
.u-choices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.u-step-rule { border-left: 2px solid var(--accent); padding-left: var(--s-4); }
.u-pre { white-space: pre-wrap; overflow-x: auto; max-height: 24rem; overflow-y: auto; }
/* A link that IS its own line is not exempt from WCAG 2.2 target size. Third
   time this rule has been paid for on this site: list links at 0.4.0, footer
   links at 0.4.0, and these. */
/* `.kit-line` retired in 0.32.0: the eight kits on the two express product
   pages are rendered cards now, not a list of names. */