/* ============================================================================
   HINT IT — v2 design system : scoped RESET
   ----------------------------------------------------------------------------
   A modern reset (Andy-Bell-style) scoped entirely under `.hint-v2`. It never
   touches bare `*` / `html` / `body`, so it cannot leak onto legacy pages — and
   while the legacy global CSS is still loaded (pre-root-gut), `.hint-v2`'s class
   specificity (0,1,0) beats legacy's bare-element / `*` rules (0,0,0)/(0,0,1),
   so v2 subtrees get clean defaults regardless. Uses `:where()` for element
   rules to keep specificity low for easy component overrides.
   ============================================================================ */

.hint-v2 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

.hint-v2 *,
.hint-v2 *::before,
.hint-v2 *::after {
  box-sizing: border-box;
}

.hint-v2 :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

.hint-v2 :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.hint-v2 :where(p) {
  text-wrap: pretty;
}

.hint-v2 :where(ul, ol) {
  margin: 0;
  padding: 0;
}

.hint-v2 :where(ul[role="list"], ol[role="list"]) {
  list-style: none;
}

.hint-v2 :where(a) {
  color: inherit;
  text-decoration: none;
}

.hint-v2 :where(img, picture, svg, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.hint-v2 :where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

.hint-v2 :where(button) {
  background: none;
  border: none;
  cursor: pointer;
}

.hint-v2 :where(:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Accessibility: honor reduced-motion. The single sanctioned !important in v2 —
   an a11y override that must defeat any animation/transition. */
@media (prefers-reduced-motion: reduce) {
  .hint-v2 *,
  .hint-v2 *::before,
  .hint-v2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}