:root {
    color-scheme: light;

    --page: #eef3f6;
    --page-soft: #f7fafc;

    --panel: #ffffff;
    --panel-soft: #f5f7f8;
    --panel-muted: #d9d9d9;
    --panel-green: #dce9f1;

    --line: #d9d9d9;
    --line-strong: #b8c6cf;

    --text: #003049;
    --text-soft: #31566a;
    --muted: #6f7d85;

    --navy: #003049;
    --blue: #669bbc;
    --blue-soft: #dce9f1;

    --accent: #ff8fab;
    --accent-hover: #f06f9a;
    --accent-soft: #ffe1eb;
    --accent-deep: #8a3554;

    --red: #b84455;
    --red-hover: #963746;
    --red-soft: #f9e5e8;

    --good: #497760;
    --good-bg: #edf5f0;
    --good-line: #b9d0c1;

    --bad: #a63e4e;
    --bad-bg: #fae8eb;
    --bad-line: #deb1b9;

    --warning: #94651c;
    --warning-bg: #fff4d7;

    --shadow: 0 8px 28px rgba(0, 48, 73, 0.07);
    --shadow-soft: 0 2px 10px rgba(0, 48, 73, 0.05);

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    --content-width: 1180px;
    --content-wide: 1460px;
    --sidebar-width: 255px;
}


/* =========================================================
   Global
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page);
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(
            180deg,
            #fafbf9 0,
            var(--page) 360px
        );
    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.45;
}

a {
    color: var(--accent-deep);
}

a:hover {
    color: #294437;
}

.page-shell {
    width: 100%;
    margin: 0;
}


/* =========================================================
   Legacy/module page helpers
   ========================================================= */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 3rem);
    letter-spacing: -0.03em;
}

.page-header p {
    margin: 6px 0 0;
    color: var(--muted);
}

.header-badges {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.badge.good {
    border-color: var(--good-line);
    background: var(--good-bg);
    color: var(--good);
}

.badge.bad {
    border-color: var(--bad-line);
    background: var(--bad-bg);
    color: var(--bad);
}


/* =========================================================
   Tabs
   ========================================================= */

.service-tabs,
.sub-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin: 0 0 15px;
}

.service-tabs a,
.sub-tabs a {
    display: block;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text-soft);
    text-align: center;
    text-decoration: none;
    font-weight: 750;
    box-shadow: var(--shadow-soft);
}

.service-tabs a:hover,
.sub-tabs a:hover {
    border-color: #afc2b5;
    background: var(--panel-green);
}

.service-tabs a.active,
.sub-tabs a.active {
    border-color: #9eb8a7;
    background: var(--accent-soft);
    color: var(--accent-deep);
}


/* =========================================================
   Cards / outcomes
   ========================================================= */

.card {
    margin-bottom: 15px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.card h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 1.15rem;
}

.outcome.success {
    border-color: var(--good-line);
    background: var(--good-bg);
}

.outcome.failure,
.card.failure {
    border-color: var(--bad-line);
    background: var(--bad-bg);
}

.outcome-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.outcome-title h2,
.outcome-title p {
    margin: 0;
}

.outcome-title p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.86rem;
}

.outcome-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(63, 118, 88, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    font-size: 1.35rem;
    font-weight: 900;
}


/* =========================================================
   Results
   ========================================================= */

.result-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));
    gap: 9px;
    margin: 12px 0;
}

.result-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-soft);
}

.result-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.result-grid strong {
    display: block;
    overflow-wrap: anywhere;
}


/* =========================================================
   Forms
   ========================================================= */

label {
    display: block;
    margin: 13px 0 6px;
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--text);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #8eaa98;
    box-shadow:
        0 0 0 3px
        rgba(127, 157, 139, 0.15);
}

textarea {
    min-height: 145px;
    resize: vertical;
    line-height: 1.5;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}

button {
    margin-top: 14px;
    padding: 10px 15px;
    border: 1px solid var(--accent);
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

button:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

button.secondary {
    margin-top: 0;
    border: 1px solid var(--line-strong);
    background: var(--panel-soft);
    color: var(--text-soft);
}

button.secondary:hover {
    border-color: #a9b9ad;
    background: var(--panel-green);
}

button:disabled {
    border-color: #d0d6d1;
    background: #e6e9e6;
    color: #8c958f;
    cursor: not-allowed;
    opacity: 0.8;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inline-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    align-items: end;
}

.selector-form {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.locked-destination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-soft);
}

.locked-destination span {
    color: var(--muted);
}


/* =========================================================
   Text helpers
   ========================================================= */

.note {
    color: var(--muted);
    font-size: 0.9rem;
}

.error-text {
    color: var(--bad);
    font-weight: 700;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.good-text {
    color: var(--good);
}

.bad-text {
    color: var(--bad);
}

.mono,
code,
pre {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}

code {
    color: var(--blue);
    overflow-wrap: anywhere;
}

pre {
    max-height: 480px;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f4f7f4;
    color: #3c4941;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.78rem;
}

details {
    margin-top: 12px;
}

summary {
    cursor: pointer;
    color: var(--text-soft);
    font-weight: 700;
}


/* =========================================================
   Diagnostics
   ========================================================= */

.attempt-list {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.attempt-row {
    display: grid;
    grid-template-columns: 90px 70px 150px 1fr;
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel-soft);
}

.diagnostic-list {
    display: grid;
    gap: 8px;
}

.diagnostic-list > div {
    display: grid;
    grid-template-columns: 165px 150px 1fr;
    gap: 10px;
    align-items: start;
    padding: 9px;
    border-bottom: 1px solid #e3e8e3;
}

.diagnostic-list span {
    color: var(--text-soft);
    font-weight: 700;
}

.diagnostic-list code {
    color: var(--muted);
}

ul {
    margin-bottom: 0;
}


/* =========================================================
   Standard wrapper: full-width header
   ========================================================= */

.standard-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.standard-header {
    width: 100%;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8faf7
        );
}

