*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body{
    width:100%;
    height:100%;
    /* Not "hidden": that still permits *programmatic* scrolling of html/body,
       including the browser's native "scroll the focused element into view"
       behaviour. Every custom toggle/checkbox in the app is built from a real
       <input> made invisible and absolutely positioned under a styled pill -
       clicking one moves focus onto that hidden input, and whenever it sits
       outside html/body's own clipped height, the browser was scrolling the
       whole outer page (permanently - nothing ever scrolls it back) instead
       of the actual intended container, e.g. .inventory-form-scroll. "clip"
       blocks scrolling outright, forcing focus-scroll to land on the real
       scrollable ancestor as intended. */
    overflow:clip;
}
body{
    margin:0;
}

/* Slim, rounded application scrollbar with a macOS-style low-profile treatment. */
html {
    scrollbar-color: rgba(71, 85, 105, .55) transparent;
    scrollbar-width: thin;
}

* {
    scrollbar-color: rgba(71, 85, 105, .55) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(71, 85, 105, .55);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 58, 138, .68);
    background-clip: padding-box;
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul{
    margin-bottom:0;
}