*, *::before, *::after {
    box-sizing: border-box;
}

html {
    color: var(--color-ink);
    font-family: "Manrope", sans-serif;
    line-height: 1.5;
}

body {
    margin: 0;
    background: var(--color-surface-subtle);
    font-family: "Manrope", sans-serif;
}

.material-symbols-outlined {
    display: inline-block;
    direction: ltr;
    font-family: "Material Symbols Outlined";
    font-feature-settings: "liga";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

a {
    color: var(--color-brand-700);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    color: #2c6956;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover {
    color: #2c6956;
    text-decoration: none;
}

.back-link .material-symbols-outlined {
    font-size: 1.1rem;
}

:focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: var(--space-2);
    left: var(--space-2);
    transform: translateY(-150%);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.nav-bar {
    width: min(100% - (2 * var(--space-4)), var(--content-max));
    min-height: 4rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand, .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.brand {
    min-height: var(--target-min);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
}

.brand > span:first-child {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--color-brand-700);
}

.nav-links a, .button {
    min-height: var(--target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: 600;
}

.nav-links a {
    text-decoration: none;
}

.button {
    cursor: pointer;
    border: 1px solid transparent;
}

.button-primary {
    color: white;
    background: var(--color-brand-700);
}

.button-secondary {
    color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    background: var(--color-surface);
}

.button-danger {
    color: white;
    background: var(--color-danger);
}

.status-message, .state-panel {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.status-message--success {
    border-color: var(--color-brand-600);
    background: var(--color-brand-100);
}

.state-panel--error {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
}

.state-panel--location-warning {
    border-color: #d9a834;
    color: #704f08;
    background: #fff8df;
}

.confirmation-dialog {
    width: min(calc(100% - (2 * var(--space-4))), 32rem);
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}

.confirmation-dialog::backdrop {
    background: rgb(23 35 33 / 65%);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}