/* Tone Lab base: the reset, page type, focus and a few shared utilities. See design/guidelines.md (Type, Controls).
   Load after tokens.css. The body is set at the app's 13 px; site.css raises it to 15 px under body.site. */

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { font-synthesis: none; }
body { min-height: 100vh; background: var(--bg); color: var(--text); font: 13px/1.3 var(--font-ui); -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
[hidden] { display: none !important; }

/* Everything you can tab to gets a 2 px ink outline, 2 px out. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- utilities ---------- */
.spacer { flex: 1; }
.ic { width: 14px; height: 14px; fill: currentColor; flex: none; }
.tl { color: var(--muted); font: 500 11px/1.15 var(--font-ui); white-space: nowrap; }
.vdiv { align-self: stretch; width: 1px; margin: 4px; background: var(--line); }
.nw { white-space: nowrap; }
/* Read by screen readers, never drawn. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }