/* View-level layout for the market overview and the cycle/derivatives view.
   Loaded after style.css and shares its variables. */
.chart-panel{margin-bottom:22px}
.chart-panel .main-chart{height:210px}
@media(min-width:1150px){.chart-panel .main-chart{height:250px}}
.cycle-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:22px}
.cycle-card,.wide-panel{padding:23px 25px}
.wide-panel{margin-bottom:22px}
.cycle-value{display:flex;align-items:baseline;gap:14px;margin:18px 0 4px}
.cycle-value strong{font-size:44px;font-weight:550;line-height:1.1;font-variant-numeric:tabular-nums}
.mini-chart{height:66px;margin:8px 0 4px}
.mini-chart svg{width:100%;height:100%;display:block}
.mini-legend{font-size:12px;color:var(--muted);margin-bottom:6px}
.metric-grid{display:grid;gap:0;border-top:1px solid var(--line);margin:16px 0 10px}
.metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-grid .metric{padding:16px 14px;border-bottom:1px solid var(--line)}
.metric-grid .metric+.metric{border-left:1px solid var(--line)}
.metric-grid strong{font-size:22px}
.scale-bar{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,#3a2530,#222a34 50%,#1e3830);margin:22px 0 8px}
.scale-bar i{position:absolute;top:-5px;width:4px;height:20px;border-radius:2px;background:var(--text);transform:translateX(-50%)}
.bias-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.pill.positive{background:#1e342e;color:var(--green)}
.pill.negative{background:#3b232d;color:var(--red)}
.segment{display:flex;border:1px solid #313a47;border-radius:6px;overflow:hidden}
.seg{background:#161b23;color:#bdc7d4;border:0;padding:7px 16px;font-size:13px}
.seg+.seg{border-left:1px solid #313a47}
.seg.active{background:var(--lime);color:#17200e;font-weight:650}
.trend-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:12px 0 4px}
.trend-legend{display:flex;gap:16px;font-size:12px;color:var(--muted)}
.trend-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.trend-chart{width:100%;height:230px;display:block;margin:12px 0 6px}
.dvol-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1fr);gap:22px;align-items:center;border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.dvol-row p{margin:0}
.checks-heading h3{font-size:16px;font-weight:600;margin:0}
.block-table{margin:10px 0 14px;border:1px solid var(--line);border-radius:8px}
.block-table table{font-size:13px;white-space:normal;min-width:640px}
.block-table th,.block-table td{padding:11px 14px}
.block-table th:nth-child(n+3),.block-table td:nth-child(n+3){text-align:right}
.block-table th:nth-child(6),.block-table td:nth-child(6){text-align:left;white-space:nowrap}
.block-table th:nth-child(-n+5),.block-table td:nth-child(-n+5){white-space:nowrap}
.block-table td:first-child{color:var(--text);width:auto}
#options-status{margin-bottom:0}
@media(max-width:1150px){
 .cycle-top{grid-template-columns:1fr}
 .metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metric-grid.four .metric:nth-child(odd){border-left:0}
 .dvol-row{grid-template-columns:1fr}
}
@media(max-width:760px){
 .cycle-card,.wide-panel{padding:18px}
 .cycle-value strong{font-size:36px}
 .metric-grid.three{grid-template-columns:1fr}
 .metric-grid.three .metric+.metric{border-left:0}
 .trend-chart{height:170px}
 .panel-top{flex-wrap:wrap}
}