:root {
    --shfa-color-error: red;
    --shfa-color-not-available: gray;
    --shfa-color-success: green;
    --shfa-color-pending: rgb(232, 185, 9);
    --shfa-color-initial: blue;
}

html,
body {
    font-family: system-ui, sans-serif;
}

body {
    margin-left: auto;
    margin-right: auto;
    font-size: larger;
}

@media screen and (width >= 1024px) {
    body {
        width: 60%;
    }
    .userlist {
        --repeat: 3;
    }
}

@media screen and (width < 1024px) {
    body {
        width: 90%;
    }
    .userlist {
        --repeat: 1;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background: #222;
    }

    body a {
        color: #809fff;
    }

    :root {
        --shfa-color-foreground: #eee;
    }
}

@media screen and (width >= 1024px) {
    body {
        width: min(70%, 1280px);
    }
}

@media screen and (width < 1024px) {
    body {
        width: 90%;
    }
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header > img {
    width: 8rem;
    margin-top: 2rem;
}

header > h1 {
    text-align: center;
}

footer {
    margin-top: 4rem;
    border-top: 1px solid gray;
    display: flex;
    justify-content: flex-end;
}

footer > * {
    margin: 1rem;
}

.userlist {
    display: grid;
    grid-template-columns: repeat(var(--repeat), 1fr);
    gap: 1rem;
}

.userlist > .error::before {
    content: '❌ ';
}

.userlist > .mapped::before {
    content: '🔗  ';
}

.userlist > h3 {
    padding-bottom: 0.2rem;
    border-bottom: solid 1px silver;
}

.wizardAction {
    width: 90%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

.status {
    padding: 1rem;
}

.wizardSection {
    margin-top: 4rem;
}

.wizardError > p.status {
    border: 1px solid var(--shfa-color-error);
    background-color: hsl(from var(--shfa-color-error) h s l / 0.1);
}

.wizardError > p.status::before {
    content: '❌ ';
}

.wizardNotAvailable > p.status {
    border: 1px solid var(--shfa-color-not-available);
    background-color: hsl(from var(--shfa-color-not-available) h s l / 0.1);
}

.wizardNotAvailable > p.status::before {
    content: '🚫 ';
}

.wizardSuccess > p.status {
    border: 1px solid var(--shfa-color-success);
    background-color: hsl(from var(--shfa-color-success) h s l / 0.1);
}

.wizardSuccess > p.status::before {
    content: '✅ ';
}

.wizardPending > p.status {
    border: 1px solid var(--shfa-color-pending);
    background-color: hsl(from var(--shfa-color-pending) h s l / 0.1);
}

.wizardPending > p.status::before {
    content: '⚙️ ';
}

.wizardInitial > p.status {
    border: 1px solid var(--shfa-color-initial);
    background-color: hsl(from var(--shfa-color-initial) h s l / 0.1);
}

.wizardInitial > p.status::before {
    content: 'ℹ️ ';
}

dl {
    display: grid;
    grid-template-columns: max-content auto;
}

dt {
    grid-column-start: 1;
}

dt::after {
    content: ': ';
}

dd {
    grid-column-start: 2;
    margin-left: 0.6rem;
}

button,
select {
    font-family: inherit;
    font-size: 100%;
}

.visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 0;
}

a.logo {
    color: currentColor;
}