/* Base element styles, scoped under .q-root so this package can be adopted route-by-route
   without bleeding into pages that haven't migrated yet (see design-system.md Step 5-7).
   Once every route is on ui-css, `.q-root` can move to <body> and these can unscope. */
.q-root {
  font-family: var(--q-font-body);
  font-size: var(--q-text-md);
  line-height: var(--q-leading-text);
  color: var(--q-text);
  background: var(--q-bg);
  -webkit-font-smoothing: antialiased;
}
/* These generic element resets are wrapped in :where(.q-root ...) so they carry ZERO
   specificity of their own (:where() never adds to the specificity count) — a plain
   `.q-root button {...}` would be (0,1,1), which beats a component modifier class like
   `.q-btn--primary` (0,1,0) regardless of source order and silently strips its
   background. That exact bug shipped once already; :where() makes it structurally
   impossible to repeat. */
:where(.q-root) *, :where(.q-root) *::before, :where(.q-root) *::after { box-sizing: border-box; }
:where(.q-root) img, :where(.q-root) picture, :where(.q-root) video, :where(.q-root) canvas, :where(.q-root) svg { display: block; max-inline-size: 100%; }
:where(.q-root) input, :where(.q-root) button, :where(.q-root) textarea, :where(.q-root) select { font: inherit; color: inherit; }
:where(.q-root) button { cursor: pointer; background: none; border: 0; }
:where(.q-root) a { color: inherit; }
:where(.q-root) h1, :where(.q-root) h2, :where(.q-root) h3, :where(.q-root) h4, :where(.q-root) .q-display {
  font-family: var(--q-font-display);
  font-weight: var(--q-weight-semibold);
  line-height: var(--q-leading-tight);
  letter-spacing: var(--q-tracking-display);
  text-wrap: balance;
}
.q-root :focus-visible {
  outline: 2px solid var(--q-focus);
  outline-offset: 2px;
}
.q-root ::selection { background: var(--q-accent-subtle); color: var(--q-text); }

/* Direction: set dir="rtl" on the scope root for Urdu. Everything else uses logical
   properties (inline-start/end, margin-inline, etc.) so this is the only rule that
   needs to know about direction at all. */
.q-root[dir="rtl"] .q-icon-flip { transform: scaleX(-1); }

.q-container { max-inline-size: var(--q-content); margin-inline: auto; padding-inline: var(--q-space-5); }
.q-prose { max-inline-size: var(--q-prose); }
.q-sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}