/* Compact workspace composition over the shared public-site identity in brand.css. */
:root {
    --ink:var(--brand-navy);
    --muted:var(--brand-muted);
    --green:var(--brand-teal);
    --accent:var(--brand-blue);
    --paper:var(--brand-tint);
    --line:var(--brand-line);
    --sidebar:258px;
    --bs-primary:var(--brand-teal);
    --bs-link-color:var(--brand-teal);
    --bs-link-hover-color:var(--brand-teal-dark);
    --bs-body-color:var(--brand-ink);
    --bs-body-bg:var(--brand-tint);
    --bs-font-sans-serif:var(--brand-font)
}

body {
    font-size:14px;
    line-height:1.6
}

a {
    color:var(--green);
    text-decoration:none
}

a:hover {
    color:var(--brand-teal-dark)
}

h1,h2,h3 {
    color:var(--ink);
    font-weight:700;
    letter-spacing:-.035em
}

h1 {
    font-size:32px;
    line-height:1.2;
    margin:7px 0 12px
}

h2 {
    font-size:19px;
    line-height:1.4;
    letter-spacing:-.025em
}

h3 {
    font-size:16px
}

p {
    color:var(--brand-muted)
}

strong {
    font-weight:600
}

label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin:15px 0 7px;
    color:var(--brand-ink)
}

small {
    font-size:12px
}

.text-muted {
    color:var(--muted)!important
}

.eyebrow {
    font-size:10px;
    letter-spacing:.14em;
    font-weight:700;
    color:var(--brand-muted)
}

.btn {
    font-size:13px;
    font-weight:600;
    padding:10px 17px;
    border-radius:7px;
    white-space:nowrap;
    line-height:1.6
}

.btn-primary {
    --bs-btn-bg:var(--green);
    --bs-btn-border-color:var(--green);
    --bs-btn-hover-bg:var(--brand-teal-dark);
    --bs-btn-hover-border-color:var(--brand-teal-dark);
    --bs-btn-active-bg:var(--brand-teal-dark);
    --bs-btn-active-border-color:var(--brand-teal-dark);
    color:white
}

.btn-outline-primary {
    --bs-btn-color:var(--green);
    --bs-btn-border-color:var(--brand-line);
    --bs-btn-hover-bg:var(--green);
    --bs-btn-hover-border-color:var(--green)
}

.btn-light {
    background:var(--brand-white);
    border-color:var(--line);
    color:var(--brand-teal-dark)
}

.btn-sm {
    font-size:12px;
    padding:7px 11px
}

.form-control,.form-select {
    font-size:14px;
    min-height:43px;
    border-color:var(--brand-line);
    border-radius:7px;
    background-color:var(--brand-white)
}

.form-control:focus,.form-select:focus {
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px var(--brand-focus-ring)
}

.required-mark {
    color:var(--brand-teal-dark)
}

.validation-summary:has(ul) {
    background:var(--status-danger-bg);
    border:1px solid var(--status-danger-line);
    padding:15px 20px;
    border-radius:8px;
    margin-bottom:20px;
    color:var(--status-danger)
}

.validation-summary ul {
    margin:0
}

.validation-summary-valid {
    display:none
}

.alert {
    font-size:13px;
    border-radius:8px
}

.skip-link {
    position:absolute;
    left:-10000px;
    top:10px;
    z-index:100
}

.skip-link:focus {
    left:20px;
    background:white;
    padding:10px
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--brand-focus);
    outline-offset:3px
}

summary {
    cursor:pointer;
    color:var(--green);
    font-weight:600;
    font-size:13px
}

details>summary::marker {
    color:var(--brand-teal)
}

pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    border-radius:8px;
    background:var(--brand-blue);
    padding:18px;
    font-size:12px
}

dl {
    margin:0
}

dd {
    margin:0
}

