/* v31 - Deep Dive layout (presentation only).
   Row 1: KPI trend chart (~80%) + Measure panel (~20%).  Row 2: Top 10 Customer (~40%) + Contribution (~60%,
   table + Contribution By).  Remaining Deep Dive sections stay below.  Customer -> City removed (lives in Customer Analysis).
   Scoped to #page-deep / #v31Main only.  Layout switches use container queries on #v31Main (real content width).
   Selectors are prefixed with #page-deep#page-deep #v31Main so they out-rank the older portfolio rules. */

/* ---------- page flow + single page title ---------- */
#page-deep#page-deep:not(.hidden){row-gap:16px !important}
#page-deep#page-deep:not(.hidden)>#v31DeepHead{order:0 !important}
#page-deep#page-deep:not(.hidden)>#v31Main{order:5 !important}
#page-deep#page-deep:not(.hidden)>.v27-story-head{margin-top:8px !important;margin-bottom:0 !important}
#page-deep#page-deep .v31-head{display:flex !important;flex-wrap:wrap !important;align-items:baseline !important;gap:2px 16px !important;margin:0 !important;padding:0 2px !important}
#page-deep#page-deep .v31-head-title{margin:0 !important;font-size:22px !important;font-weight:800 !important;line-height:1.25 !important;color:#17334e !important;letter-spacing:-.2px !important}
#page-deep#page-deep .v31-head-scope{margin:0 !important;font-size:13px !important;line-height:1.5 !important;color:#5d7692 !important;min-width:0 !important;overflow-wrap:anywhere !important}

/* ---------- grid shell ---------- */
#page-deep#page-deep #v31Main{container-type:inline-size !important;container-name:v31main !important;min-width:0 !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important}
#page-deep#page-deep #v31Main .v31-grid{display:grid !important;grid-template-columns:repeat(10,minmax(0,1fr)) !important;gap:16px !important;align-items:stretch !important;min-width:0 !important}
#page-deep#page-deep #v31Main .v31-grid>.v5-panel{grid-column:1/-1 !important;display:flex !important;flex-direction:column !important;min-width:0 !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important;transform:none !important;transition:none !important}
#page-deep#page-deep #v31Main .v31-grid>.v5-panel>.xhead{position:absolute !important;display:block !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;background:none !important;color:inherit !important}
#page-deep#page-deep #v31Main .v31-grid>.v5-panel>.v5-body{flex:1 1 auto !important;min-width:0 !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;gap:16px !important}

/* white cards: thin border, 12px radius, 14-16px padding, no heavy shadow */
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-measures,
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-body>.card,
#page-deep#page-deep #v31Main .v31-grid #v5CustomerCard,
#page-deep#page-deep #v31Main .v31-grid #contribBox,
#page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel .v5-body>.card{background:#fff !important;border:1px solid #dce7f0 !important;border-radius:12px !important;padding:14px 16px !important;margin:0 !important;min-width:0 !important;box-shadow:none !important;overflow:hidden !important;transform:none !important}

