/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(
        :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
    ) {
    all: unset;
    display: revert;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
a,
button {
    cursor: revert;
}
ol,
ul,
menu {
    list-style: none;
}
img {
    max-width: 100%;
}
table {
    border-collapse: collapse;
}
input,
textarea {
    -webkit-user-select: auto;
}
textarea {
    white-space: revert;
}
meter {
    -webkit-appearance: revert;
    appearance: revert;
}
::placeholder {
    color: unset;
}
:where([hidden]) {
    display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/***
    SITE SPECIFIC
***/
/* Default colors */
body {
    --surface: #fff;
    --surface-variant: #f5f5f5;
    --on-surface: #101010;
    --on-surface-variant: #606060;
    --background: #ededed;
    --on-background: #000000;
    --background-inverse: #606060;
    --on-background-inverse: #ffffff;
    --primary-container: #e0f4fb;
    --on-primary-container: #1d1f31;
    --outline: #dfdfdf;
    --link-color: #0033cc;
    --link-hover-color: #000;
    --weight: 500;
}
/* Dark theme colors */
body.dark-theme {
    --surface: #121212;
    --surface-variant: #22263b;
    --on-surface: #dfdfdf;
    --on-surface-variant: #9d9d9d;
    --background: #11131f;
    --on-background: #bcbcbc;
    --background-inverse: #9d9d9d;
    --on-background-inverse: #000000;
    --primary-container: #405282;
    --on-primary-container: #e0f4fb;
    --outline: #303353;
    --link-color: #809fff;
    --link-hover-color: #fff;
    --weight: 400;
}

/* Tell browser that we want to be able to use light and dark schemes
* so it modifies buttons and controls as necessary */
:root {
    color-scheme: light dark;
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    body {
        --surface: #1d1f31;
        --surface-variant: #22263b;
        --on-surface: #dfdfdf;
        --on-surface-variant: #9d9d9d;
        --background: #11131f;
        --on-background: #bcbcbc;
        --background-inverse: #9d9d9d;
        --on-background-inverse: #000000;
        --primary-container: #405282;
        --on-primary-container: #e0f4fb;
        --outline: #303353;
        --link-color: #809fff;
        --link-hover-color: #fff;
        --weight: 400;
    }
    /* Override dark mode with light mode styles if the user decides to swap */
    body.light-theme {
        --surface: #fff;
        --surface-variant: #f5f5f5;
        --on-surface: #101010;
        --on-surface-variant: #606060;
        --background: #ededed;
        --on-background: #000000;
        --background-inverse: #606060;
        --on-background-inverse: #ffffff;
        --primary-container: #e0f4fb;
        --on-primary-container: #1d1f31;
        --outline: #dfdfdf;
        --link-color: #0033cc;
        --link-hover-color: #000;
        --weight: 500;
    }
}
html {
    height: 100%;
    width: 100%;
}

body {
    height: 100vh;
    justify-content: center;
    /* first set the overall typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    /* see responsive font size at https://matthewjamestaylor.com/responsive-font-size */
    font-size: calc(14px + 0.390625vw);
    font-weight: 400;
    line-height: 1.3;
    background-color: var(--surface);
    color: var(--on-surface);
    font-weight: var(--weight);
}

/* colours */
h1,
p,
label {
    color: var(--on-surface);
}
a {
    color: var(--link-color);
}
a:hover {
    color: var(--link-hover-color);
}
input {
    padding: 0.125rem;
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    border-radius: 0.5rem;
}

h1 {
    font-size: 1.5rem;
}
h2 {
    font-weight: 600;
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
h3 {
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
h4 {
    font-weight: 600;
    margin-top: 0.5;
    margin-bottom: 0.25rem;
}

.error {
    color: red;
}

.hidden {
    display: none;
}

p {
    margin-bottom: 0.5rem;
}

label {
    font-size: 0.825rem;
}

button {
    margin: 0;
    border: 0;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    color: var(--on-surface);
    background-color: rgb(54, 134, 169);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

button:hover {
    opacity: 0.9;
}

table {
    margin-top: 1rem;
    border-collapse: collapse;
}

tr.subrow {
    background: var(--background);
    font-size: 0.75rem;
    line-height: 1;
}
th,
td {
    padding-right: 1rem;
    padding-bottom: 0rem;
    padding-top: 0.5rem;
    line-height: 1;
}
th {
    vertical-align: bottom;
    font-weight: bold;
    padding-bottom: 0.25em;
}
th .total-above {
    margin-bottom: 0.5em;
}
tr.groupheader td {
    border-top: 1px solid var(--outline);
    padding-bottom: 0.25rem;
}
tr.subrow td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
td.indent {
    padding-left: 1rem;
}

.nav-main {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--background);
}
.nav-main > div {
    display: flex;
    align-items: center;
}
.nav-main button {
    background: var(--surface);
    border: 1px solid var(--outline);
}
.nav-main button:hover {
    background: var(--surface-variant);
}
button .icon {
    height: 1em;
    fill: var(--on-background);
}

.content {
    padding: 0 1rem;
}

.numeric {
    text-align: right;
}
.strong {
    font-weight: 600;
}
.meta {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--on-surface-variant);
}
.reading {
    max-width: 36rem;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-row-center {
    display: flex;
    align-items: center;
}
.flex-row-center div,
button {
    margin-left: 4px;
    margin-right: 4px;
}