/* Shared color and font tokens are declared in theme.css. */
* { box-sizing:border-box; }
body {
  margin:0; color:var(--text); font:12px/1.5 var(--font-ui); text-rendering:auto;
  background:var(--bg); background-image:none;
  background-repeat:no-repeat,repeat; background-position:top center,0 0; background-size:min(1600px,100vw) 420px,64px 64px;
}
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; background:var(--raised); border:1px solid var(--line-strong); border-radius:5px; padding:5px 10px; }
button:hover { border-color:var(--line-strong); }
button:focus-visible,a:focus-visible,.table-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
button[aria-pressed=true] { background:color-mix(in srgb,var(--accent) 6.67%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent-ink); }
button:disabled { cursor:wait; opacity:.6; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:16px; line-height:1.1; font-weight:600; letter-spacing:.03em; }
h2 { font-size:12px; font-weight:700; letter-spacing:.02em; }
h3 { font-size:13px; font-weight:600; }
small,.muted { color:var(--muted); }
small { font-size:10px; }
.up { color:var(--up); }.down { color:var(--down); }.neutral { color:var(--muted); }

/* Match the shared mqdq terminal header and panel rhythm. */
.pv-app { height:100dvh; min-height:560px; display:flex; flex-direction:column; background:var(--bg); }
.pv-header {
  position:relative; z-index:10; flex:0 0 58px; min-height:58px; padding:0 18px; display:flex; align-items:center; gap:24px;
  border-bottom:1px solid var(--line); background:var(--panel); box-shadow:0 12px 36px color-mix(in srgb,var(--shadow-color) 22%,transparent); backdrop-filter:blur(18px);
}
.pv-brand { display:flex; align-items:center; gap:14px; flex:none; }
.pv-live { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:10px; color:var(--muted); white-space:nowrap; }
#refreshStatus { color:var(--accent-ink); }
#refreshStatus.stale { color:var(--warning); }
.pv-live button { min-height:31px; padding:0 10px; font-size:10px; background:var(--raised); border-color:var(--line); }
.pv-toolbar { flex:none; display:flex; align-items:center; gap:16px; padding:10px 18px 0; }
.pv-interval,.pv-filter { display:flex; align-items:center; gap:12px; min-height:30px; }
.pv-interval { flex:none; }
.pv-filter { flex:1; min-width:0; padding-left:16px; border-left:1px solid var(--line); }
.toolbar-label { color:var(--muted); font-size:11px; }
.button-group { display:flex; gap:3px; flex-shrink:0; }
.pv-interval .button-group button { min-width:65px; min-height:28px; padding:3px 10px; font-size:11px; }
.pv-interval .button-group button[aria-pressed=true],#classificationModes button[aria-pressed=true] { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:700; }
.pv-live time { color:var(--muted); font:10px var(--font-data); }
#classificationModes { padding:2px; border:1px solid var(--line); border-radius:6px; background:var(--raised); }
#classificationModes button { padding:3px 10px; border-color:transparent; background:transparent; font-size:10px; font-weight:600; }
.classification-options { display:flex; gap:3px; min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.classification-options button { flex:none; white-space:nowrap; border-color:transparent; background:transparent; padding:4px 10px; font-size:11px; color:var(--muted); }
.classification-options button[aria-pressed=true] { color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 6.27%,transparent); border-color:color-mix(in srgb,var(--accent) 25.1%,transparent); }
.pv-notice { flex:none; margin:8px 10px 0; border:1px solid color-mix(in srgb,var(--warning) 33.3%,transparent); background:color-mix(in srgb,var(--warning) 3.92%,transparent); color:var(--warning); border-radius:5px; padding:6px 12px; font-size:11px; }

