/*
 * The reset this app actually depends on: what the templates leaned on when
 * the old framework's reset came out, found by diffing every page against
 * screenshots (tasks/11-visual-redesign.md §1a), not a third-party reset
 * pasted whole.
 *
 * It is the first layer, so every other layer beats it.
 */
@layer reset {
  /*
   * The `hidden` ATTRIBUTE, which the browser's own stylesheet turns into
   * `display: none`, loses to any author rule that sets `display` on the same
   * element — a `.stack`, a `.criterion`, a `.picker`. Every panel this app
   * hides is a flex or a block, and both Turbo and the `dropdown` and
   * `filter-builder` controllers hide things by setting that attribute, so it
   * has to win.
   *
   * `!important` inverts layer order: an important declaration in the FIRST
   * layer beats important and normal declarations in every later layer and
   * every normal unlayered rule. That is why it lives here rather than in
   * utilities.css.
   */
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
    /* A component can set a border's width alone and get a solid rule in the
       default colour. */
    border: 0 solid var(--color-rule);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
  }

  body {
    margin: 0;
    line-height: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
  }

  ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--font-data);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  button, input, optgroup, select, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  button, select {
    text-transform: none;
  }

  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
    background-color: transparent;
    background-image: none;
  }

  button, [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  fieldset {
    margin: 0;
    padding: 0;
    min-inline-size: 0;
  }

  legend {
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: var(--color-ink-subtle);
  }

  dialog {
    padding: 0;
  }

  summary {
    display: list-item;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }

  img, video {
    max-inline-size: 100%;
    block-size: auto;
  }
}