/* NHIP V2.8 — trading workspace density pass. CSS-only overrides; original business logic retained. */
:root{--v28-gap:9px;--v28-line:var(--ws-border,#e2e8f0)}
html{scroll-padding-top:64px}
body{font-size:12px}
.topbar{min-height:54px;padding-block:7px}
.tagline{font-size:11px}
.top-actions{gap:6px}
.shell{gap:0;grid-template-columns:clamp(142px,12vw,176px) minmax(0,1fr)}
.sidebar{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
.main{min-width:0;width:100%;padding:12px clamp(10px,1.1vw,18px) 10px}
#view{min-width:0}
/* A quieter, denser information hierarchy */
.panel,.index-card,.card,.metric-card{border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.035)}
.panel{padding:10px;margin-bottom:8px}
.panelhead{gap:7px;margin-bottom:8px}
.panelhead h2{font-size:12.5px;line-height:1.3}
.welcome{padding-top:2px}
.welcome h1{font-size:clamp(20px,1.65vw,25px);line-height:1.2;letter-spacing:-.45px}
.welcome p,.panel-sub{font-size:11px;line-height:1.45}
.index-grid{gap:8px;margin-bottom:8px}
.index-card{padding:9px 10px}
.index-card>strong{font-size:clamp(17px,1.45vw,21px);letter-spacing:-.35px}
.index-card small,.index-card .change{font-size:10px}
.content-grid{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:9px}
.chart{height:clamp(190px,22vh,255px);min-height:180px}
/* Tight controls without making targets difficult to tap */
button,.btn,select,input{font-size:11px}
.btn{min-height:28px;padding:6px 9px;border-radius:6px}
input,select{min-height:29px;padding:5px 7px}
.toolbar{gap:4px}
.toolbar .btn{min-height:26px;padding:4px 7px}
/* Dense tables: more rows in view, still legible */
table{font-size:10.5px}
th{font-size:9px;padding:5px 6px;letter-spacing:.1px}
td{padding:5px 6px;line-height:1.3}
.watch-row{min-height:31px;padding:5px 7px}
.newsitem{padding:7px 8px}
/* Never let a chart/table force the whole page wider than the viewport */
#view>*{min-width:0;max-width:100%}
.panel,section,article{min-width:0}
@media(min-width:1440px){
 .shell{grid-template-columns:158px minmax(0,1fr)}
 .sidebar{padding-inline:7px}
 .nav{padding:6px 8px;min-height:29px;font-size:11px}
 .main{padding-inline:16px}
 .content-grid{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr)}
 .chart{height:clamp(195px,22vh,260px)}
}
@media(min-width:1800px){
 .shell{grid-template-columns:170px minmax(0,1fr)}
 .content-grid{grid-template-columns:minmax(0,1.16fr) minmax(350px,.84fr)}
 .chart{height:265px}
}
@media(max-width:1100px){
 .shell{grid-template-columns:130px minmax(0,1fr)}
 .main{padding:10px}
 .content-grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .chart{height:230px}
}
@media(max-width:720px){
 body{font-size:12px}
 .topbar{min-height:48px;padding:6px 10px;gap:8px}
 .tagline{display:none}
 .shell{display:block}
 .sidebar{position:static;max-height:none;overflow:visible}
 .main{padding:9px 8px calc(76px + env(safe-area-inset-bottom))}
 .welcome h1{font-size:20px}
 .index-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .index-card{padding:8px}
 .index-card>strong{font-size:18px}
 .content-grid{display:block}
 .chart{height:210px;min-height:175px}
 .panel{padding:8px;margin-bottom:7px;border-radius:8px}
 .panelhead h2{font-size:12px}
 .btn{min-height:30px}
 table{font-size:10px;min-width:500px}
 th,td{padding:5px 6px}
}
@media(max-width:380px){
 .main{padding-inline:6px}
 .chart{height:190px;min-height:165px}
 .index-card>strong{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}