@layer reset, tokens, base, layout, components, utilities;

/* reset.css — M63: the modern reset. M62 shipped the non-visual additions
   (text-size-adjust, reduced-motion); M63 adds the rendering-changing rules
   (img/svg display+sizing, form-control inheritance, :focus-visible). */

@layer reset {

  * { margin:0; padding:0; box-sizing:border-box; }

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

  img, picture, video, canvas, svg { display:block; max-width:100%; height:auto; }
  /* JS-rendered glyph imgs sit inline with text — they carry an inline
     vertical-align; keep those inline rather than blockifying them. */
  img[style*="vertical-align"] { display:inline-block; }
  iframe { max-width:100%; }

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

  /* Ensure [hidden] wins over any author-layer display rule (e.g. .client-dd-panel { display:flex }) */
  [hidden] { display:none !important; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap:break-word; }

  :focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

}