:root {
    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));

    --primary: oklch(0.5 0.09 156);
    --primary-background: oklch(0.9 0.09 156);
    --muted: #6c757d;
}

* {
    font-family: sans-serif;
}

body {
    padding: var(--s0);
}

a,
.link {
    color: black;
    transition: all 0.2s ease;
    text-underline-offset: 4px;
}

a:visited,
.link:visited {
    color: black;
}

a:hover,
.link:hover {
    color: var(--primary);
}

.link {
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: arial, sans-serif;
    text-decoration: underline;
    cursor: pointer;
}

input:not( :where([type="submit"],
        [type="checkbox"],
        [type="radio"],
        [type="button"],
        [type="reset"])) {
    inline-size: 100%;
}

table {
    caption-side: bottom;
    border-collapse: collapse;

    td {
        font-size: 90%;
    }

    td,
    th {
        word-break: normal;
        border: 1px solid gray;
        padding: 0.5rem;
    }
}

[role="region"][aria-labelledby][tabindex] {
    overflow: auto;
}

caption {
    font-size: 90%;
}

a[data-badge-count]:after {
    color: var(--primary);
    content: ' (' attr(data-badge-count) ')';
}