/* resources-b: page-specific components for resources/* (second half). Carbon tokens only. */
.stat-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 42rem) { .stat-row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.stat-box { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); padding: 1.5rem; }
.stat-box .num { font-size: 2.5rem; line-height: 1.1; color: var(--ca-lime); font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', monospace); }
.stat-box .num-unit { font-size: 1rem; color: var(--cds-text-secondary); margin-left: .25rem; }
.stat-box .lbl { margin-top: .5rem; color: var(--cds-text-secondary); font-size: .875rem; line-height: 1.45; }

.consequence-list { display: flex; flex-direction: column; border-top: 1px solid var(--cds-border-subtle-01); }
.consequence-row { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
@media (min-width: 66rem) { .consequence-row { grid-template-columns: 1fr 2fr; gap: 2rem; } }
.consequence-trigger { font-weight: 600; color: var(--cds-text-primary); }
.consequence-result { color: var(--cds-text-secondary); line-height: 1.5; }

.flow-diagram, .xdp-flow, .arch-stack { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; max-width: 36rem; margin-inline: auto; }
.flow-box, .xdp-step, .arch-layer { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); padding: 1rem; text-align: center; font-weight: 600; }
.flow-box span, .xdp-step span { display: block; margin-top: .25rem; font-weight: 400; font-size: .8125rem; color: var(--cds-text-secondary); }
.flow-box.highlight, .arch-layer.highlight, .xdp-step.decision { border-color: var(--ca-lime); }
.flow-arrow, .arch-arrow { text-align: center; color: var(--cds-text-secondary); font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; }
.flow-sources { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.flow-source { background: var(--cds-layer-01); border: 1px solid var(--cds-border-strong-01); padding: .5rem 1rem; font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; }
.layer-name { font-weight: 600; }
.layer-detail { margin-top: .25rem; font-weight: 400; font-size: .8125rem; color: var(--cds-text-secondary); line-height: 1.5; }
.xdp-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.xdp-outcome { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .75rem; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); font-size: .8125rem; color: var(--cds-text-secondary); }
.xdp-outcome span:first-child { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.xdp-outcome.drop span:first-child { color: var(--cds-support-error); }
.xdp-outcome.pass span:first-child { color: var(--cds-support-success); }

/* resource cards (resources.html) */
.resource-grid, .resource-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 42rem) { .resource-grid-2 { grid-template-columns: repeat(2, 1fr); } .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .resource-grid { grid-template-columns: repeat(3, 1fr); } }
.resource-card { display: flex; flex-direction: column; gap: .75rem; background: var(--cds-layer-01); padding: 1.5rem; border-top: 2px solid var(--cds-border-subtle-01); }
.resource-card.coming { opacity: .8; }
.resource-card .cds--btn { margin-top: auto; align-self: flex-start; }
.rc-label { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cds-text-secondary); }
.status-live, .status-soon { display: inline-block; padding: 0 .5rem; margin-right: .25rem; border-radius: 1rem; font-size: .75rem; }
.status-live { background: var(--ca-lime); color: #161616; }
.status-soon { background: var(--cds-layer-accent-01); color: var(--cds-text-secondary); }
.rc-title { font-size: 1.5rem; line-height: 1.25; }
.rc-desc { color: var(--cds-text-secondary); line-height: 1.5; }
.rc-items { color: var(--cds-text-secondary); font-size: .875rem; line-height: 1.6; list-style: none; padding: 0; }
.rc-items li::before { content: "— "; color: var(--ca-lime); }

/* pipeline profiles */
.mode-card { background: var(--cds-layer-01); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.mode-tag { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ca-lime); }
.mode-name { font-size: 1.75rem; line-height: 1.2; }
.mode-desc { color: var(--cds-text-secondary); line-height: 1.5; }
.mode-stages { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.stage-pill { padding: 0 .75rem; border-radius: 1rem; font-size: .75rem; line-height: 1.5rem; background: var(--cds-layer-accent-01); color: var(--cds-text-secondary); }
.stage-pill.on { background: var(--ca-lime); color: #161616; }
.profile-badge { display: inline-block; margin-left: .5rem; padding: 0 .5rem; border-radius: 1rem; font-size: .75rem; background: var(--ca-lime); color: #161616; font-weight: 400; }

/* use-cases tabs */
.uc-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--cds-border-subtle-01); margin-bottom: 2rem; }
.uc-tabs .tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .75rem 1.5rem; color: var(--cds-text-secondary); font: inherit; cursor: pointer; }
.uc-tabs .tab:hover { color: var(--cds-text-primary); background: var(--cds-layer-hover-01); }
.uc-tabs .tab.cds--tabs__nav-item--selected { color: var(--cds-text-primary); border-bottom-color: var(--ca-lime); font-weight: 600; }
.uc-panel { display: none; }
.uc-panel.active { display: block; }

/* technology layout */
.tech-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem; }
@media (min-width: 66rem) { .tech-layout { grid-template-columns: 12rem 1fr; } }
.tech-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; align-self: start; }
@media (min-width: 66rem) { .tech-nav { position: sticky; top: 5rem; flex-direction: column; } }
.tech-nav a { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cds-text-secondary); text-decoration: none; padding: .25rem .75rem; border-left: 2px solid var(--cds-border-subtle-01); }
.tech-nav a:hover { color: var(--cds-text-primary); border-color: var(--ca-lime); }
.tech-nav a[aria-current="location"] { color: var(--cds-text-primary); font-weight: 700; border-color: var(--ca-lime); }
.tech-section { scroll-margin-top: 5rem; }
.tech-section + .tech-section { border-top: 1px solid var(--cds-border-subtle-01); margin-top: 5rem; padding-top: 5rem; }
.tech-section .ca-cols-2 { align-items: start; }