.key-values {
    display:grid;
    grid-template-columns:minmax(110px,1fr) minmax(0,2fr);
    gap:12px 22px;
    margin:20px 0 25px;
    font-size:13px
}

.key-values dt {
    font-weight:500;
    color:var(--brand-muted)
}

.key-values dd {
    overflow-wrap:anywhere;
    color:var(--brand-ink)
}

.sidebar {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:var(--sidebar);
    background:var(--brand-white);
    border-right:1px solid var(--line);
    z-index:30;
    overflow-y:auto;
    padding:27px 19px 20px;
    scrollbar-width:thin
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:25px;
    font-weight:750;
    letter-spacing:-1.2px;
    color:var(--green);
    line-height:1
}

.workspace-brand-label {
    font-size:14px;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--brand-muted)
}

.workspace-label {
    font-size:9px;
    color:var(--brand-muted);
    letter-spacing:.14em;
    font-weight:700;
    margin:32px 10px 12px
}

.org-tile {
    position:relative;
    display:flex;
    gap:10px;
    padding:10px 8px 20px;
    border-bottom:1px solid var(--line);
    margin-bottom:10px
}

.org-settings-link {
    color:inherit
}

.org-settings-link:hover {
    color:var(--brand-teal-dark);
    text-decoration:underline;
    text-underline-offset:.2em
}

.org-monogram {
    background:var(--brand-tint);
    display:grid;
    place-items:center;
    width:31px;
    height:33px;
    flex-shrink:0;
    border-radius:7px;
    color:var(--brand-teal-dark);
    font-weight:600
}

.org-tile strong {
    display:block;
    font-size:12px;
    line-height:1.4
}

.org-tile small {
    font-size:9px;
    color:var(--brand-muted);
    display:block;
    margin-top:3px
}

.nav-group {
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--brand-muted);
    font-size:9px;
    font-weight:650;
    margin:19px 12px 6px
}

.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    color:var(--brand-muted);
    padding:7px 12px;
    margin:2px 0;
    border-radius:6px;
    font-weight:500
}

.nav-item>span {
    display:inline-block;
    width:16px;
    font-size:17px;
    color:var(--brand-muted);
    text-align:center;
    line-height:1
}

.nav-item.selected {
    background:var(--brand-blue);
    color:var(--brand-teal-dark);
    font-weight:650
}

.nav-item > .nav-label { width:auto; min-width:0; flex:1; font-size:inherit; line-height:1.4; text-align:left; color:inherit; }
.nav-item > .verification-nav-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; color:var(--brand-teal); flex-shrink:0; }
.sgo-verified-badge { display:block; width:32px; height:32px; flex-shrink:0; }
.verification-nav-icon .sgo-verified-badge { width:22px; height:22px; }
.sgo-verified-heading { display:flex; align-items:center; gap:10px; }
.sgo-verified-heading .sgo-verified-badge { width:1.25em; height:1.25em; }

.nav-item.selected>span {
    color:var(--brand-teal)
}

.nav-item:hover {
    background:var(--brand-tint)
}

.sidebar-footer {
    border-top:1px solid var(--line);
    margin-top:24px;
    padding:18px 11px 0;
    font-size:11px;
    color:var(--brand-muted)
}

.sidebar-footer small {
    display:block;
    font-size:9px;
    margin-top:5px;
    color:var(--brand-muted)
}

.demo-dot {
    display:inline-block;
    background:var(--brand-teal);
    width:6px;
    height:6px;
    border-radius:50%;
    margin-right:6px
}

.app-main {
    margin-left:var(--sidebar);
    min-height:100vh;
    display:flex;
    flex-direction:column
}

.topbar {
    height:79px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 38px;
    background:var(--brand-white);
    gap:20px
}

.header-org {
    font-size:12px;
    color:var(--brand-muted)
}

.program-label {
    font-size:11px;
    color:var(--brand-muted)
}

.header-divider {
    color:var(--brand-line)
}

