@layer reset {
    * {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p,
    li,
    figcaption {
        max-width: 65ch;
        text-wrap: pretty;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    a {
        text-decoration: none;
    }
}

:root {
    block-size: 100svh;
    --font: Inter, Helvetica, Arial, sans-serif;
    --font-0: clamp(1rem, 0.9327rem + 0.2564vw, 1.125rem);
    --font-1: clamp(1.125rem, 1.0493rem + 0.2885vw, 1.2656rem);
    --font-2: clamp(1.2656rem, 1.1804rem + 0.3245vw, 1.4238rem);
    --font-3: clamp(1.4238rem, 1.328rem + 0.3651vw, 1.6018rem);
    --font-4: clamp(1.6018rem, 1.494rem + 0.4107vw, 1.802rem);
    --font-5: clamp(1.802rem, 1.6807rem + 0.4621vw, 2.0273rem);
    --col-body: #f4f6f8;
    --col-font: #333;
    --col-havenBlue: #074092;
    --col-havenGreen: #046d4d;
    --col-divider-dark: #ddd;
    --col-divider-light: #eee;
}

body {
    block-size: 100svh;
    font: 400 var(--font-0)/1.5rem var(--font);
    color: var(--col-font);
    background-color: var(--col-body);
}

    body:has(> main:not(.account)) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        column-gap: .25rem;

        @media(width > 768px) {
            grid-template-columns: 300px 1fr;
        }
    }

h1 {
    font-size: var(--font-5);
    color: hsl(from var(--col-font) h s 30%);
    line-height: 1.15;

    &:has(+ h2, + h3, + h4, + h5, + p) {
        margin-block-end: .5em;
    }

    &:focus {
        outline: none;
    }
}

h2 {
    font-size: var(--font-4);
    color: hsl(from var(--col-font) h s 30%);
    line-height: 1.2;

    &:has(+ h2, + h3, + h4, + h5, + p) {
        margin-block-end: .4em;
    }
}

h3 {
    font-size: var(--font-3);
    color: hsl(from var(--col-font) h s 30%);
    line-height: 1.25;

    &:has(+ h2, + h3, + h4, + h5, + p) {
        margin-block-end: .35em;
    }
}

h4 {
    font-size: var(--font-2);
    color: hsl(from var(--col-font) h s 30%);
    line-height: 1.3;

    &:has(+ h2, + h3, + h4, + h5, + p) {
        margin-block-end: .3em;
    }
}

h5 {
    font-size: var(--font-1);
    color: hsl(from var(--col-font) h s 30%);
    line-height: 1.35;

    &:has(+ h2, + h3, + h4, + h5, + p, + label) {
        margin-block-end: .25em;
    }
}

h6 {
    font-size: var(--font-0);
    font-weight: 600;
    line-height: 1.4;

    &:has(+ h2, + h3, + h4, + h5, + p, + label) {
        margin-block-end: .25em;
    }
}

p {
    font-size: var(--font-0);
    line-height: 1.5;

    + p {
        margin-block-end: .75em;
    }
}

small {
    font-size: calc(var(--font-0) * 0.875);
}

i {
    font-size: 1em;
}

.container {
    max-inline-size: 1536px;
    padding-inline: 1rem;
    margin-inline: auto;
}

button {
    padding: .25rem .5rem;
    cursor: pointer;
}

dxbl-treeview > dxbl-input-editor {
    border: none;
}

.alert {
    --clr-alert: currentColor;
    display: none;
    text-align: center;
    padding: .5rem;
    margin-block-end: .5rem;
    color: var(--clr-alert);
    background-color: oklch(from currentColor 95% calc(c / 5) h);
    border: 1px solid oklch(from currentColor 90% calc(c / 2.5) h);
    border-radius: .25rem;

    &.visible {
        display: block;
    }

    &.error {
        --clr-alert: #f61509;
    }
}

label:not(dxbl-check label) {
    display: inline-block;
    font-weight: 600;
    color: hsl(from currentColor h s 33%);
    font-size: .875rem;
    margin-block-end: .15rem;
}

/* Badges */
[class*="badge-"] {
    --badge-padding-inline: 0.65em;
    --badge-padding-block: 0.35em;
    --badge-font-size: 0.662em;
    --badge-font-weight: 700;
    --badge-color: currentColor;
    --badge-bg-color: transparent;
    --badge-border-color: currentColor;
    --badge-border-radius: .25rem;
    display: inline-block;
    padding: var(--badge-padding-block) var(--badge-padding-inline);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1;
    color: var(--badge-color);
    background-color: var(--badge-bg-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--badge-border-radius);
    border: 1px solid var(--badge-border-color);
}

.badge-secondary,
.badge-grey {
    --badge-color: var(--DS-secondary-130);
    --badge-bg-color: var(--DS-secondary-20);
    --badge-border-color: var(--DS-secondary-60);
    
}

.badge-danger,
.badge-red {
    --badge-color: var(--DS-danger-90);
    --badge-bg-color: var(--DS-danger-10);
    --badge-border-color: var(--DS-danger-60);
    border: 1px solid var(--badge-border-color);
}

.badge-warning,
.badge-yellow {
    --badge-color: var(--DS-warning-90);
    --badge-bg-color: var(--DS-warning-10);
    --badge-border-color: var(--DS-warning-60);
    border: 1px solid var(--badge-border-color);
}

.badge-success,
.badge-green {
    --badge-color: var(--DS-success-90);
    --badge-bg-color: var(--DS-success-10);
    --badge-border-color: var(--DS-success-60);
    border: 1px solid var(--badge-border-color);
}

.badge-info,
.badge-primary,
.badge-blue {
    --badge-color: var(--DS-primary-90);
    --badge-bg-color: var(--DS-primary-10);
    --badge-border-color: var(--DS-primary-60);
    border: 1px solid var(--badge-border-color);
}

.txt-danger {
    color: var(--DS-danger-100);
}

.txt-success {
    color: var(--DS-success-100);
}