/* v28 - compact scorecards. Presentation only: data, KPI formulas, filters, scripts and markup untouched.
   Scope: (A) the 8 HLV trend scorecards and (B) the Deep Dive service scorecards (Carepack / Warranty).
   One shared type scale for all 8 HLV cards; status artwork keeps the shared v26 size (--v26-tw x --v26-th). */

/* ---------- A. HLV trend scorecards ---------- */
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card{padding:8px 11px!important;border-radius:14px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-card-head,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-card-head,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-card-head{padding:0 0 4px!important;margin:0 0 3px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-summary,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-summary,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-summary{grid-template-columns:minmax(0,1fr) var(--v26-tw)!important;grid-template-rows:auto auto auto auto!important;row-gap:2px!important;column-gap:10px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-summary .v12-name,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-summary .v12-name,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-summary .v12-name{font-size:16px!important;line-height:1.2!important;font-weight:800!important;grid-column:1!important;grid-row:1!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-period,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-period,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-period{font-size:12px!important;line-height:1.3!important;grid-column:1!important;grid-row:2!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-actual,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-actual,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-actual{font-size:28px!important;line-height:1.1!important;grid-column:1!important;grid-row:3!important;align-self:center!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-summary>.v13-rag,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-summary>.v13-rag,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-summary>.v13-rag{grid-column:2!important;grid-row:1/4!important;align-self:start!important;justify-self:end!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-details,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-details,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-details{grid-column:1!important;grid-row:4!important;gap:5px!important;margin-top:2px!important;font-size:11px!important;line-height:1.3!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-details>span,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-details>span,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-details>span{padding:2px 6px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-details b,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-details b,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-details b{font-size:12.5px!important;line-height:1.3!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-status,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-status,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-status{grid-column:2!important;grid-row:4!important;justify-self:end!important;align-self:center!important;margin-top:2px!important;padding:1px 7px!important;font-size:11px!important;line-height:1.35!important;max-width:var(--v26-tw)!important;text-align:center!important;white-space:normal!important}
/* hero charts (PPSNC30 / Volume): box 206 -> 176px, svg 192 -> 164px */
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card>div:not(.note){height:176px!important;min-height:176px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card>div>svg{height:164px!important}

/* ---------- B. Deep Dive service scorecards ---------- */
html body #hvOlaBig.v13-service-grid,html body #hvWarrantyBig.v13-service-grid{gap:8px!important;margin:4px 0 8px!important}
html body #hvOlaBig .v13-service-card,html body #hvWarrantyBig .v13-service-card{padding:7px 8px!important}
html body #page-deep #v3MovedPanels .v13-service-head,html body #hvOlaBig .v13-service-head,html body #hvWarrantyBig .v13-service-head{min-height:var(--v26-th)!important;margin-bottom:4px!important}
html body #hvOlaBig .v13-service-head h3,html body #hvWarrantyBig .v13-service-head h3{font-size:16px!important;line-height:1.2!important;margin-bottom:1px!important}
html body #hvOlaBig .v13-service-period,html body #hvWarrantyBig .v13-service-period{font-size:12px!important;line-height:1.3!important}
html body #hvOlaBig .v13-service-values,html body #hvWarrantyBig .v13-service-values{gap:4px!important}
html body #hvOlaBig .v13-service-values button,html body #hvWarrantyBig .v13-service-values button{padding:4px 3px!important;gap:1px!important;min-height:0!important}
html body #hvOlaBig .v13-cell-label,html body #hvWarrantyBig .v13-cell-label{font-size:11px!important;line-height:1.3!important}
html body #hvOlaBig .v13-service-values strong,html body #hvWarrantyBig .v13-service-values strong{font-size:22px!important;line-height:1.15!important}
html body #hvOlaBig .v13-service-values .v13-service-gap strong,html body #hvWarrantyBig .v13-service-values .v13-service-gap strong{font-size:20px!important}
html body #hvOlaBig .v13-service-values button>span:last-child,html body #hvWarrantyBig .v13-service-values button>span:last-child{font-size:11px!important;line-height:1.3!important}

/* ---------- Responsive ---------- */
@media(max-width:520px){
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-details,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-details,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-details{grid-column:1/-1!important;grid-row:4!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-status,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-status,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-status{grid-column:1/-1!important;grid-row:5!important;justify-self:start!important;max-width:100%!important;text-align:left!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-summary,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-summary,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-summary{grid-template-rows:auto auto auto auto auto!important}
}
@media(max-width:380px){
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card{padding:7px 9px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-summary .v12-name,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-summary .v12-name,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-summary .v12-name{font-size:15px!important}
html body #page-hlv #v2Trends>.hvrow2>.v12-trend-card .v12-actual,
html body #page-hlv #v2Trends>.hvrow2b>.v12-trend-card .v12-actual,
html body #page-hlv #v2Trends>#v6ExtraTrends>.v12-trend-card .v12-actual{font-size:25px!important}
html body #hvOlaBig .v13-service-values strong,html body #hvWarrantyBig .v13-service-values strong{font-size:19px!important}
html body #hvOlaBig .v13-service-values .v13-service-gap strong,html body #hvWarrantyBig .v13-service-values .v13-service-gap strong{font-size:17px!important}
}