.demo-badge {
    font-size:9px;
    letter-spacing:.07em;
    border:1px solid var(--status-warning-line);
    color:var(--status-warning);
    border-radius:5px;
    padding:5px 9px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:var(--status-warning-bg);
    font-weight:650;
    height:fit-content
}

.avatar {
    background:var(--brand-tint);
    display:inline-grid;
    place-items:center;
    width:31px;
    height:31px;
    border-radius:50%;
    font-size:11px;
    color:var(--brand-teal-dark)
}

.user-menu {
    position:relative
}

.user-menu summary {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:11px;
    font-weight:500;
    list-style:none
}

.user-menu summary::-webkit-details-marker {
    display:none
}

.user-popover {
    position:absolute;
    top:44px;
    right:0;
    z-index:40;
    min-width:210px;
    background:white;
    border:1px solid var(--line);
    padding:16px;
    border-radius:8px;
    box-shadow:0 12px 30px var(--brand-shadow-color);
    font-size:12px
}

.menu-toggle {
    display:none;
    border:0;
    background:transparent;
    font-size:22px;
    color:var(--green)
}

.content {
    padding:36px 38px 42px;
    max-width:1600px;
    width:100%;
    margin:auto;
    flex:1
}

.app-footer {
    display:flex;
    justify-content:space-between;
    margin:0 38px;
    padding:17px 0;
    border-top:1px solid var(--line);
    font-size:10px;
    color:var(--brand-muted)
}

.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:26px
}

.page-heading p {
    margin:0;
    font-size:13px;
    max-width:760px
}

.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:var(--brand-radius);
    padding:25px;
    box-shadow:0 2px 3px var(--brand-shadow-color)
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:23px 25px
}

.panel-heading h2 {
    margin:0
}

.panel-heading p {
    font-size:12px;
    margin:5px 0 0
}

.panel-heading>a {
    font-size:11px;
    white-space:nowrap
}

.tinted {
    background:var(--brand-tint);
    border-color:var(--brand-line)
}

.demo-strip {
    padding:13px 17px;
    display:flex;
    gap:14px;
    align-items:center;
    background:var(--brand-tint);
    border:1px solid var(--brand-line);
    border-radius:8px;
    font-size:11px;
    color:var(--brand-muted);
    margin-bottom:25px
}

.demo-strip a {
    margin-left:auto;
    white-space:nowrap;
    font-size:11px
}

.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px
}

.metric-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--brand-white);
    border:1px solid var(--line);
    border-radius:var(--brand-radius);
    padding:21px 23px;
    color:var(--brand-muted)
}

.metric-card:hover {
    border-color:var(--brand-line)
}

.metric-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:11px
}

.metric-symbol {
    width:28px;
    height:28px;
    background:var(--brand-tint);
    display:grid;
    place-items:center;
    border-radius:7px;
    color:var(--brand-teal);
    font-size:18px
}

.metric-card>strong {
    font-size:30px;
    letter-spacing:-.05em;
    line-height:1.5;
    color:var(--brand-navy);
    font-weight:600;
    margin:10px 0 8px;
    overflow-wrap:anywhere
}

.metric-card>small {
    font-size:10px;
    color:var(--brand-muted)
}

.metric-card>span {
    font-size:12px
}

.secondary-metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--brand-white);
    margin:20px 0 5px;
    padding:19px 0
}

.secondary-metrics>a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 23px;
    font-size:11px;
    border-right:1px solid var(--line);
    color:var(--brand-muted)
}

.secondary-metrics>a:last-child {
    border-right:0
}

.secondary-metrics strong {
    font-size:20px;
    color:var(--brand-teal-dark)
}

.secondary-metrics a>span:last-child {
    margin-left:auto
}

.status {
    display:inline-flex;
    padding:4px 10px;
    font-size:10px;
    line-height:1.4;
    color:var(--brand-muted);
    background:var(--brand-tint);
    border-radius:5px;
    white-space:nowrap;
    height:fit-content
}

