/* STANDARD RESET ------------------------------------------------------------

   Ideas taken from

   Ben Frain
   https://github.com/benfrain/app-reset

   Normalize.css
   https://github.com/necolas/normalize.css

   Sanitize.css
   https://github.com/csstools/sanitize.css

   Implements `@namespace`
   https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace
   https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

*/

@namespace svg url(http://www.w3.org/2000/svg);



/* -- UNSET EVERYTHING -------------------------------------------------------
      Start by unsetting all HTML styles for browsers that support the 'all'
      declaration.
   ------------------------------------------------------------------------- */

html {
  all: initial;
}

*:not(svg|*), *::before, *::after {
  all: unset;
}



/* -- DEFINE DEFAULTS --------------------------------------------------------
      CSS custom properties used within this file.
   ------------------------------------------------------------------------- */

html {
  --env--reset--line-height: 1.5;
  --env--reset--scroll-width: 6px;

  --env--reset--background-color: silver;
  --env--reset--foreground-color: black;
}

input, select, textarea {
  --env--reset--input-width: 10em;
}



/* -- IMPOSE DEFAULT LINE HEIGHT ---------------------------------------------
      Line height controls everything in HTML. Setting this greater than 1,
      when inherited, ensures inline elements line-up vertically.

      Prevent adjustments of font size after orientation changes in iOS
      and IE on Windows Phone.

   ------------------------------------------------------------------------- */

html {
  line-height: var(--env--reset--line-height);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}



/* -- DEFAULT TO BORDER BOX --------------------------------------------------
      Prefer 'box-sizing: border-box'.

      https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

   ------------------------------------------------------------------------- */

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}



/* -- IMPROVE FONT RENDERING -------------------------------------------------
      Improved font rendering, especially with iOS.
   ------------------------------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  text-rendering: geometricPrecision;
}



/* -- STANDARDIZE TAB WIDTH --------------------------------------------------
      Use a 2-space tab width in all browsers
   ------------------------------------------------------------------------- */

html {
  -moz-tab-size: 2;
  tab-size: 2;
}



/* -- MAKE BODY FULL HEIGHT --------------------------------------------------
      Body should always be full height of window. Scrollbars may be added by
      child elements.

      https://stackoverflow.com/a/38908284

   ------------------------------------------------------------------------- */

html {
  height: 100%;
}

body {
  block-size: -moz-available;
  block-size: -webkit-fill-available;
  block-size: stretch;
  min-height: 100%;
  height: 100%;
  margin: 0;
  overflow: auto;
}



/* -- ISOLATE SCROLLING ------------------------------------------------------
      Prevent the "bounce" (rubber-band effect) when scrolling (Chrome and
      Firefox only). Prevent unintentional scrolling of parent elements when
      scrolling child elements.

      https://css-tricks.com/almanac/properties/o/overscroll-behavior/
   ------------------------------------------------------------------------- */

* {
  overscroll-behavior: none;
}


/* -- REMOVE SCROLLBARS ------------------------------------------------------
      Remove scrollbars and the resize handle in most browsers, including for
      <textarea>. This prevents a reflow of page content when overflow is set
      to `auto` and the window is resized to a small enough size. Scrolling by
      mouse wheel will continue to function.

      https://webkit.org/blog/363/styling-scrollbars/
      https://www.filamentgroup.com/lab/scrollbars/
   ------------------------------------------------------------------------- */

* {
  scrollbar-width: none;
}

::-webkit-scrollbar,
::-webkit-resizer {
  display: none;
}

/*    Remove the default vertical scrollbar on <textarea> in IE 10+. */

textarea {
  overflow: auto;
}



/* -- PREVENT TOO NARROW DISPLAY ---------------------------------------------
      Layouts can not be maintained below a certain width. This should match
      the smallest common mobile device display width. If the width of the
      display is less, you will want to enable horizontal scrolling by placing
      the layout inside a <div> with size and overflow set appropriately.
   ------------------------------------------------------------------------- */
/*
body {
  min-width: 600px;
}
*/
/*
@media screen and (max-width: 600px) {
  body {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
*/



/* -- DEFAULT TEXT WRAPPING --------------------------------------------------
      Set default text wrapping behaviour to prevent overflow.
   ------------------------------------------------------------------------- */

html {
  word-break: normal; /* Break between words that fit. */
  overflow-wrap: anywhere; /* Break within long words that do not fit. */
  white-space: normal; /* Collapse all white space in code. */
  hyphens: manual; /* Break words only at `&shy;` characters. */
}

@media (max-width: 10em) {
  html {
    word-break: break-all;
  }
}

*, *::before, *::after {
  text-overflow: clip;
}

/*    Mozilla overrides inheritance on these elements: */

input[type="file" i] {
  white-space: normal !important;
}



/* -- DISABLE USER SELECTION -------------------------------------------------
      Disable text selection, to be added-back as needed. This prevents
      long presses when using iOS from displaying the user interaction UI.

      https://stackoverflow.com/a/4407335

      Set cursor to reflect user selection being disabled.

      Specifically switch user-select 'on' for inputs. This also works around
      a bug in Safari:

      https://bugs.webkit.org/show_bug.cgi?id=82692

   ------------------------------------------------------------------------- */

html {
  cursor: default;
}

*, *::before, *::after {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: inherit;
}

