@font-face {
    font-family: 'JetBrainsMono';
    src: url('/thirdparty/jsdelivr/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
    url('/thirdparty/jsdelivr/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
    url('/thirdparty/jsdelivr/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    --shaded-panel-color: rgba(0, 0, 0, 0.03);
    --accent-color-bg: lightblue;

    --accent-color-fg: steelblue /* fallback for the hsl-from formula below */;
    --accent-color-fg: hsl(from var(--accent-color-bg) h s calc(l - 35));
}

div > hr { margin: 1.5em 0 0 0; border: 0; border-top: 2px dotted gray; }

#footer {
    margin-bottom: 2em;

    body[data-session-state="inactive"] & {
        text-align: center;
    }
}
#legal {
    font-size: 80%;
    margin-top: 2em;
}

.hidden,
body:not([data-session-state="active"]) .with-active-session,
body:not([data-session-state="inactive"]) .with-inactive-session,
body:not([data-account-state="active"]) .with-active-account,
body:not([data-account-state="signup"]) .with-signup-account,
body:not([data-account-state="lobby"]) .with-lobby-account,
body:not([data-account-state="signup"]):not([data-account-state="lobby"]):not([data-account-state="active"]) .with-signup-lobby-active-account,
body:not([data-account-state="locked"]):not([data-account-state="maintenance"]) .with-locked-or-maintenance-account,
body:is([data-account-state="signup"]) .without-signup-account,
body:is([data-account-state="signup"], [data-account-state="lobby"], [data-account-state="active"]) .without-signup-lobby-active-account,
body:is([data-account-state="active"]) .without-active-account,
body[data-page-state="init"] .with-any-session-state,
body[data-page-state="init"] *:is(
        .with-active-session,
        .with-inactive-session,
        .with-active-account,
        .with-signup-account,
        .with-lobby-account,
        .with-signup-lobby-active-account,
        .with-locked-or-maintenance-account,
        .without-signup-account,
        .without-signup-lobby-active-account,
        .without-active-account) {
    display: none;
}

.notice {
    background: var(--accent-color-bg);
    width: max-content;
    padding: 0.4em;
    border-radius: 0.4em;
    border-width: 0;

    &.closable {
        padding: 1em;
        position: static;

        /* prevent an ugly border that appears in Firefox when the dialog is shown. */
        outline: none;

        form {
            display: grid;
            grid-auto-flow: column;
            grid-gap: 1em;
        }

        button {
            border: none;
            background: transparent;
            padding: 0 0 0 2em;
            display: contents;
        }
    }
}

.panel {
    background-color: var(--shaded-panel-color);
    padding: 0.1em 1.25em 1.25em 1.25em;
    margin: 1.5em 0;
}
.panel > * {
    margin-top: 1em;
}

.buttonRow {
    display: flex;
    gap: 0.5em;
    margin: 1em 0;
}

button, table.list td.menu dialog {
    border: 1px solid gray;
    border-radius: 5px;
}

button.renderDisabled {
    color: transparent;
    text-shadow: 0 0 0 #B0B0B0;
}

button.requiringConfirmation {
    background: orange !important;
}

button.requiringConfirmation::after {
    content: "❓";
}

.spinning, body[data-page-state="init"] {
    position: relative;
    color: transparent;

    container-type: normal;
    --spinner-color: black;
    --spinner-radius: 3em; /* default value if container queries are not supported */
}
.spinning *, body[data-page-state="init"] * {
    visibility: hidden;
}
button.spinning {
    --spinner-radius: 1em; /* button needs a smaller value, but turning it into a container lets it collapse */
}
div.spinning,
body[data-page-state="init"] {
    container-type: size; /* enable container queries so that the spinner size depends on the div's dimensions */
}
body[data-page-state="init"] {
    height: 90vh;
}
@container (inline-size > 0px) {
    .spinning:after,
    body[data-page-state="init"]:after {
        --spinner-radius: clamp(1em, 30cqmin, 4em); /* calculate spinner radius within a range */
    }
}
.spinning:after,
body[data-page-state="init"]:after {
    content: " ";
    display: inline-block;

    position: absolute;
    box-sizing: border-box;

    top: calc(50% - var(--spinner-radius) / 2);
    left: calc(50% - var(--spinner-radius) / 2);
    width: var(--spinner-radius);
    height: var(--spinner-radius);

    border-radius: 50%;
    border-width: max(2px, var(--spinner-radius) / 6.5);
    border-style: solid;
    border-color: var(--spinner-color) transparent var(--spinner-color) transparent;

    animation: spinner 1.6s linear infinite;
}
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.stale, .stale * {
    opacity: 0.75;
}

table:not(.layout) {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom-width: 0;
    border-radius: 3px;
    border-collapse: separate;
    border-spacing: 0;

    margin-bottom: 0.5em;

    :where(thead, tfoot) tr:last-child > *,
    tbody tr > * {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    td, th {
        padding: 0.6em;
    }

    td.emptyTableHint {
        height: 4em;
        font-style: italic;
        opacity: 0.9;
        padding: 0 4em;
    }
}

table.list button,
button.icon {
    display: inline-block;
    min-width: 3em;
    height: 2em;
    padding: 0; /* disabling padding avoids layout changes when applying .requireConfirmation */
}

table.list td.menu {
    position: relative;

    /* make ⋮ button less wide than default icon-based ones */
    button {
        min-width: auto;
        padding: 0 0.8em;
    }

    dialog {
        margin: 0;
        position: absolute;
        z-index: 1;
        padding: 0.5em;
        background-color: #f9f9fb;
        font: menu;
        flex-direction: column;

        &[open] {
            display: flex;
        }

        button {
            border: none;
            background: transparent;
            text-align: left;
            padding: 0.3em 0.5em;
            height: auto;
            border-radius: 1px;

            &:hover {
                background: ButtonFace;
            }
        }

        hr {
            color: lightgray;
            border: solid gray;
            border-width: 1px 0 0 0;
            margin: 0.6em 0.4em;
        }
    }
}

code,
table td.id {
    font-family: JetBrainsMono, monospace;
    font-size: 10pt;
}

table.list td:not(.text),
table th {
    text-align: center;
    white-space: nowrap;
}

table.list th.text {
    text-align: left;
}

#connectionList td.triggers > div,
table.list td.buttons > div {
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

#linkedAccountList tr[data-has-access="true"] ~ .setup-hint {
    display: none;
}

#linkedAccountList td.hint-cell {
    text-align: right;
    vertical-align: middle;
    padding-top: 0.3em;
    padding-right: 0;

    span {
        background: var(--accent-color-bg);
        display: inline-block;
        padding: 0.5em;
        border-radius: 0.3em;
    }
}

@supports selector(.parent:not(:has(.anyChild[attribute="value"])) .childToStyle) {
    #linkedAccountList:not(:has(tr[data-has-access="true"])) td.menu > button,
    button.glowing {
        box-shadow: 0 0 0 var(--accent-color-bg);
        animation: 1.5s pulse 0.5s alternate infinite;

        &:hover {
            animation-play-state: paused;
        }
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 3px 5px rgb(from var(--accent-color-bg) r g b / 0%);
        }
        100% {
            box-shadow: 0 0 3px 5px rgb(from var(--accent-color-bg) r g b / 100%);
        }
    }
}

