/* A small reset, after Campfire's _reset.css. It sits in a layer, so every app rule wins
   over it. Every page gets the first part; the office pages were drawn on a blank slate
   (no default margins, lists without markers, headings at body size), so the second
   part keeps that slate for them only. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
  body { margin: 0; }
  p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
  fieldset { min-width: 0; }
  textarea { resize: vertical; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }

  :where(body.staff) {
    line-height: 1.5;

    & *, & *::before, & *::after { border: 0 solid; margin: 0; padding: 0; }
    & ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border: 0 solid; border-radius: 0; padding: 0; margin: 0 4px 0 0; }

    & :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
    & a { color: inherit; text-decoration: inherit; }
    & :is(b, strong) { font-weight: bolder; }
    & small { font-size: 80%; }
    & hr { height: 0; color: inherit; border-top-width: 1px; }
    & :is(ol, ul, menu) { list-style: none; }
    & summary { display: list-item; }
    & table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
    & :is(code, kbd, samp, pre) { font-family: var(--mono, ui-monospace, monospace); font-size: 1em; }

    & :is(img, svg, video, canvas, iframe) { display: block; vertical-align: middle; }
    & :is(img, video) { max-width: 100%; height: auto; }

    & :is(input, button, textarea, select) { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }
    & ::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
    & ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
    & ::-webkit-datetime-edit { display: inline-flex; padding-block: 0; }
    & ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
    & ::-webkit-datetime-edit-year-field { padding-block: 0; }
    & ::-webkit-datetime-edit-month-field { padding-block: 0; }
    & ::-webkit-datetime-edit-day-field { padding-block: 0; }
    & ::-webkit-datetime-edit-hour-field { padding-block: 0; }
    & ::-webkit-datetime-edit-minute-field { padding-block: 0; }
    & ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
  }
}