:root {
    color-scheme: light;
    &[data-theme=dark] {
        color-scheme: dark;
    }

    --container-max: 980px;
    --font-sans: "Geist", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --text-regular: .9375rem;
    --text-1: 1.75rem;
    --text-2: 1.0625rem;
    --text-3: 1rem;
    --primary: light-dark(#1a73e8, #8ab4f8);

    --visited: light-dark(#6b3594, #c39bf0);
    --bar: light-dark(#f6f6f6, #171d13);
    --bar-border: light-dark(#d3e2bf, #2f3b26);
    --brand: light-dark(#4f7f22, #94c36a);
}

a:not(.button, .badge, .tabs a) {
    text-decoration: underline 1px rgb(from currentColor r g b / .3);
    text-underline-offset: 3px;
    &:visited {
        color: var(--visited);
    }
    &:hover {
        text-decoration-color: currentColor;
    }
}

:is(.title, .popular-tags a, .by a, .meta a):not(:hover) {
    text-decoration-color: transparent;
}

:is(.by, .meta) a:not(:hover, .badge) {
    color: inherit;
}

.hstack {
    row-gap: var(--space-2);
}

a:has(> img):not(.brand) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    overflow-wrap: anywhere;
    vertical-align: bottom;
}

img[src*="/ico-"] {
    width: 14px;
    height: 14px;
}

[data-theme=dark] img[src*="/ico-"]:not([src*="tick"], [src*="warning"]) {
    filter: invert(1);
}

.row > * {
    min-width: 0;
}

.skip-link {
    position: fixed;
    inset-block-start: -10rem;
    inset-inline-start: 1rem;
    z-index: 100;
    &:focus {
        inset-block-start: 1rem;
    }
}

a.brand {
    color: var(--brand);
    font-size: var(--text-4);
    text-decoration: none;
    img {
        height: 26px;
        [data-theme=dark] & {
            filter: invert(1) hue-rotate(180deg);
        }
    }
}

.main-nav {
    @media (max-width: 768px) {
        width: 100%;
        justify-content: center;
    }
}

.search {
    fieldset {
        flex: 1;
        margin: 0;
    }
    select {
        flex: none;
        width: auto;
    }
    label {
        @media (max-width: 768px) {
            display: none;
        }
    }
}

.box > h2, .table thead {
    background: var(--bar);
}

.box, .table {
    border: 1px solid var(--bar-border);
    border-radius: var(--radius-medium);
}

.box {
    overflow: hidden;
    > h2 {
        margin: 0;
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-7);
        border-bottom: 1px solid var(--bar-border);
    }
    > :not(h2) {
        margin: var(--space-4);
    }
    a:has(> img) {
        align-items: start;
        img {
            margin-block-start: calc((1lh - 14px) / 2);
        }
    }
}

.popular-tags {
    gap: var(--space-1) var(--space-4);
}

.intro {
    font-size: var(--text-4);
    max-width: 44rem;
}

.listing {
    border-top: 1px solid var(--border);
    > li {
        margin: 0;
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--border);
    }
    .title {
        font-weight: var(--font-semibold);
    }
    p {
        margin-block: var(--space-1) var(--space-2);
    }
}

.by, .meta, .popular-tags small {
    color: var(--muted-foreground);
}

.by {
    font-size: var(--text-7);
}

.meta {
    font-size: var(--text-8);
}

.listing :is(.badge, .tags), .popular-tags small {
    font-family: var(--font-mono);
}

:is(nav:has(> menu.buttons), .tabs) {
    max-width: 100%;
    overflow-x: auto;
}

.order select {
    width: auto;
    margin: 0;
}

.table {
    min-width: 0;
    :is(th, td) {
        padding-block: var(--space-2);
    }
}

.channels tr:target {
    background-color: var(--accent);
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background-color: var(--muted);
    border-radius: var(--radius-medium);
    a {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        white-space: nowrap;
        color: var(--foreground);
        border-radius: calc(var(--radius-medium) - 2px);
        transition: background-color var(--transition), color var(--transition-fast), box-shadow var(--transition);
        &:hover {
            color: var(--muted-foreground);
        }
        &[aria-current=page] {
            background-color: var(--background);
            box-shadow: var(--shadow-small);
        }
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[role=alert][hidden] {
    display: none;
}

#unverified-destination {
    overflow-wrap: anywhere;
}