table.layout {
    border-spacing: 0;
}

table.layout td {
    padding: 0;
    vertical-align: top;
}

table.layout:not(.nopadding) td:not(:last-child) {
    padding-right: 3em;
}

#connectionFormSection:not(.active) {
    display: none;
}

#connectionFormSection .panel {
    /* other panels only have vertical margins, this one should be visibly indented */
    margin: 1.5em;
}

fieldset {
    display: inline-block;
    padding: 0.6em 1.2em 1.2em 1.2em;
}

fieldset legend {
    padding-inline: 0.4em;
    font-weight: bold;
}

#connectionForm label:not(#connectionTriggers [for], #syncEpochChoice label),
#diagnostics label {
    font-weight: bold;
    margin-bottom: 0.1em;
    display: inline-block;
}

#connectionTriggers input:disabled + label {
    color: gray;
}

select.wide {
    width: 20em;
}

#connectionForm td#sourceToSinkArrow {
    font-size: 150%;
    padding: 0 0.4em;
    vertical-align: bottom;
    line-height: 0.9;
}

#syncEpochChoice {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: baseline;
    grid-gap: 5px 0;
}

#syncEpochChoice label {
    margin-right: 0.5em;
    font-weight: normal;
}


#icsUrlVerificationNotice {
    background: var(--accent-color-bg);
    width: max-content;
    padding: 0.4em;
}

#icsUrlVerificationNotice:not([data-state="active"]) {
    display: none;
}

.editorWrapper .CodeMirror {
    border: 1px solid darkgray;
    font-family: JetBrainsMono, monospace;
}

#connectionForm .editorWrapper .CodeMirror {
    width: 500px;
    height: 450px;
    font-size: 10pt;
}

#diagnostics #requestForm {
    width: 1202px;
    box-sizing: border-box;
}

#diagnostics .editorWrapper .CodeMirror {
    width: 1200px;
    height: 700px;
    font-size: 9pt;
    background: #f5f5f5;
}

#consent, #accountManagement {
    max-width: min(50em, 100%);
    margin-inline: auto;

    & > :is(p, h1) {
        text-align: center;
    }

    p.navLinks + *,
    p.navLinks:last-child {
        margin-top: 2.5rem;
    }
}

