:root {
    --text: #222;
    --text-disabled: #666;

    --border: #ccc;

    --surface: #f8f8f8;
    --surface-subtle: #f4f4f4;
    --surface-hover: #f0f0f0;
    --surface-disabled: #eee;

    --theme: #471aff;

    --link: #471aff;
}

* {
    font-family: "Iosevka Web", monospace;

    padding: 0;
    margin: 0;
    box-sizing: border-box;

    color: var(--text);
}

html {
    background: var(--surface);
}

a {
    &:hover {
        color: var(--link);
    }
    &:active,
    &:focus-visible {
        border-radius: 4px;
        outline: 2px solid var(--theme);
    }
}

input {
    font-size: 16px;
}

button,
input[type="submit"] {
    font-size: 14px;

    padding: 3px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;

    &:hover {
        cursor: pointer;
    }
    &:focus {
        border-color: var(--theme);
        outline: 1px solid var(--theme);
    }
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="datetime-local"] {
    padding: 2px 4px;

    border: 1px solid var(--border);
    border-radius: 4px;

    &:disabled {
        color: var(--text-disabled);
        background: var(--surface-disabled);
    }

    &:focus {
        border-color: var(--theme);
        outline: 1px solid var(--theme);
    }
}

label:has(span):has(input[type="text"]),
label:has(span):has(input[type="password"]),
label:has(span):has(input[type="url"]),
label:has(span):has(input[type="date"]),
label:has(span):has(input[type="datetime-local"]) {
    display: flex;
    flex-direction: column;
    gap: 4px;

    span {
        font-size: 14px;
    }
}

table {
    border-collapse: collapse;
    max-width: 100%;
    overflow: auto;

    white-space: break-spaces;

    th,
    td {
        padding: 4px 8px;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    th {
        font-variant-caps: small-caps;
        background-color: var(--surface);
        border-bottom: 2px solid var(--border);
    }

    td {
        font-size: 14px;
    }

    tr:nth-child(odd) {
        background-color: var(--surface-subtle);
    }
    tr:hover {
        background-color: var(--surface-hover);
    }
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;

    input[type="submit"] {
        margin-top: 10px;
    }
}

hr {
    align-self: stretch;
    margin-inline: 32px;
    border: none;
    border-top: 1px solid var(--border);
}