.standard-header-inner {
    width:
        min(
            var(--content-wide),
            calc(100% - 40px)
        );
    margin: 0 auto;
    padding: 18px 0 15px;
}

.standard-topline {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.standard-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text);
    text-decoration: none;
}

.standard-brand:hover {
    color: var(--text);
}

.standard-brand strong {
    font-size: 1.18rem;
    letter-spacing: -0.02em;
}

.standard-brand span {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.standard-request {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.74rem;
    text-align: right;
}

.standard-user {
    padding: 4px 8px;
    border: 1px solid #c9d7cc;
    border-radius: 999px;
    background: var(--panel-green);
    color: var(--accent-deep);
    font-weight: 700;
}

.standard-header-lower {
    margin-top: 16px;
}

.standard-page-heading h1 {
    margin: 0;
    color: var(--text);
    font-size:
        clamp(
            1.65rem,
            3vw,
            2.35rem
        );
    letter-spacing: -0.03em;
}

.standard-page-heading p {
    margin: 4px 0 0;
    color: var(--muted);
}

.standard-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.standard-nav a {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--text-soft);
    text-align: center;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 750;
}

.standard-nav a:hover {
    border-color: #afc1b4;
    background: var(--panel-green);
}

.standard-nav a.active {
    border-color: #9ab3a1;
    background: var(--accent-soft);
    color: var(--accent-deep);
}


/* =========================================================
   Body layout
   ========================================================= */

.standard-body-layout {
    width:
        min(
            var(--content-width),
            calc(100% - 40px)
        );
    margin: 0 auto;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.standard-shell.has-sidebar
.standard-body-layout {
    width:
        min(
            var(--content-wide),
            calc(100% - 40px)
        );
    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);
}

.standard-main {
    min-width: 0;
    padding: 24px 0 34px;
}


/* =========================================================
   Optional left sidebar
   ========================================================= */

.standard-sidebar {
    min-width: 0;
    margin-top: 24px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #f9fbf8;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 18px;
}

.standard-sidebar-heading {
    padding: 5px 8px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.standard-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.sidebar-group {
    border-radius: 9px;
    overflow: hidden;
}

.sidebar-parent {
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font: inherit;
    font-size: 0.87rem;
    font-weight: 750;
    cursor: pointer;
}

.sidebar-parent:hover {
    background: #edf2ed;
    color: var(--accent-deep);
}

.sidebar-parent.active {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.sidebar-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.62;
    transition: transform 260ms ease;
}

.sidebar-parent.active
.sidebar-chevron {
    transform: rotate(225deg);
}

.sidebar-children {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height 330ms ease,
        opacity 220ms ease,
        transform 330ms ease;
}

.sidebar-group.open
.sidebar-children {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
}

.sidebar-children-inner {
    padding: 2px 0 7px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-child {
    display: block;
    padding: 7px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 7px 7px 0;
    color: #68756d;
    text-decoration: none;
    font-size: 0.81rem;
}

.sidebar-child:hover {
    padding-left: 13px;
    background: #f0f4f0;
    color: var(--accent-deep);
}

.sidebar-child.active {
    border-left-color: var(--accent);
    background: var(--panel-green);
    color: var(--accent-deep);
    font-weight: 750;
}


/* =========================================================
   Footer
   ========================================================= */

.standard-footer {
    width: 100%;
    border-top: 1px solid var(--line);
    background: #eef2ed;
}

.standard-footer-inner {
    width:
        min(
            var(--content-wide),
            calc(100% - 40px)
        );
    margin: 0 auto;
    padding: 14px 0 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.76rem;
}


/* =========================================================
   Module status
   ========================================================= */

.module-status {
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel-soft);
}

.module-status .header-badges {
    justify-content: flex-start;
}


/* =========================================================
   Audit viewer
   ========================================================= */

.audit-toolbar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 14px;
}

.audit-toolbar label {
    margin-top: 0;
}

.audit-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    background: #fff;
}

.audit-table th,
.audit-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e2e7e2;
    vertical-align: top;
    text-align: left;
    font-size: 0.84rem;
}

.audit-table th {
    width: auto;
    color: #59665e;
    background: #eef2ed;
    white-space: nowrap;
}

.audit-table tbody tr:hover {
    background: #f7f9f6;
}

.audit-request {
    max-width: 370px;
    word-break: break-word;
}

.audit-detail {
    margin-top: 7px;
}

.audit-detail summary {
    cursor: pointer;
    color: var(--accent-deep);
    font-weight: 700;
}