#consentDoc {
    line-height: 1.5;
    text-align: justify;

    :is(h1, h2, h3) {
        text-align: center;
        margin-block: 1.2em 0;
    }

    h1 {
        margin: 0;
    }

    main {
        border: 1px solid black;
        padding: 0.75em 1.5em;
        margin: 1em 3em 3em 3em;

        & > p:first-child {
            margin-top: 0;
            font-size: 18px;
        }
    }

    .side-by-side {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2em;

        & > * {
            background: var(--shaded-panel-color);
            padding: 0.3em 0.6em;
        }
    }

    li {
        margin-block: 1em;
    }

    &.spinning {
        min-height: 50vh;
    }

    section {
        border: 1px solid darkgray;
        margin-block: 1.2em;

        & > input[type="checkbox"] {
            position: absolute;
            left: -100vw;
        }
        .content {
            overflow-y: hidden;
            max-height: 0;
            transition: max-height 0.15s ease-out;
        }
        & > input[type="checkbox"]:checked ~ .content {
            max-height: 500px;
            transition: max-height 0.25s ease-in;
        }

        label {
            display: block;
            text-align: justify;
            background: #e9e9e9;
            padding: 0.15em;

            &:hover {
                background: #d0d0d0;
            }
        }

        & > input[type="checkbox"] {
            & ~ * label:before {
                content: "▸";
                display: inline-block;
                padding: 0 0.2em;
                transition: transform 0.15s ease-out;
            }
            &:checked ~ * label:before {
                transform: rotate(90deg);
                transition: transform 0.25s ease-in;
            }
            & + * {
                margin-block-start: 0;
            }
        }

        .content > * {
            margin-right: 1em;
        }
    }
}


#consentControl {
    margin-inline: 4em;
    background-color: var(--shaded-panel-color);
    padding: 1em;

    p {
        text-align: center;
    }

    .buttonRow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em;

        max-width: fit-content;
        margin-inline: auto;
    }

    button {
        font-size: 110%;
        padding: 0.5em 1.5em;
        background: #e9e9e9;

        &:hover {
            background: #d0d0d0;
        }

        &[data-current-answer="this"] {
            background-color: black;
            color: white;
            border-color: black;
        }
    }
}


#accountManagement {
    & > table {
        max-width: 30em;
        margin-inline: auto;

        th {
            vertical-align: top;
            padding-inline: 1.2em;
        }

        td {
            padding: 0 1.2em 0 0;
            min-width: 7em;

            &#scheduledConnectionLimitCell {
                display: grid;
                align-items: center;
                gap: 0.5em;
                justify-content: start;
                grid-template-columns: auto auto auto;

                output {
                    padding: 0.6em 0;
                }

                button {
                    padding: 0.3em 0.5em 0.4em 0.5em;
                    border: 1px solid gray;
                    border-radius: 5px;
                }

                #scheduledConnectionLimitRemark {
                    grid-column-start: span 3;
                    padding: 0 0 0.6em 0;
                }
            }

            &.verticalContent {
                display: grid;
                align-items: center;
                justify-content: start;

                output {
                    padding: 0.6em 0;
                }

                output:not(:first-child) {
                    padding: 0 0 0.6em 0;
                }
            }
        }
    }

    .buttonRow {
        width: fit-content;
        margin-inline: auto;
    }

    #editSubscriptionDialog {
        width: 48em;

        :not(div) {
            margin: 0.5em 0;
        }

        h2 {
            margin-top: 0;
            text-align: center;
        }

        h3 {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }

        label {
            font-weight: bold;
        }

        p {
            line-height: 1.4;
        }

        #subscriptionChangePreview > *:first-child {
            margin-top: 0;
        }
    }

    #confirmSubscriptionChange:not([disabled]) {
        background: var(--accent-color-bg);
    }

    #cancelButton {
        background: #bd0000;
        color: white;

        &:hover {
            background: darkred;
        }
    }

    #subscriptionSettings {
        text-align: center;
    }

    #subscriptionChangePreview {
        margin-top: 20px;
        margin-inline: auto;

        /* Prevent the dialog from collapsing while the preview is being updated */
        width: 32em;
        min-height: 26em;
        box-sizing: border-box;
    }

    #nextCharge {
        width: 100%;

        td:last-child {
            text-align: right;
            padding-left: 1em;
        }

        tbody {
            td:first-child {
                width: 14em;
            }

            td:nth-child(2) {
                width: 1.8em;
                text-align: right;
            }
        }

        tfoot {
            * {
                padding-block: 0.3em;
            }

            th {
                text-align: right;
                padding-left: 2em;
            }
        }
    }

    #immediatePaymentPreview .amount {
        font-size: 200%;
        font-weight: bold;
        color: var(--accent-color-fg);
    }

    #recurringPaymentPreview {
        .amount, .billingCycle {
            font-weight: bold;
        }
    }
}


#loginScreen {
    margin-bottom: 5em;

    h1 {
        margin-bottom: 1em;
    }
}

#loginScreenColumns {
    display: flex;
    gap: clamp(50px, (100vw - 2 * 215px) / 3, 215px);
    justify-content: center;
    text-align: center;
}

.loginButtonsWrapper {
    display: inline-block;
    width: 215px;
}

.loginButtons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loginButtons > div > a {
    border: 1px solid #8c8c8c;
    height: 40px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 54%);
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.googleButton > a > img {
    padding-left: 8px;
    padding-right: 24px;
}

.googleButton > a > span {
    padding-right: 8px;
}

.microsoftButton > a > img {
    padding-left: 7px;
    padding-right: 22px;
}

.microsoftButton > a > span {
    padding-right: 12px;
}