/* Convexa Daily — Vol Lab page (task 031).
   Shared Primary nav + footer come from site.css / nav031 / footer031.
   Do NOT redefine bare .wrap — that broke the sticky header (logo centered, menu under the rule). */

/* Content column only; IV rise/fall colors scoped here (≠ return green/red). */
.vl-page{
  --ink2:var(--ink-2);--muted:var(--mute);--accent:var(--brass);--link:var(--brass);
  --up:#b5500f;--down:#2f5fb3;
  max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;
  padding:0 var(--gutter) 56px;display:flex;flex-direction:column;gap:28px;
}
[data-theme="dark"] .vl-page{--up:#ffa566;--down:#7aa2ff}

.vl-page .delay{display:inline-flex;gap:8px;align-items:center;margin:8px 0 0;font-size:13px;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px;max-width:42em}
.vl-page .crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);padding:14px 0 0;text-decoration:none}
.vl-page .crumb a{color:var(--link);text-decoration:none}.vl-page .crumb a:hover{text-decoration:underline}
.vl-page .crumb i{font-style:normal;opacity:.6}
.vl-head h1{font-size:clamp(26px,4vw,40px);line-height:1.12;margin:6px 0 0;text-wrap:balance;letter-spacing:-.01em;font-family:var(--serif);font-weight:500}
.vl-head .sub{color:var(--muted);font-size:15px;margin:8px 0 0;max-width:68ch}
.vl-head .stamp{font-size:13px;color:var(--muted);margin:8px 0 0}
.vl-page .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vl-page .kpi{padding:14px 16px;border-left:1px solid var(--line);min-width:0;background:transparent;border-radius:0}
.vl-page .kpi:first-child{border-left:0}
.vl-page .kpi small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vl-page .kpi b{display:block;font-size:30px;font-weight:700;margin-top:4px;font-family:var(--mono);color:inherit}
.vl-page .kpi span{font-size:14px;color:var(--muted)}
.vl-page .up{color:var(--up)}.vl-page .down{color:var(--down)}
.vl-page section h2{font-size:21px;margin:0 0 4px;text-wrap:balance;font-family:var(--serif);font-weight:500}
.vl-page section p.lead{margin:0 0 12px;color:var(--ink2);max-width:72ch}
.vl-page .panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;min-width:0}
.vl-page .plot{width:100%;height:540px;overflow:hidden}
.vl-page .plot.sm{height:340px}
.vl-page .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.vl-page .grid2>*{min-width:0}
.vl-page .src{font-size:12.5px;color:var(--muted);margin-top:8px}
.vl-page .seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:10px}
.vl-page .seg button{font:600 14px var(--sans);padding:8px 14px;border:0;background:transparent;color:var(--ink2);cursor:pointer}
.vl-page .seg button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
.vl-page .seg button:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.vl-page .tbl{overflow-x:auto}
.vl-page table{border-collapse:collapse;width:100%;font-size:13.5px}
.vl-page th,.vl-page td{padding:6px 8px;text-align:right;white-space:nowrap}
.vl-page thead th{color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.vl-page tbody th{text-align:left;color:var(--ink2);font-weight:600}
.vl-page td.atm,.vl-page th.atm{font-weight:700}
.vl-page .note{font-size:14px;color:var(--muted);max-width:80ch}
@media (max-width:760px){
 .vl-page .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vl-page .kpi:nth-child(3){border-left:0}
 .vl-page .kpi{border-top:1px solid var(--line)}
 .vl-page .kpi:nth-child(-n+2){border-top:0}
 .vl-page .grid2{grid-template-columns:minmax(0,1fr)}
 .vl-page .plot{height:420px}
 .vl-page .kpi b{font-size:24px}
 .vl-page .stamp{text-align:left}
}

/* Plotly non-interactive on this page */
.vl-page .js-plotly-plot,.vl-page .js-plotly-plot *{pointer-events:none!important}
.vl-page #surf .modebar,.vl-page #surf .modebar-container{display:none!important}

/* Task 034: build-time surface PNG; theme by data-theme (◐), no WebGL. */
#surf.surf-static{height:auto!important;min-height:0}
.surf-img{display:block;width:100%;height:auto}
.surf-d{display:none}
[data-theme="dark"] .surf-l{display:none}
[data-theme="dark"] .surf-d{display:block}

#surf.rot{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
#surf.rot img{pointer-events:none;-webkit-user-drag:none}
#surf.rot:active{cursor:grabbing}

.vl-page .grid2>section:nth-child(3){grid-column:1/-1}