:root {
    --spacing-m: 0.9rem;
    --spacing-xs: calc(var(--spacing-m) / 4);
    --spacing-s: calc(var(--spacing-m) / 2);
    --spacing-l: calc(var(--spacing-m) * 2);
    --spacing-xl: calc(var(--spacing-m) * 4);
    --bg-color: white;
    --bg-color-1: #EEE;
    --bg-color-2: #EFE;
    --bg-color-3: #CFC;
    --bg-color-4: #AFA;
    --fg-color: black;
    --fg-color-1: #080;
    --fg-color-2: #B00;
    --border-color: #AAA;
    --border: 1px solid var(--border-color);
    --border-1: 2px solid var(--fg-color-1);
    --border-radius: .25rem;
}

.hidden {
    display: none;
}

body {
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-family: Helvetica, Arial, sans-serif;
    max-width: 45rem;
    margin: 0 auto 4rem; /*extra margin at bottom for Firefox mobile*/
    &:has(dialog[open]) { /*prevent scrolling when dialog open*/
        overflow: hidden;
    }
}

button {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-s) var(--spacing-m);
    margin: var(--spacing-xs);
    height: 2.5rem;
    width: 5rem;
    color: var(--fg-color);
    background-color: var(--bg-color-3);
    font-size: 1rem;
    @media (hover: hover) {
        &:hover {
            background-color: var(--bg-color-4);
        }
    }
}

h1, h2 {
    text-align: center;
    background-color: var(--bg-color-2);
    border-bottom: var(--border);
    border-top: var(--border);
    font-size: 1.15rem;
    padding: var(--spacing-s);
}

table {
    margin: var(--spacing-l) auto;
}

td, th {
    font-family: helvetica, arial, sans-serif;
    border: var(--border);
    text-align: center;
    padding: var(--spacing-s) var(--spacing-l);
    min-width: 10rem;
}


dialog {
    max-width:45rem;
    padding: var(--spacing-l);
    border: 1px solid black;
    line-height: 1.6;
}

dialog::backdrop {
    backdrop-filter: blur(3px);
}

code {
    font-size: 1.05rem;
    color: var(--fg-color-1);
}

.j-result-block {
    border: var(--border);
    border-top: none;
    margin: var(--spacing-m)  auto;
    max-width: 45rem;
}

.j-input {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color-2);
    border-top: var(--border-1);
    border-bottom: var(--border-1);
    padding: var(--spacing-l);
    input {
        font-size: 1.25rem;
        border: var(--border);
        border-radius: var(--border-radius);
        padding: var(--spacing-s);
        margin-right: var(--spacing-m);
        min-width: 12rem; /*explicit min-width to avoid Chrome overflow*/
    }
        input:invalid {
        color: var(--fg-color-2);
    }
}

.j-scroll-container {
    overflow-x: auto;
}

.j-button-bar {
    text-align: right;
}

.j-version {
    text-align: right;
    color: var(--border-color);
}