/* Independently scrolling instruments stay beside the viewport-filling chart. */
.pv-workspace { flex:1; min-height:0; min-width:0; display:grid; grid-template-columns:clamp(380px,26vw,460px) minmax(0,1fr); gap:10px; padding:10px; }
.panel { min-width:0; min-height:0; border:1px solid var(--line); background:var(--panel); border-radius:9px; overflow:hidden; box-shadow:0 12px 30px color-mix(in srgb,var(--shadow-color) 14%,transparent); }
.panel-heading { flex:none; min-height:48px; padding:0 13px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel); }
.panel-heading .muted { font-size:10px; }
.pv-table-panel,.pv-distribution { display:flex; flex-direction:column; }
#productCount { white-space:nowrap; font:10px var(--font-data); }
.product-filters { flex:none; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--panel); }
.product-search-row { display:flex; align-items:center; gap:7px; }
.product-search-row input { flex:1; min-width:0; width:100%; height:31px; padding:0 10px; border:1px solid var(--line-strong); border-radius:5px; background:var(--raised); color:var(--text); font:11px var(--font-ui); }
.product-search-row input::placeholder { color:var(--muted); }
.product-search-row input:focus-visible,.signal-filters select:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
.product-search-row button { flex:none; height:31px; font-size:10px; padding:0 10px; }
.product-search-row button:disabled { cursor:default; }
.signal-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.signal-filters label { display:grid; gap:4px; color:var(--muted); font-size:10px; }
.signal-filters select { width:100%; min-width:0; height:29px; padding:0 7px; border:1px solid var(--line-strong); border-radius:5px; background:var(--raised); color:var(--text); font:11px var(--font-ui); cursor:pointer; }
.signal-filters select[data-direction="positive"] { color:var(--up); border-color:color-mix(in srgb,var(--up) 36.1%,transparent); }
.signal-filters select[data-direction="negative"] { color:var(--down); border-color:color-mix(in srgb,var(--down) 36.1%,transparent); }
.signal-filters option { background:var(--raised); color:var(--text); }
.table-scroll { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.pv-table-panel table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:11px; text-align:right; font-variant-numeric:tabular-nums; }
.pv-table-panel th { position:sticky; top:0; z-index:1; background:var(--raised); color:var(--muted); font-size:10px; font-weight:500; padding:8px 7px; border-bottom:1px solid var(--line); }
.pv-table-panel th small { font-size:9px; }
.pv-table-panel th.sortable { padding:0; }
.pv-table-panel .table-sort { display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; width:100%; padding:8px 7px; border:0; background:transparent; color:inherit; font:inherit; white-space:nowrap; }
.pv-table-panel .table-sort small { color:inherit; }
.pv-table-panel .table-sort:hover { color:var(--text); background:var(--hover); }
.pv-table-panel th[aria-sort="ascending"],.pv-table-panel th[aria-sort="descending"] { color:var(--accent-ink); }
.sort-indicator { display:inline-block; width:7px; font-size:10px; text-align:center; }
.pv-table-panel td { height:46px; padding:5px 7px; border-bottom:1px solid var(--line); font-family:var(--font-data); }
.pv-table-panel th:first-child,.pv-table-panel td:first-child { text-align:left; padding-left:12px; }
.pv-table-panel th:last-child,.pv-table-panel td:last-child { padding-right:12px; }
.pv-table-panel td:last-child { font-size:10px; }
.pv-table-panel .change-cell { background-color:color-mix(in srgb,currentColor var(--change-tint,0%),transparent); }
.pv-table-panel tbody tr:hover { background:var(--hover); }
.pv-table-panel tbody tr.selected { background:color-mix(in srgb,var(--accent) 3.92%,transparent); box-shadow:inset 3px 0 var(--accent); }
.pv-table-panel td button { border:0; background:none; padding:0; text-align:left; display:flex; align-items:center; gap:7px; font-size:12px; width:100%; }
.pv-table-panel td button:hover { color:var(--accent-ink); }
.product-dot { width:5px; height:5px; border-radius:50%; display:inline-block; flex-shrink:0; }
.product-label { display:grid; gap:1px; }
.product-name { font-family:var(--font-ui); font-size:11px; font-weight:500; }
.product-label small { font:9px/1.25 var(--font-data); }
.table-empty { text-align:center!important; padding:32px 10px; color:var(--muted); }

