/* Cascade layers, in ascending priority. Declared once here (first-loaded file) so later files'
   @layer blocks slot into this order regardless of source order: components beats base beats reset. */
@layer reset, base, components, utilities;

@layer reset {

  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  html {
    color-scheme: light;
    hanging-punctuation: first allow-end last;
  }

  /* Set core body defaults */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

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

  /* p {
    text-wrap: pretty;
  } */

  /* Make images easier to work with */
  img,
  picture,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  svg:not([fill]) {
    fill: currentColor;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Collapse table borders by default */
  table {
    border-collapse: collapse;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  :disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }

  [hidden] {
    display: none !important;
  }
}