:root {
    color-scheme: light dark;
    --rand: color-mix(in srgb, currentColor 15%, transparent);
    --zacht: color-mix(in srgb, currentColor 60%, transparent);
    --vlak: color-mix(in srgb, currentColor 4%, transparent);
    --negatief: #c0392b;
    --positief: #1e8449;
    --waarschuwing: #b9770e;
}
@media (prefers-color-scheme: dark) {
    :root { --negatief: #ff7b6b; --positief: #6ee7a0; --waarschuwing: #f0c674; }
}

* { box-sizing: border-box; }
body { font: 15px/1.55 system-ui, -apple-system, sans-serif; margin: 0; }
main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

nav {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    padding: .85rem 1.25rem; border-bottom: 1px solid var(--rand);
    max-width: 72rem; margin: 0 auto;
}
nav a { color: inherit; text-decoration: none; opacity: .65; }
nav a:hover, nav a.actief { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
nav .rechts { margin-left: auto; }

h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1rem; margin: 2rem 0 .75rem; }
a { color: inherit; }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 1rem 0 2rem; }
.tegel { border: 1px solid var(--rand); border-radius: .5rem; padding: .9rem 1rem; }
.tegel h2 { font-size: .8rem; font-weight: 500; opacity: .65; margin: 0 0 .35rem; }
.groot { font-size: 1.5rem; font-variant-numeric: tabular-nums; margin: 0; }
.klein { font-size: .8rem; opacity: .65; margin: .15rem 0 0; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .55; font-weight: 600; }
td.r, th.r { text-align: right; }
tbody tr:hover { background: var(--vlak); }
tr.verlopen td { opacity: .45; text-decoration: line-through; }
tr.dieptepunt td { background: color-mix(in srgb, var(--negatief) 12%, transparent); }

.negatief { color: var(--negatief); }
.positief { color: var(--positief); }

.badge {
    display: inline-block; font-size: .7rem; padding: .05rem .4rem; margin-left: .4rem;
    border: 1px solid var(--negatief); color: var(--negatief); border-radius: .25rem;
    text-decoration: none; vertical-align: middle;
}
.badge.zacht { border-color: var(--rand); color: inherit; opacity: .6; }

.meldingen { display: grid; gap: .4rem; margin-bottom: 1.5rem; }
.melding {
    display: flex; gap: .75rem; align-items: baseline;
    padding: .55rem .8rem; border-radius: .4rem; border: 1px solid var(--rand);
}
.melding .bedrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.melding.critical { border-color: var(--negatief); color: var(--negatief); }
.melding.warning { border-color: var(--waarschuwing); color: var(--waarschuwing); }
.klopt { color: var(--positief); }

.smal { max-width: 22rem; margin: 4rem auto; }
label { display: block; margin: .9rem 0; font-size: .85rem; }
input[type=text], input[type=email] {
    display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem;
    font: inherit; border: 1px solid var(--rand); border-radius: .35rem;
    background: transparent; color: inherit;
}
button {
    font: inherit; padding: .6rem 1rem; border-radius: .35rem;
    border: 1px solid var(--rand); background: transparent; color: inherit; cursor: pointer;
}
button.primair { width: 100%; border-color: currentColor; font-weight: 500; }
button:disabled { opacity: .5; cursor: default; }
button.link { border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; opacity: .65; }
button.link:hover { opacity: 1; }

details { margin-top: 2rem; }
summary { cursor: pointer; font-size: .85rem; opacity: .65; }

.melding-inline { margin-top: 1rem; font-size: .85rem; }
.melding-inline.fout { color: var(--negatief); }