/* Layer order is declared once, here, because reset.css loads first.
   Every stylesheet wraps its rules in one of these layers, which means
   load order decides the cascade instead of selector specificity. */
@layer reset, tokens, layout, components, animations;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100svh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
    /* The keypad is tapped fast and repeatedly. Without this, a quick second tap
       registers as a double-click and selects the key's label. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  button:disabled {
    cursor: not-allowed;
  }

  h1,
  h2,
  h3,
  h4 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }

  /* Visible focus everywhere, but only for keyboard traversal.

     Two rings, not one: bone reads against every surface in this palette, and
     the dark inner ring separates it from a lit key face or a player-coloured
     bezel, which a single light ring would disappear into. */
  :focus-visible {
    outline: 2px solid var(--bone);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ground);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  [hidden] {
    display: none !important;
  }

  /* Accessible-only text: announced by screen readers, invisible on screen. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}