/* Modern reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Outer browser viewpoint container fitted to window size */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevents scrollbars while dragging tools */
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Digits in a fixed width so price/risk/margin figures line up in a
       column instead of jittering as they update - only affects how
       numerals are drawn, harmless on non-numeric text. */
    font-variant-numeric: tabular-nums;
    /* Tells the browser to draw its own native UI (select dropdown
       popups, scrollbars, date/time pickers) using its dark palette
       instead of the OS default - explicit background-color/color on
       individual <select>/<option> elements elsewhere in this app only
       covers what some browsers respect (e.g. Firefox); this is what
       actually darkens the popup list itself in Chrome/Edge. */
    color-scheme: dark;
}

/* A finger held on a button/drag chip on a phone otherwise selects its
   label text (Android/iOS long-press selection) - and that selection
   then takes over the touch, so the drag that should have started never
   does. Laptops never hit this (a mouse press doesn't select). The
   -webkit- prefix is what iOS Safari actually honours. Inputs/selects
   are deliberately left out - user-select:none breaks typing in them on
   Safari. */
button,
.btn,
.tool-item,
.drawing-panel {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}