::-moz-selection, ::selection {
  all: initial;
}

[type="email" i], [type="number" i], [type="password" i], [type="search" i],
[type="tel" i], [type="text" i], [type="url" i], textarea, [contenteditable] {
  user-select: text;
  user-select: contain;
  cursor: text;
}

/*    Mozilla overrides the * selector. */

input[type="file" i] {
  user-select: auto;
}



/* -- REMOVE FOCUS -----------------------------------------------------------
      No outlines or borders on focus, to be added-back as needed.
   ------------------------------------------------------------------------- */

:focus {
  outline: none;
}

/*    Mozilla has its own focus-inner for buttons, which by default doesn't
      take into account padding. This removes both. */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/*    Remove the default "focus ring" that Mozilla places on <select> items
      (http://stackoverflow.com/a/18853002/1147859). */

:-moz-focusring {
  color: transparent;
  text-shadow: none;
}

/*    Remove the additional :invalid styles in Firefox. */

:-moz-ui-invalid {
  box-shadow: none;
}

/*    Remove the grey highlight on links in iOS. */

html {
  -webkit-tap-highlight-color: transparent;
}



/* -- REMOVE LINK DECORATIONS ------------------------------------------------
      Remove the underline, and the gray background on active links in IE 10.
   ------------------------------------------------------------------------- */

a {
  background-color: transparent;
  text-decoration: none;
}



/* -- REMOVE BROWSER CONTROLS ------------------------------------------------
      Remove browser controls to allow for custom controls to be added.
   ------------------------------------------------------------------------- */

/*    Remove arrow for <select> elements in IE */

::-ms-expand {
  display: none;
}

/*    Remove arrow for <summary> in Chrome, Safari */

::-webkit-details-marker {
  display: none;
}

/*    Remove arrow for <summary> in Firefox */

summary {
  display: block;
}

/*    Remove spin buttons within <input type="number"> */

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/*    Remove clear buttons on <input> elements */

::-webkit-clear-button {
  display: none;
}

::-ms-clear {
  display: none;
}

/*    Remove Safari text input decorations
      (https://stackoverflow.com/questions/38663578/how-to-hide-autofill-safari-icon-in-input-field) */

::-webkit-textfield-decoration-container {} /* This selector may affect placeholder text */

::-webkit-contacts-auto-fill-button,
::-webkit-credentials-auto-fill-button,
::-webkit-caps-lock-indicator {
  display: none;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}

/*    Remove controls on search fields
      (https://blog.maximerouiller.com/post/remove-the-x-from-internet-explorer-and-chrome-input-type-search/) */

::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
  display: none;
}

::-ms-reveal {
  display: none;
}

/*    Remove default text styles applied to placeholders */

:-moz-placeholder {
  color: inherit;
  opacity: inherit;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: inherit;
}

::-moz-placeholder {
  color: inherit;
  opacity: inherit;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: inherit;
}

::placeholder {
  color: inherit;
  opacity: inherit;
}

/*    Remove the button from <input type="file">. This causes the file upload
      UI to display ONLY the selected file name. Apply style to a label to
      obtain an upload button. */

::-webkit-file-upload-button {
  all: inherit;
  visibility: hidden;
  height: 0;
  width: 0;
}

::file-selector-button {
  all: inherit;
  visibility: hidden;
  height: 0;
  width: 0;
}

/*    Date and time <input> controls are problematic. Following enforces a
      policy of not using these controls. Prefer plain text inputs instead. */

input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  display: none;
}



/* -- CORRECT BROWSER ERRORS -------------------------------------------------
      There are bugs in browsers, bad decisions made by the people who make
      browsers, and some people run old browsers.
   ------------------------------------------------------------------------- */

/*    Remove the tapping delay in IE 10. */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

/*    Remove the inheritance of text transform. */

button, select {
  text-transform: none;
}

/*    Add the correct display in iOS 4-7. */

audio:not([controls]) {
  display: none;
  height: 0;
}

/*    Ensure hidden elements are not rendered (the use of 'all' may have caused
      this to change). */

base, datalist, head, link, meta, param, script, slot, style,
template, title, noembed, [hidden] {
  display: none;
}

/*    Prevent <sub> and <sup> elements from affecting line height. */

sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/*    Ensure font family and weight are applied everywhere. */

*, *::before, *::after {
  font-family: inherit;
  font-weight: inherit;
}



/* -- CORRECT IMAGE RENDERING ------------------------------------------------
      Prevent large images from breaking out of their conatining element by
      defaulting to `max-width: 100%`.

      Remove the border on images inside links in IE 10 (`border-style: none`).

      Placing <img> and <svg> elements inline will normally render extra space
      below these elements because they are placed on the text baseline by
      default. Changing this with `vertical-align` fixes the problem.

      https://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html

   ------------------------------------------------------------------------- */

img {
  border-style: none;
}

img, svg {
  max-width: 100%;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}



/* -- STANDARDIZE TABLE RENDERING --------------------------------------------
      Safari aligns <th> center while Chrome and Firefox align left.
   ------------------------------------------------------------------------- */

th {
  text-align: left;
}



/* -- STANDARD HR RULE -------------------------------------------------------
      Create <hr> elements using a background color instead of a border.
   ------------------------------------------------------------------------- */

hr {
  border: none;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: var(--env--reset--background-color);
  height: 1px;
  width: 100%;
}