.audit-detail-grid {
    display: grid;
    grid-template-columns:
        190px
        minmax(0, 1fr);
    gap: 1px;
    margin-top: 9px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.audit-detail-grid > div {
    padding: 8px 9px;
    background: #fff;
}

.audit-detail-grid .audit-key {
    background: #f1f4f0;
    color: #66736b;
    font-weight: 700;
}

.audit-json {
    margin: 0;
    max-height: 340px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #46534b;
    font-size: 0.78rem;
}

.audit-count {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.86rem;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {

    .standard-header-inner,
    .standard-body-layout,
    .standard-shell.has-sidebar .standard-body-layout,
    .standard-footer-inner {
        width:
            min(
                100% - 24px,
                var(--content-wide)
            );
    }

    .standard-shell.has-sidebar
    .standard-body-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .standard-sidebar {
        position: static;
        margin-top: 18px;
    }

    .standard-sidebar-nav {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 5px 10px;
    }

    .standard-main {
        padding-top: 18px;
    }
}


@media (max-width: 760px) {

    .page-header,
    .standard-topline,
    .standard-footer-inner {
        flex-direction: column;
    }

    .standard-request {
        justify-content: flex-start;
        text-align: left;
    }

    .header-badges {
        justify-content: flex-start;
    }

    .field-grid,
    .service-tabs,
    .sub-tabs {
        grid-template-columns: 1fr;
    }

    .attempt-row,
    .diagnostic-list > div {
        grid-template-columns: 1fr;
    }

    .inline-controls {
        grid-template-columns: 1fr;
    }

    .standard-nav {
        align-items: stretch;
    }

    .standard-nav a {
        flex: 1 1 140px;
    }

    .audit-toolbar,
    .audit-detail-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 560px) {

    .standard-sidebar-nav {
        grid-template-columns: 1fr;
    }

    .standard-header-inner,
    .standard-body-layout,
    .standard-shell.has-sidebar .standard-body-layout,
    .standard-footer-inner {
        width: calc(100% - 18px);
    }

    .card {
        padding: 14px;
        border-radius: 13px;
    }
}


/* =========================================================
   Authenticated header / logout
   ========================================================= */

.standard-logout-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    transition:
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease;
}

.standard-logout-link:hover {
    border-color: #afc1b4;
    background: var(--panel-green);
    color: var(--accent-deep);
}

.standard-logout-link:focus-visible {
    outline: none;
    border-color: #8eaa98;
    box-shadow:
        0 0 0 3px
        rgba(127, 157, 139, 0.15);
}


/* =========================================================
   Current light-theme refinements
   ========================================================= */

.standard-request .mono {
    color: #7d8981;
}

.standard-shell.no-sidebar .standard-main {
    width: 100%;
}

.standard-shell.has-sidebar .standard-main {
    width: 100%;
}

.standard-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #c8d3ca transparent;
}

.standard-sidebar::-webkit-scrollbar {
    width: 8px;
}

.standard-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.standard-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c8d3ca;
    border: 2px solid #f9fbf8;
}

.standard-sidebar::-webkit-scrollbar-thumb:hover {
    background: #b5c3b8;
}

/* =========================================================
   DVH v8 theme and wrapper overrides
   Palette: #003049 / #669bbc / #ff8fab / #d9d9d9
   ========================================================= */

body {
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            var(--page) 390px
        );
    color: var(--text);
}

a {
    color: var(--navy);
}

a:hover {
    color: var(--accent-deep);
}


/* =========================================================
   Forms and general UI
   ========================================================= */

input,
select,
textarea {
    border-color: var(--line-strong);
    background: #ffffff;
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(102, 155, 188, 0.18);
}

button {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
}

button:hover {
    border-color: #5488a8;
    background: #5488a8;
}

button.secondary {
    border-color: var(--line-strong);
    background: #ffffff;
    color: var(--navy);
}

button.secondary:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--navy);
}

.card {
    border-color: var(--line);
    border-top: 3px solid rgba(102, 155, 188, 0.55);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.card.failure,
.outcome.failure {
    border-color: var(--bad-line);
    border-top-color: var(--red);
    background: var(--bad-bg);
}

.outcome.success {
    border-color: var(--good-line);
    border-top-color: var(--good);
}

.module-status {
    border-color: var(--line);
    border-left: 4px solid var(--blue);
    background: var(--panel-soft);
}

.badge {
    border-color: var(--line);
    background: #ffffff;
    color: var(--text-soft);
}

.result-grid > div,
.attempt-row,
.locked-destination {
    border-color: var(--line);
    background: var(--panel-soft);
}

code {
    color: #355f78;
}

pre {
    border-color: var(--line);
    background: #f4f7f9;
    color: #314c5b;
}

.service-tabs a,
.sub-tabs a {
    border-color: var(--line);
    background: #ffffff;
    color: var(--text-soft);
}

.service-tabs a:hover,
.sub-tabs a:hover {
    border-color: var(--blue);
    background: var(--blue-soft);
}

.service-tabs a.active,
.sub-tabs a.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--navy);
}

.audit-table-wrap {
    border-color: var(--line);
    background: #ffffff;
}

.audit-table {
    background: #ffffff;
}

.audit-table th,
.audit-table td {
    border-bottom-color: var(--line);
}

.audit-table th {
    background: var(--panel-muted);
    color: var(--navy);
    border-bottom: 2px solid var(--blue);
}

.audit-table tbody tr:hover {
    background: #f4f8fb;
}

.audit-detail-grid {
    background: var(--line);
    border-color: var(--line);
}

.audit-detail-grid > div {
    background: #ffffff;
}

.audit-detail-grid .audit-key {
    background: var(--blue-soft);
    color: var(--navy);
}


/* =========================================================
   Standard wrapper shell
   ========================================================= */

.standard-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.standard-header {
    width: 100%;
    border: 0;
    background: transparent;
}

.top-band-inner {
    width: 100%;
    margin: 0;
    padding-left: 28px;
    padding-right: 28px;
}


/* ---------------------------------------------------------
   top-top — dismissible important alerts
   --------------------------------------------------------- */

.top-top {
    width: 100%;
    background: var(--navy);
    color: #ffffff;
    border-bottom: 2px solid var(--accent);
}

