/* Base layer: reset, document defaults, typography helpers, scrollbars, focus.
   Mirrors the prototype <style> block (svg defaults, links, tables) plus brandbook focus ring. */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

/* Icons: stroke glyphs drawn in currentColor (prototype rule). */
svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

table { border-collapse: collapse; }
button, nav a { white-space: nowrap; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, p { margin: 0; }

/* Focus: brandbook ring for keyboard users; mouse clicks stay clean. */
:focus { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { box-shadow: var(--ring); }

/* Typography helpers */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-size: var(--fs-meta); text-align: right; font-variant-numeric: tabular-nums; }
.t-primary { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-disabled { color: var(--text-disabled); }
.t-accent { color: var(--accent-text); }
.t-safe { color: var(--st-safe); }
.t-watch { color: var(--st-watch); }
.t-order { color: var(--st-order); }
.t-out { color: var(--st-out); }
.t-transit { color: var(--st-transit); }
.t-error { color: var(--st-error); }
.t-meta { color: var(--text-secondary); font-size: var(--fs-meta); }
.t-small { font-size: var(--fs-small); }
.t-caption { font-size: var(--fs-caption); }
.nowrap { white-space: nowrap; }
.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;
}

.kbd {
  padding: 1px 6px; border: 1px solid var(--border-default); border-radius: var(--r-xs);
  background: var(--bg-raised); color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-micro);
}
.code-chip {
  padding: 2px 7px; border-radius: var(--r-xs); background: var(--bg-raised);
  color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-small);
}

/* Scrollbars (prototype .sp-tabs / .sp-scroll / .sp-scroll-v) */
.sp-tabs { scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { height: 0; }
.sp-scroll::-webkit-scrollbar { height: 10px; }
.sp-scroll-v::-webkit-scrollbar { width: 10px; height: 0; }
.sp-scroll::-webkit-scrollbar-track, .sp-scroll-v::-webkit-scrollbar-track { background: transparent; }
.sp-scroll::-webkit-scrollbar-thumb, .sp-scroll-v::-webkit-scrollbar-thumb {
  background: var(--scrollbar); border-radius: var(--r-full); border: 3px solid var(--bg-card);
}

/* Icon sizes and stroke weights (icons never carry inline styles). */
.ic-10 { width: 10px; height: 10px; }
.ic-11 { width: 11px; height: 11px; }
.ic-12 { width: 12px; height: 12px; }
.ic-13 { width: 13px; height: 13px; }
.ic-14 { width: 14px; height: 14px; }
.ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-22 { width: 22px; height: 22px; }
.ic-26 { width: 26px; height: 26px; }
.ic-40 { width: 40px; height: 40px; }
.ic-72 { width: 72px; height: 72px; }
.sw-11 { stroke-width: 1.1; }
.sw-2 { stroke-width: 2; }
.sw-24 { stroke-width: 2.4; }
.sw-26 { stroke-width: 2.6; }
.sw-3 { stroke-width: 3; }
.sp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Cards and section titles shared by every screen */
.card {
  border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-card);
}
.card--pad { padding: 20px 22px; }
.card--pad-sm { padding: 14px 16px; }
.section-title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
.sub-title { font-size: var(--fs-body); font-weight: 600; }
.divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }
.dash { color: var(--text-tertiary); }