/* ========================================================================== utilities.css , single-purpose helpers, HIGHEST layer so they always win ========================================================================== NO HEX VALUES IN THIS FILE. See tokens.css. Deliberately small. This is not Tailwind. If you find yourself wanting a twentieth utility, the answer is almost always a new component instead. ========================================================================== */ @layer utilities { /* --- Visibility, responsive. Replaces v1's scattered display:none. --- */ .u-hide { display: none; } @media (max-width: 639px) { .u-hide\@sm { display: none; } } @media (min-width: 640px) { .u-show\@sm { display: none; } } @media (max-width: 1023px) { .u-hide\@lg { display: none; } } @media (min-width: 1024px) { .u-show\@lg { display: none; } } /* --- Text --- */ .u-mono { font-family: var(--font-mono); } .u-dim { color: var(--color-text-dim); } .u-muted { color: var(--color-text-muted); } .u-accent { color: var(--color-accent); } .u-ok { color: var(--color-ok); } .u-warn { color: var(--color-warn); } .u-danger { color: var(--color-danger); } .u-eyebrow { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-dim); } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; } /* --- Flow --- */ .u-grow { flex: 1; min-inline-size: 0; } .u-push { margin-inline-start: auto; } /* --- Scroll lock. Applied to while an offcanvas drawer is open. position:fixed would lose scroll position; overflow:hidden plus overscroll-behavior does the job without the jump. --- */ .u-lock { overflow: hidden; overscroll-behavior: none; } }