/* Approved reference-flow concept, shared by main cards and project records. */
.flow-story,.flow-detail{min-width:0}
.flow-case{margin:0;padding:0 0 40px;scroll-margin-top:calc(var(--header-height,140px) + 24px)}
.flow-case+.flow-case{padding-top:40px;border-top:1px solid #dcded8}
.flow-case>h3{font-size:27px;font-weight:700;line-height:1.4;margin:0 0 12px}
.flow-goal{margin:0 0 24px!important;color:#595959;max-width:70ch}
.flow-stages{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.flow-stage{min-width:0;padding:24px;background:#fdfdfb;border:1px solid #dcded8;position:relative}
.flow-stage+.flow-stage:before{content:'↓';position:absolute;left:20px;top:-28px;color:#315c4b;font-size:22px;line-height:28px;background:white}
.flow-stage>h4{margin:0 0 20px;font-size:20px;line-height:1.5;font-weight:650}
.flow-stage>h4>span{color:#315c4b;margin-right:8px;font-size:.85em}
.flow-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(125px,.55fr) minmax(0,1fr);gap:16px;align-items:center}
.flow-group{min-width:0;display:flex;gap:12px;align-items:start;padding:16px;border:1px solid #e0e2db;background:white}
.flow-group>.flow-figure,.flow-group>.flow-text,.flow-group>.flow-subgroup{min-width:0;flex:1}
.flow-plus{color:#315c4b;flex:0 0 18px;font-size:26px;line-height:1;align-self:center;text-align:center}
.flow-subtitle{font-size:16px;font-weight:650;margin:0 0 12px!important;color:#315c4b}
.flow-subitems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.flow-subitems:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-media{width:100%;height:220px;position:relative;display:block;margin:0;padding:0;border:1px solid #e0e2db;background:#efeeeb;overflow:hidden;border-radius:0}
.flow-media>img,.flow-media>video{width:100%;height:100%;object-fit:contain;display:block}
.flow-image{cursor:zoom-in}
.flow-image:focus-visible{outline:3px solid #315c4b;outline-offset:4px}
.flow-subitems .flow-media{height:170px}
.flow-figure{margin:0!important;max-width:none!important}
.flow-figure figcaption{padding-top:10px;color:#595959;font-size:16px;line-height:1.5}
.flow-figure figcaption strong{display:block;color:#202020;font-weight:600}
.flow-figure figcaption span{display:block;margin-top:4px}
.flow-figure figcaption span:empty{display:none}
.flow-subitems figcaption{font-size:14px}
.flow-text{min-height:220px;padding:20px;display:flex;justify-content:center;flex-direction:column;background:#f3f5ef;border:1px solid #e0e2db;text-align:center}
.flow-text strong{font-size:20px;font-weight:650;line-height:1.5}
.flow-text p{margin:12px 0 0!important;font-size:16px;color:#595959}
.flow-operation{text-align:center;min-width:0;color:#315c4b}
.flow-operation strong{display:block;font-size:17px;font-weight:650;line-height:1.5}
.flow-arrow{display:block;font-size:42px;line-height:1.2;margin:6px 0}
.flow-operation p{font-size:15px;line-height:1.55;margin:0!important;color:#595959}
.flow-note,.flow-decision{margin:20px 0 0!important;padding:16px 20px;background:#eaf0e8;color:#303e34;font-size:17px;line-height:1.6}
.flow-note strong,.flow-decision strong{display:block;margin-bottom:6px;color:#315c4b;font-weight:650}
.flow-conditions{margin-top:24px;padding-top:20px;border-top:1px solid #dcded8}
.flow-proof{margin-top:24px;max-width:700px}.flow-proof>h4{font-size:20px;margin:0 0 12px}.flow-proof .flow-media{height:300px}
.flow-conditions h5{font-size:21px;margin:24px 0 8px}
.flow-conditions p{max-width:75ch}
.flow-conditions details{margin-top:16px}
.flow-brand{margin:32px 0;font-size:30px;color:#315c4b}
.flow-detail{width:100%}
.flow-detail .flow-case:last-child{padding-bottom:0}
.flow-figure .play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:0;border-radius:50%;background:#315c4b;color:white;display:grid;place-items:center;font-size:24px;cursor:pointer}
.flow-figure .play-overlay span{margin-left:3px}
body>dialog#viewer{width:min(92vw,1600px);max-width:92vw;max-height:92vh;padding:24px;border:1px solid #dcded8;background:#fafaf8}
body>dialog#viewer::backdrop{background:#0009}
body>dialog#viewer img{display:block;max-width:100%;max-height:76vh;object-fit:contain;margin:16px auto}
body>dialog#viewer p{font-size:17px;color:#595959;margin-top:12px}
body>dialog#viewer .close{font:inherit;float:right;padding:10px 16px;border:1px solid #dcded8;background:white;min-height:44px;cursor:pointer}
@media(min-width:2560px){
 .flow-case{padding-bottom:48px}.flow-case+.flow-case{padding-top:48px}
 .flow-case>h3{font-size:34px}.flow-goal{font-size:26px}
 .flow-stage{padding:28px}.flow-stage>h4{font-size:27px}
 .flow-row{gap:20px;grid-template-columns:minmax(0,1.5fr) minmax(180px,.55fr) minmax(0,1fr)}
 .flow-group{padding:20px;gap:14px}.flow-media{height:280px}.flow-subitems .flow-media{height:210px}
 .flow-plus{font-size:34px;flex-basis:24px}.flow-subtitle{font-size:21px}
 .flow-figure figcaption{font-size:21px}.flow-subitems figcaption{font-size:17px}
 .flow-text{min-height:280px}.flow-text strong{font-size:27px}.flow-text p{font-size:21px}
 .flow-operation strong{font-size:23px}.flow-operation p{font-size:20px}.flow-arrow{font-size:54px}
 .flow-note,.flow-decision{font-size:23px;padding:20px 24px}.flow-conditions h5{font-size:28px}
 .flow-figure .play,.flow-figure .play-overlay{width:72px;height:72px;font-size:28px}
}
@media(max-width:1700px){
 .flow-story .flow-row{grid-template-columns:1fr}.flow-story .flow-operation{display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:center}.flow-story .flow-arrow{transform:rotate(90deg)}
 .flow-story .flow-row>.flow-group:last-child{max-width:100%;width:100%}
}
@media(max-width:1100px){
 .flow-row{grid-template-columns:1fr}.flow-operation{display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:center}.flow-arrow{transform:rotate(90deg)}
 .flow-media{height:250px}.flow-text{min-height:180px}
}
@media(max-width:600px){
 .flow-case>h3{font-size:23px}.flow-case+.flow-case{padding-top:32px}.flow-goal{font-size:17px}
 .flow-stage{padding:16px}.flow-stage>h4{font-size:18px;margin-bottom:16px}
 .flow-group{flex-direction:column;padding:12px;gap:12px}.flow-group>*{width:100%}
 .flow-plus{flex:0 0 auto;font-size:24px}.flow-media{height:260px}
 .flow-operation,.flow-story .flow-operation{grid-template-columns:1fr;gap:4px;padding:4px 0}.flow-arrow{font-size:36px}
 .flow-operation strong{font-size:17px}.flow-operation p{font-size:15px}
 .flow-subitems{grid-template-columns:1fr}.flow-subitems:has(> :nth-child(2):last-child){grid-template-columns:1fr}
 .flow-subitems .flow-media{height:240px}.flow-subitems figcaption{font-size:15px}
 .flow-figure figcaption{font-size:15px}.flow-note,.flow-decision{font-size:16px;padding:14px}
 .flow-text{min-height:140px}.flow-text strong{font-size:18px}.flow-text p{font-size:15px}
 .flow-conditions h5{font-size:20px}.flow-brand{font-size:24px}
}
@media print{.flow-stage{break-inside:avoid}.flow-figure button.play,.flow-figure button.play-overlay{display:none}}

/* Each case is independent; arrows only connect stages inside its boundary. */
.flow-case{padding:32px;border:1px solid #adb9ae;border-top:4px solid #315c4b;background:#f4f6f1}
.flow-case+.flow-case{margin-top:64px;padding-top:32px;border-top:4px solid #315c4b}
.flow-case-number{display:block;font-size:16px;font-weight:650;color:#315c4b;margin-bottom:12px}
.flow-stage{background:white}
.flow-stage+.flow-stage:before{background:#f4f6f1}
.flow-detail .flow-case:last-child{padding-bottom:32px}
@media(min-width:2560px){.flow-case{padding:40px}.flow-case+.flow-case{margin-top:80px;padding-top:40px}.flow-case-number{font-size:21px;margin-bottom:16px}.flow-detail .flow-case:last-child{padding-bottom:40px}}
@media(max-width:600px){.flow-case{padding:16px}.flow-case+.flow-case{margin-top:40px;padding-top:16px}.flow-case-number{font-size:15px;margin-bottom:8px}.flow-stage{padding:12px}.flow-group{padding:8px}.flow-detail .flow-case:last-child{padding-bottom:16px}}

/* Fit reference groups to their own available width, including narrow 4K stages. */
.mini-case,.mini-stage,.flow-group,.flow-subgroup{container-type:inline-size}
.flow-group{flex-wrap:wrap;justify-content:center}
.mini-stage h4,.mini-stage figcaption,.flow-group figcaption,.flow-subtitle,.mini-stage-note,.mini-operation strong,.mini-operation p,.flow-operation strong,.flow-operation p{word-break:keep-all;overflow-wrap:anywhere}
.visual-summary .flow-subitems,.flow-subitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr));gap:10px}
.flow-subitems:has(> :nth-child(2):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr))}
.visual-summary .flow-subitems>*{min-width:0}
.visual-summary .flow-subtitle{font-weight:600}
@container(max-width:460px){
 .mini-sources:has(>.flow-subgroup),.flow-group:has(>.flow-subgroup){flex-direction:column;align-items:stretch;gap:10px}
 .mini-sources:has(>.flow-subgroup)>*,.flow-group:has(>.flow-subgroup)>*{width:100%;flex:none}
 .mini-sources:has(>.flow-subgroup)>.mini-plus,.flow-group:has(>.flow-subgroup)>.flow-plus{align-self:center;width:auto}
 .mini-sources:has(>.flow-subgroup)>.flow-subgroup,.flow-group:has(>.flow-subgroup)>.flow-subgroup{padding-top:10px;border-top:1px solid #e0e2db}
}
@container(max-width:240px){
 .mini-sources:not(:has(>.flow-subgroup)){flex-direction:column;align-items:stretch;gap:10px}
 .mini-sources:not(:has(>.flow-subgroup))>*{width:100%;flex:none}
 .mini-sources:not(:has(>.flow-subgroup))>.mini-plus{width:auto;align-self:center}
}
@container(min-width:560px) and (max-width:1350px){
 .mini-chain{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:10px}
 .mini-operation strong{font-size:13px}.mini-operation p{font-size:12px}
 .mini-chain>.mini-operation:nth-child(4),.mini-chain>.mini-operation:nth-child(8){grid-column:1/-1;padding:6px;display:flex;justify-content:center;align-items:center;gap:14px}
 .mini-chain>.mini-operation:nth-child(4)>span,.mini-chain>.mini-operation:nth-child(8)>span{font-size:0}
 .mini-chain>.mini-operation:nth-child(4)>span:after,.mini-chain>.mini-operation:nth-child(8)>span:after{content:'↓';font-size:28px}
 .mini-chain>.mini-stage:last-child:nth-child(4n+1){grid-column:1/-1}
}
@container(min-width:260px){
 .flow-subitems:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container(min-width:220px){
 .flow-subitems:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .visual-summary .flow-subitems,.flow-subitems,.flow-subitems:has(> :nth-child(2):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr))}
}