.status.eligible,.status.approved,.status.processed,.status.disbursed,.status.active,.status.demoverified {
    color:var(--brand-emerald);
    background:var(--status-success-bg)
}

.status.submitted,.status.underreview,.status.unverified {
    color:var(--status-warning);
    background:var(--status-warning-bg)
}

.status.ineligible,.status.failed,.status.variance {
    color:var(--status-danger);
    background:var(--status-danger-bg)
}

.journey-progress {
    height:5px;
    background:var(--brand-blue);
    border-radius:10px;
    margin:20px 0
}

.journey-progress span {
    height:100%;
    display:block;
    background:var(--brand-teal);
    border-radius:10px
}

.journey-list {
    list-style:none;
    padding:0;
    margin:0
}

.journey-list li a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 0;
    color:var(--brand-muted);
    font-size:11px
}

.journey-list li a>span {
    display:inline-grid;
    place-items:center;
    width:20px;
    height:20px;
    border:1px solid var(--brand-line);
    border-radius:50%;
    font-size:11px;
    color:var(--brand-muted)
}

.journey-list .complete a {
    color:var(--brand-teal-dark)
}

.journey-list .complete a>span {
    background:var(--status-success-bg);
    color:var(--brand-teal);
    border-color:var(--brand-line)
}

.quiet-note {
    text-align:center;
    padding:10px;
    color:var(--brand-muted);
    font-size:14px;
    line-height:1.8
}

.welcome-panel {
    padding:34px;
    background:linear-gradient(120deg,var(--brand-tint),var(--brand-white) 80%)
}

.welcome-panel h2 {
    font-size:30px;
    line-height:1.2;
    margin:15px 0
}

.welcome-panel p {
    max-width:440px;
    font-size:13px
}

.fund-flow {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:21px;
    background:var(--brand-tint)
}

.fund-flow>div {
    display:flex;
    flex-direction:column;
    gap:6px
}

.fund-flow>div span {
    color:var(--brand-muted);
    font-size:10px
}

.fund-flow strong {
    font-size:22px;
    letter-spacing:-.04em;
    color:var(--brand-teal-dark)
}

.fund-flow>span {
    color:var(--brand-line)
}

.warning-box {
    background:var(--status-warning-bg);
    padding:17px 20px;
    border-radius:8px;
    border:1px solid var(--status-warning-line);
    font-size:11px;
    color:var(--status-warning)
}

.warning-box p {
    color:var(--status-warning);
    margin:7px 0 12px;
    font-size:11px
}

.activity-row {
    display:flex;
    align-items:start;
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid var(--brand-tint)
}

.activity-row:last-child {
    border-bottom:0;
    padding-bottom:0
}

.activity-row strong {
    font-size:11px
}

.activity-row p {
    font-size:10px;
    margin:3px 0 0;
    max-width:490px
}

.activity-row>small {
    font-size:9px;
    white-space:nowrap;
    margin-left:auto;
    color:var(--brand-muted)
}

.activity-dot {
    background:var(--brand-mint);
    border:4px solid var(--brand-tint);
    border-radius:50%;
    width:15px;
    height:15px;
    flex-shrink:0;
    margin-top:3px
}

.table {
    --bs-table-bg:transparent;
    font-size:11px;
    color:var(--brand-muted)
}

.table>thead>tr>th {
    font-size:9px;
    font-weight:550;
    letter-spacing:.025em;
    color:var(--brand-muted);
    background:var(--brand-tint);
    border-bottom:1px solid var(--line);
    padding:13px 18px;
    white-space:nowrap
}

.table>tbody>tr>td,.table>tbody>tr>th {
    padding:17px 18px;
    border-bottom:1px solid var(--brand-line);
    vertical-align:middle;
    color:var(--brand-muted)
}

.table>tbody>tr:last-child>td,.table>tbody>tr:last-child>th {
    border-bottom:0
}

.table>tbody>tr>td:first-child {
    padding-left:25px
}

.table-link {
    color:var(--brand-teal-dark);
    font-weight:550
}

.table-toolbar {
    display:flex;
    align-items:center;
    gap:13px;
    padding:19px 24px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap
}

.search-field {
    display:flex;
    align-items:center;
    gap:9px;
    flex:1;
    min-width:160px;
    max-width:330px;
    border:1px solid var(--line);
    padding:6px 12px;
    background:var(--brand-tint);
    border-radius:7px
}

.search-field>span {
    font-size:20px;
    color:var(--brand-muted)
}

.search-field input {
    background:transparent;
    border:0;
    outline:0;
    font-size:12px;
    width:100%;
    color:var(--brand-teal-dark)
}

.table-toolbar>.form-control {
    max-width:170px;
    font-size:11px
}

.record-count {
    font-size:11px;
    color:var(--brand-muted);
    margin-left:auto
}

.empty-state {
    padding:52px 25px;
    text-align:center
}

.empty-state p {
    font-size:12px;
    max-width:420px;
    margin:10px auto
}

.empty-icon {
    border-radius:12px;
    background:var(--brand-tint);
    color:var(--brand-teal);
    font-size:23px;
    width:46px;
    height:46px;
    margin:0 auto 16px;
    display:grid;
    place-items:center
}

.empty-state h3 {
    font-size:16px
}

.eligible-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px
}

.eligible-card {
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:16px;
    border-radius:8px;
    background:var(--brand-white);
    border:1px solid var(--brand-line);
    font-size:12px
}

.eligible-card span {
    font-size:11px;
    color:var(--brand-muted)
}

.decision-flow {
    display:grid;
    grid-template-columns:1fr .8fr 1.1fr;
    gap:30px
}

.decision-flow .key-values {
    grid-template-columns:1fr;
    gap:4px;
    font-size:12px
}

.decision-flow dd {
    margin-bottom:8px
}

.process-column {
    text-align:center;
    padding-top:0
}

.process-node {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    background:var(--brand-tint);
    border:1px solid var(--brand-line);
    border-radius:9px;
    padding:20px 10px;
    margin-top:25px;
    font-size:12px
}

.process-arrow {
    font-size:25px;
    color:var(--brand-teal);
    margin:8px 0 -17px
}

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

.recommendation-grid .metric-card {
    padding:18px
}

.recommendation-grid .metric-card strong {
    font-size:23px
}

.approval-form {
    max-width:450px
}

.explanation-box {
    background:var(--brand-tint);
    border:1px solid var(--brand-line);
    border-radius:8px;
    padding:20px
}

.catalog-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.engine-card,.integration-card {
    display:flex;
    flex-direction:column;
    padding:25px
}

.engine-icon {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    background:var(--brand-tint);
    border:1px solid var(--brand-line);
    border-radius:9px;
    font-size:22px;
    color:var(--brand-teal)
}

.engine-card h2,.integration-card h2 {
    margin:20px 0 11px;
    font-size:18px
}

.engine-card>p,.integration-card>p {
    font-size:12px;
    flex:1
}

.engine-stats {
    display:flex;
    gap:14px;
    font-size:10px;
    color:var(--brand-muted);
    margin:19px 0
}

.engine-stats span:last-child {
    margin-left:auto;
    font-size:9px
}

.engine-stats strong {
    font-weight:650;
    font-size:12px
}

.engine-link {
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:15px;
    font-size:12px;
    font-weight:600
}

.explanation-banner {
    display:flex;
    gap:20px;
    align-items:center;
    padding:27px;
    background:var(--brand-blue);
    border:1px solid var(--brand-line);
    border-radius:10px;
    margin-bottom:28px
}

.explanation-banner h2 {
    font-size:17px
}

.explanation-banner p {
    font-size:12px;
    margin:0;
    max-width:650px
}

