/**
  * CSS Reset
  *
  * References:
  * - Josh's Custom CSS Reset
  *   https://www.joshwcomeau.com/css/custom-css-reset/
  * - David Bushell's CSS Reset
  *   https://git.dbushell.com/dbushell/patchwork/src/branch/main/static/css/base/reset.css
  * - font-size-adjust
  *   https://matklad.github.io/2025/07/16/font-size-adjust.html
  * - View Transition API
  *   https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
**/

*,
*::before,
*::after {
  box-sizing: border-box;
  font-size-adjust: ex-height 0.53;
}

:where(*:not(dialog)) {
  margin: 0;
}

:where(html) {
  color-scheme: light dark;
  hanging-punctuation: first allow-end last;
  interpolate-size: allow-keywords;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

:where(html.translated-rtl) {
  direction: rtl;
}

@media (prefers-reduced-motion: reduce) {
  :where(html) {
    scroll-behavior: auto;
  }
}

:where(body) {
  min-block-size: 100svb;
  min-inline-size: 300px;
}

:where(canvas, img, picture, svg, video) {
  block-size: auto;
  border: none;
  display: block;
  max-inline-size: 100%;
}

:where(button, input, progress, select, textarea) {
  /* appearance: none; */
  /* background: transparent; */
  /* border: none; */
  /* color: inherit; */
  font: inherit;
  hanging-punctuation: none;
  line-height: inherit;
  text-align: start;
  touch-action: manipulation;
}

:where(button) {
  cursor: pointer;
  user-select: none;
}

:where(textarea) {
  resize: vertical;
}

:where(textarea:not([rows])) {
  field-sizing: content;
}

:where(fieldset, iframe) {
  border: none;
}

:where(p, li, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

:where(abbr[title]) {
  border: none;
  text-decoration: none;
}

:where(cite) {
  font-style: inherit;
}

:where(small) {
  font-size: inherit;
}

:where(summary) {
  cursor: pointer;
}

:where(dialog, [popover]) {
  background: transparent;
  border: none;
  color: inherit;
  margin: auto;
  max-block-size: none;
  max-inline-size: none;
  position: fixed;
}

:where([popover]) {
  inset: auto;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  display: none;
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important;
}

#root,
#__next {
  isolation: isolate;
}