.top-top[hidden] {
    display: none !important;
}

.top-top-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.top-alert-message {
    min-width: 0;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.top-alert-item[hidden] {
    display: none !important;
}

.top-alert-dismiss {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #dbe7ed;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 2px;
    cursor: pointer;
    opacity: 0.86;
}

.top-alert-dismiss:hover,
.top-alert-dismiss:focus-visible {
    border: 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
    opacity: 1;
}


/* ---------------------------------------------------------
   top-middle — compact routing links
   --------------------------------------------------------- */

.top-middle {
    width: 100%;

    background:
        linear-gradient(
            90deg,
            #78abc9 0%,
            #669bbc 55%,
            #5589aa 100%
        );

    color: var(--navy);
    border-bottom: 1px solid #5389ab;
}

.top-middle-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 34px;
}

.top-middle-brand {
    flex: 0 0 auto;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    color: var(--navy);
    text-decoration: none;
}

.top-middle-brand:hover {
    color: var(--navy);
}

.top-middle-brand strong {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.top-middle-brand span {
    color: rgba(0, 48, 73, 0.76);
    font-size: 0.70rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.top-middle-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.top-middle-nav a {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
    padding: 5px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--navy);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 780;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}

.top-middle-nav a:hover {
    background: rgba(255, 255, 255, 0.36);
    color: var(--navy);
}

.top-middle-nav a.active {
    background: var(--accent);
    color: var(--navy);
}

.top-middle-pipe {
    align-self: center;
    flex: 0 0 1px;
    width: 1px;
    height: 32px;
    margin: 0 2px;
    background: rgba(0, 48, 73, 0.46);
}


/* ---------------------------------------------------------
   top-bottom — breadcrumb / future site tree
   --------------------------------------------------------- */

.top-bottom {
    width: 100%;
    background: var(--panel-muted);
    color: var(--navy);
    border-bottom: 1px solid #c7c7c7;
}

.top-bottom-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
}

.top-breadcrumb {
    width: 100%;
}

.top-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: #53636b;
    font-size: 0.76rem;
    font-weight: 680;
}

.top-breadcrumb li + li::before {
    content: ">";
    display: inline-block;
    margin: 0 8px;
    color: var(--accent-deep);
    font-weight: 900;
}

.top-breadcrumb a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 780;
}

.top-breadcrumb a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 2px;
}

.top-breadcrumb li[aria-current="page"] {
    color: var(--accent-deep);
    font-weight: 800;
}


/* =========================================================
   Current page heading
   ========================================================= */

.standard-page-context {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.standard-page-context h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.55rem, 2.7vw, 2.20rem);
    letter-spacing: -0.03em;
}

.standard-page-context h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.standard-page-context p {
    margin: 6px 0 0;
    color: var(--muted);
}


/* =========================================================
   Body layout
   ========================================================= */

.standard-body-layout {
    width: min(var(--content-width), calc(100% - 40px));
    margin: 0 auto;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.standard-shell.has-sidebar .standard-body-layout {
    width: min(var(--content-wide), calc(100% - 40px));
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.standard-main {
    width: 100%;
    min-width: 0;
    padding: 24px 0 34px;
}


/* =========================================================
   Static grouped left navigation
   ========================================================= */

.standard-sidebar {
    min-width: 0;
    margin-top: 24px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 18px;
    overflow: hidden;
}

.standard-sidebar-heading {
    padding: 12px 14px;
    background: var(--navy);
    color: #ffffff;
    border-bottom: 3px solid var(--accent);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.standard-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.sidebar-group {
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.sidebar-group:last-child {
    border-bottom: 0;
}

.sidebar-group-heading {
    padding: 11px 14px 8px;
    background: var(--blue-soft);
    color: var(--navy);
    border-left: 4px solid var(--blue);
    font-size: 0.86rem;
    font-weight: 850;
    letter-spacing: 0.015em;
}

.sidebar-group-description {
    padding: 0 14px 8px 18px;
    background: var(--blue-soft);
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    padding: 6px 8px 9px;
    gap: 4px;
}

.sidebar-child {
    display: block;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--panel-soft);
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.81rem;
    font-weight: 680;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.sidebar-child:hover {
    background: var(--accent-soft);
    border-color: #f4b6ca;
    color: var(--navy);
}

.sidebar-child.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--navy);
    font-weight: 820;
}

.sidebar-child.active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--navy);
}


/* =========================================================
   Footer
   ========================================================= */

.standard-footer {
    width: 100%;
    border-top: 1px solid #c7c7c7;
    background: var(--panel-muted);
    box-shadow: inset 0 3px 0 rgba(102, 155, 188, 0.24);
}

.standard-footer-inner {
    width: min(var(--content-wide), calc(100% - 40px));
    margin: 0 auto;
    padding: 14px 0 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #5e6870;
    font-size: 0.76rem;
}


/* =========================================================
   Responsive overrides
   ========================================================= */

