/* V17.5 extends the approved architectural world, with semantic explanatory layers. */
.workspace-family,.workspace-product{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.workspace-family .workspace-illustration,.workspace-product .workspace-illustration{grid-row:1;align-self:start;aspect-ratio:3/2;min-height:0;height:auto;max-height:390px}
.workspace-family .workspace-illustration picture,.workspace-product .workspace-illustration picture{height:auto;min-height:0}
.workspace-family .workspace-illustration img,.workspace-product .workspace-illustration img{aspect-ratio:3/2;object-fit:contain;object-position:center;min-height:0;height:auto;max-height:390px;background:var(--paper)}
.workspace-product .workspace-illustration:not(.family-identity) img{aspect-ratio:2.6;object-fit:cover;object-position:70% center}
.explanation{margin:24px 0 18px;color:var(--ink);max-width:1100px}
.explain-flow{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr);gap:4px;align-items:center}
.explain-node{text-align:center;min-width:0;position:relative}
.explain-node img{display:block;width:100%;height:140px;object-fit:contain;margin:auto}
.explain-node strong{display:block;font-weight:500;font-size:18px;line-height:1.3;text-wrap:balance}
.explain-node span{display:block;color:var(--muted);font-size:15px;line-height:1.45;margin-top:6px}
.explain-group{display:grid;gap:16px;position:relative}
.explain-group-title{font-size:15px!important;margin:0!important;text-align:center;color:var(--muted)}
.explain-group .explain-node img{height:116px}
.explain-or{text-align:center;font-size:14px;color:var(--muted);margin:-10px 0}
.explain-arrow{display:block;width:100%;height:24px;fill:none;stroke:var(--accent);stroke-width:1.7}
.explain-join{min-width:0}
.workspace-detail .explanation-context{font-size:16px;line-height:1.6;max-width:82ch;margin:14px 0;color:var(--muted)}
.explain-three .explain-node img{height:180px}
.handover-flow{display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,3.1fr);align-items:center;gap:10px}
.dc-boundary{border:1px solid var(--line);padding:18px 24px 24px;background:var(--surface);min-width:0}
.dc-boundary h3{margin:0 0 14px;font-size:20px}
.dc-interior{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.65fr) minmax(0,1fr);align-items:center;gap:14px}
.explain-cross{font-size:14px;line-height:1.4;text-align:center;color:var(--muted)}
.explain-cross span{display:block;margin-top:10px}
.cage-boundary{padding:10px;border:1px dashed var(--line);min-width:0}
.cage-boundary p{font-size:14px;line-height:1.4;text-align:center;margin:12px 0 0!important}
.branch-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:24px}
.branch-flow>.explain-node img{height:220px}
.branch-destinations{display:flex;flex-direction:column;gap:26px;align-items:stretch;border-left:1px solid var(--accent)}
.branch-destinations>div{display:grid;grid-template-columns:50px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.branch-destinations .explain-node{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;text-align:left}
.branch-destinations .explain-node img{height:110px}
.branch-route>strong{display:block;text-align:center;font-size:16px;font-weight:500;margin-bottom:6px}
.parallel-functions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.parallel-functions .explain-node img{height:175px}
.parallel-functions .explain-node span{max-width:25ch;margin:8px auto 0}
.capacity-responsibilities{display:grid;grid-template-columns:140px minmax(0,1fr);gap:26px;align-items:center}
.capacity-object{width:140px;height:210px;object-fit:contain}
.capacity-table-head,.capacity-row{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.capacity-table-head{font-size:14px;color:var(--muted)}
.capacity-row strong{font-weight:500}
.mobile-column-label{display:none}
.provider-block{max-width:900px;margin-top:26px}
.provider-block p{font-size:17px}
.provider-names{padding:0;list-style:none;display:flex;gap:12px 28px;flex-wrap:wrap;margin:20px 0 24px;font-size:20px;color:var(--ink)}
.provider-names li{padding:8px 0;border-bottom:1px solid var(--line)}
.workspace-detail .recipe-choice>summary{font-size:21px;min-height:44px;line-height:1.4}
.workspace-detail details[open]>summary{margin-bottom:18px}
.workspace-detail [data-recipe]>.explanation,.workspace-detail [data-question]>.explanation{margin-top:20px}
.shared-explanation{display:inline-flex;align-items:center;min-height:44px;font-size:17px;margin-top:8px;max-width:100%}
.product-diagram .diagram-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;gap:10px;padding-top:12px;font-size:17px}
@media(min-width:861px) and (max-height:740px){.workspace-family .workspace-illustration,.workspace-product .workspace-illustration,.workspace-family .workspace-illustration img,.workspace-product .workspace-illustration img{max-height:300px}.explain-node img{height:120px}.explain-group .explain-node img{height:96px}.explain-three .explain-node img{height:150px}}
@media(max-width:860px){
 .workspace-family,.workspace-product{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,.55fr);gap:20px 18px}
 .workspace-family .workspace-intro,.workspace-product .workspace-intro{display:contents}
 .workspace-family .workspace-intro h1,.workspace-product .workspace-intro h1{grid-column:1;grid-row:1;margin:0;align-self:center}
 .workspace-family .workspace-intro>p,.workspace-product .workspace-intro>p,.workspace-family .workspace-intro>.button,.workspace-product .workspace-intro>.button{grid-column:1/-1;margin:0}
 .workspace-family .workspace-illustration,.workspace-product .workspace-illustration{grid-column:2;grid-row:1;order:0;width:100%;max-height:none;align-self:center}
 .workspace-family .workspace-illustration picture,.workspace-product .workspace-illustration picture,.workspace-family .workspace-illustration img,.workspace-product .workspace-illustration img{height:auto;min-height:0;max-height:none}
 .workspace-family .workspace-detail-nav,.workspace-product .workspace-detail-nav,.workspace-details{grid-column:1/-1}
 .explain-flow{grid-template-columns:minmax(0,1fr);gap:12px;max-width:600px;margin:auto}
 .explain-join{height:28px;width:45px;margin:4px auto;transform:rotate(90deg)}
 .explain-group{grid-template-columns:1fr 1fr;gap:12px}
 .explain-group-title{grid-column:1/-1}
 .explain-group .explain-node img,.explain-node img{height:120px}
 .explain-or{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:3px;background:var(--paper);margin:0}
 .explain-three{grid-template-columns:1fr}
 .explain-three .explain-node{display:grid;grid-template-columns:115px minmax(0,1fr);align-items:center;column-gap:14px;text-align:left}
 .explain-three .explain-node img{grid-row:1/3;height:100px}
 .explain-three .explain-node span{grid-column:2}
 .handover-flow{grid-template-columns:1fr;gap:12px}
 .handover-flow>.explain-node{display:grid;grid-template-columns:100px 1fr;align-items:center;text-align:left}
 .handover-flow>.explain-node img{height:90px}
 .dc-boundary{padding:18px}
 .dc-interior{grid-template-columns:1fr;gap:12px}
 .dc-interior>.explain-node{display:grid;grid-template-columns:100px 1fr;align-items:center;text-align:left}
 .dc-interior>.explain-node img{height:100px;grid-row:1/3}
 .dc-interior>.explain-node span{grid-column:2}
 .explain-cross .explain-arrow{width:44px;margin:auto;transform:rotate(90deg);height:40px}
 .cage-boundary .explain-node img{height:120px}
 .branch-flow{grid-template-columns:1fr;gap:16px}
 .branch-flow>.explain-node img{height:130px}
 .branch-destinations{gap:18px;flex-direction:row;border-left:0;border-top:1px solid var(--accent)}
 .branch-destinations .explain-node{display:block;text-align:center}
 .branch-destinations>div{display:block;flex:1}
 .branch-destinations .explain-node img{height:110px}
 .parallel-functions{gap:16px;grid-template-columns:1fr}
 .parallel-functions .explain-node{display:grid;grid-template-columns:100px 1fr;text-align:left;column-gap:16px;align-items:center}
 .parallel-functions .explain-node img{height:115px;grid-row:1/3}
 .parallel-functions .explain-node span{grid-column:2;max-width:none;margin:6px 0}
 .capacity-responsibilities{display:block}.capacity-object{display:none}
 .capacity-table-head{display:none}.capacity-row{grid-template-columns:1fr 1fr;gap:10px 18px;padding:18px 0}
 .capacity-row strong{grid-column:1/-1;font-size:20px}.mobile-column-label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
 .provider-names{font-size:18px;gap:8px 20px}
}
@media(max-width:380px){.workspace-family,.workspace-product{grid-template-columns:minmax(0,1fr) 96px;gap:16px 10px}.workspace-family .workspace-intro h1,.workspace-product .workspace-intro h1{font-size:28px;overflow-wrap:anywhere}.explain-node strong{font-size:17px}.dc-boundary{padding:14px}.capacity-row{grid-template-columns:1fr}.capacity-row strong{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.family-identity img{transform:none!important;transition:none}}