.explanation-icon {
    font-size:30px;
    flex-shrink:0;
    color:var(--brand-teal)
}

.explanation-banner>.demo-badge {
    margin-left:auto
}

.integration-behavior {
    background:var(--brand-tint);
    border:1px solid var(--brand-tint);
    border-radius:7px;
    padding:15px;
    margin:12px 0 20px
}

.integration-behavior p {
    font-size:11px;
    margin:7px 0 0;
    min-height:36px
}

.integration-card .key-values {
    grid-template-columns:1fr;
    font-size:12px;
    gap:6px
}

.integration-card dd {
    margin-bottom:10px
}

.key-table th {
    width:35%;
    font-weight:500
}

.key-table td {
    overflow-wrap:anywhere
}

.report-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:23px;
    border-bottom:1px solid var(--brand-line)
}

.report-tabs a {
    padding:12px 15px;
    color:var(--brand-muted);
    font-size:12px;
    border-bottom:2px solid transparent
}

.report-tabs a.active {
    color:var(--brand-teal-dark);
    border-color:var(--brand-teal);
    font-weight:600
}

.advanced-settings {
    padding:17px;
    background:var(--brand-tint);
    border:1px solid var(--brand-line);
    border-radius:8px
}

.public-page {
    background:radial-gradient(ellipse at 20% 0%,var(--brand-blue),transparent 60%),var(--brand-tint)
}

.public-header {
    background:var(--brand-white);
    border-bottom:1px solid var(--brand-line);
    display:flex;
    align-items:center;
    gap:25px;
    justify-content:space-between;
    padding:28px 6vw
}

.public-content {
    min-height:70vh;
    padding:35px 24px
}

.public-header .demo-badge {
    min-width:0;
    white-space:normal;
    text-align:right
}

.auth-card {
    max-width:455px;
    margin:0 auto;
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:35px 39px;
    box-shadow:0 20px 60px var(--brand-shadow-color)
}

.auth-card h1 {
    font-size:30px;
    margin-top:12px
}

.auth-card label {
    margin-top:18px
}

.auth-card p {
    font-size:13px
}

.public-footer {
    text-align:center;
    color:var(--brand-muted);
    font-size:13px;
    line-height:1.9;
    padding:30px 20px
}

.public-footer small {
    font-size:10px
}

.setup-wrap {
    max-width:960px;
    margin:0 auto
}

.setup-wrap>.lead {
    font-size:16px;
    max-width:780px;
    line-height:1.8
}

.check-list {
    padding:0;
    list-style:none;
    margin:20px 0 35px
}

.check-list li {
    font-size:13px;
    padding:9px 0;
    color:var(--brand-muted)
}

.check-list span {
    margin-right:10px;
    color:var(--brand-teal)
}

.success-icon {
    display:grid;
    place-items:center;
    width:57px;
    height:57px;
    background:var(--brand-mint);
    color:var(--brand-teal);
    border-radius:50%;
    font-size:25px;
    margin-bottom:20px
}

@media(min-width:1600px) {
    .content {
        padding:42px 48px
    }
    .topbar {
        padding:0 48px
    }
    .metric-card>strong {
        font-size:36px
    }
}

@media(max-width:1200px) {
    :root {
        --sidebar:225px
    }
    .content {
        padding:27px 25px
    }
    .topbar {
        padding:0 25px
    }
    .header-org,.header-divider {
        display:none
    }
    .metric-card {
        padding:17px
    }
    .metric-card>strong {
        font-size:27px
    }
    .secondary-metrics>a {
        padding:0 15px;
        gap:8px;
        font-size:10px
    }
    .catalog-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .app-footer {
        margin:0 25px
    }
    .recommendation-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width:900px) {
    :root {
        --sidebar:210px
    }
    .metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:18px
    }
    .secondary-metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
        row-gap:16px
    }
    .secondary-metrics>a:nth-child(2) {
        border:0
    }
    .program-label {
        max-width:200px;
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .user-menu summary>span:nth-child(2) {
        display:none
    }
    .decision-flow {
        grid-template-columns:1fr
    }
    .process-column {
        display:flex;
        align-items:center;
        gap:15px;
        flex-wrap:wrap
    }
    .process-column .eyebrow {
        width:100%
    }
    .process-node {
        margin:0;
        padding:15px;
        flex:1
    }
    .process-arrow {
        transform:rotate(-90deg);
        margin:0
    }
    .decision-flow .key-values {
        grid-template-columns:1fr 2fr
    }
    .explanation-banner {
        align-items:flex-start;
        flex-wrap:wrap
    }
    .explanation-banner>.demo-badge {
        margin:0
    }
    .catalog-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:700px) {
    :root {
        --sidebar:250px
    }
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s
    }
    .nav-open .sidebar {
        transform:translateX(0);
        box-shadow:0 0 0 100vw var(--brand-overlay)
    }
    .app-main {
        margin:0
    }
    .menu-toggle {
        display:block
    }
    .topbar {
        height:65px;
        padding:0 17px;
        position:sticky;
        top:0;
        z-index:20;
        gap:10px
    }
    .topbar>.d-flex {
        gap:9px!important
    }
    .program-label {
        font-size:10px;
        max-width:155px
    }
    .topbar .demo-badge {
        font-size:8px;
        padding:4px 5px
    }
    .content {
        padding:24px 17px
    }
    .page-heading h1 {
        font-size:28px
    }
    .page-heading p {
        font-size:12px
    }
    .demo-strip {
        flex-wrap:wrap;
        font-size:10px;
        gap:9px
    }
    .demo-strip a {
        margin:0
    }
    .metric-grid {
        gap:12px
    }
    .metric-card>strong {
        font-size:27px
    }
    .metric-top {
        font-size:10px
    }
    .metric-card>small {
        font-size:9px
    }
    .panel {
        padding:21px
    }
    .panel-heading {
        padding:19px
    }
    .fund-flow {
        padding:17px;
        gap:9px
    }
    .fund-flow strong {
        font-size:19px
    }
    .fund-flow>div span {
        font-size:9px
    }
    .app-footer {
        margin:0 17px;
        font-size:9px;
        gap:20px
    }
    .app-footer>span:first-child {
        max-width:210px
    }
    .auth-card {
        padding:28px 25px
    }
    .public-header {
        padding:23px
    }
    .public-content {
        padding:20px 17px
    }
    .brand {
        font-size:23px
    }
    .setup-wrap h1 {
        font-size:28px
    }
    .table-toolbar {
        padding:15px
    }
    .search-field {
        max-width:none
    }
    .activity-row>small {
        display:none
    }
    .record-count {
        display:none
    }
    .explanation-banner {
        padding:21px
    }
    .key-values {
        gap:10px 15px;
        font-size:12px
    }
}
.active-workspace-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 1.5rem; background:var(--brand-tint); border-bottom:1px solid var(--brand-teal); font-size:.85rem; }
.active-workspace-bar span { min-width:0; overflow-wrap:anywhere; }
.active-workspace-bar a { flex-shrink:0; }
.access-request-row { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.access-request-person { flex:1 1 20rem; min-width:0; overflow-wrap:anywhere; }
.access-request-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.access-request-actions .btn { white-space:normal; }
.btn-wrap { white-space:normal; max-width:100%; }
.reference-environment { border:1px solid #9cd6db; border-left:4px solid #087f8c; border-radius:10px; padding:12px 16px; margin-bottom:20px; background:#eefafa; color:#23434c; overflow-wrap:anywhere; }
.reference-environment > strong { display:block; font-size:.8rem; letter-spacing:.06em; }
.reference-environment > span { font-size:.85rem; }
.reference-environment details { margin-top:6px; font-size:.8rem; }