/*
 * Reset and element defaults.
 *
 * Bootstrap is gone. It was inlined in full on every render and then fought
 * with ~640 lines of `!important` overrides; nothing in this app used a grid
 * class, a component, or any of its JS.
 */

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

/*
 * The UA stylesheet's `[hidden] { display: none }` is an attribute selector, so
 * any class that sets `display` outranks it -- which meant every `.panel` stayed
 * on screen despite being marked hidden. Restate it as the winning rule once,
 * here, rather than per-component.
 */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 660;
    letter-spacing: -.012em;
    text-wrap: balance;
}

p { margin: 0; }

a {
    color: var(--accent-solid);
    text-decoration-color: color-mix(in srgb, var(--accent-solid) 40%, transparent);
    text-underline-offset: .15em;
}

a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

img { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Chrome/Safari strip the spinners on number inputs -- money fields are text
   with inputmode=decimal anyway, so these are only the day-of-month ones. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

::selection { background: color-mix(in srgb, var(--accent-solid) 35%, transparent); }

/* ------------------------------------------------------------ scrollbars */

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* --------------------------------------------------------------- utility */

.empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: .9375rem;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.pos { color: var(--ok); }
.neg { color: var(--bad); }
.warn { color: var(--warn); }