/* Reset, typography scale, links, focus, sr-only, skip link — spec §3.2, §9 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: var(--t-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover, a.row:hover, a.tile:hover, a.tab:hover, a.nav-link:hover, a.tabbar-item:hover, a.brand:hover { text-decoration: none; }
::placeholder { color: var(--text-3); opacity: 1; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

h1, .h1 { font: var(--t-h1); color: var(--text); }
h2, .h2 { font: var(--t-h2); color: var(--text); }
h3, .h3, .eyebrow { font: var(--t-h3); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { box-shadow: none; outline: none; }
.display { font: var(--t-display); font-variant-numeric: tabular-nums; }
.body-strong, strong, b { font-weight: 700; }
.sm { font: var(--t-sm); }
.caption { font: var(--t-caption); }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); }
.danger-text { color: var(--danger-600); } .warning-text { color: var(--warning-700); } .success-text { color: var(--success-700); } .review-text { color: var(--review-700); }
.tabular { font-variant-numeric: tabular-nums; }
.prose { max-width: 68ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mono { font-family: var(--font-mono); }

.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; }
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: 10px 14px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); font: var(--t-body-strong); box-shadow: var(--sh-md);
}
.skip:focus { top: var(--s2); }

/* Icons: stroke icons from the symbol sheet in index.html */
.i { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-16 { width: 16px; height: 16px; } .i-20 { width: 20px; height: 20px; } .i-24 { width: 24px; height: 24px; } .i-14 { width: 14px; height: 14px; } .i-48 { width: 48px; height: 48px; }

/* Stacks and rows: spacing comes from gap, never inline margins */
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.row-nowrap { display: flex; align-items: center; gap: var(--s2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--s1); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); }
.mt-2 { margin-top: var(--s2); } .mt-4 { margin-top: var(--s4); }
.hidden { display: none !important; }
hr.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }