@media (max-width: 640px) {
    .ecosystem-map .ecosystem-node {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        min-height: 0;
    }
    .ecosystem-map .ecosystem-node strong {
        font-family: system-ui, sans-serif;
    }
    .ecosystem-map .ecosystem-node-status {
        white-space: normal;
    }
}

.ecosystem-dashboard,
.workspace-evidence,
.workspace-unavailable {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 1rem 0 3rem;
    color: #e4edf0;
}

.ecosystem-dashboard *,
.workspace-evidence *,
.workspace-unavailable * {
    box-sizing: border-box;
}

.ecosystem-kicker {
    margin: 0 0 .65rem;
    color: #70d7e8;
    font: 600 .7rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ecosystem-intro {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(100, 180, 200, .2);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 86% 18%, rgba(43, 131, 157, .13), transparent 45%),
        linear-gradient(135deg, rgba(11, 37, 54, .96), rgba(8, 27, 42, .98));
}

.ecosystem-intro h1 {
    max-width: 860px;
    margin: .4rem 0 1rem;
    color: #f2f7f6;
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: 1.02;
}

body.pcm-workspace .ecosystem-dashboard .ecosystem-intro h1 {
    font-size: clamp(1.65rem, 3vw, 2.4rem) !important;
    letter-spacing: -.055em !important;
    line-height: 1.02 !important;
}

.ecosystem-intro h1 span {
    color: #85cdd7;
}

.ecosystem-lede {
    max-width: 780px;
    margin: 0;
    color: #b3c7ce;
    font-size: clamp(.98rem, 1.4vw, 1.08rem);
    line-height: 1.6;
}

.ecosystem-primary-link,
.ecosystem-limits > a {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1.4rem;
    padding: .72rem 1rem;
    border: 1px solid rgba(100, 215, 229, .35);
    border-radius: 9px;
    background: rgba(53, 161, 183, .1);
    color: #9be5ec !important;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
}

.ecosystem-primary-link:hover,
.ecosystem-limits > a:hover {
    background: rgba(53, 161, 183, .18);
}

.ecosystem-dashboard a:focus-visible,
.workspace-evidence button:focus-visible,
.ecosystem-node:focus-visible,
.workspace-unavailable a:focus-visible {
    outline: 3px solid #8ce6ed;
    outline-offset: 3px;
}

.ecosystem-diagram-section {
    margin-top: 1.5rem;
}

.ecosystem-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ecosystem-section-heading h2,
.ecosystem-limits h2,
.workspace-evidence h1,
.workspace-unavailable h1 {
    margin: 0;
    color: #edf5f3;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 620;
    letter-spacing: -.035em;
}

.ecosystem-map-label {
    color: #9bb5be;
    font: 500 .72rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
}

.ecosystem-map {
    position: relative;
    overflow: hidden;
    padding: clamp(.6rem, 2vw, 1.2rem);
    border: 1px solid rgba(100, 180, 200, .17);
    border-radius: 16px;
    background:
        linear-gradient(rgba(18, 47, 62, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 47, 62, .5) 1px, transparent 1px),
        #0a202c;
    background-size: 28px 28px;
}

.ecosystem-connectors {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ecosystem-connectors path {
    fill: none;
    stroke: rgba(116, 198, 211, .48);
    stroke-width: 1.2;
    stroke-dasharray: 5 7;
    vector-effect: non-scaling-stroke;
}

.ecosystem-connectors marker path {
    fill: #78cbd6;
    stroke: none;
}

.ecosystem-map-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(8rem, auto));
    gap: clamp(.6rem, 1.5vw, 1rem);
}

.ecosystem-node {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(125, 180, 192, .24);
    border-radius: 12px;
    background: rgba(12, 34, 47, .97);
    color: #e5eff1;
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.ecosystem-node:hover,
.ecosystem-node[aria-expanded="true"] {
    border-color: rgba(126, 214, 224, .66);
    background: #112f3b;
}

.ecosystem-node:active {
    transform: translateY(1px);
}

.node-guardian { grid-area: 1 / 2; }
.node-kojie { grid-area: 1 / 2; }
.node-sovereign { grid-area: 1 / 3; }
.node-relay { grid-area: 2 / 1; }
.node-pcm { grid-area: 2 / 2; border-color: rgba(119, 207, 217, .52); background: #10303b; }
.node-tools { grid-area: 2 / 3; }
.node-evidence { grid-area: 3 / 2; }

.ecosystem-node-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #9bb8c0;
    font: 500 .68rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .02em;
}

.ecosystem-node-dot {
    width: .42rem;
    height: .42rem;
    flex: 0 0 auto;
    border: 1px solid #76c8d4;
    border-radius: 50%;
    background: #224b57;
}

.ecosystem-node strong {
    display: block;
    margin: .65rem 0 .35rem;
    color: #edf5f4;
    font-size: 1.04rem;
    font-weight: 650;
    letter-spacing: -.02em;
}

.ecosystem-node-status {
    display: block;
    color: #adbec2;
    font-size: .76rem;
    line-height: 1.45;
}

.ecosystem-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .65rem 1rem;
    margin: .8rem .1rem 0;
    color: #9db2b8;
    font-size: .75rem;
    line-height: 1.5;
}

.ecosystem-legend > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.legend-line {
    width: 1.6rem;
    border-top: 1px dashed #78cbd6;
}

.ecosystem-details {
    margin-top: 1rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid rgba(120, 195, 208, .28);
    border-radius: 14px;
    background: linear-gradient(145deg, #102b37, #0d2530);
}

.ecosystem-details[hidden] { display: none; }

.ecosystem-details h3 {
    margin: 0 0 1rem;
    color: #eff7f5;
    font-size: 1.25rem;
}

.ecosystem-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.ecosystem-detail-grid > div {
    padding: .9rem;
    border: 1px solid rgba(125, 180, 192, .14);
    border-radius: 9px;
    background: rgba(5, 22, 31, .45);
}

.ecosystem-detail-grid strong {
    color: #8ed4de;
    font: 600 .72rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    text-transform: uppercase;
}

.ecosystem-detail-grid p,
.ecosystem-detail-note {
    margin: .4rem 0 0;
    color: #b5c8cb;
    font-size: .86rem;
    line-height: 1.6;
}

.ecosystem-details a {
    display: inline-block;
    margin-top: 1rem;
    color: #91dce5 !important;
    font-size: .85rem;
}

.ecosystem-detail-note {
    margin-top: 1rem;
    font-size: .75rem;
}

.ecosystem-limits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(194, 168, 119, .25);
    border-radius: 14px;
    background: rgba(61, 53, 38, .14);
}