/* ---------- ROW 1 : chart + Measure ---------- */
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel>.v5-body{display:grid !important;grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"measure" "chart" !important;align-items:stretch !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel>.v5-body>.v5-measures{grid-area:measure !important;display:flex !important;flex-direction:column !important;gap:10px !important;max-width:none !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel>.v5-body>.card{grid-area:chart !important;display:flex !important;flex-direction:column !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .measbox{display:flex !important;flex-direction:column !important;gap:6px !important;width:auto !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .measbox>.hd{margin:0 !important;padding:5px 8px !important;text-align:center !important;font-size:13px !important;font-weight:700 !important;color:#194766 !important;background:#f3f7fb !important;border:1px solid #dce7f0 !important;border-radius:8px !important}
#page-deep#page-deep #v31Main .v31-grid #measBox{display:flex !important;flex-direction:column !important;gap:4px !important;width:100% !important}
#page-deep#page-deep #v31Main .v31-grid .mbtn{display:flex !important;align-items:center !important;justify-content:center !important;min-height:28px !important;margin:0 !important;padding:4px 10px !important;font-size:13px !important;line-height:1.3 !important;font-weight:500 !important;text-align:center !important;white-space:normal !important;color:#2b3a4a !important;background:#eef2f6 !important;border:0 !important;border-radius:8px !important;box-shadow:none !important;transition:background .15s,color .15s !important}
#page-deep#page-deep #v31Main .v31-grid .mbtn:hover:not(:disabled):not(.active){background:#e0e9f2 !important}
#page-deep#page-deep #v31Main .v31-grid .mbtn.active{color:#fff !important;font-weight:600 !important;background:#0d7e99 !important;box-shadow:none !important}
#page-deep#page-deep #v31Main .v31-grid .mbtn:disabled{opacity:.45 !important;cursor:not-allowed !important}
#page-deep#page-deep #v31Main .v31-grid .mbtn:focus-visible,#page-deep#page-deep #v31Main .v31-grid .cbtn:focus-visible,#page-deep#page-deep #v31Main .v31-grid .toggle button:focus-visible,#page-deep#page-deep #v31Main .v31-grid .rbtn:focus-visible,#page-deep#page-deep #v31Main .v31-grid .v31-bar-row:focus-visible{outline:2px solid #0d7e99 !important;outline-offset:2px !important}
#page-deep#page-deep #v31Main .v31-grid #olaScopeBox{margin:0 !important}
#page-deep#page-deep #v31Main .v31-grid #olaScopeBox .hd{margin:0 0 4px !important;padding:0 !important;font-size:12px !important;font-weight:700 !important;color:#194766 !important;background:none !important;border:0 !important;text-align:center !important}
#page-deep#page-deep #v31Main .v31-grid #olaScopeBox>div{display:flex !important;gap:4px !important}
#page-deep#page-deep #v31Main .v31-grid #olaScopeBox .rbtn{flex:1 1 0 !important;min-height:28px !important;padding:4px 6px !important;font-size:12px !important;line-height:1.3 !important;border:0 !important;border-radius:8px !important;background:#eef2f6 !important;color:#2b3a4a !important;cursor:pointer !important}
#page-deep#page-deep #v31Main .v31-grid #olaScopeBox .rbtn.active{background:#0d7e99 !important;color:#fff !important;font-weight:600 !important}

/* readouts: latest period vs overall scope */
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;margin:0 !important;max-width:none !important;width:100% !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"cap cap" "per val" "tgt tgt" !important;align-items:baseline !important;column-gap:8px !important;row-gap:1px !important;margin:0 !important;padding:7px 10px !important;text-align:left !important;background:#f1f7fb !important;border:1px solid #dfeaf3 !important;border-radius:10px !important;min-width:0 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-cap{grid-area:cap !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.04em !important;text-transform:uppercase !important;color:#0d6f86 !important;line-height:1.3 !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum .p{grid-area:per !important;margin:0 !important;font-size:11.5px !important;line-height:1.3 !important;color:#425b6f !important;overflow-wrap:anywhere !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum .v,#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum .v.small{grid-area:val !important;margin:0 !important;font-size:22px !important;line-height:1.1 !important;font-weight:700 !important;letter-spacing:-.5px !important;color:#18416b !important;text-align:right !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum>.v7-target-row{grid-area:tgt !important;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;flex-basis:auto !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .v7-target{display:block !important;font-size:11px !important;line-height:1.3 !important;color:#5d7692 !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .v7-target b{color:#17334e !important}

/* chart card */
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-body>.card>div:first-child{margin:0 0 4px !important;gap:10px !important}
#page-deep#page-deep #v31Main .v31-grid #chartTitle{margin:0 0 4px !important;font-size:15px !important;font-weight:700 !important;line-height:1.3 !important;color:#17334e !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .legend{display:flex !important;flex-wrap:wrap !important;gap:4px 14px !important;margin:0 !important;font-size:12px !important;line-height:1.4 !important;color:#44566a !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .legend i{width:9px !important;height:9px !important;margin-right:5px !important;vertical-align:baseline !important}
#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-body>.card>div:first-child>div:last-child>div:first-child{font-size:12px !important;color:#5d7692 !important}
#page-deep#page-deep #v31Main .v31-grid .toggle{display:flex !important;gap:4px !important;margin:0 !important}
#page-deep#page-deep #v31Main .v31-grid .toggle button{min-height:30px !important;padding:4px 14px !important;font-size:13px !important;line-height:1.3 !important;color:#34434f !important;background:#e9edf1 !important;border:0 !important;border-radius:8px !important;box-shadow:none !important}
#page-deep#page-deep #v31Main .v31-grid .toggle button.active{background:#0e8582 !important;color:#fff !important;font-weight:600 !important}
#page-deep#page-deep #v31Main .v31-grid #combo{position:relative !important;flex:1 1 0 !important;min-height:250px !important;margin:6px 0 0 !important}
#page-deep#page-deep #v31Main .v31-grid #combo>svg{position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;max-height:none !important;display:block !important}
#page-deep#page-deep #v31Main .v31-grid #combo>.note{margin:0 !important;padding:40px 10px !important;text-align:center !important}
#page-deep#page-deep #v31Main .v31-grid #combo svg text.v31-t-x{font-size:11.5px !important}
#page-deep#page-deep #v31Main .v31-grid #combo svg text.v31-t-v{font-size:11px !important}
#page-deep#page-deep #v31Main .v31-grid #combo svg text.v31-t-p{font-size:11.5px !important;font-weight:600 !important}

/* ---------- ROW 2 : Top 10 Customer ---------- */
#page-deep#page-deep #v31Main .v31-grid #v5CustomerPanel>.v5-body.v5-customer-grid{display:flex !important;flex-direction:column !important;grid-template-columns:none !important;gap:0 !important;padding:0 !important;background:transparent !important;border:0 !important;align-items:stretch !important}
#page-deep#page-deep #v31Main .v31-grid #v5CustomerCard{display:flex !important;flex-direction:column !important;flex:1 1 auto !important}
#page-deep#page-deep #v31Main .v31-grid #v5CustomerTitle{margin:0 0 10px !important;padding:0 !important;border:0 !important;font-size:15px !important;font-weight:700 !important;line-height:1.3 !important;color:#17334e !important}
#page-deep#page-deep #v31Main .v31-grid #top10{flex:1 1 auto !important;display:flex !important;flex-direction:column !important;min-height:0 !important}
#page-deep#page-deep #v31Main .v31-grid #top10>.note{margin:0 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bars{flex:1 1 auto !important;display:flex !important;flex-direction:column !important;gap:3px !important;min-height:0 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-row{flex:1 1 0 !important;display:grid !important;grid-template-columns:minmax(96px,38%) minmax(0,1fr) !important;align-items:center !important;column-gap:10px !important;width:100% !important;min-height:26px !important;max-height:42px !important;margin:0 !important;padding:0 6px !important;font:inherit !important;text-align:left !important;color:#25313c !important;background:transparent !important;border:0 !important;border-radius:6px !important;cursor:pointer !important;transform:none !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-row:hover{background:#f1f7fc !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-row.xsel{background:#e6f3fb !important;box-shadow:inset 0 0 0 1px #1986c7 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-row.xdim{opacity:.5 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-name{min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;text-align:right !important;font-size:12.5px !important;line-height:1.3 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-area{display:flex !important;align-items:center !important;gap:6px !important;min-width:0 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-fill{display:block !important;flex-grow:0 !important;flex-shrink:0 !important;min-width:2px !important;height:18px !important;border-radius:2px !important;background:#a9c4ee !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-row.xsel .v31-bar-fill{background:#5b9bd5 !important}
#page-deep#page-deep #v31Main .v31-grid .v31-bar-value{flex:0 0 auto !important;font-size:12.5px !important;font-weight:600 !important;line-height:1.3 !important;color:#33415c !important;font-variant-numeric:tabular-nums !important;white-space:nowrap !important}
#page-deep#page-deep #v31Main .v31-grid #v5CustomerCard>.v7-target-row{margin:6px 0 0 !important;padding:0 !important;border:0 !important;background:transparent !important;font-size:11.5px !important;color:#5d7692 !important}

/* ---------- ROW 2 : Contribution (table left, Contribution By right) ---------- */
#page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel>.v5-body{display:grid !important;grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"dim" "table" !important;align-items:stretch !important}
#page-deep#page-deep #v31Main .v31-grid #contribBox{grid-area:dim !important;display:flex !important;flex-direction:column !important;gap:4px !important;width:auto !important}
#page-deep#page-deep #v31Main .v31-grid #contribBox>.hd{margin:0 0 2px !important;padding:0 !important;text-align:center !important;font-size:13px !important;font-weight:700 !important;line-height:1.4 !important;color:#0e8582 !important;background:none !important;border:0 !important}
#page-deep#page-deep #v31Main .v31-grid .cbtn{display:flex !important;align-items:center !important;justify-content:center !important;min-height:28px !important;margin:0 !important;padding:4px 8px !important;font-size:12.5px !important;line-height:1.3 !important;text-align:center !important;white-space:normal !important;color:#34434f !important;background:#e9edf1 !important;border:0 !important;border-radius:8px !important;box-shadow:none !important;transition:background .15s,color .15s !important}
#page-deep#page-deep #v31Main .v31-grid .cbtn:hover:not(.active){background:#dde4ea !important}
#page-deep#page-deep #v31Main .v31-grid .cbtn.active{color:#fff !important;font-weight:600 !important;background:#0e8582 !important}
#page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel .v5-body>.card{grid-area:table !important;display:flex !important;flex-direction:column !important}
#page-deep#page-deep #v31Main .v31-grid .v5-table-toolbar{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:8px 12px !important;margin:0 0 10px !important}
#page-deep#page-deep #v31Main .v31-grid #v5ContributionTitle{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important}
#page-deep#page-deep #v31Main .v31-grid #cmpTxt{margin:0 0 0 auto !important;font-size:12.5px !important;line-height:1.3 !important;color:#5d7692 !important;white-space:nowrap !important}
#page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel .scroll{flex:0 1 auto !important;min-width:0 !important;min-height:0 !important;max-height:420px !important;overflow:auto !important;border:0 !important;scrollbar-width:thin !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable{width:100% !important;min-width:520px !important;font-size:13px !important;border-collapse:separate !important;border-spacing:0 !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable th{position:sticky !important;top:0 !important;z-index:2 !important;padding:8px 10px !important;font-size:12px !important;font-weight:600 !important;line-height:1.3 !important;text-align:right !important;vertical-align:bottom !important;white-space:normal !important;color:#3b536b !important;background:#edf3f9 !important;border-bottom:1px solid #d3e0ec !important;cursor:pointer !important;user-select:none !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable th:first-child{text-align:left !important;min-width:120px !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable th:hover{color:#0d6f86 !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable td{padding:7px 10px !important;font-size:13px !important;line-height:1.35 !important;text-align:right !important;white-space:nowrap !important;border-bottom:1px solid #edf1f5 !important;font-variant-numeric:tabular-nums !important;background:transparent !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable td:first-child{text-align:left !important;white-space:normal !important;overflow-wrap:anywhere !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable tbody tr:hover td{background:#f1f7fc !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable tbody tr.xsel td{background:#e6f4fb !important;font-weight:600 !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable tbody tr.xdim td{opacity:.45 !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable tr.blankrow td{text-align:left !important;white-space:normal !important;font-size:12px !important;font-style:italic !important;color:#6b7b8a !important;border-bottom:0 !important}
#page-deep#page-deep #v31Main .v31-grid #contribTable tfoot td{position:sticky !important;bottom:0 !important;z-index:2 !important;padding:8px 10px !important;font-weight:700 !important;color:#17334e !important;background:#f1f6fa !important;border-top:2px solid #0e8582 !important;border-bottom:0 !important}

/* ---------- container-driven layout ---------- */
@container v31main (max-width:819.98px){
 #page-deep#page-deep #v31Main .v31-grid #measBox{flex-direction:row !important;flex-wrap:wrap !important}
 #page-deep#page-deep #v31Main .v31-grid #measBox .mbtn{flex:1 1 112px !important}
}
@container v31main (min-width:820px){
 #page-deep#page-deep #v31Main .v31-grid #v5MetricPanel>.v5-body{grid-template-columns:minmax(0,1fr) clamp(208px,20%,300px) !important;grid-template-areas:"chart measure" !important}
 #page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts{grid-template-columns:minmax(0,1fr) !important}
}
@container v31main (min-width:1300px){
 #page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
 #page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum{grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"cap" "per" "val" "tgt" !important;row-gap:2px !important}
 #page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum .v,#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-readouts .bignum .v.small{text-align:left !important;font-size:24px !important}
}
@container v31main (max-width:639.98px){
 #page-deep#page-deep #v31Main .v31-grid #contribBox{flex-direction:row !important;flex-wrap:wrap !important}
 #page-deep#page-deep #v31Main .v31-grid #contribBox>.hd{flex:1 0 100% !important}
 #page-deep#page-deep #v31Main .v31-grid .cbtn{flex:1 1 120px !important}
}
@container v31main (min-width:640px){
 #page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel>.v5-body{grid-template-columns:minmax(0,1fr) 176px !important;grid-template-areas:"table dim" !important}
 #page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel .scroll{flex:0 1 auto !important;min-height:0 !important;max-height:420px !important}
}
@container v31main (min-width:1100px){
 #page-deep#page-deep #v31Main .v31-grid #v5CustomerPanel{grid-column:1/5 !important}
 #page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel{grid-column:5/-1 !important}
}
@container v31main (max-width:519.98px){
 #page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-body>.card,#page-deep#page-deep #v31Main .v31-grid #v5CustomerCard,#page-deep#page-deep #v31Main .v31-grid #contribBox,#page-deep#page-deep #v31Main .v31-grid #v5ContributionPanel .v5-body>.card,#page-deep#page-deep #v31Main .v31-grid #v5MetricPanel .v5-measures{padding:12px !important}
 #page-deep#page-deep #v31Main .v31-grid #combo{min-height:240px !important}
 #page-deep#page-deep #v31Main .v31-grid .v31-bar-row{grid-template-columns:minmax(84px,40%) minmax(0,1fr) !important}
 #page-deep#page-deep #v31Main .v31-grid #measBox .mbtn{flex-basis:calc(50% - 4px) !important}
 #page-deep#page-deep #v31Main .v31-grid .cbtn{flex-basis:calc(50% - 4px) !important}
 #page-deep#page-deep #v31Main .v31-grid #cmpTxt{margin-left:0 !important;white-space:normal !important}
}
@media(pointer:coarse){
 #page-deep#page-deep #v31Main .v31-grid .mbtn,#page-deep#page-deep #v31Main .v31-grid .cbtn,#page-deep#page-deep #v31Main .v31-grid .toggle button,#page-deep#page-deep #v31Main .v31-grid #olaScopeBox .rbtn{min-height:36px !important}
}
@media(max-width:760px){
 #page-deep#page-deep .v31-head-title{font-size:20px !important}
}
@media(prefers-reduced-motion:reduce){
 #page-deep#page-deep #v31Main .v31-grid .mbtn,#page-deep#page-deep #v31Main .v31-grid .cbtn{transition:none !important}
}