:root {
    --pico-font-size: 100%;
    --pico-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pico-primary: #234f76;
    --pico-primary-background: #234f76;
    --pico-primary-border: #234f76;
    --pico-primary-hover: #173c5c;
    --pico-primary-hover-background: #173c5c;
    --pico-primary-hover-border: #173c5c;
    --site-navy: #183b59;
    --site-blue: #285a83;
    --site-brick: #914c3f;
    --site-gold: #b39a68;
    --site-ink: #27313a;
    --site-muted: #66717a;
    --site-border: #d9d5cb;
    --site-soft: #f3f0e9;
    --site-paper: #fffefa;
    --site-canvas: #f7f5ef;
    --site-shadow: 0 .6rem 1.6rem rgba(33, 43, 50, .07);
}

body {
    color: var(--site-ink);
    background:
        linear-gradient(180deg, rgba(179, 154, 104, .08), transparent 15rem),
        var(--site-canvas);
}

h1,
h2,
h3,
.brand strong {
    color: var(--site-navy);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.015em;
}

.site-header {
    background: rgba(255, 254, 250, .97);
    border-top: .3rem solid var(--site-brick);
    box-shadow: 0 .15rem .8rem rgba(31, 44, 54, .06);
}

.brand-wrap {
    padding-top: 1.35rem;
    padding-bottom: 1.2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 3.15rem;
    height: 3.15rem;
    border: 1px solid var(--site-gold);
    color: var(--site-brick);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    box-shadow: inset 0 0 0 .22rem var(--site-paper), inset 0 0 0 .28rem var(--site-gold);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.brand strong {
    font-size: clamp(1.7rem, 4vw, 2.15rem);
    line-height: 1.1;
}

.brand-copy > span {
    color: var(--site-muted);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-nav {
    background: var(--site-navy);
    border: 0;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 2.65rem;
    padding-top: 0;
    padding-bottom: 0;
}

.nav-links a {
    position: relative;
    color: #e9edf0;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .08em;
    padding: .78rem 1rem .72rem;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-links a:first-child {
    padding-left: 0;
}

.nav-links a:first-child.active::after {
    left: 0;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active {
    color: #fff;
}

.nav-links a.active {
    font-weight: 700;
}

.nav-links a.active::after {
    position: absolute;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    height: .2rem;
    background: var(--site-gold);
    content: "";
}

.nav-links .maintenance-link {
    margin-left: auto;
}

body > main {
    min-height: 60vh;
    padding-top: clamp(1.5rem, 3vw, 2.75rem);
    padding-bottom: 5rem;
}

.welcome {
    position: relative;
    max-width: 58rem;
    border-left: .28rem solid var(--site-brick);
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
    background: var(--site-paper);
    box-shadow: var(--site-shadow);
}

.welcome h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.06;
    margin-bottom: 0;
}

.welcome > p:not(.eyebrow) {
    max-width: 43rem;
}

.welcome-about {
    max-width: 43rem;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(1rem, 4vw, 3rem);
}

.welcome-about h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: .6rem;
}

.welcome-about h2:first-child {
    margin-top: 0;
}

.dynamic-count,
.dynamic-count-pending {
    color: var(--site-brick);
}

.dynamic-count {
    font-weight: 700;
}

.dynamic-count-pending {
    font-weight: 500;
}

.page-heading {
    margin-bottom: 2rem;
}

.page-heading.compact {
    margin-bottom: 1.5rem;
}

.page-heading h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: .4rem;
}

.page-heading p:last-child {
    color: var(--pico-muted-color);
    margin-bottom: 0;
}

.eyebrow {
    display: block;
    color: var(--site-brick);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.table-switcher-wrap {
    background: #f0ede5;
    border-bottom: 1px solid var(--site-border);
}

.table-switcher {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .15rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
    scrollbar-color: var(--site-gold) transparent;
    scrollbar-width: thin;
}

.table-switcher a {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: .2rem;
    padding: .38rem .72rem;
    color: #59636b;
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.table-switcher a:hover,
.table-switcher a:focus {
    background: var(--site-paper);
    border-color: var(--site-border);
    color: var(--site-navy);
}

.table-switcher a.active {
    border-color: var(--site-border);
    background: var(--site-paper);
    color: var(--site-brick);
    font-weight: 700;
    box-shadow: 0 .1rem .25rem rgba(34, 44, 52, .06);
}

.additional-info {
    border: 1px solid #d4cfc3;
    border-top: .2rem solid var(--site-brick);
    border-radius: var(--pico-border-radius);
    background: var(--site-paper);
    box-shadow: 0 .4rem 1.1rem rgba(34, 44, 52, .05);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    overflow: clip;
}

.additional-info summary {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: .8rem;
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.15rem;
    color: var(--site-navy);
    transition: background-color .16s ease;
}

.additional-info summary::-webkit-details-marker {
    display: none;
}

.additional-info summary::marker {
    content: "";
}

.additional-info summary::after {
    display: none;
}

.additional-info summary:hover,
.additional-info summary:focus-visible {
    background: #f1eee7;
}

.additional-info[open] summary {
    border-bottom: 1px solid #ddd7ca;
    background: #f3f0e9;
}

.additional-info-icon {
    position: relative;
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--site-gold);
    background: var(--site-paper);
}

.additional-info-icon::before,
.additional-info-icon::after {
    position: absolute;
    right: .5rem;
    left: .5rem;
    height: 1px;
    background: var(--site-brick);
    content: "";
}

.additional-info-icon::before {
    top: .78rem;
}

.additional-info-icon::after {
    top: 1.3rem;
}

.additional-info-summary {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.additional-info-summary strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
}

.additional-info-summary small {
    color: var(--site-muted);
    font-size: .75rem;
    font-weight: 400;
}

.additional-info-chevron {
    width: .65rem;
    height: .65rem;
    border-right: .12rem solid var(--site-blue);
    border-bottom: .12rem solid var(--site-blue);
    transform: rotate(45deg) translate(-.1rem, -.1rem);
    transition: transform .18s ease;
}

.additional-info[open] .additional-info-chevron {
    transform: rotate(225deg) translate(-.1rem, -.1rem);
}

.additional-info-body {
    padding: clamp(1.15rem, 3vw, 2rem);
    animation: reference-reveal .2s ease-out;
}

.reference-layout {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 48rem);
    justify-content: center;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.reference-layout.without-contents {
    display: block;
}

.reference-contents {
    position: sticky;
    top: 1rem;
    border-left: .18rem solid var(--site-gold);
    padding: .2rem 0 .2rem .9rem;
}

.reference-contents p {
    color: var(--site-brick);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    margin: 0 0 .65rem;
    text-transform: uppercase;
}

.reference-contents ol {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reference-contents li {
    margin: 0;
}

.reference-contents a {
    color: var(--site-muted);
    font-size: .76rem;
    line-height: 1.3;
    text-decoration: none;
}

.reference-contents a:hover,
.reference-contents a:focus {
    color: var(--site-blue);
    text-decoration: underline;
    text-underline-offset: .15rem;
}

.reference-article {
    max-width: 48rem;
    font-size: .94rem;
    line-height: 1.72;
}

.reference-layout.without-contents .reference-article {
    margin-inline: auto;
}

.reference-article p {
    margin-bottom: 1.15rem;
}

.reference-article ul,
.reference-article ol {
    margin: -.25rem 0 1.2rem;
    padding-left: 1.4rem;
}

.reference-article li {
    margin-bottom: .38rem;
}

.reference-article h3 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

.reference-article h4 {
    scroll-margin-top: 1rem;
    border-bottom: 1px solid #d8d0c0;
    color: var(--site-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    margin: 2.25rem 0 .85rem;
    padding-bottom: .4rem;
}

.reference-article h4::after {
    display: block;
    width: 3rem;
    height: .13rem;
    margin: .4rem 0 -.48rem;
    background: var(--site-brick);
    content: "";
}

.reference-article h5 {
    color: var(--site-brick);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 1.45rem 0 .45rem;
    text-transform: uppercase;
}

.reference-article h3:first-child,
.reference-article h4:first-child {
    margin-top: 0;
}

.reference-article p:last-child {
    margin-bottom: 0;
}

.reference-article a {
    color: var(--site-blue);
    font-weight: 600;
    text-decoration-color: rgba(40, 90, 131, .42);
    text-underline-offset: .14rem;
}

.reference-article a:hover,
.reference-article a:focus {
    color: var(--site-brick);
    text-decoration-color: currentColor;
}

@keyframes reference-reveal {
    from {
        opacity: 0;
        transform: translateY(-.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-form {
    border: 1px solid #d4cfc4;
    border-top: .22rem solid var(--site-navy);
    border-radius: var(--pico-border-radius);
    background: var(--site-paper);
    box-shadow: var(--site-shadow);
    margin-bottom: 1.75rem;
    padding: clamp(1rem, 3vw, 1.4rem);
}

.search-form > label {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.search-help {
    display: block;
    color: var(--site-muted);
    font-size: .78rem;
    margin: -.15rem 0 .65rem;
}

.field-searches {
    border: 0;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #dfdbd2;
}

.field-searches legend {
    color: var(--site-navy);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .4rem;
    text-transform: uppercase;
}

.field-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.field-search-grid label,
.field-search-grid input {
    margin-bottom: 0;
}

.field-search-grid label > span {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.search-form input[type="search"] {
    border-color: #c9c5bb;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(30, 40, 48, .04);
}

.search-form input[type="search"]:focus {
    border-color: var(--site-blue);
    box-shadow: 0 0 0 .15rem rgba(40, 90, 131, .14);
}

.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .65rem;
}

.search-row > * {
    margin-bottom: 0;
}

.search-row button {
    background: var(--site-navy);
    border-color: var(--site-navy);
    font-weight: 700;
    width: auto;
}

.search-row button:hover,
.search-row button:focus {
    background: #102f49;
    border-color: #102f49;
}

.search-progress {
    width: 1.15rem;
    height: 1.15rem;
    border: .15rem solid var(--pico-muted-border-color);
    border-top-color: var(--site-blue);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

.result-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    color: var(--site-muted);
    font-size: .85rem;
    margin-bottom: .75rem;
    min-height: 1.75rem;
}

.result-range {
    color: var(--site-navy);
    font-weight: 700;
    letter-spacing: .02em;
}

.search-criteria {
    border: 1px solid #ded8ca;
    border-radius: 999px;
    background: #f0ede5;
    padding: .28rem .7rem;
}

.search-criteria strong {
    color: var(--site-ink);
}

.data-table-wrap,
.table-wrap {
    overflow-x: auto;
}

.data-table-wrap {
    border: 1px solid #cbc6bb;
    border-radius: var(--pico-border-radius);
    background: var(--site-paper);
    box-shadow: 0 .45rem 1.2rem rgba(34, 44, 52, .06);
    max-height: 34rem;
    overflow: auto;
    scrollbar-color: var(--site-blue) var(--site-soft);
    scrollbar-width: auto;
}

.data-table-wrap::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.data-table-wrap::-webkit-scrollbar-track {
    background: var(--site-soft);
}

.data-table-wrap::-webkit-scrollbar-thumb {
    background: var(--site-blue);
    border: 3px solid var(--site-soft);
    border-radius: 999px;
}

.data-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #315cc4;
}

.data-table-wrap::-webkit-scrollbar-corner {
    background: var(--site-soft);
}

.data-table {
    font-size: .82rem;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
}

.data-table th,
.data-table td {
    padding: .62rem .8rem;
    border-bottom: 1px solid #e2ded5;
}

.data-table th {
    background: var(--site-navy);
    position: sticky;
    top: 0;
    z-index: 2;
    color: #f7f4ed;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table th + th {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.data-table td {
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(odd) td {
    background: var(--site-paper);
}

.data-table tbody tr:nth-child(even) td {
    background: #f3f0e9;
}

.data-table tbody tr:hover td {
    background: #e8eef1;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.cell-details {
    width: min(24rem, 75vw);
    white-space: normal;
}

.cell-details summary {
    color: var(--site-blue);
    cursor: pointer;
}

.cell-details div {
    padding-top: .6rem;
    white-space: pre-wrap;
}

.pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid #d9d4c9;
    margin-top: 1rem;
    padding-top: 1rem;
}

.pager > :last-child {
    justify-self: end;
}

.pager > span {
    color: var(--site-muted);
    font-size: .85rem;
}

.pager a {
    border: 1px solid var(--site-border);
    border-radius: .2rem;
    background: var(--site-paper);
    padding: .4rem .75rem;
    text-decoration: none;
}

.pager a:hover,
.pager a:focus {
    border-color: var(--site-blue);
}

.empty-state {
    border: 1px dashed var(--site-border);
    border-radius: var(--pico-border-radius);
    background: rgba(255, 254, 250, .65);
    padding: 2rem;
    text-align: center;
}

.data-table-veterans th:nth-child(1),
.data-table-veterans th:nth-child(2),
.data-table-veterans th:nth-child(3) {
    min-width: 9rem;
}

.data-table-veterans th:nth-child(4),
.data-table-veterans th:nth-child(5) {
    min-width: 6rem;
}

.data-table-veterans th:nth-child(9) {
    min-width: 24rem;
}

.maintenance-form {
    border: 1px solid var(--site-border);
    border-top: .22rem solid var(--site-navy);
    border-radius: var(--pico-border-radius);
    background: var(--site-paper);
    box-shadow: var(--site-shadow);
    margin-bottom: 2rem;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.maintenance-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.logout-form,
.logout-form button {
    margin: 0;
}

.logout-form button {
    white-space: nowrap;
    width: auto;
}

.login-card {
    max-width: 30rem;
    margin-inline: auto;
    border: 1px solid var(--site-border);
    border-top: .22rem solid var(--site-navy);
    border-radius: var(--pico-border-radius);
    background: var(--site-paper);
    padding: clamp(1.25rem, 4vw, 2rem);
    box-shadow: var(--pico-card-box-shadow);
}

.login-card h1 {
    margin-bottom: .5rem;
}

.login-card button {
    margin-bottom: 0;
}

.login-error {
    border-left: .3rem solid #c52f21;
    background: #fff4f2;
    padding: .75rem 1rem;
}

.maintenance-form fieldset,
.maintenance-form legend {
    margin-bottom: 0;
}

.maintenance-form legend {
    font-weight: 700;
    padding-bottom: .75rem;
}

.maintenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .65rem;
}

.table-choice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border: 1px solid var(--site-border);
    border-radius: var(--pico-border-radius);
    background: #fbfaf6;
    cursor: pointer;
    margin: 0;
    padding: .85rem;
}

.table-choice:has(input:checked) {
    border-color: var(--site-blue);
    background: #eef3f5;
    box-shadow: 0 0 0 1px var(--site-blue);
}

.table-choice input {
    flex: 0 0 auto;
    margin-top: .2rem;
}

.table-choice span,
.table-choice strong,
.table-choice small {
    display: block;
}

.table-choice small {
    color: var(--pico-muted-color);
    font-size: .78rem;
    margin-top: .2rem;
}

.maintenance-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.maintenance-actions button {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
}

.maintenance-actions small {
    color: var(--pico-muted-color);
}

.status-card {
    border: 1px solid var(--pico-muted-border-color);
    border-left: .4rem solid var(--pico-primary-border);
    border-radius: var(--pico-border-radius);
    background: var(--site-paper);
    padding: clamp(1rem, 3vw, 2rem);
    box-shadow: var(--pico-card-box-shadow);
}

.status-card.success {
    border-left-color: #398712;
}

.status-card.danger {
    border-left-color: #c52f21;
}

.status-card.info {
    border-left-color: #1772ad;
}

.status-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.status-heading h2 {
    margin-bottom: .75rem;
}

.paths {
    display: grid;
    gap: .75rem;
}

.paths div {
    min-width: 0;
}

.paths dt {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.paths dd {
    margin: .2rem 0 0;
    overflow-wrap: anywhere;
}

.muted {
    color: var(--site-muted);
}

.site-footer {
    border-top: 1px solid var(--site-border);
    background: #eeebe3;
    color: var(--site-muted);
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.site-footer strong {
    color: var(--site-navy);
    font-family: Georgia, "Times New Roman", serif;
}

.number {
    text-align: right;
    white-space: nowrap;
}

.spinner {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    border: .2rem solid var(--pico-muted-border-color);
    border-top-color: var(--pico-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 50rem) {
    .nav-links .maintenance-link {
        margin-left: 0;
    }

    .search-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .field-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-progress {
        display: none;
    }

    .maintenance-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .maintenance-heading {
        flex-direction: column;
    }

    .maintenance-actions button {
        width: 100%;
    }

    .result-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-layout {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .reference-contents {
        position: static;
    }

    .reference-contents ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
    }
}

@media (max-width: 32rem) {
    .brand-mark {
        width: 2.65rem;
        height: 2.65rem;
        font-size: .66rem;
    }

    .brand strong {
        font-size: 1.5rem;
    }

    .brand-copy > span {
        font-size: .64rem;
    }

    .field-search-grid {
        grid-template-columns: 1fr;
    }

    .additional-info summary {
        grid-template-columns: 2.25rem minmax(0, 1fr) .8rem;
        gap: .65rem;
        padding-inline: .85rem;
    }

    .additional-info-summary small {
        display: none;
    }

    .reference-contents ol {
        grid-template-columns: 1fr;
    }

    .site-footer .container {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner,
    .search-progress,
    .additional-info-body {
        animation: none;
    }

    .additional-info summary,
    .additional-info-chevron {
        transition: none;
    }
}
