/* 窄版頁簽換行；不建立橫向捲動容器。 */
@media (max-width:1023px){
 .topnav{flex-wrap:wrap}
 .topnav .topnav-btn{padding:9px 12px;max-width:100%}
 #view-usage>*,#view-usage .u-grid>*,#view-usage .u-kpis>*{min-width:0;max-width:100%}
 #view-usage .u-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #view-usage .u-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
 #view-usage .u-bars{width:100%;min-width:0;gap:1px}
 #view-usage .u-bars .col{flex:1 1 0;min-width:0}
 #view-usage .u-bars .col .cap{width:100%;min-width:0}
 #view-usage .u-bars .col:not(:nth-child(5n+1)):not(:last-child) .cap{visibility:hidden}
 #view-usage .u-brow .nm{flex:0 1 32%;min-width:0;overflow-wrap:anywhere}
 #view-usage .u-brow .track{min-width:0}
 #view-usage .u-brow .val{min-width:0;max-width:35%;overflow-wrap:anywhere}
 #view-usage .u-kpi .v,#view-usage .ncdr-note{overflow-wrap:anywhere}
}
/* Grid 的自動最小欄寬不得被 30／24 格 nowrap 標籤撐開。 */
@media (max-width:720px){
 #view-usage .u-grid{grid-template-columns:minmax(0,1fr)}
 #view-usage .u-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 橫放且矮螢幕：幕內獨立捲動，子項不被 flex 壓扁，底部留導覽空間。 */
@media (max-width:1023px) and (max-height:520px) and (orientation:landscape){
 .bf .bf-scene{overflow-y:auto;overflow-x:hidden;padding-bottom:64px}
 .bf .bf-scene>*{flex-shrink:0}
 .bf .bf-scene .bf-2col,.bf .bf-scene .bf-s2-body{flex:0 0 auto;min-height:auto}
}