/* [codex 2026-09-24] Bounded portability hardening. Load after v4.css.
   The approved forest composition and brand remain the primary design.
   Short viewports / content that cannot fit must use the controller's Read page
   fallback. These rules keep that reading path flexible as text grows. */

.chapter-copy,.product-core-heading{min-width:0}
body:not(.cinematic) .chapter-copy,body:not(.cinematic) .reclaim-lines{overflow-wrap:anywhere}
.product-map-beat .product-node h3,.product-map-beat .product-node p,
#whole .method-systems b,.care-beat .ecosystem-map h3{overflow-wrap:anywhere}
#whole .method-systems li>span:nth-child(2){min-width:0}

/* Respect camera cutouts and the home indicator in full-screen mobile browsers. */
.site-header{top:env(safe-area-inset-top,0px)}
body.cinematic .beat{margin-top:env(safe-area-inset-top,0px);margin-bottom:env(safe-area-inset-bottom,0px)}
.journey-hud{margin-bottom:env(safe-area-inset-bottom,0px)}
.preview-label{bottom:calc(5px + env(safe-area-inset-bottom,0px))}
dialog{max-height:calc(100svh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
@media(orientation:landscape){
  .site-header{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .beat{padding-left:max(var(--page-pad),env(safe-area-inset-left,0px));padding-right:max(var(--page-pad),env(safe-area-inset-right,0px))}
}

/* Do not leave a tall empty fixed row or clip a product when text is enlarged. */
body:not(.cinematic) .product-map-beat .product-network{
  height:auto;grid-template-rows:minmax(100px,auto) minmax(160px,auto) minmax(100px,auto)
}
body:not(.cinematic) .product-map-beat .product-node{height:auto;min-height:100px}
body:not(.cinematic) .product-map-beat .product-core{height:auto;min-height:160px}
body:not(.cinematic) .walk-cue{display:none}
/* Clip only the deliberately oversize backdrop wash, not semantic content. */
body:not(.cinematic) .beat::before{left:0;right:0}
@media(max-width:600px){
  body:not(.cinematic) .product-map-beat .product-network{grid-template-rows:repeat(3,minmax(126px,auto))}
  body:not(.cinematic) .product-map-beat .product-node{min-height:126px}
  body:not(.cinematic) .product-map-beat .product-core{min-height:126px}
  body:not(.cinematic) #whole .method-systems li{min-height:44px}
  body:not(.cinematic) .intro-coordinate{display:none}
}
@media(max-height:650px) and (min-width:601px){
  body:not(.cinematic) .product-map-beat .product-network{grid-template-rows:repeat(2,minmax(100px,auto))}
  body:not(.cinematic) .product-map-beat .product-node,
  body:not(.cinematic) .product-map-beat .product-core{min-height:100px}
}

/* Reading on a narrow tablet uses normal vertical order around the scanner. */
@media(min-width:601px) and (max-width:900px){
  body:not(.cinematic) .arrival-beat{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-height:0;padding-top:60px;padding-bottom:70px}
  body:not(.cinematic) .arrival-beat .chapter-copy{display:contents}
  body:not(.cinematic) .arrival-beat .eyebrow{order:0;justify-content:center;margin:0}
  body:not(.cinematic) .arrival-beat h2{order:1}
  body:not(.cinematic) .arrival-beat .reclaim-lines{order:2;margin:0}
  body:not(.cinematic) .arrival-beat .vault-terminal{order:3;position:relative;inset:auto;transform:none;width:240px;height:220px;aspect-ratio:auto;margin:12px 0 24px}
  body:not(.cinematic) .arrival-beat .scanner{top:42%}
  body:not(.cinematic) .arrival-beat .scanner-instruction{top:calc(42% + 43px)}
  body:not(.cinematic) .arrival-beat .vault-terminal>small{top:calc(42% + 65px)}
  body:not(.cinematic) .arrival-beat .arrival-actions{order:4;position:static;width:100%;margin:0}
  body:not(.cinematic) .arrival-beat .journey-steps{margin-left:auto;margin-right:auto}
}

/* Narrow embedded windows still retain every word and action in document flow. */
@media(max-width:319px){
  .site-header{height:auto;min-height:72px;gap:4px;flex-wrap:wrap;padding:8px 10px}
  .header-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  body:not(.cinematic) #journey{padding-top:108px}
  body:not(.cinematic) .product-map-beat .product-network{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(112px,auto)}
  body:not(.cinematic) .product-map-beat .product-node{min-height:112px}
  body:not(.cinematic) .product-map-beat .product-core{min-height:112px}
  body:not(.cinematic) .journey-steps ol{grid-template-columns:1fr}
  body:not(.cinematic) .journey-steps li{flex-direction:row;text-align:left}
}