/* Skew & Volatility Levels page layout only; components come from dashboard/css/ezpz-ui.css. Scoped under .skew-dash. */

.ezui.skew-dash { position: relative; }

/* header */
.skew-dash .sk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.skew-dash .sk-head__title { display: grid; gap: 6px; min-width: 0; flex: 1 1 320px; }
.skew-dash .sk-head h1 { font-size: 24px; font-weight: 800; }
.skew-dash .sk-head__title p { max-width: 70ch; }
.skew-dash .sk-head__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skew-dash .sk-ago { font-size: 12px; min-width: 9ch; }

/* live pill (Signal Lab .sl-live on --ezui-* tokens) */
.skew-dash .sk-live {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: var(--ezui-radius-pill);
  background: var(--ezui-surface); border: 1px solid var(--ezui-border-2); color: var(--ezui-text-muted); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.skew-dash .sk-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ezui-text-faint); flex: none; }
.skew-dash .sk-live[data-state="live"] { color: var(--ezui-up-text); }
.skew-dash .sk-live[data-state="live"] i { background: var(--ezui-up); animation: sk-pulse 1.8s infinite; }
.skew-dash .sk-live:is([data-state="delayed"], [data-state="reconnecting"], [data-state="fixture"]) { color: var(--ezui-amber-text); }
.skew-dash .sk-live:is([data-state="delayed"], [data-state="reconnecting"], [data-state="fixture"]) i { background: var(--ezui-amber); }
.skew-dash .sk-live[data-state="snapshot"] { color: var(--ezui-primary-text); }
.skew-dash .sk-live[data-state="snapshot"] i { background: var(--ezui-primary); }
.skew-dash .sk-live[data-state="offline"] { color: var(--ezui-down-text); }
.skew-dash .sk-live[data-state="offline"] i { background: var(--ezui-down); }
@keyframes sk-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* toolbar */
.skew-dash .sk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.skew-dash .sk-search { flex: 0 1 220px; min-width: 160px; }
.skew-dash .sk-search input { font-family: var(--ezui-mono); text-transform: uppercase; }
.skew-dash .sk-search input::placeholder { font-family: var(--ezui-sans); text-transform: none; }
.skew-dash .sk-search-note { flex-basis: 100%; min-height: 1.2em; font-size: 12px; }
.skew-dash .sk-search-note:empty { display: none; }
.skew-dash .sk-tabs { justify-self: start; }

/* panels */
.skew-dash .sk-panel { display: grid; gap: var(--ezui-space-4); min-width: 0; }
.skew-dash .sk-panel:focus { outline: none; }
.skew-dash .sk-legend { font-size: 12.5px; }
.skew-dash .sk-legend strong { color: var(--ezui-text); font-weight: 600; }

/* KPI strip */
.skew-dash .sk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.skew-dash .sk-kpi { display: grid; gap: 4px; align-content: start; }
.skew-dash .sk-kpi__val { font: 700 24px/1.2 var(--ezui-sans); color: var(--ezui-text-bright); min-height: 29px; font-variant-numeric: tabular-nums; }
.skew-dash .sk-kpi__sub { font-size: 12px; }
.skew-dash .sk-skel-val { width: 60%; height: 26px; }

