@layer reset, tokens, base, shell, components, charts, routes, motion, responsive;

/* Native hidden state must outrank every authored component layer. */
[hidden] { display: none; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 20rem; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  a { color: inherit; }
}

@layer base {
  html, body { min-height: 100%; }
  body {
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body.no-scroll { overflow: hidden; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button { color: inherit; }
  a { text-underline-offset: 0.18em; }
  strong, b { font-weight: 680; }
  .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-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: calc(var(--z-modal) + 1);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-control);
    background: var(--surface-strong);
    color: var(--text-on-strong);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  ::selection { background: var(--action); color: #fff; }
}