/* WONS BI base: fonts, reset, type, focus, browser surfaces, motion preferences. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* metric-adjusted fallback so the swap does not shift layout */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: var(--ease); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.5 var(--font-body);
  font-optical-sizing: auto;
  accent-color: var(--accent);
  caret-color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
  -webkit-font-smoothing: antialiased;
}
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-control); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.16; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
p { text-wrap: pretty; max-width: 68ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--tile-soft); padding: 0.1em 0.4em; border-radius: 8px; }
.num, table td, table th, .stat, .kpi-value { font-variant-numeric: tabular-nums lining-nums; }
/* The one !important outside the reduced-motion block: [hidden] must beat any component's display. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-text) 28%, transparent);
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-3) var(--s-5); border-radius: var(--r-control); background: var(--action); color: var(--action-ink); text-decoration: none; transition: top var(--t-fast) var(--ease); }
.skip:focus { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}