/* chart cards */
.skew-dash .sk-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ezui-space-4); }
.skew-dash .sk-chart-card { display: grid; gap: 10px; align-content: start; min-width: 0; }
.skew-dash .sk-chart-card .ezui-card__head { margin-bottom: 0; }
.skew-dash .sk-chart-card--wide { grid-column: 1 / -1; }
.skew-dash .sk-unit { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ezui-text-faint); }
.skew-dash .sk-chart { position: relative; min-width: 0; width: 100%; }
.skew-dash .sk-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.skew-dash .sk-chart--bars { height: 806px; }
.skew-dash .sk-chart--rr { height: 380px; }
.skew-dash .sk-chart--scatter { height: 520px; }
.skew-dash .sk-chart--dr { height: 220px; }
.skew-dash .sk-chart__skel { position: absolute; inset: 0; height: auto; }
.skew-dash .sk-chart.is-ready .sk-chart__skel { display: none; }
.skew-dash .sk-chart:not(.is-ready) canvas { visibility: hidden; }
.skew-dash .sk-chart-card.is-error > :is(.sk-chart, .sk-ctable, .sk-note) { display: none; }
.skew-dash .sk-note { font-size: 12px; overflow-wrap: anywhere; }
.skew-dash .sk-note:empty { display: none; }
.skew-dash .sk-how summary { cursor: pointer; width: max-content; max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--ezui-primary-text); border-radius: var(--ezui-radius-xs); }
.skew-dash .sk-how summary:focus-visible { box-shadow: var(--ezui-focus); outline: none; }
.skew-dash .sk-how p { margin-top: 6px; font-size: 13px; color: var(--ezui-text-muted); max-width: 75ch; }
.skew-dash .sk-keys { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.skew-dash .sk-keys li { display: inline-flex; align-items: center; gap: 6px; }
.skew-dash .sk-key { width: 10px; height: 10px; flex: none; }
.skew-dash .sk-key--put { background: var(--ezui-down); transform: rotate(45deg) scale(.85); }
.skew-dash .sk-key--bal { background: var(--ezui-primary); border-radius: 50%; }
.skew-dash .sk-key--call { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--ezui-up); }

/* chart "view as table" */
.skew-dash .sk-ctable { height: 520px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ezui-border); border-radius: var(--ezui-radius-sm); }
.skew-dash .sk-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.skew-dash .sk-mini th, .skew-dash .sk-mini td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--ezui-border); }
.skew-dash .sk-mini thead th { position: sticky; top: 0; background: var(--ezui-surface-2); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ezui-text-faint); }
.skew-dash .sk-linkbtn { padding: 2px 4px; margin: -2px -4px; border: 0; border-radius: var(--ezui-radius-xs); background: none; color: var(--ezui-primary-text); font: 600 13px var(--ezui-mono); cursor: pointer; }
.skew-dash .sk-linkbtn:hover { text-decoration: underline; }

