:root {
    --navy: #071b34;
    --paper: #fff;
    --workspace: #f1f4f8;
    --ink: #071526;
    --line: #d8dfe8;
    --danger: #8b1010;
    --focus: #165fb4;
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s12: 3rem;
    --radius: 0.375rem;
    --touch: 2.75rem;
    --content: 64rem;
    --measure: 44rem;
    --border: 1px;
    --focus-width: 3px;
    --text: 1rem;
    --large: clamp(1.7rem, 4vw, 2.5rem);
    --small: 0.875rem;
    --line-height: 1.65;
    --loading-height: 5rem;
    --zero: 0;
}
* {
    box-sizing: border-box;
}
body {
    margin: var(--zero);
    background: var(--workspace);
    color: var(--ink);
    font-family: Arimo, Arial, sans-serif;
    font-size: var(--text);
    line-height: var(--line-height);
    overflow-wrap: anywhere;
}
a {
    color: var(--ink);
    text-underline-offset: var(--s1);
}
button,
input,
select {
    font: inherit;
}
header {
    background: var(--navy);
    color: var(--paper);
    padding: var(--s4);
    display: flex;
    gap: var(--s6);
    align-items: center;
    flex-wrap: wrap;
}
header a {
    color: var(--paper);
    min-block-size: var(--touch);
    display: inline-flex;
    align-items: center;
    padding: var(--s2);
}
header nav {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}
header [aria-current] {
    text-decoration-thickness: var(--focus-width);
}
.brand {
    font-weight: 700;
    text-decoration: none;
}
#account {
    margin-inline-start: auto;
}
main {
    max-inline-size: var(--content);
    margin-inline: auto;
    padding: var(--s8) var(--s4);
    min-block-size: var(--loading-height);
}
h1 {
    font-size: var(--large);
    line-height: 1.2;
    margin-block: var(--s4) var(--s6);
}
h2 {
    margin-block-start: var(--zero);
}
p {
    max-inline-size: var(--measure);
}
section {
    background: var(--paper);
    border: var(--border) solid var(--line);
    border-radius: var(--radius);
    padding: var(--s6);
    margin-block: var(--s6);
}
button,
.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch);
    min-inline-size: var(--touch);
    padding: var(--s2) var(--s4);
    border: var(--border) solid var(--navy);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
}
button.primary,
a.primary {
    background: var(--navy);
    color: var(--paper);
}
button.danger {
    color: var(--danger);
    border-color: var(--danger);
    margin-block-start: var(--s8);
}
button:hover,
a.primary:hover {
    outline: var(--border) solid var(--focus);
}
button:active {
    transform: translateY(var(--border));
}
button:disabled,
fieldset:disabled {
    cursor: wait;
    opacity: 0.65;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--s1);
}
fieldset {
    border: var(--zero);
    margin: var(--zero);
    padding: var(--zero);
    min-inline-size: var(--zero);
}
legend {
    font-weight: 700;
    margin-block-end: var(--s4);
}
label {
    display: block;
    margin-block: var(--s4) var(--s2);
}
input:not([type="checkbox"]),
select {
    width: 100%;
    max-inline-size: var(--measure);
    min-block-size: var(--touch);
    padding: var(--s2);
    border: var(--border) solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}
.check {
    display: flex;
    gap: var(--s2);
    align-items: center;
    min-block-size: var(--touch);
}
input[type="checkbox"] {
    inline-size: var(--s6);
    block-size: var(--s6);
}
form button {
    margin-block-start: var(--s4);
}
.actions {
    display: flex;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-block: var(--s4);
}
.loading {
    min-block-size: var(--loading-height);
    background: var(--workspace);
    padding: var(--s4);
}
.error {
    border-inline-start: var(--focus-width) solid var(--danger);
    padding: var(--s4);
    background: var(--paper);
}
dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s2) var(--s4);
}
dd {
    margin: var(--zero);
}
ul {
    padding-inline-start: var(--s6);
}
li {
    padding-block: var(--s3);
}
table {
    inline-size: 100%;
    border-collapse: collapse;
}
th,
td {
    text-align: start;
    border-block-end: var(--border) solid var(--line);
    padding: var(--s3);
    overflow-wrap: anywhere;
}
footer {
    max-inline-size: var(--content);
    margin-inline: auto;
    padding: var(--s6) var(--s4);
}
.skip {
    position: absolute;
    inset-block-start: var(--s4);
    inset-inline-start: var(--s4);
    background: var(--paper);
    padding: var(--s4);
    transform: translateY(-200%);
}
.skip:focus {
    transform: none;
}
[hidden] {
    display: none !important;
}
.eyebrow {
    font-weight: 700;
}
#notice {
    min-block-size: var(--s12);
}
nav[id$="pagination"] {
    display: flex;
    gap: var(--s4);
}
nav[id$="pagination"] a {
    min-block-size: var(--touch);
    padding: var(--s2);
}
@media (max-width: 40rem) {
    header {
        gap: var(--s2);
    }
    header nav {
        inline-size: 100%;
    }
    #account {
        margin-inline-start: var(--zero);
    }
    section {
        padding: var(--s4);
    }
    dl {
        grid-template-columns: 1fr;
    }
    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }
    thead {
        position: absolute;
        clip-path: inset(100%);
    }
    td {
        border-block-end: var(--zero);
    }
    tr {
        border-block-end: var(--border) solid var(--line);
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}