@media (max-width: 900px) {

    .top-band-inner,
    .standard-body-layout,
    .standard-shell.has-sidebar .standard-body-layout,
    .standard-footer-inner {
        width: min(100% - 24px, var(--content-wide));
        padding-left: 0;
        padding-right: 0;
    }

    .standard-shell.has-sidebar .standard-body-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .standard-sidebar {
        position: static;
        margin-top: 18px;
    }

    .standard-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-group {
        border-right: 1px solid var(--line);
    }

    .standard-main {
        padding-top: 18px;
    }

    .top-middle-inner {
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .top-middle-brand {
        min-width: 0;
    }

    .top-middle-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .top-middle-pipe {
        height: 26px;
    }
}

@media (max-width: 620px) {

    .top-top-inner {
        min-height: 42px;
        align-items: flex-start;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .top-alert-message {
        font-size: 0.72rem;
    }

    .top-middle-nav a {
        margin-left: 3px;
        margin-right: 3px;
        padding: 5px 6px;
    }
}

@media (max-width: 560px) {

    .standard-sidebar-nav {
        grid-template-columns: 1fr;
    }

    .top-band-inner,
    .standard-body-layout,
    .standard-shell.has-sidebar .standard-body-layout,
    .standard-footer-inner {
        width: calc(100% - 18px);
    }
}
/* =========================================================
   DVH wrapper refinements v9
   Plain left navigation + breadcrumb + logout placement
   ========================================================= */


/* ---------------------------------------------------------
   Left navigation: flat, square, plain
   --------------------------------------------------------- */

.standard-sidebar {
    border: 1px solid #b7bec2;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
}

.standard-sidebar-heading {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #9fa7ac;
    background: #8e979d;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.standard-sidebar-nav {
    gap: 0;
    background: #ffffff;
}

.sidebar-group {
    border: 0;
    border-bottom: 1px solid #bfc5c8;
    border-radius: 0;
    background: #ffffff;
}

.sidebar-group:last-child {
    border-bottom: 0;
}

.sidebar-group-heading {
    padding: 11px 14px;
    border: 0;
    border-radius: 0;
    background: #c5c9cc;
    color: #253b48;
    font-size: 0.96rem;
    font-weight: 500;
    letter-spacing: 0;
}

.sidebar-group-description {
    padding: 8px 14px 9px;
    border: 0;
    border-top: 1px solid #d1d5d7;
    background: #dfe2e4;
    color: #65727a;
    font-size: 0.83rem;
    font-weight: 400;
    line-height: 1.4;
}

.sidebar-links {
    gap: 0;
    padding: 0;
    background: #ffffff;
}

.sidebar-child {
    display: block;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-top: 1px solid #e0e3e5;
    border-radius: 0;
    background: #ffffff;
    color: #364c59;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    transition:
        background 130ms ease,
        color 130ms ease,
        border-color 130ms ease;
}

.sidebar-child:hover {
    padding-left: 14px;
    border-color: #d4d9dc;
    background: #f1f3f4;
    color: #003049;
}

.sidebar-child.active {
    border: 0;
    border-top: 1px solid #d8dde0;
    border-left: 4px solid #ff8fab;
    border-radius: 0;
    background: #eceff1;
    color: #003049;
    font-weight: 400;
}

.sidebar-child.active:hover {
    border-color: #d8dde0;
    border-left-color: #ff8fab;
    background: #e7eaec;
    color: #003049;
}


/* ---------------------------------------------------------
   Breadcrumb: larger, plain, regular-weight text
   --------------------------------------------------------- */

.top-bottom-inner {
    min-height: 42px;
    justify-content: space-between;
    gap: 20px;
}

.top-breadcrumb {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
}

.top-breadcrumb ol {
    gap: 0;
}

.top-breadcrumb li {
    color: #435966;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.2;
    transition: color 130ms ease;
}

.top-breadcrumb li + li::before {
    margin: 0 9px;
    color: #84939c;
    font-size: 0.92rem;
    font-weight: 400;
}

.top-breadcrumb a {
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    text-decoration: none;
    transition: color 130ms ease;
}

.top-breadcrumb li[aria-current="page"] {
    color: #435966;
    font-weight: 400;
}

.top-breadcrumb li:hover,
.top-breadcrumb li:hover a {
    color: #8da0ab;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Log out: far-right utility link in top-bottom
   --------------------------------------------------------- */

.top-bottom-logout {
    flex: 0 0 auto;
    margin-left: auto;
    color: #536873;
    font-size: 0.82rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color 130ms ease;
}

.top-bottom-logout:hover,
.top-bottom-logout:focus-visible {
    color: #8da0ab;
    text-decoration: none;
    outline: none;
}


/* ---------------------------------------------------------
   Slightly plainer body/sidebar relationship
   --------------------------------------------------------- */

.standard-shell.has-sidebar .standard-body-layout {
    gap: 22px;
}

.standard-sidebar {
    top: 16px;
}


/* ---------------------------------------------------------
   Responsive refinements
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .standard-sidebar {
        border-radius: 0;
    }

    .top-bottom-inner {
        gap: 14px;
    }

}


@media (max-width: 620px) {

    .top-bottom-inner {
        align-items: flex-start;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .top-breadcrumb li {
        font-size: 0.88rem;
    }

    .top-bottom-logout {
        padding-top: 1px;
        font-size: 0.78rem;
    }

}
/* =========================================================
   DVH wrapper member alerts v10
   ========================================================= */

.top-alert-action {
    margin-left: 10px;
    color: inherit;
    font-size: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.top-alert-action:hover,
.top-alert-action:focus-visible {
    color: rgba(255, 255, 255, 0.78);
    outline: none;
}

.top-alert-dismiss:disabled {
    cursor: wait;
    opacity: 0.62;
}
/* =========================================================
   DVH wrapper refinements v11
   Compact sidebar + sticky primary navigation
   ========================================================= */


/* ---------------------------------------------------------
   Allow top-middle to remain sticky beyond the header box.
   The three visual bands already supply their own backgrounds.
   --------------------------------------------------------- */

.standard-header {
    display: contents;
}


/* ---------------------------------------------------------
   Sticky top-middle primary navigation
   --------------------------------------------------------- */

.top-middle {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 7px rgba(0, 48, 73, 0.16);
}

.top-middle-inner {
    gap: 24px;
}

.top-middle-nav {
    flex: 1 1 auto;
}


/* ---------------------------------------------------------
   Signed-in identity / logout
   --------------------------------------------------------- */

.top-middle-logout {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 5px 0 5px 12px;
    color: var(--navy);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: color 130ms ease;
}

.top-middle-logout:hover,
.top-middle-logout:focus-visible {
    color: rgba(0, 48, 73, 0.62);
    text-decoration: none;
    outline: none;
}


/* ---------------------------------------------------------
   Left navigation: no heading, no sticky behaviour,
   reduced spacing and compact uppercase section labels.
   --------------------------------------------------------- */

.standard-sidebar {
    position: static;
    top: auto;
    margin-top: 18px;
}

.standard-sidebar-heading {
    display: none;
}

.sidebar-group-heading {
    padding: 6px 10px;
    background: #b8bec2;
    color: #253b48;
    font-size: 0.70rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.065em;
    line-height: 1.2;
}

.sidebar-group-description {
    padding: 5px 10px 6px;
    font-size: 0.74rem;
    line-height: 1.3;
}

.sidebar-child {
    padding: 7px 10px;
    font-size: 0.90rem;
    line-height: 1.2;
}

.sidebar-child:hover {
    padding-left: 10px;
}

.sidebar-child.active {
    padding-left: 7px;
}


/* ---------------------------------------------------------
   Breadcrumb no longer needs to reserve space for logout.
   --------------------------------------------------------- */

.top-bottom-inner {
    justify-content: flex-start;
}


/* ---------------------------------------------------------
   Responsive behaviour
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .top-middle-inner {
        gap: 14px;
    }

    .top-middle-logout {
        margin-left: auto;
        padding-left: 8px;
        font-size: 0.78rem;
    }

}


@media (max-width: 700px) {

    .top-middle {
        position: relative;
        top: auto;
        box-shadow: none;
    }

    .top-middle-inner {
        align-items: flex-start;
    }

    .top-middle-logout {
        margin-left: 0;
    }

}
/* =========================================================
   DVH wrapper refinements v12
   Sticky breadcrumb band + white active top navigation
   ========================================================= */


/* ---------------------------------------------------------
   top-middle scrolls normally
   --------------------------------------------------------- */

.top-middle {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
}


/* ---------------------------------------------------------
   top-bottom becomes the sticky navigation/breadcrumb band
   --------------------------------------------------------- */

.top-bottom {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 7px rgba(0, 48, 73, 0.14);
}

.top-bottom-inner {
    justify-content: space-between;
    gap: 20px;
}


/* ---------------------------------------------------------
   Logout identity lives at the far right of top-bottom
   --------------------------------------------------------- */

.top-bottom-logout {
    flex: 0 0 auto;
    margin-left: auto;
    color: #536873;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: color 130ms ease;
}

.top-bottom-logout:hover,
.top-bottom-logout:focus-visible {
    color: #8da0ab;
    text-decoration: none;
    outline: none;
}

.top-middle-logout {
    display: none;
}


/* ---------------------------------------------------------
   Active top-middle route: white highlight instead of pink
   --------------------------------------------------------- */

.top-middle-nav a.active,
.top-middle-nav .active > a,
.top-middle-link.active,
.top-nav-link.active {
    background: #ffffff;
    color: #003049;
    border-radius: 6px;
    box-shadow: none;
}


/*
 * Override any older pink active-state border/background declaration
 * without changing the compact selected-route footprint.
 */
.top-middle-nav a[aria-current="page"],
.top-middle-nav a.is-active,
.top-middle-nav .is-active,
.top-middle-link[aria-current="page"],
.top-middle-link.is-active {
    background: #ffffff;
    color: #003049;
    border-color: #ffffff;
    box-shadow: none;
}


/* ---------------------------------------------------------
   Breadcrumb remains regular-weight and simple
   --------------------------------------------------------- */

.top-breadcrumb li,
.top-breadcrumb a,
.top-breadcrumb li[aria-current="page"] {
    font-weight: 400;
}


/* ---------------------------------------------------------
   Mobile: keep top-bottom useful but avoid awkward stickiness
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .top-bottom {
        position: relative;
        top: auto;
        box-shadow: none;
    }

    .top-bottom-inner {
        align-items: flex-start;
        gap: 12px;
    }

    .top-bottom-logout {
        margin-left: auto;
        font-size: 0.78rem;
    }

}
/* =========================================================
   DVH wrapper refinements v13
   Garamond branding + page titles + sticky NavPanel
   ========================================================= */


/* ---------------------------------------------------------
   Top-middle brand typography
   --------------------------------------------------------- */

.top-middle-brand strong {
    font-family:
        Garamond,
        Georgia,
        serif;

    font-size: 1.48rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.05;
}

.top-middle-brand span {
    margin-top: 3px;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.105em;
}


/* ---------------------------------------------------------
   Main page title
   --------------------------------------------------------- */

.standard-page-context {
    border-bottom: 0;
    padding-bottom: 10px;
}

.standard-page-context h1 {
    display: inline-block;
    position: relative;

    margin: 0;

    font-family:
        Garamond,
        Georgia,
        serif;

    font-size: clamp(1.85rem, 3vw, 2.55rem);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.08;
}

.standard-page-context h1::after {
    content: "";
    display: block;

    width: 100%;
    height: 3px;
    margin-top: 7px;

    border-radius: 999px;
    background: var(--accent);
}


/* ---------------------------------------------------------
   Desktop NavPanel remains visible while the page scrolls.
   The sticky top-bottom band is approximately 42px high,
   so leave a small gap beneath it.
   --------------------------------------------------------- */

@media (min-width: 901px) {

    .standard-sidebar {
        position: sticky;
        top: 56px;

        max-height: calc(100vh - 74px);
        overflow-y: auto;
        overflow-x: hidden;

        align-self: start;
    }

}


/* ---------------------------------------------------------
   Mobile/tablet retains normal in-flow NavPanel behaviour.
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .standard-sidebar {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }

}


/* =========================================================
   DVH wrapper refinements v14
   Sticky NavPanel correction — natural height, no own scrollbar
   ========================================================= */

@media (min-width: 901px) {

    .standard-shell.has-sidebar .standard-body-layout {
        align-items: start;
    }

    .standard-sidebar,
    .dvh-navpanel {
        position: sticky !important;
        top: 54px !important;
        margin-bottom: 20px;

        align-self: start;
        height: max-content;
        max-height: none !important;

        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

}


/*
 * On narrower layouts the NavPanel remains part of the normal document flow.
 */
@media (max-width: 900px) {

    .standard-sidebar,
    .dvh-navpanel {
        position: static !important;
        top: auto !important;
        height: auto;
        max-height: none !important;
        overflow: visible !important;
    }

}


/* =========================================================
   DVH wrapper refinements v15
   Top-middle right-side Vitruvian image
   ========================================================= */

.top-middle-inner {
    position: relative;
}

.top-middle-image {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: -28px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    height: 76px;

    overflow: visible;
    pointer-events: none;
}

.top-middle-image img {
    display: block;
    width: 200px;
    height: auto;
    max-width: none;
    object-fit: contain;

    opacity: 0.30;
    filter: grayscale(35%) brightness(1.4);
}

.top-middle-nav {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 1100px) {
    .top-middle-image img {
        width: 180px;
        height: auto;
    }
}

@media (max-width: 700px) {
    .top-middle-image {
        width: 100%;
        height: 58px;
        margin-left: 0;
        margin-right: 0;
        justify-content: flex-end;
    }

    .top-middle-image img {
        width: 150px;
        height: auto;
    }
}

/* =========================================================
   DVH wrapper refinements v18
   Common AJAX state / feedback language
   ========================================================= */

/*
 * These classes are deliberately presentation-only.
 * house/standard.js will add and remove them when the common
 * AJAX subsystem is implemented.
 *
 * They work on anything from a tiny inline SPAN to a large
 * multi-DIV region.
 */

.dvh-ajax-target {
    position: relative;
}


/* ---------------------------------------------------------
   Request in progress
   --------------------------------------------------------- */

.dvh-ajax-loading {
    opacity: 0.72;
    transition:
        opacity 120ms ease;
}

.dvh-ajax-loading,
.dvh-ajax-loading * {
    cursor: progress;
}


/*
 * Applied to an individual initiating control while a request
 * is in flight.  The disabled HTML property will still be used
 * where appropriate; this class provides consistent appearance.
 */
.dvh-ajax-disabled {
    opacity: 0.62;
}


/* ---------------------------------------------------------
   Successful update
   DVH identity: brief pink -> blue perimeter flash
   --------------------------------------------------------- */

.dvh-ajax-success {
    animation:
        dvhAjaxSuccessFlash 650ms ease-out;
}

@keyframes dvhAjaxSuccessFlash {

    0% {
        box-shadow:
            0 0 0 2px rgba(255, 143, 171, 0.82);
    }

    46% {
        box-shadow:
            0 0 0 2px rgba(102, 155, 188, 0.48);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(102, 155, 188, 0);
    }

}


/* ---------------------------------------------------------
   Failed update
   --------------------------------------------------------- */

.dvh-ajax-error {
    animation:
        dvhAjaxErrorFlash 850ms ease-out;
}

@keyframes dvhAjaxErrorFlash {

    0% {
        box-shadow:
            0 0 0 2px rgba(173, 58, 58, 0.82);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(173, 58, 58, 0);
    }

}


/* ---------------------------------------------------------
   Optional soft background confirmation.
   standard.js will only use this when explicitly requested.
   --------------------------------------------------------- */

.dvh-ajax-highlight {
    animation:
        dvhAjaxHighlight 700ms ease-out;
}

@keyframes dvhAjaxHighlight {

    0% {
        background-color:
            rgba(255, 143, 171, 0.10);
    }

    100% {
        background-color:
            transparent;
    }

}


/* ---------------------------------------------------------
   Accessibility: honour reduced-motion preference while still
   leaving the final interface state clear and usable.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .dvh-ajax-loading {
        transition: none;
    }

    .dvh-ajax-success,
    .dvh-ajax-error,
    .dvh-ajax-highlight {
        animation: none;
    }

}


/* =========================================================
   Login page: responsive desktop / mobile presentation
   ========================================================= */

.dvh-login-shell {
    width: min(100%, 29rem);
    margin: clamp(12px, 3vw, 22px) auto 40px;
}

.dvh-login-card {
    padding: clamp(20px, 3vw, 28px);
}

.dvh-login-form input:not([type="hidden"]) {
    min-height: 46px;
    font-size: 1rem;
}

.dvh-login-form button[type="submit"] {
    width: 100%;
    min-height: 46px;
    margin-top: 20px;
}

.dvh-login-form .note {
    margin: 18px 0 0;
    text-align: center;
}

@media (max-width: 620px) {

    body.dvh-login-page .top-bottom {
        display: none;
    }

    body.dvh-login-page .top-middle-inner {
        padding-top: 10px;
        padding-bottom: 4px;
        gap: 5px;
    }

    body.dvh-login-page .top-middle-brand {
        padding-left: 6px;
    }

    body.dvh-login-page .top-middle-image {
        height: 48px;
        margin-right: -10px;
        align-items: flex-end;
        transform: translate(18px, 6px);
    }

    body.dvh-login-page .top-middle-image img {
        width: 142px;
    }

    body.dvh-login-page .standard-main {
        padding-top: 12px;
    }

    body.dvh-login-page .standard-page-context {
        display: none;
    }

    body.dvh-login-page .dvh-login-shell {
        width: min(calc(100% - 22px), 22rem);
        margin-top: 5px;
        margin-bottom: 24px;
    }

    body.dvh-login-page .dvh-login-card {
        padding: 17px 16px;
        border-radius: 11px;
    }

    body.dvh-login-page .dvh-login-form input:not([type="hidden"]),
    body.dvh-login-page .dvh-login-form button[type="submit"] {
        min-height: 44px;
    }

    body.dvh-login-page .dvh-login-form button[type="submit"] {
        margin-top: 16px;
    }

    body.dvh-login-page .dvh-login-form .note {
        margin-top: 14px;
    }

}



/* =========================================================
   DVH inactivity / privacy lock
   house/inactivity.js
   ========================================================= */

body.dvh-inactivity-locked {
    overflow: hidden;
}

.dvh-inactivity-dialog {
    width: min(430px, calc(100vw - 34px));
    padding: 0;
    border: 1px solid #9cabb2;
    border-radius: 12px;
    background: #ffffff;
    color: #263940;
    box-shadow: 0 18px 55px rgba(0, 48, 73, 0.28);
}

.dvh-inactivity-dialog::backdrop {
    background: rgba(0, 48, 73, 0.50);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dvh-inactivity-inner {
    padding: 20px;
}

.dvh-inactivity-title {
    margin: 0 0 8px;
    color: #003049;
    font-family: Garamond, Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
}

.dvh-inactivity-copy {
    margin: 0 0 14px;
    color: #556970;
    line-height: 1.45;
}

.dvh-inactivity-countdown {
    margin: 0 0 15px;
    padding: 8px 10px;
    border-left: 4px solid #669bbc;
    background: #f5f8fa;
    color: #003049;
    font-size: 0.84rem;
}

.dvh-inactivity-form {
    display: grid;
    gap: 10px;
}

.dvh-inactivity-form label {
    display: grid;
    gap: 5px;
    margin: 0;
    color: #42565f;
    font-size: 0.82rem;
}

.dvh-inactivity-form input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #b8c4c9;
    border-radius: 7px;
    font: inherit;
}

.dvh-inactivity-form input[type="password"]:focus {
    border-color: #669bbc;
    outline: 2px solid rgba(102, 155, 188, 0.18);
    outline-offset: 1px;
}

.dvh-inactivity-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.dvh-inactivity-login-link {
    color: #003049;
    font-size: 0.82rem;
}

.dvh-inactivity-login-link:hover,
.dvh-inactivity-login-link:focus-visible {
    color: #669bbc;
}

.dvh-inactivity-status {
    min-height: 1.25em;
    margin-top: 4px;
    color: #874451;
    font-size: 0.82rem;
}

.dvh-inactivity-dialog .dvh-ajax-disabled {
    opacity: 0.68;
}

@media (max-width: 520px) {

    .dvh-inactivity-inner {
        padding: 17px;
    }

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

    .dvh-inactivity-actions button {
        width: 100%;
    }

}


/* =========================================================
   Desktop Nav-Panel collapsible cohorts
   Enabled only by wrapper_desktop.php.
   ========================================================= */

/* Frame the whole cohort, so its border follows the expanding link list. */
.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group {
    box-sizing: border-box;
    margin-bottom: 0;
    border: 4px solid #dce4e9;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group:last-child {
    margin-bottom: 0;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-toggle {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-toggle:hover {
    background: #cbd0d3;
    color: var(--navy);
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-toggle:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group.has-active-route > .sidebar-group-toggle {
    color: var(--navy);
    box-shadow: inset 3px 0 0 var(--blue);
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .68;
    transform: rotate(45deg);
    transition: transform 240ms ease;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-content {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows 280ms ease,
        opacity 190ms ease;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-content-inner {
    min-height: 0;
    overflow: hidden;
}

.dvh-navpanel[data-navpanel-collapsible="true"]
.dvh-navpanel-nav.dvh-navpanel-enhanced
.sidebar-group:not(.is-expanded)
.sidebar-group-content {
    grid-template-rows: 0fr;
    opacity: 0;
}

.dvh-navpanel[data-navpanel-collapsible="true"]
.dvh-navpanel-nav.dvh-navpanel-enhanced
.sidebar-group.is-expanded
.sidebar-group-chevron {
    transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
    .dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-content,
    .dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group-chevron {
        transition: none;
    }
}

/* Keep selection backgrounds without coloured left-edge markers. */
.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-group.has-active-route > .sidebar-group-toggle {
    box-shadow: none;
}

.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-child.active,
.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-child.active:hover {
    border-left: 0;
    padding-left: 10px;
}

/* Selected page: a lighter companion to the Top Middle blue. */
.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-child.active,
.dvh-navpanel[data-navpanel-collapsible="true"] .sidebar-child.active:hover {
    background: #b4d2e4;
    color: var(--navy);
}