/* custom chart tooltip */
.skew-dash .sk-tip {
  position: fixed; top: 0; left: 0; z-index: 1050; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px;
  display: grid; gap: 3px; pointer-events: none; border-radius: 10px; border: 1px solid rgba(148,103,254,.35);
  background: var(--ezui-tip-bg); color: var(--ezui-text); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12px; line-height: 1.4;
}
.skew-dash .sk-tip__title { font: 700 14px/1.3 var(--ezui-mono); color: var(--ezui-text-bright); margin-bottom: 2px; }
.skew-dash .sk-tip__sub { font: 500 12px var(--ezui-sans); color: var(--ezui-amber-text); }
.skew-dash .sk-tip__row { display: flex; justify-content: space-between; gap: 14px; }
.skew-dash .sk-tip__k { color: var(--ezui-text-faint); }
.skew-dash .sk-tip__v { color: var(--ezui-text-bright); font-variant-numeric: tabular-nums; text-align: right; }
/* Volatility Levels table: only this box scrolls sideways */
.skew-dash .sk-vol-card { display: grid; gap: 10px; min-width: 0; }
.skew-dash .sk-vol-card .ezui-card__head { margin-bottom: 0; }
.skew-dash .sk-tablebox {
  position: relative; overflow: auto; max-height: calc(100vh - var(--ezui-sticky-top, 0px) - 140px); min-height: 320px;
  border: 1px solid var(--ezui-border); border-radius: var(--ezui-radius-sm); overscroll-behavior-x: contain;
}
.skew-dash .sk-tablebox:focus-visible { box-shadow: var(--ezui-focus); outline: none; }
.skew-dash .sk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.skew-dash .sk-table th, .skew-dash .sk-table td { padding: 8px 10px; border-bottom: 1px solid var(--ezui-border); white-space: nowrap; text-align: right; }
.skew-dash .sk-table thead th {
  position: sticky; top: 0; z-index: 3; background: var(--ezui-surface-2); vertical-align: bottom;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ezui-text-faint);
}
.skew-dash .sk-table thead th.ezui-tip[data-tip] { position: sticky; }
.skew-dash .sk-table thead th > .ezui-sort { justify-content: flex-end; }
.skew-dash .sk-table thead th.sk-col-sym > .ezui-sort { justify-content: flex-start; }
.skew-dash .sk-th-unit { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ezui-text-faint); }
.skew-dash .sk-table .sk-col-sym { position: sticky; left: 0; z-index: 2; text-align: left; background: var(--ezui-surface); box-shadow: 1px 0 0 var(--ezui-border-2); }
.skew-dash .sk-table thead .sk-col-sym { z-index: 4; background: var(--ezui-surface-2); }
/* header tooltips open downward so the sticky header and scroll box don't clip them */
.skew-dash .sk-table thead th.ezui-tip[data-tip]::after { top: calc(100% + 6px); bottom: auto; left: 0; transform: translate(0, -4px); max-width: 260px; }
.skew-dash .sk-table thead th.sk-tip-end.ezui-tip[data-tip]::after { left: auto; right: 0; }
.skew-dash .sk-table thead th.ezui-tip[data-tip]:is(:hover, :focus-within, .is-tip-open)::after { opacity: 1; visibility: visible; transform: none; }
.skew-dash .sk-grp th { position: sticky; left: 0; z-index: 1; text-align: left; padding: 10px; background: var(--ezui-surface-3); color: var(--ezui-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.skew-dash .sk-table tbody tr[data-sym] { cursor: pointer; transition: background .12s, opacity .12s; }
.skew-dash .sk-table tbody tr[data-sym]:hover > *, .skew-dash .sk-table tbody tr.is-match > * { background-color: #1d1540; }
.skew-dash .sk-table tbody tr[data-sym]:hover > .sk-heat:not(.is-building) { box-shadow: inset 0 0 0 999px rgba(255,255,255,.04); }
.skew-dash .sk-table tbody tr[data-sym]:focus-visible { outline: 2px solid var(--ezui-ring); outline-offset: -2px; box-shadow: none; }
.skew-dash .sk-table tbody tr.is-match > .sk-col-sym { box-shadow: inset 3px 0 0 var(--ezui-primary); }
.skew-dash .sk-table tbody tr.is-match .sk-sym strong { color: var(--ezui-primary-text); }
.skew-dash .sk-sym { display: inline-flex; align-items: center; gap: 5px; }
.skew-dash .sk-sym strong { font: 600 13px var(--ezui-mono); color: var(--ezui-text-bright); }
.skew-dash .sk-flag { height: 18px; padding: 0 5px; font-size: 11px; }
.skew-dash .sk-flag--htb, .skew-dash .sk-flag--earnings { color: var(--ezui-amber-text); }
.skew-dash .sk-flag--upside_chased { color: var(--ezui-up-text); }
.skew-dash .sk-heat { color: var(--ezui-text-bright); font-weight: 600; }
.skew-dash .sk-table td.is-building, .skew-dash .sk-table td.is-null { color: var(--ezui-text-faint); font-weight: 500; }
.skew-dash .sk-table td.is-building .ezui-tip { font-style: italic; }
.skew-dash .sk-bw, .skew-dash .sk-e { margin-left: 6px; height: 18px; padding: 0 6px; font-size: 10.5px; vertical-align: middle; }
.skew-dash .sk-table tr.is-lowq .sk-sym strong { text-decoration: underline dotted var(--ezui-text-faint); }
.skew-dash .sk-table.sk-hide-core [data-group="core"],
.skew-dash .sk-table.sk-hide-skew [data-group="skew"],
.skew-dash .sk-table.sk-hide-chg [data-group="chg"] { display: none; }
.skew-dash .sk-table-skel { display: grid; gap: 8px; padding: 12px; }
.skew-dash .sk-table-skel .ezui-skel { height: 28px; }
.skew-dash .sk-table:has(tbody tr[data-sym]) + .sk-table-skel { display: none; }

/* drawer content */
.skew-dash .sk-dr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skew-dash .sk-dr-meta:empty { display: none; }
.skew-dash .sk-dr-spot { font-size: 20px; font-weight: 700; color: var(--ezui-text-bright); }
.skew-dash .sk-dr-skel { display: grid; gap: 12px; }
.skew-dash .sk-dr-skel__kpis { height: 132px; }
.skew-dash .sk-dr-skel__chart { height: 240px; }
.skew-dash #skDrContent { display: grid; gap: var(--ezui-space-4); min-width: 0; }
.skew-dash #skDrContent[hidden] { display: none; }
.skew-dash .sk-dr-sec { display: grid; gap: 8px; min-width: 0; }
.skew-dash .sk-dr-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* drawer width: wider than the shared default for the charts, and an expanded two-column mode */
.skew-dash .ezui-drawer { --ezui-drawer-w: 600px; }
.skew-dash .ezui-drawer.is-wide { --ezui-drawer-w: min(1120px, 94vw); }
.skew-dash .ezui-drawer__panel { transition-property: transform, width; }
.skew-dash .ezui-drawer__head .sk-dr-expand { margin-left: auto; }
.skew-dash .ezui-drawer__head .sk-dr-expand + .ezui-drawer__close { margin-left: 4px; }
.skew-dash .sk-dr-expand svg { width: 16px; height: 16px; transition: transform .2s; }
.skew-dash .sk-dr-expand[aria-pressed="true"] svg { transform: scaleX(-1); }
@media (min-width: 992px) {
  .skew-dash .ezui-drawer.is-wide #skDrContent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skew-dash .ezui-drawer.is-wide :is(.sk-dr-kpis, .sk-dr-links) { grid-column: 1 / -1; }
  .skew-dash .ezui-drawer.is-wide .sk-dr-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .skew-dash .ezui-drawer.is-wide .sk-chart--dr { height: 280px; }
}
@media (max-width: 991.98px) { .skew-dash .sk-dr-expand { display: none; } }
@media (prefers-reduced-motion: reduce) { .skew-dash .ezui-drawer__panel, .skew-dash .sk-dr-expand svg { transition: none; } }

/* footer */
.skew-dash .sk-foot { display: grid; gap: 4px; padding-top: 4px; border-top: 1px solid var(--ezui-border); font-size: 12px; }

/* responsive */
@media (max-width: 991.98px) {
  .skew-dash .sk-chart-grid { grid-template-columns: minmax(0, 1fr); }
  .skew-dash .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .skew-dash .sk-head h1 { font-size: 20px; }
  .skew-dash .sk-search { flex: 1 1 100%; }
  .skew-dash .sk-kpi__val { font-size: 20px; }
  .skew-dash .sk-chart--bars { height: 956px; }
  .skew-dash .sk-chart--rr { height: 956px; }
  .skew-dash .sk-chart--scatter { height: 420px; }
  .skew-dash .sk-tablebox { max-height: 70vh; }
  .skew-dash .sk-ctable { max-height: 70vh; }
  .skew-dash #skTbl-scatter { height: 420px; }
}
@media (max-width: 380px) { .skew-dash .sk-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) {
  .skew-dash .ezui-tabs > button { min-height: var(--ezui-tap); }
  .skew-dash .sk-table tbody tr[data-sym] > * { height: var(--ezui-tap); }
  .skew-dash .sk-how summary { min-height: var(--ezui-tap); display: flex; align-items: center; }
  .skew-dash .sk-linkbtn { min-height: var(--ezui-tap); }
}
@media (prefers-reduced-motion: reduce) { .skew-dash .sk-live i { animation: none; } }