: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;
}

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

header {
    text-align: right;
    padding-right: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--border-color);
}

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);
        }
    }
}

.j-input {
    display: grid;
    grid-template-columns: 11rem 1fr;
    background-color: var(--bg-color-2);
    border-top: var(--border-1);
    border-bottom: var(--border-1);
    padding: var(--spacing-l) var(--spacing-m) var(--spacing-s);
    input {
        font-size: 1.25rem;
        border: var(--border);
        border-radius: var(--border-radius);
        padding: var(--spacing-s);
        margin-bottom: var(--spacing-m);
        min-width: 12rem; /*explicit min-width to avoid Chrome overflow*/
    }
    input::placeholder {
        color: var(--border-color);
        font-size: 1rem;
    }
    input:invalid {
        color: var(--fg-color-2);
    }
    input:valid.valid {
        color: var(--fg-color-1);
    }
    .j-button-bar {
        grid-column: 2;
        text-align: right;
    }
}

.j-output {
    display: grid;
    grid-template-columns: 11rem 1fr;
    background-color: var(--bg-color);
    margin: var(--spacing-xl) 0;
    .j-output-label {
        text-align: left;
        font-weight: bold;
        border-bottom: var(--border);
        padding: var(--spacing-xs) var(--spacing-m);
    }
    .j-result {
        text-align: center;
        font-size: 1.25rem;
        padding: var(--spacing-m);
        border-bottom: var(--border);
    }
    .j-output-label:first-child, .j-result:nth-child(2) {
        border-top: var(--border-1);
    }
    .j-output-label:nth-last-child(2), .j-result:nth-last-child(1) {
        border-bottom: var(--border-1);
    }
    span {
        color: var(--fg-color-1);
        font-weight: bold;
        padding: 0 0.5rem;
    }
}

dialog {
    max-width:45rem;
    padding: 0.5rem;
    border: var(--border);
    border-radius: var(--border-radius);
    code {
        font-size: 1.05rem;
        color: var(--fg-color-1);
        white-space: nowrap;
    }
    dt {
        font-weight: bold;
    }
    dd {
        margin: 1rem;
    }
    .j-button-bar {
        text-align: right;
        margin-bottom: 1rem;
    }
    .j-scroll-container {
        max-height: 70vh;
        overflow-y: scroll;
    }
    .j-scroll-container:focus {
        outline: none;
    }
    .j-scrollability-indicator {
        border: var(--border);
        border-radius: var(--border-radius);
        padding: 2rem;
        margin: 1rem;
    }
    &::backdrop {
        backdrop-filter: blur(2px);
    }
}


@media (max-width: 30rem ) {
    .j-input {
        grid-template-columns: 1fr;
        .j-button-bar {
            grid-column: 1;
        }
    }
    .j-output {
        grid-template-columns: 1fr;
        .j-output-label {
            border-bottom: none;
        }
        .j-output-label:nth-last-child(2) {
            border-bottom: none;
        }
        .j-result:nth-child(2) {
            border-top: none;
        }

    }
    dialog {
        padding: 0.2rem;
        .j-scrollability-indicator {
            padding: 0.5rem;
            margin: 0.5rem;
        }
    }
}