:root {
    --border-width: 1px;
    --surface-1: #111;
    --surface-2: #222;
    --surface-3: #333;
    --neutral: #444;
    --neutral-hover: #555;
    --neutral-active: #333;
    --neutral-border: #777;
    --neutral-disabled: #888;
    --weak-text: #888;
    --transition-duration: 200ms;
}

:focus-visible {
    outline: 2px solid currentColor;
}

html {
    color-scheme: dark;
    font-family: "Inter", sans-serif;
    background: var(--surface-1);
    line-height: 1.5;
    scrollbar-gutter: stable;
}

html:has(#overlay .alert) {
    overflow: hidden;
}

menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

menu[role="menu"] {
    background: var(--neutral);
    padding-block: 0.125rem;
    padding-inline: 0.25rem;
    border-radius: 7px;
    border: var(--border-width) solid var(--neutral-border);
}

.button,
.textfield {
    border: var(--border-width) solid var(--neutral-border);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: inherit;
    border-radius: 7px;
    padding-block: 0;
    padding-inline: 0.5em;
    display: inline-block;
    height: 1.875em;
    min-width: 1.875em;
    box-sizing: border-box;

    &:hover {
        background: var(--neutral-hover);
    }

    &:disabled {
        color: var(--neutral-disabled);
        pointer-events: none;
    }
}

.textfield {
    background: var(--surface-3);
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    background: var(--neutral);
    user-select: none;

    &:active {
        background: var(--neutral-active);
    }
}

[data-ui="menu.item"],
[data-ui="menu.submenu"] {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: inherit;
    background: transparent;
    border: var(--border-width) solid transparent;
    border-radius: 3px;
    text-align: start;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-block: 0;
    padding-inline: 0.25rem;
    color: inherit;
    text-decoration: inherit;
    user-select: none;
    width: 100%;
    box-sizing: border-box;

    &:hover {
        background: var(--neutral-hover);
    }

    &:active {
        background: var(--neutral-active);
    }
}

[data-ui="menu.item"]:disabled {
    pointer-events: none;
    color: var(--neutral-disabled);
}

ui-menu {
    position: relative;
    display: inline-grid;
    white-space: nowrap;
}

ui-popover {
    display: none;
    position: absolute;

    &[visible] {
        display: grid;
    }
}

ui-icon {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    vertical-align: -0.125em;
    stroke: currentColor;
    stroke-width: 3;
    fill: transparent;

    &.checked {
        stroke: tomato;
        fill: coral;
    }
}

.tabular {
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.0625ch;
}

.weak {
    color: var(--weak-text);
}

dialog {
    border: none;
    padding: 0;
}

.alert {
    place-self: center;
    display: grid;
    align-items: center;
    background: var(--surface-3);
    padding-inline: 0.75rem;
    border-radius: 3px;
    grid-template-areas: "heading action" "message message";
    grid-template-columns: 1fr auto;
    width: calc(100% - 24px);
    box-sizing: border-box;
    max-width: 40ch;
    box-shadow: 0 0.5rem 3rem -0.5rem black;
    animation: scale-in var(--transition-duration) ease;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    pointer-events: none;

    &:has(.alert) {
        transition-property: backdrop-filter, background;
        transition-duration: var(--transition-duration);
        transition-timing-function: ease;
        pointer-events: all;
        background: #222a;
        backdrop-filter: blur(2px);
    }
}

#timestamps {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
}

@keyframes scale-in {
    from {
        opacity: 0;
        scale: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-duration: 0ms;
    }
}