/* Reset + base layout + typography */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
small { color: var(--text-2); }

::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 26px; height: 26px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100%; display: flex; flex-direction: column; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.center { display: grid; place-items: center; }

/* View Transition niceties */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}