/* Index detail is a compact reading panel, independent of neighbouring card height. */
html body.desktop-v4 #v4-market-chart{display:flex;flex-direction:column;align-self:start;grid-row:auto;min-width:0;min-height:0;height:auto;padding:18px;gap:12px}
#v4-market-chart .next-index-switcher{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0 16px 0 0}
html body.desktop-v4 #v4-market-chart .next-index-switcher button{font-size:12px!important;line-height:1.4!important;min-height:33px;padding:6px 10px;border-radius:8px}
#v4-market-chart .index-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
html body.desktop-v4 #v4-index-label{font-size:16px!important;font-weight:750;line-height:1.4;margin:0 0 3px}
#v4-market-chart .index-quote{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px;line-height:1.3}
html body.desktop-v4 #v4-index-value{font-size:32px!important;line-height:1.2;letter-spacing:-.5px;font-weight:760;margin:0;font-variant-numeric:tabular-nums}
#v4-index-unit{font-size:11px;color:var(--mm-muted);white-space:nowrap}
html body.desktop-v4 #v4-index-day{font-size:12px;line-height:1.5;font-weight:700;white-space:nowrap}
#v4-market-chart .index-heading>.compact-tabs{flex-shrink:0;display:flex;gap:2px;margin:0;padding:3px;border-radius:9px}
html body.desktop-v4 #v4-market-chart [data-index-days]{font-size:12px!important;line-height:1.5!important;padding:6px 10px;min-height:30px;border-radius:7px;white-space:nowrap}
#v4-market-chart .index-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--mm-line);border-radius:10px;background:var(--mm-soft);overflow:hidden}
#v4-market-chart .index-metrics>div{padding:10px 13px;min-width:0}
#v4-market-chart .index-metrics>div+div{border-left:1px solid var(--mm-line)}
#v4-market-chart .index-metrics span{display:block;font-size:11px;color:var(--mm-muted);line-height:1.5;white-space:nowrap}
html body.desktop-v4 #v4-market-chart .index-metrics strong{display:block;font-size:22px!important;line-height:1.4;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
#v4-market-chart .index-metrics small{display:block;font-size:11px;color:var(--mm-muted);line-height:1.5;white-space:nowrap}
#v4-market-chart .index-metrics>.index-metrics-loading{grid-column:1/-1;padding:20px 13px}
html body.desktop-v4 #v4-index-chart{flex:none;width:100%;height:230px!important;min-height:0!important;min-width:0}
#v4-market-chart .index-chart-foot{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;color:var(--mm-muted)}
html body.desktop-v4 #v4-index-date,#v4-market-chart .index-chart-foot>span{font-size:11px;line-height:1.5;margin:0!important;color:var(--mm-muted)}
html body.desktop-v4 #modal:has(.next-index-dialog){width:min(980px,calc(100vw - 32px))!important;height:min(510px,calc(100dvh - 32px));max-height:calc(100dvh - 32px)!important;padding:38px 20px 16px!important}
html body.desktop-v4 .next-index-dialog>#v4-market-chart{height:100%;padding:0;gap:11px}
html body.desktop-v4 .next-index-dialog #v4-index-chart{flex:1 1 160px;height:auto!important;min-height:110px!important}
@media(max-width:600px){
 html body.desktop-v4 #v4-market-chart{padding:14px;gap:10px}
 #v4-market-chart .next-index-switcher{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:4px}
 html body.desktop-v4 #v4-market-chart .next-index-switcher button{min-width:0;min-height:32px;font-size:11px!important;padding:6px 3px}
 #v4-market-chart .index-heading{align-items:flex-start;flex-wrap:wrap;gap:9px}
 #v4-market-chart .index-heading>.compact-tabs{margin-left:auto}
 html body.desktop-v4 #v4-index-value{font-size:29px!important}
 html body.desktop-v4 #v4-index-day{font-size:11px}
 #v4-market-chart .index-metrics>div{padding:8px}
 #v4-market-chart .index-metrics span,#v4-market-chart .index-metrics small{font-size:10px}
 html body.desktop-v4 #v4-market-chart .index-metrics strong{font-size:18px!important}
 html body.desktop-v4 #v4-index-chart{height:210px!important}
 html body.desktop-v4 #modal:has(.next-index-dialog){width:calc(100vw - 16px)!important;height:min(570px,calc(100dvh - 24px));max-height:calc(100dvh - 24px)!important;padding:38px 12px 12px!important;border-radius:14px}
 html body.desktop-v4 .next-index-dialog>#v4-market-chart{gap:9px;padding:0}
 html body.desktop-v4 .next-index-dialog #v4-index-chart{min-height:110px!important;height:auto!important}
}
@media(max-height:500px){
 html body.desktop-v4 #modal:has(.next-index-dialog){height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)!important;padding:32px 14px 10px!important}
 html body.desktop-v4 .next-index-dialog>#v4-market-chart{gap:5px}
 html body.desktop-v4 .next-index-dialog #v4-index-chart{min-height:65px!important}
 .next-index-dialog #v4-market-chart .index-metrics>div{padding-block:5px}
 .next-index-dialog #v4-market-chart .index-metrics small{display:none}
}