/* NBC v7.383 — Global Premium Visual Integration · Part 2 / Cases
   Adds semantic behaviour signals inside existing case surfaces. No new section surfaces. */
@layer nbc.premium-integration {
  

  /* Case index: small mechanism signal, never a thumbnail/card. */
  .case-portfolio-item{position:relative;isolation:isolate}
  .case-pi-index-signal{display:block;inline-size:min(210px,48%);block-size:52px;margin:12px 0 4px;color:var(--cpi-green);opacity:.72;transition:opacity .35s ease}
  .case-pi-index-signal svg{display:block;inline-size:100%;block-size:100%;overflow:visible}
  .case-pi-index-signal .pi-path,.case-pi-index-signal .pi-branch,.case-pi-index-signal .pi-return{fill:none;stroke:var(--cpi-line);stroke-width:1.45;vector-effect:non-scaling-stroke;transition:stroke .35s ease,stroke-dashoffset .65s cubic-bezier(.2,.75,.2,1)}
  .case-pi-index-signal .pi-branch{stroke-dasharray:4 5}
  .case-pi-index-signal .pi-return{stroke-dasharray:5 5}
  .case-pi-index-signal .pi-node{fill:#101713;stroke:rgba(158,224,177,.52);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:transform .5s cubic-bezier(.2,.8,.2,1),fill .35s ease}
  .case-pi-index-signal .pi-gate{fill:rgba(158,224,177,.06);stroke:rgba(158,224,177,.55);stroke-width:1.1;vector-effect:non-scaling-stroke}
  .case-pi-index-signal .pi-event{fill:var(--cpi-green);filter:drop-shadow(0 0 5px rgba(158,224,177,.4));transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .case-portfolio-item:hover .case-pi-index-signal,.case-portfolio-item:focus-visible .case-pi-index-signal{opacity:1}
  .case-portfolio-item:hover .case-pi-index-signal .pi-path,.case-portfolio-item:focus-visible .case-pi-index-signal .pi-path{stroke:var(--cpi-line-strong)}
  .case-portfolio-item:hover .case-pi-index-signal .pi-branch,.case-portfolio-item:focus-visible .case-pi-index-signal .pi-branch{stroke:rgba(158,224,177,.5);stroke-dashoffset:-9}
  .case-portfolio-item:hover .case-pi-index-signal .pi-return,.case-portfolio-item:focus-visible .case-pi-index-signal .pi-return{stroke:rgba(158,224,177,.52);stroke-dashoffset:9}
  .case-portfolio-item:hover .case-pi-index-signal .pi-event,.case-portfolio-item:focus-visible .case-pi-index-signal .pi-event{transform:translateX(7px)}

  /* Approach: one shared system, seven geometries. It lives inside the existing right column. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Approach steps retain the shared typography, but the connector follows each mechanism. */
  
  
  
  
  
  
  
  
  
  
  

  /* Closing motif: same case mechanism, stripped to one calm line. */
  
  
  
  
  
  
  
  
  

  @keyframes cpi-event-breathe{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
  @keyframes cpi-dash-forward{to{stroke-dashoffset:-44}}
  @keyframes cpi-dash-return{to{stroke-dashoffset:44}}

  @media (max-width:760px){
    .case-pi-index-signal{inline-size:150px;block-size:42px;margin-top:10px}
    
    
    
    
    
    
    
  }

  @media (prefers-reduced-motion:reduce){
    
    
    
  }
}

@layer nbc.premium-integration {
  /* Close-section contrast hardening: one case still inherited legacy black text on the dark close surface. */
  body.page-case-detail #case-next-step .case27-title,
  body.page-case-detail #case-next-step .case27-close-main > h2{color:#f2f5f1!important}
  body.page-case-detail #case-next-step :is(.case27-copy,.case27-symptoms li,.case-v7357-selftest){color:rgba(238,244,239,.68)!important}
  body.page-case-detail #case-next-step .case-v7357-selftest strong{color:#f0f5f1!important}
  body.page-case-detail #case-next-step .case27-check{color:#edf4ef!important}
  body.page-case-detail #case-next-step .case27-check span{color:rgba(158,224,177,.72)!important}
  body.page-case-detail #case-next-step .case27-check strong{color:#f2f5f1!important}

  /* Case-specific functional microtype floor on 390px. */
  @media (max-width:640px){
    body.page-case-detail .cp79-flow-node strong{font-size:11.5px!important;line-height:1.28!important}
    body.page-case-detail .cp79-flow-node small{font-size:11.5px!important;line-height:1.32!important}
    body.page-case-detail .cp79-request{font-size:10px!important;line-height:1.35!important}
    body.page-case-detail .cp79-erp-cell{font-size:11.5px!important;line-height:1.32!important;letter-spacing:.01em!important}
    body.page-case-detail .cp79-erp-row>span:first-child{font-size:10px!important}
    body.page-case-detail .cp79-offer-actions span{font-size:10px!important}
    body.page-case-detail .cp79-flowlane-label,
    body.page-case-detail .cp79-timebar{font-size:10px!important}
  }
}