/* Viewport sizing uses the same DOM and existing breakpoint listener. */
html{ -webkit-text-size-adjust:100%;text-size-adjust:100% }
.app-shell,main,.view,#sheetBody{min-width:0;box-sizing:border-box}
.view input,.view select,.view textarea{min-width:0;box-sizing:border-box}
.view img,.view svg,.view canvas{max-width:100%}
.bottom-nav button{min-width:44px;min-height:44px}
.bottom-nav button span{font-size:26px;line-height:1.1}
.bottom-nav button small{font-size:11px;line-height:1.3}

/* Keep the existing visual hierarchy; replace small inherited type sizes. */
#view-visual{font-size:16px;line-height:1.5}
.visual-head102 h1{font-size:clamp(26px,2.7vw,36px)}
.visual-head102 p{font-size:14px}
.visual-head102>div{min-width:0}
.visual-head102 p{white-space:normal;overflow-wrap:anywhere}
.visual-head102 .eyebrow{font-size:12px}
.visual-summary102 small{font-size:14px}
.visual-summary102 span{font-size:14px}
.visual-summary102 strong{font-size:26px;line-height:1.3;overflow-wrap:anywhere}
.visual-chart102 h2,.visual-detail102 h2,.visual-extra102 h2,.visual-comment102 h2{font-size:18px}
.visual-chart102 li{font-size:15px;grid-template-columns:10px minmax(0,1fr) auto;gap:8px}
.visual-chart102 li small{font-size:14px;grid-column:2/-1;justify-self:end}
.visual-chart102 figure span{font-size:17px}
.visual-detail102 th,.visual-detail102 td{font-size:15px;white-space:nowrap}
.visual-detail102 table{min-width:620px}
.visual-detail102>div{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.visual-switch102 strong,.visual-switch102 button,.visual-mode102 button{font-size:16px}
.visual-mode102 button{min-height:44px;height:auto}
.visual-extra102 small{font-size:14px}
.visual-extra102 b,.visual-comment102 p{font-size:16px}
.visual-chart102>div{grid-template-columns:minmax(130px,180px) minmax(0,1fr)}
.visual-chart102 figure{width:100%;max-width:180px}
.visual-chart102 ul{min-width:0}
.visual-chart102 li span{overflow-wrap:anywhere}
.visual-chart102 li:not(:has(*)){display:block}

@media(max-width:899px){
  body .app-shell{width:100%;max-width:100%;margin:0;min-height:100dvh;border-radius:0}
  body .bottom-nav{width:100%;max-width:100%;bottom:0;border-radius:0}
  .view{width:100%}
  .topbar{box-sizing:border-box;max-width:100%}
  .visual-head102{grid-template-columns:1fr;gap:14px}
  .visual-charts102{grid-template-columns:1fr}
  .visual-switch102{flex-wrap:wrap}
  .visual-summary102{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual-summary102 strong{font-size:24px}
  .visual-extra102>div{grid-template-columns:1fr}
  .visual-detail102 th,.visual-detail102 td{font-size:15px}
  .view input,.view select,.view textarea{font-size:max(16px,1em)}
  .annual96>div,.annual-wrap86,.asset-table-card100>div{overflow-x:auto!important;max-width:100%}
}
@media(max-width:560px){
  .visual-summary102 article,.visual-chart102,.visual-detail102{padding:14px}
  .visual-chart102>div{grid-template-columns:1fr}
  .visual-chart102 figure{width:160px;margin:auto}
  .visual-summary102 strong{font-size:23px}
  .visual-detail102 table{min-width:580px}
  .visual-summary102 small,.visual-summary102 span{font-size:13px}
  .visual-extra102 article{flex-wrap:wrap;gap:8px}
  .bottom-nav{grid-template-columns:minmax(44px,1fr) minmax(44px,1fr) 62px minmax(44px,1fr) minmax(44px,1fr)}
  .bottom-nav button span{font-size:26px}
  .bottom-nav button small{font-size:10px;white-space:nowrap}
}
@media(max-width:360px){
  .visual-summary102{grid-template-columns:1fr}
  .visual-summary102 strong{font-size:24px}
  .bottom-nav button small{font-size:9px}
  .asset-goal100,.asset-add100,.category-list86 article{min-width:0}
}