.ecosystem-limits > div { max-width: 760px; }
.ecosystem-limits .ecosystem-kicker { color: #d1b77c; }
.ecosystem-limits p:last-child {
    margin: .7rem 0 0;
    color: #b8c6c5;
    font-size: .9rem;
    line-height: 1.65;
}
.ecosystem-limits > a { flex: 0 0 auto; margin-top: 0; }

.ecosystem-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.workspace-evidence-head,
.workspace-unavailable-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.workspace-evidence-lede,
.workspace-unavailable-lede {
    max-width: 800px;
    margin: .75rem 0 0;
    color: #aebfc3;
    font-size: .92rem;
    line-height: 1.7;
}

.workspace-asof {
    margin: 1rem 0;
    color: #a9bbc0;
    font: 500 .78rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
}

.workspace-refresh {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .62rem .9rem;
    border: 1px solid rgba(105, 206, 219, .35);
    border-radius: 8px;
    background: rgba(46, 135, 153, .1);
    color: #a2e0e7;
    font: 600 .8rem/1.2 "DM Sans", sans-serif;
    cursor: pointer;
}

.workspace-refresh:hover { background: rgba(46, 135, 153, .2); }
.workspace-refresh:disabled { opacity: .55; cursor: progress; }

.workspace-observation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.workspace-observation-card {
    min-width: 0;
    padding: 1.2rem;
    border: 1px solid rgba(114, 172, 184, .2);
    border-radius: 13px;
    background: linear-gradient(145deg, #102b37, #0c222e);
}

.workspace-observation-card[aria-busy="true"] .observation-state,
.workspace-observation-card[aria-busy="true"] .observation-freshness {
    color: transparent;
    border-color: transparent;
    background: rgba(130, 168, 174, .12);
}

.workspace-observation-card[aria-busy="true"] .observation-state { width: 7rem; }
.workspace-observation-card[aria-busy="true"] .observation-freshness { width: 8.5rem; }

.workspace-observation-card[aria-busy="true"] .observation-fields dd {
    width: min(13rem, 100%);
    min-height: .95rem;
    overflow: hidden;
    color: transparent;
    border-radius: 3px;
    background: rgba(130, 168, 174, .1);
}

.workspace-observation-card h2 {
    margin: 0;
    color: #eaf3f1;
    font-size: 1.02rem;
    line-height: 1.4;
}

.workspace-observation-card .source-caption {
    min-height: 3.2em;
    margin: .55rem 0 1rem;
    color: #a7bbc0;
    font-size: .78rem;
    line-height: 1.6;
}

.observation-state-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.observation-state,
.observation-freshness {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .25rem .55rem;
    border: 1px solid rgba(151, 178, 184, .26);
    border-radius: 99px;
    background: rgba(13, 35, 44, .75);
    color: #c2d1d0;
    font-size: .68rem;
    font-weight: 650;
}

.observation-state[data-state="observed"] { border-color: rgba(109, 183, 196, .45); color: #a9dce2; }
.observation-state[data-state="no_records"] { color: #d4c495; border-color: rgba(194, 168, 119, .35); }
.observation-state[data-state="unavailable"],
.observation-state[data-state="restricted"] { color: #d3aaa3; border-color: rgba(202, 137, 127, .32); }
.observation-freshness[data-freshness="recent"] { color: #a9dce2; border-color: rgba(109, 183, 196, .38); }
.observation-freshness[data-freshness="stale"],
.observation-freshness[data-freshness="unknown"],
.observation-freshness[data-freshness="none"] { color: #c7b98e; }

.observation-fields {
    display: grid;
    gap: .72rem;
    margin: 0;
}

.observation-fields div {
    padding-top: .65rem;
    border-top: 1px solid rgba(133, 169, 176, .12);
}

.observation-fields dt {
    margin-bottom: .25rem;
    color: #91aeb5;
    font: 500 .67rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.observation-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #d3dfdc;
    font-size: .78rem;
    line-height: 1.55;
}

.workspace-observation-error,
.workspace-notice {
    margin: 1rem 0;
    padding: .85rem 1rem;
    border: 1px solid rgba(198, 142, 127, .28);
    border-radius: 9px;
    background: rgba(67, 37, 36, .25);
    color: #d9c2bc;
    font-size: .83rem;
    line-height: 1.55;
}

.workspace-notices { margin-top: 1.5rem; }
.workspace-notices h2 { color: #e7efec; font-size: 1rem; }
.workspace-notices ul { padding-left: 1.2rem; color: #b7c5c5; }
.workspace-notices li { margin: .45rem 0; font-size: .82rem; line-height: 1.5; }

.workspace-evidence-note {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    border-left: 2px solid #c5aa72;
    background: rgba(57, 51, 39, .18);
    color: #c3ceca;
    font-size: .84rem;
    line-height: 1.65;
}

.workspace-unavailable-panel {
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid rgba(194, 168, 119, .25);
    border-radius: 14px;
    background: rgba(39, 38, 32, .32);
}

.workspace-unavailable-list {
    display: grid;
    gap: .75rem;
    padding: 0;
    margin: 1.4rem 0 0;
    list-style: none;
}

.workspace-unavailable-list li {
    padding: .85rem 1rem;
    border: 1px solid rgba(151, 166, 164, .16);
    border-radius: 9px;
}

.workspace-unavailable-list strong { display: block; color: #e2eae7; }
.workspace-unavailable-list code { color: #95c6cd; font: 500 .68rem/1.5 "IBM Plex Mono", ui-monospace, monospace; }
.workspace-unavailable-list span { display: block; margin-top: .25rem; color: #aebdba; font-size: .8rem; line-height: 1.5; }
.workspace-backlink { display: inline-block; margin-top: 1.3rem; color: #9fe1e7 !important; }

.ecosystem-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .6rem;
}

.ecosystem-dashboard-actions .ecosystem-primary-link {
    margin-top: .75rem;
}

.ecosystem-link-muted {
    border-color: rgba(161, 168, 160, .28);
    background: rgba(87, 91, 83, .12);
    color: #c1c5bb !important;
}

.ecosystem-link-muted span {
    color: #9ca7a3;
    font-size: .72rem;
    font-weight: 500;
}

.workspace-reports,
.workspace-capability,
.workspace-relay {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.4rem) 0 4rem;
    color: #e4edf0;
}

.workspace-reports-header,
.workspace-contract-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.workspace-reports-header h1,
.workspace-capability h1,
.workspace-relay h1 {
    margin: 0;
    color: #edf5f3;
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 650;
    letter-spacing: -.045em;
}

.workspace-reports-lede,
.workspace-capability-reason,
.workspace-relay-state {
    max-width: 860px;
    margin: .75rem 0 0;
    color: #afc2c4;
    font-size: .93rem;
    line-height: 1.7;
}

.workspace-report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.workspace-poll-note {
    color: #91aab0;
    font: 500 .68rem/1.45 "IBM Plex Mono", ui-monospace, monospace;
}

.workspace-report-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin: 1.2rem 0 .8rem;
}

.workspace-report-state,
.workspace-contract-state {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .25rem .62rem;
    border: 1px solid rgba(151, 178, 184, .27);
    border-radius: 99px;
    background: rgba(13, 35, 44, .75);
    color: #c4d2d0;
    font-size: .7rem;
    font-weight: 650;
}

.workspace-report-state[data-state="observed"] { color: #afdfe2; border-color: rgba(112, 185, 197, .35); }
.workspace-report-state[data-state="no_records"] { color: #d5c797; border-color: rgba(194, 168, 119, .33); }
.workspace-report-state[data-state="unavailable"] { color: #d0aaa2; border-color: rgba(202, 137, 127, .3); }
.workspace-report-state[data-state="loading"] { color: #aebec0; }
.workspace-report-summary .workspace-asof { margin: 0; }

.workspace-report-error,
.workspace-export-result {
    margin: .8rem 0;
    padding: .85rem 1rem;
    border: 1px solid rgba(193, 145, 128, .3);
    border-radius: 9px;
    background: rgba(67, 37, 36, .24);
    color: #dbc6c0;
    font-size: .83rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.workspace-export-result:not(.is-error) {
    border-color: rgba(114, 180, 190, .24);
    background: rgba(18, 52, 61, .32);
    color: #b9d1d0;
}

.workspace-report-notices {
    padding-left: 1.2rem;
    color: #b7c5c5;
}

.workspace-report-notices li {
    margin: .35rem 0;
    font-size: .8rem;
    line-height: 1.5;
}

.workspace-report-tabs {
    display: flex;
    gap: .5rem;
    margin: 1.2rem 0 0;
    border-bottom: 1px solid rgba(128, 170, 179, .18);
}

.workspace-report-tabs button {
    padding: .7rem .95rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: #9fb3b8;
    font: 600 .83rem/1.2 "DM Sans", sans-serif;
    cursor: pointer;
}

.workspace-report-tabs button[aria-selected="true"] {
    border-color: rgba(105, 188, 201, .24);
    background: rgba(14, 42, 53, .9);
    color: #a9e0e5;
}

.workspace-report-panel,
.workspace-report-contract,
.workspace-reputation,
.workspace-capability-panel {
    margin-top: 1rem;
    padding: clamp(1rem, 2.6vw, 1.55rem);
    border: 1px solid rgba(114, 172, 184, .19);
    border-radius: 13px;
    background: linear-gradient(145deg, #102b37, #0c222e);
}

.workspace-report-panel[aria-busy="true"] { opacity: .78; }

.workspace-report-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.workspace-report-panel-head h2,
.workspace-contract-heading h2,
.workspace-reputation h2,
.workspace-capability-panel h2,
.workspace-relay h2 {
    margin: 0;
    color: #edf5f3;
    font-size: clamp(1.12rem, 2vw, 1.4rem);
}

.workspace-report-panel-head .ecosystem-kicker,
.workspace-contract-heading .ecosystem-kicker {
    margin-bottom: .35rem;
}

.workspace-export-button,
.workspace-relay-download {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(113, 198, 209, .31);
    border-radius: 8px;
    background: rgba(47, 132, 147, .13);
    color: #a4e0e5 !important;
    font: 650 .78rem/1.2 "DM Sans", sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.workspace-export-button:hover,
.workspace-relay-download:hover { background: rgba(47, 132, 147, .22); }
.workspace-export-button:disabled { opacity: .56; cursor: progress; }

.workspace-report-boundary,
.workspace-contract-caveat,
.workspace-capability-caveat,
.workspace-report-footnote {
    margin: .9rem 0;
    color: #aebfc0;
    font-size: .79rem;
    line-height: 1.6;
}

.workspace-report-records {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
}

.workspace-report-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed rgba(134, 170, 175, .22);
    border-radius: 9px;
    color: #aabbbd;
    font-size: .84rem;
    line-height: 1.6;
}

.workspace-record-loading {
    display: grid;
    gap: .5rem;
    max-width: 28rem;
}

.workspace-record-loading span {
    display: block;
    height: .8rem;
    border-radius: 4px;
    background: rgba(126, 161, 168, .12);
}

.workspace-record-loading span:nth-child(2) { width: 82%; }
.workspace-record-loading span:nth-child(3) { width: 64%; }

.workspace-report-record {
    padding: 1rem;
    border: 1px solid rgba(130, 175, 183, .16);
    border-radius: 10px;
    background: rgba(5, 23, 32, .42);
}

.workspace-report-record h3 {
    margin: 0 0 .75rem;
    color: #e3eeeb;
    font-size: .98rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.workspace-record-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1rem;
    margin: 0;
}

.workspace-record-fields > div {
    min-width: 0;
    padding-top: .55rem;
    border-top: 1px solid rgba(131, 167, 173, .12);
}

.workspace-record-fields dt {
    margin-bottom: .25rem;
    color: #8faab0;
    font: 500 .66rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    text-transform: uppercase;
}

.workspace-record-fields dd {
    margin: 0;
    color: #d2dfdc;
    font-size: .79rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.workspace-record-fields .workspace-hash {
    color: #b8d3d5;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .73rem;
}

.workspace-contract-endpoint {
    margin: .8rem 0;
    color: #b5c6c5;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.workspace-contract-endpoint code {
    color: #9dd9de;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.workspace-contract-routing {
    padding: .7rem .85rem;
    border-left: 2px solid #79bfc9;
    background: rgba(11, 37, 48, .65);
    color: #b9c8c6;
    font-size: .8rem;
}

.workspace-contract-fields { margin-top: .8rem; }
.workspace-contract-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.workspace-contract-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    padding: .75rem;
    border: 1px solid rgba(130, 170, 177, .14);
    border-radius: 8px;
    background: rgba(6, 25, 34, .4);
}

.workspace-contract-list li > div { display: grid; gap: .25rem; min-width: 0; }
.workspace-contract-list strong { color: #e0eae7; font-size: .78rem; overflow-wrap: anywhere; }
.workspace-contract-list span { color: #9fb4b7; font-size: .73rem; line-height: 1.5; }
.workspace-contract-list small { color: #c6b789; font-size: .68rem; }
.workspace-contract-list em {
    flex: 0 0 auto;
    color: #aababa;
    font-size: .66rem;
    font-style: normal;
}
.workspace-contract-list em[data-supplied="true"] { color: #aad5d8; }

.workspace-reputation {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 1.2rem;
}

.workspace-reputation-copy {
    margin: .7rem 0 0;
    color: #aebfc0;
    font-size: .81rem;
    line-height: 1.65;
}

.workspace-reputation-controls { display: grid; gap: .7rem; }
.workspace-form-label { color: #d8e3df; font-size: .78rem; font-weight: 600; }
.workspace-reputation-controls > input[type="text"] {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid rgba(137, 180, 188, .26);
    border-radius: 8px;
    outline: none;
    background: #0b222d;
    color: #e4efec;
    font: .83rem "IBM Plex Mono", ui-monospace, monospace;
}
.workspace-reputation-controls > input[type="text"]:focus { border-color: #71c8d1; box-shadow: 0 0 0 2px rgba(113, 200, 209, .12); }

.workspace-provider-list {
    display: grid;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid rgba(131, 168, 176, .15);
    border-radius: 8px;
}

.workspace-provider-list legend {
    float: none;
    width: auto;
    padding: 0 .3rem;
    color: #9db5b9;
    font-size: .7rem;
}

.workspace-provider-list label,
.workspace-consent {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #c0cecb;
    font-size: .75rem;
    line-height: 1.5;
}

.workspace-provider-list input,
.workspace-consent input { flex: 0 0 auto; margin-top: .2rem; accent-color: #64bdc9; }
.workspace-provider-list label span { margin-left: auto; color: #9fb0b0; font-size: .67rem; text-align: right; }
.workspace-consent { padding: .55rem 0; }

.workspace-reputation-result {
    padding: .85rem;
    border: 1px solid rgba(113, 169, 178, .2);
    border-radius: 8px;
    background: rgba(5, 22, 31, .46);
}

.workspace-reputation-result h3 { margin: 0; color: #dfeae6; font-size: .88rem; }
.workspace-reputation-result p { color: #aebfbd; font-size: .74rem; line-height: 1.5; }
.workspace-reputation-result pre {
    max-height: 20rem;
    overflow: auto;
    margin: .6rem 0 0;
    color: #bdd1d0;
    font: .68rem/1.55 "IBM Plex Mono", ui-monospace, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.workspace-reputation-restriction {
    padding: 1rem;
    border: 1px solid rgba(177, 159, 119, .18);
    border-radius: 8px;
    background: rgba(52, 46, 35, .15);
    color: #c6c0ad;
    font-size: .8rem;
    line-height: 1.6;
}

.workspace-capability-header,
.workspace-relay-header {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(113, 176, 190, .19);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(13, 40, 54, .94), rgba(10, 29, 40, .96));
}

.workspace-capability-state {
    display: inline-block;
    margin: 1rem 0 0;
    padding: .55rem .75rem;
    border: 1px solid rgba(194, 168, 119, .25);
    border-radius: 8px;
    background: rgba(67, 56, 36, .16);
    color: #cfbf94;
    font-size: .78rem;
}

.workspace-capability-panel p:not(.ecosystem-kicker),
.workspace-relay-boundary p:not(.ecosystem-kicker) {
    color: #b1c2c1;
    font-size: .86rem;
    line-height: 1.7;
}

.workspace-capability-links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.workspace-capability-links a {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .65rem .8rem;
    border: 1px solid rgba(113, 188, 198, .22);
    border-radius: 8px;
    color: #a8dce0 !important;
    font-size: .76rem;
    text-decoration: none;
}

.workspace-capability-links a:hover { background: rgba(55, 128, 141, .13); }
.workspace-reference-list { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 1rem 0; list-style: none; }
.workspace-reference-list li { padding: .42rem .65rem; border: 1px solid rgba(131, 168, 176, .17); border-radius: 99px; color: #c3d1cd; font-size: .75rem; }
.workspace-relay-steps-list { display: grid; gap: .75rem; padding-left: 1.2rem; color: #bdccca; font-size: .84rem; line-height: 1.65; }
.workspace-relay-download { margin-top: .6rem; }
.workspace-relay-unavailable { margin: 1rem 0 0; color: #c9b98b; font-size: .8rem; }
.workspace-relay-boundary { margin-top: 1rem; }

/* Shared deployment-pattern infographic: illustrative only, never a health view. */
.infra-infographic {
    --infra-ink: #e9f2f1;
    --infra-muted: #abc0c3;
    --infra-line: rgba(133, 190, 199, .26);
    margin: 1.75rem 0 0;
    padding: clamp(1rem, 2.6vw, 1.65rem);
    border: 1px solid rgba(107, 176, 190, .28);
    border-radius: 15px;
    background:
        linear-gradient(rgba(29, 68, 80, .17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 68, 80, .17) 1px, transparent 1px),
        linear-gradient(145deg, #102b38, #0b202b);
    background-size: 30px 30px, 30px 30px, auto;
    color: var(--infra-ink);
}

.infra-dashboard { margin-top: 1.25rem; }
.infra-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: .6rem 1rem;
}

.infra-heading h2 {
    margin: 0;
    color: #edf5f3;
    font-size: clamp(1.2rem, 2.1vw, 1.65rem);
    font-weight: 650;
    letter-spacing: -.04em;
}

.infra-caveat,
.infra-detail-kicker {
    color: #8ed4de;
    font: 600 .68rem/1.45 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.infra-caveat { margin: 0 0 .15rem; }
.infra-lead { max-width: 850px; margin: .6rem 0 1.1rem; color: var(--infra-muted); font-size: .86rem; line-height: 1.6; }
.infra-infographic > .infra-caveat { display: block; margin: 0 0 1rem; }

.infra-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, .25fr) minmax(0, 1fr) minmax(4.5rem, .25fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: .55rem;
}

.infra-node,
.infra-product {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    border: 1px solid rgba(129, 186, 196, .32);
    border-radius: 10px;
    background: rgba(9, 31, 42, .93);
    color: var(--infra-ink);
    font-family: "DM Sans", sans-serif !important;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.infra-node:hover,
.infra-product:hover,
.infra-node[aria-expanded="true"],
.infra-product[aria-expanded="true"] {
    border-color: #85d3dc;
    background: #153846;
}

.infra-node:focus-visible,
.infra-product:focus-visible,
.infra-close:focus-visible {
    outline: 3px solid #9ce6ed;
    outline-offset: 3px;
}

.infra-node:active,
.infra-product:active { transform: translateY(1px); }
.infra-node-label,
.infra-product-tag { color: #91cbd2; font: 600 .65rem/1.5 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; }
.infra-node strong { margin: .45rem 0 .25rem; color: #f0f6f4; font-size: 1.12rem; letter-spacing: -.025em; }
.infra-node-copy { color: #adc0c2; font-size: .76rem; line-height: 1.45; }
.infra-pi { border-color: rgba(128, 203, 213, .6); background: rgba(15, 48, 60, .96); }

.infra-connector {
    position: relative;
    align-self: center;
    height: 1px;
    border-top: 1px dashed rgba(143, 205, 213, .7);
    color: #93b7bd;
}

.infra-connector::after {
    content: "";
    position: absolute;
    top: -.27rem;
    right: 0;
    width: .48rem;
    height: .48rem;
    border-top: 1px solid #91d4dc;
    border-right: 1px solid #91d4dc;
    transform: rotate(45deg);
}

.infra-connector span { position: absolute; left: 50%; bottom: .45rem; width: max-content; transform: translateX(-50%); font: 500 .54rem/1.3 "IBM Plex Mono", ui-monospace, monospace; }
.infra-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 760px; margin: 1rem auto 0; }
.infra-product { min-height: 6.2rem; gap: .25rem; }
.infra-product strong { color: #f0f6f4; font-size: .98rem; }
.infra-product > span:last-child { color: #adc0c2; font-size: .77rem; }
.infra-product-featured { border-color: rgba(209, 190, 135, .54); background: rgba(53, 48, 37, .55); }
.infra-product-featured .infra-product-tag { color: #dbc88f; }
.infra-note { margin: .9rem 0 0; color: #aebfc0; font-size: .73rem; line-height: 1.55; }
.infra-details {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-left: 2px solid #82cbd5;
    background: rgba(4, 20, 28, .64);
}
.infra-details[hidden] { display: none; }
.infra-details h3 { margin: .2rem 0 .3rem; color: #eff7f5; font-size: 1rem; }
.infra-details p:last-child { max-width: 720px; margin: 0; color: #b7c9ca; font-size: .82rem; line-height: 1.6; }
.infra-details .infra-detail-kicker { margin: 0; }
.infra-close { flex: 0 0 auto; padding: .4rem .65rem; border: 1px solid var(--infra-line); border-radius: 6px; background: transparent; color: #b7dfe2; font: 600 .7rem/1.2 "DM Sans", sans-serif !important; letter-spacing: 0; cursor: pointer; }

.ecosystem-brandline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .55rem;
    margin: 0 0 .85rem;
    color: #e9f2f1;
    font-size: .88rem;
}
.ecosystem-brandline > span { color: #8ed4de; }
.ecosystem-brandline small { flex-basis: 100%; color: #aebfc0; font-size: .73rem; line-height: 1.5; }

@media (max-width: 900px) {
    .workspace-observation-grid { grid-template-columns: 1fr; }
    .workspace-observation-card .source-caption { min-height: 0; }
    .workspace-reputation { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .ecosystem-dashboard,
    .workspace-evidence,
    .workspace-unavailable { padding-top: .3rem; }

    .ecosystem-map { padding: .6rem; }
    .ecosystem-connectors { display: none; }
    .ecosystem-map-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: .55rem; }
    .ecosystem-node { grid-area: auto; min-height: 5.8rem; padding: .85rem; }
    .node-pcm { border-color: rgba(119, 207, 217, .52); }
    .ecosystem-detail-grid { grid-template-columns: 1fr; }
    .ecosystem-limits { align-items: flex-start; flex-direction: column; }
    .ecosystem-limits > a { margin-top: 0; }
    .workspace-evidence-head,
    .workspace-unavailable-head { align-items: flex-start; flex-direction: column; }
    .ecosystem-dashboard-actions { align-items: stretch; flex-direction: column; }
    .ecosystem-dashboard-actions a { align-self: flex-start; }
    .workspace-report-actions { align-items: flex-start; flex-direction: column; }
    .workspace-record-fields,
    .workspace-contract-list { grid-template-columns: 1fr; }
    .infra-flow { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .infra-node { min-height: 5.4rem; }
    .infra-connector { width: 1px; height: 1.3rem; justify-self: center; border-top: 0; border-left: 1px dashed rgba(143, 205, 213, .7); }
    .infra-connector::after { top: auto; right: -.23rem; bottom: 0; transform: rotate(135deg); }
    .infra-connector span { left: .55rem; bottom: .45rem; transform: none; }
    .infra-products { grid-template-columns: 1fr; }
    .infra-details { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .ecosystem-node { transition: none; }
    .ecosystem-node:active { transform: none; }
    .infra-node,
    .infra-product { transition: none; }
    .infra-node:active,
    .infra-product:active { transform: none; }
}