/* Shared portfolio component roles. Story layouts and artifact interiors are retained. */
.portfolio-shell,.portfolio-shell main{--component-radius:4px;--component-gap:12px;--component-pad:20px;--component-rule:3px;--component-teal:var(--case-teal,#075866);--component-line:var(--case-line,#ccdce0);--component-soft:var(--case-soft,#f0f7f7);--component-ink:var(--case-ink,#0c2033);--component-muted:var(--case-muted,#49616c)}
.portfolio-shell .portfolio-eyebrow{display:inline-block;font:700 14px/1.5 'DM Sans',sans-serif;letter-spacing:.065em;text-transform:uppercase;color:var(--component-teal);background:var(--component-soft);padding:8px 10px;border-radius:var(--component-radius);margin:0 0 2px}
.portfolio-shell main.work-pattern-page .portfolio-work-header .portfolio-header-thesis{font:700 clamp(19px,1.5vw,22px)/1.4 Manrope,sans-serif;border-left:var(--component-rule) solid #10a5b4;color:var(--component-teal);background:var(--component-soft);padding:14px 18px;margin:16px 0}
.portfolio-shell .work-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--component-gap);margin:24px 0 0}
.portfolio-shell .portfolio-action,
.portfolio-shell main.work-pattern-page .portfolio-work-header .portfolio-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;box-sizing:border-box;max-width:100%;font:700 16px/1.45 'DM Sans',sans-serif;text-align:center;text-decoration:none;padding:11px 16px;margin:0;border:1px solid var(--component-teal);border-radius:var(--component-radius);box-shadow:none;white-space:normal}
.portfolio-shell .portfolio-action--primary,
.portfolio-shell main.work-pattern-page .portfolio-work-header .portfolio-action--primary{background:var(--component-teal);color:#fff}
.portfolio-shell .portfolio-action--secondary,
.portfolio-shell main.work-pattern-page .portfolio-work-header .portfolio-action--secondary{background:transparent;color:var(--component-teal)}
.portfolio-shell .portfolio-action--tertiary{background:transparent;border-color:transparent;color:var(--component-teal);padding:0;min-height:32px;justify-content:start}
html[data-theme=dark] .portfolio-shell .portfolio-action--primary{background:#83d4d7;border-color:#83d4d7;color:#101b27}
html[data-theme=dark] .portfolio-shell .portfolio-action--secondary{border-color:#83d4d7;color:#83d4d7;background:transparent}
.portfolio-shell :is(.portfolio-action,.portfolio-full-size):hover{text-decoration:underline;text-underline-offset:4px}
.portfolio-shell :is(.portfolio-action,.portfolio-full-size):focus-visible{outline:3px solid #b27ab6;outline-offset:4px}
.portfolio-shell .portfolio-full-size{display:inline-block;font:700 14px/1.6 'DM Sans',sans-serif;color:var(--component-teal);text-underline-offset:3px}
.portfolio-shell main .portfolio-case-close{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:22px var(--work-gutter,24px);margin:0;border-top:1px solid var(--component-line)}
/* Same case chooser role in both overviews, without matching heights. */
.portfolio-shell main.warehouse-overview .logistics-core-cases,
.portfolio-shell main.warehouse-overview #product-model .warehouse-model-touchpoints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px;margin:20px 0}
.portfolio-shell main.warehouse-overview .logistics-core-cases>.system-case-card,
.portfolio-shell main.warehouse-overview:not(.logistics-parent) #product-model .warehouse-model-touchpoints>article.system-case-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:var(--component-pad);margin:0;height:auto;min-height:0;border:1px solid var(--component-line);border-radius:var(--component-radius);background:var(--component-soft);color:var(--component-ink);text-decoration:none;box-sizing:border-box}
.portfolio-shell main.warehouse-overview :is(.logistics-core-cases,#product-model .warehouse-model-touchpoints) .system-case-card h3{font:700 22px/1.3 Manrope,sans-serif;margin:0;color:var(--component-ink);letter-spacing:-.025em}
.portfolio-shell main.warehouse-overview .system-case-card :is(p,span){font:400 16px/1.6 'DM Sans',sans-serif;color:var(--component-muted);margin:0}
.portfolio-shell main.warehouse-overview .system-case-card .mf-label{font-weight:700;font-size:13px;letter-spacing:.055em;color:var(--component-teal)}
.portfolio-shell main.warehouse-overview .system-case-card :is(b,a){font:700 14px/1.6 'DM Sans',sans-serif;color:var(--component-teal);margin:2px 0 0;grid-column:auto}
.portfolio-shell main.warehouse-overview .system-case-card .warehouse-thread-copy p+p{margin-top:8px}
/* Frame only: source screenshots and native diagram contents keep their colors. */
.portfolio-shell main .portfolio-media-frame{border:1px solid var(--component-line);border-radius:var(--component-radius);background:var(--component-soft);padding:var(--component-pad);box-sizing:border-box;min-width:0}
.portfolio-shell main .portfolio-media-frame>figcaption{margin-top:14px;padding-top:0;font:400 14px/1.6 'DM Sans',sans-serif;color:var(--component-muted)}
.portfolio-shell main .portfolio-media-frame>h3{margin:0 0 14px}
.portfolio-shell main .portfolio-lifecycle-label{display:block;font:700 13px/1.5 'DM Sans',sans-serif;letter-spacing:.065em;text-transform:uppercase;color:var(--component-teal);margin:0 0 10px}
/* Density is a variant, not a different selected-state language. */
.portfolio-shell main .portfolio-tabs{display:flex;flex-wrap:wrap;gap:8px;border:0;background:transparent;padding:0;margin:0 0 16px}
.portfolio-shell main .portfolio-tabs [role=tab]{font:600 15px/1.4 'DM Sans',sans-serif;padding:10px 14px;min-height:42px;border:1px solid var(--component-line);border-radius:var(--component-radius);background:var(--component-soft);color:var(--component-ink);cursor:pointer}
.portfolio-shell main .portfolio-tabs--compact [role=tab]{font-size:14px;padding:8px 11px;min-height:36px}
.portfolio-shell main .portfolio-tabs [role=tab][aria-selected=true]{background:var(--component-teal);border-color:var(--component-teal);color:#fff}
html[data-theme=dark] .portfolio-shell main .portfolio-tabs [role=tab][aria-selected=true]{background:#83d4d7;border-color:#83d4d7;color:#101b27}
.portfolio-shell main .portfolio-tabs [role=tab]:hover{border-color:var(--component-teal)}
.portfolio-shell main .portfolio-tabs [role=tab]:focus-visible{outline:3px solid #b27ab6;outline-offset:3px}
@container portfolio-page (max-width:900px){
 .portfolio-shell main.warehouse-overview .logistics-core-cases,
 .portfolio-shell main.warehouse-overview #product-model .warehouse-model-touchpoints{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .portfolio-shell{--component-pad:16px}
 .portfolio-shell .work-header-actions{align-items:stretch}
 .portfolio-shell .work-header-actions .portfolio-action{width:100%}
 .portfolio-shell main.warehouse-overview .logistics-core-cases,
 .portfolio-shell main.warehouse-overview #product-model .warehouse-model-touchpoints{grid-template-columns:minmax(0,1fr)}
}
html[data-theme=dark] .portfolio-shell main.work-pattern-page .portfolio-work-header .portfolio-action--primary{background:#83d4d7;border-color:#83d4d7;color:#101b27}
html[data-theme=dark] .portfolio-shell main.work-pattern-page .portfolio-work-header .portfolio-action--secondary{background:transparent;border-color:#83d4d7;color:#83d4d7}

/* Win over retained page CTA rules, only for explicit shared-action components. */
.portfolio-shell main .portfolio-action{font:700 16px/1.45 'DM Sans',sans-serif!important;padding:11px 16px!important;margin:0!important;border-radius:4px!important;min-height:47px}
.portfolio-shell main .portfolio-action--tertiary{padding:0!important;min-height:32px}
html[data-theme=dark] .portfolio-shell main{--component-teal:var(--case-teal,#9bd6dc);--component-line:var(--case-line,#496570);--component-soft:var(--case-soft,#1b303d);--component-ink:var(--case-ink,#eaf1f2);--component-muted:var(--case-muted,#bccdd7)}