.trajectory-key { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; white-space:nowrap; }
.trajectory-key i { width:35px; height:2px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13.3%,transparent),var(--accent)); }
.trajectory-key b { color:var(--accent-ink); font-size:12px; margin-left:5px; }
.plot-controls { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:8px 13px; border-bottom:1px solid var(--line); }
.plot-controls button { font-size:10px; padding:4px 8px; }
.plot-controls button:disabled { cursor:default; }
.plot-controls #clippedPoints { color:var(--warning); border-color:transparent; background:transparent; }
.plot-controls #clippedPoints:hover { text-decoration:underline; }
.trail-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; color:var(--muted); font-size:10px; }
.trail-controls button { padding:4px 7px; }
.zoom-controls { display:flex; align-items:center; gap:7px; flex:1; min-width:150px; max-width:240px; color:var(--muted); font-size:10px; }
.zoom-controls button { padding:0 6px; font-size:15px; line-height:23px; }
.zoom-controls output { min-width:35px; font:10px var(--font-data); text-align:right; color:var(--text); }
#plotZoom { width:80px; min-width:40px; flex:1; accent-color:var(--accent); cursor:ew-resize; height:20px; margin:0; }
#plotZoom:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
#zoomHint { display:none; }
.scatter-stage { position:relative; flex:1; min-height:180px; }
#scatter { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); pointer-events:none; }
.point-tooltip { position:absolute; z-index:5; width:274px; max-width:calc(100% - 12px); padding:12px 14px; background:var(--panel); border:1px solid var(--line-strong); border-radius:6px; box-shadow:0 8px 30px color-mix(in srgb,var(--shadow-color) 60%,transparent); pointer-events:none; font-size:11px; }
.point-tooltip h3 { margin-bottom:7px; }.point-tooltip .tooltip-row { display:flex; justify-content:space-between; gap:10px; margin:4px 0; color:var(--muted); }
.point-tooltip b { font:11px var(--font-data); color:var(--text); }.point-tooltip .tooltip-moves { display:flex; gap:18px; border-top:1px solid var(--line); margin-top:7px; padding-top:7px; }
.outside-hint { color:var(--warning); margin-bottom:7px; }

@media(max-width:1200px) {
  .pv-header { gap:16px; }.pv-live>span:nth-of-type(2) { display:none; }
  .panel-heading .muted { display:block; margin-top:2px; }
  .trajectory-key { font-size:9px; }.plot-controls { gap:8px; }
}
@media(max-width:900px) {
  .pv-app { height:auto; min-height:100dvh; }
  .pv-workspace { flex:none; grid-template-columns:minmax(0,1fr); }
  .pv-table-panel { height:410px; }.pv-distribution { height:max(520px,70dvh); }
  .pv-header { min-height:58px; flex-basis:auto; flex-wrap:wrap; gap:8px 14px; padding-block:10px; }
  .pv-live>span:first-of-type { display:none; }.pv-toolbar { flex-wrap:wrap; gap:6px; }.pv-interval { flex-wrap:wrap; }
  .pv-filter { flex-basis:100%; align-items:flex-start; padding-left:0; border-left:0; }.classification-options { flex-wrap:wrap; overflow:visible; gap:2px; }
  .pv-table-panel td,.pv-table-panel th { padding-inline:12px; }.product-label { display:flex; align-items:baseline; gap:8px; }
}
@media(max-width:540px) {
  .pv-header { padding:10px; }.pv-brand { gap:9px; }
  .pv-brand .brand-word { font-size:17px; }h1 { font-size:13px; }
  .pv-live { width:100%; justify-content:space-between; margin-left:0; }
  .pv-live>span:first-of-type { display:inline; }.pv-live button { min-height:24px; }
  .pv-toolbar { padding:8px 10px 0; }.pv-interval { gap:6px 8px; }.pv-interval .button-group button { min-width:55px; }
  .pv-filter { flex-wrap:wrap; gap:6px; }.classification-options { width:100%; }
  .classification-options button { padding:4px 8px; }.pv-workspace { padding:7px; gap:7px; }
  .panel-heading { padding:0 10px; min-height:42px; }.trajectory-key { display:none; }
  .pv-table-panel td,.pv-table-panel th { padding-inline:5px; }.product-label { display:grid; gap:1px; }.product-name { font-size:10px; }
  .pv-table-panel td { font-size:10px; }.pv-table-panel td:last-child { font-size:9px; }
  .plot-controls { padding:7px 10px; gap:8px; }.trail-controls { width:100%; justify-content:space-between; }
  .trail-controls .button-group { flex:1; justify-content:flex-end; }.trail-controls button { min-width:38px; padding:4px 5px; }
  .zoom-controls { max-width:none; min-width:150px; }.zoom-controls label { display:none; }
}

body.point-modal-open{overflow:hidden}
.point-dialog{width:min(860px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:22px;color:var(--text);background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 24px 100px color-mix(in srgb,var(--shadow-color) 66.7%,transparent);overflow:auto}
.point-dialog::backdrop{background:var(--panel);backdrop-filter:blur(3px)}
.point-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.point-dialog-heading h2{font-size:22px;margin-top:4px}.point-dialog-heading small{font-size:11px;letter-spacing:.08em}.point-dialog-heading button{font-size:24px;line-height:1;width:34px;height:34px;padding:0}
.point-dialog-range{margin-top:12px;color:var(--muted);font-size:12px}.point-dialog-status{margin:10px 0 16px;color:var(--muted);font-size:11px}.point-dialog-status.error{color:var(--warning)}
.point-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 22px}.point-summary>div{border:1px solid var(--line);background:var(--raised);padding:12px 15px;border-radius:7px;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 14px}.point-summary span{width:100%;font-size:12px;color:var(--muted)}.point-summary strong{font:16px var(--font-data)}.point-summary b{font:12px var(--font-data)}
.point-chart-legend{display:flex;justify-content:space-between;gap:12px;font-size:11px;padding:0 8px 12px}.point-chart-legend span:before{content:'';display:inline-block;vertical-align:middle;width:18px;height:2px;background:currentColor;margin-right:7px}.price-legend{color:var(--chart-price)}.iv-legend{color:var(--accent-ink)}.iv-legend:before{background:var(--chart-accent)}
.point-window-chart{height:clamp(320px,calc(100dvh - 310px),480px);width:100%;min-width:0}.point-tooltip .point-click-hint{font-size:10px;color:var(--muted);margin-top:9px}
.point-window-frame{position:relative}.point-window-band,.point-window-baseline,.point-window-origin{position:absolute;pointer-events:none}
.point-window-band{top:0;background:color-mix(in srgb,var(--chart-neutral) 5.49%,transparent);border-left:1px dashed color-mix(in srgb,var(--chart-neutral) 60%,transparent);border-right:1px dashed color-mix(in srgb,var(--chart-neutral) 60%,transparent);z-index:1}.point-window-band span{position:absolute;top:32px;color:var(--chart-neutral);background:var(--hover);padding:2px 5px;border-radius:3px;font-size:10px}.band-start{left:5px}.band-end{right:5px}
.point-window-baseline{height:0;border-top:1px dashed color-mix(in srgb,var(--chart-neutral) 33.3%,transparent);z-index:2}
.point-window-origin{width:10px;height:10px;border:2px solid var(--text);border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);z-index:3}
.point-chart-legend .interval-legend{color:var(--chart-neutral)}.point-chart-legend .interval-legend:before{height:9px;background:color-mix(in srgb,var(--chart-neutral) 13.3%,transparent);border:1px solid color-mix(in srgb,var(--chart-neutral) 60%,transparent)}
.point-quote-legend{position:absolute;top:6px;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;white-space:nowrap}.point-quote-legend>span,.point-quote-legend>time{padding:1px 4px;background:var(--panel);border-radius:3px}.point-quote-legend b{font:12px var(--font-data)}.point-quote-legend time{color:var(--muted);font:10px var(--font-data)}
.point-skew-legend{position:absolute;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px}.point-skew-legend h3{font-size:11px}.point-skew-legend small{font-size:9px;margin-left:5px;font-weight:400}.point-skew-legend>div{display:flex;align-items:center;gap:10px}.point-skew-legend b{font:12px var(--font-data);min-width:50px;text-align:right}.point-skew-empty{position:absolute;pointer-events:none;z-index:3;text-align:center;color:var(--muted);font-size:11px}
@media(max-width:540px){.point-chart-legend{gap:6px;font-size:10px;padding-inline:0}.point-chart-legend span:before{width:10px;margin-right:4px}}
@media(max-width:540px){.point-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:15px}.point-dialog-heading h2{font-size:18px}.point-dialog-range{font-size:11px;line-height:1.8}.point-summary{gap:8px;margin:12px 0 16px}.point-summary>div{padding:10px;gap:6px}.point-summary strong{font-size:12px}.point-summary b{font-size:11px}.point-window-chart{height:420px}.point-quote-legend{flex-wrap:wrap;gap:3px;font-size:10px}.point-quote-legend b{font-size:11px}.point-quote-legend time{order:1;width:100%;text-align:center}.point-window-band span{top:48px}.point-skew-legend small{display:none}.point-skew-legend>div{gap:6px}}

.point-history-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.point-history-controls button{font-size:11px;padding:5px 8px}
.point-history-controls [role=status]{margin-left:auto;font-size:11px;color:var(--accent-ink)}
.point-history-controls [role=status].stale{color:var(--warning)}
.point-history-hint{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:8px;color:var(--muted);font-size:10px}
.point-window-chart{touch-action:none}