body{display:flex;flex-direction:column;height:100vh;overflow:hidden; background:radial-gradient(120% 80% at 82% -8%, rgba(139,108,255,.08), transparent 55%), #08090d} /* Light theme: the line above pins a hand-tuned dark literal (predates the token system); without this override the whole page stays black. */ [data-theme="light"] body{background:var(--grad-page);background-attachment:fixed} /* Breathing room between the filters bar and the chart+Events row below, so the Events sidebar header isn't flush against the filters (matches the gap the scanner sidebar gets from the nav). */ #chart-controls{margin-bottom:8px} /* Stack the MM/whales filter on its OWN row below the CEX strip (like scanner), instead of inline CEX | divider | MM. Dividers are pointless once stacked. */ #chart-controls{flex-direction:column;align-items:stretch;row-gap:8px} #chart-controls .ark-divider{display:none} header{display:none} .controls{display:none} .stats-strip{display:none} /* CEX outside the plan - dimmed + lock; candles still load, markers are gated. */ #entity-btns .ark-seg-btn.cex-locked{opacity:.55} #entity-btns .ark-seg-btn.cex-locked .cex-lock{font-size:12px;margin-left:5px;vertical-align:-2px;color:var(--text-lo,#888)} /* Multi-select on the seg-chips control: EVERY selected CEX looks the same - solid-accent chip, identical to the primary (.active). Multi-select still works (the primary just drives the OB / flow band internally); there's no visual primary/extra distinction, by request. */ #entity-btns .ark-seg-btn.active-extra{ background: color-mix(in srgb, var(--accent) 64%, var(--bg-card, #141925)); border-color: transparent; color: #fff; } /* ── Pair selector dropdown ── */ .pair-selector { position: relative; display: inline-flex; min-width: 160px; } .pair-selector-trigger { display: flex; align-items: center; gap: 8px; background: var(--bg-hover, var(--bg-card2)); border: 1px solid var(--border, var(--border)); border-radius: 5px; padding: 6px 10px; cursor: pointer; font-family: var(--mono); font-size: 11px; color: var(--text-hi, var(--text-hi)); width: 100%; height: 28px; transition: border-color .12s; } .pair-selector-trigger:hover { border-color: rgba(77, 168, 255, 0.4); } .pair-selector-trigger .label { flex: 1; text-align: left; font-weight: 700; } .pair-selector-trigger .caret { color: var(--text-md); font-size: 9px; transition: transform .15s; } .pair-selector.open .caret { transform: rotate(180deg); } .pair-selector .ticker-icon { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2) 0%, #9b72ff 100%); color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pair-panel { position: absolute; top: calc(100% + 4px); left: 0; min-width: 260px; max-height: 360px; background: var(--bg-card, var(--bg-card)); border: 1px solid var(--border, var(--border)); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.6); z-index: 500; display: none; flex-direction: column; overflow: hidden; } .pair-selector.open .pair-panel { display: flex; } /* Header-mounted variant - lives inside .ark-chart-header next to the pair name + live price. No min-width / no text label needed (the chart-pair-name renders the label right beside it), so the trigger collapses to icon + caret only. The dropdown panel still opens below at full width via the existing .pair-panel rules. */ .pair-selector--header { min-width: 0; } /* Light-purple chip so the pair name reads as an interactive filter (like the CEX tabs), not just a static chart title. */ .pair-selector--header .pair-selector-trigger { width: auto; padding: 4px 8px; height: 24px; background: var(--accent-dim, rgba(123,92,255,.12)); border: 1px solid var(--accent-border, rgba(123,92,255,.4)); border-radius: 8px; } .pair-selector--header .ark-pair-name { color: var(--accent-2, #a78bff); font-weight: 700; } .pair-selector--header .caret { color: var(--accent-2, #a78bff); } .pair-selector--header .pair-selector-trigger:hover { background: var(--accent-dim, rgba(123,92,255,.2)); border-color: var(--accent-2, #a78bff); } /* Candle interval, mounted in the chart header next to the symbol. Slightly smaller than the old slicer-bar version + a divider so it reads as part of the header group, not the price. */ .ark-chart-header-interval { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--border); } .ark-chart-header-interval .ark-seg-btn { height: 24px; padding: 0 9px; font-size: 11px; } /* ── Venue selector (CEX band collapsed into a header pill + popover) ── */ #chart-controls { margin: 0; } /* CEX band moved into the header; collapses to 0 when MM filter is off */ /* MM / whale counterparty filter bar (Wintermute / Jump Trading / Whales) hidden for now - user will revisit. Code is kept intact; delete this rule to bring the bar back. */ #mm-filter-group, #mm-filter-divider { display: none !important; } .venue-sel { position: relative; display: inline-flex; margin-left: 10px; } .venue-trigger { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; background: var(--bg-card2); border: 1px solid var(--border2); border-radius: 8px; color: var(--text-hi); font: 700 12px var(--mono); cursor: pointer; transition: border-color .12s; } .venue-trigger:hover { border-color: var(--accent-border, rgba(139,108,255,.45)); } .venue-ic { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; overflow: hidden; flex: none; } .venue-ic img, .venue-ic svg, .venue-ic span { width: 16px !important; height: 16px !important; border-radius: 4px; } .venue-trigger .venue-extra:not(:empty) { font: 700 10px var(--mono); color: var(--accent-2, #a78bff); } .venue-trigger .caret { font-size: 8px; color: var(--text-lo); transition: transform .15s; } .venue-sel.open .caret { transform: rotate(180deg); } .venue-panel { position: absolute; top: calc(100% + 5px); left: 0; z-index: 600; min-width: 230px; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 14px 38px rgba(0,0,0,.6); padding: 9px; display: none; flex-direction: column; gap: 8px; } .venue-sel.open .venue-panel { display: flex; } .venue-panel-h { font: 700 9px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--text-lo); padding: 0 2px; } /* Inside the popover the chips WRAP (not the seg-chips horizontal scroll). */ .venue-panel #entity-btns { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; max-width: 100%; } .venue-panel #entity-btns::after, .venue-panel #entity-btns::before { display: none !important; } .venue-panel #entity-btns .ark-seg-btn { flex: 0 0 auto; } /* ── Phase 1b: dock the control cluster into the header so the ticker + controls read as ONE toolbar row (desktop). #chart-legend is moved into .ark-chart-header at runtime by dockLegend(); margin-left:auto pushes the controls to the right end. Mobile keeps its tap-to-expand behaviour. */ @media (min-width: 861px) { .ark-chart-header { flex-wrap: wrap; row-gap: 6px; position: relative; } /* Spec 5b: fold the tools behind the fx Indicators toggle in the header. The toggle shows in the header; #chart-legend becomes a dropdown opened via .tools-open (same mechanism as mobile). */ .ark-chart-header #chart-tools-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; order: 5; height: 28px; padding: 0 11px; border-radius: 7px; background: var(--bg-card2); border: 1px solid var(--border2); color: var(--text-md); font: 600 11px var(--mono); letter-spacing: .3px; cursor: pointer; } .ark-chart-header #chart-tools-toggle .mob-caret { font-size: 16px; margin-left: 2px !important; } .ark-chart-header #chart-tools-toggle[aria-expanded="true"] { border-color: var(--accent-2, #8b6cff); color: var(--text-hi); } .ark-chart-header #chart-legend { position: absolute; top: calc(100% + 6px); right: 12px; z-index: 30; display: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; min-width: 240px; max-width: 320px; margin: 0; background: var(--bg-card); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.55); } .ark-chart-header #chart-legend.tools-open { display: flex; } /* Slim top bar toward the spec (~54px), chart page only. */ .ark-nav { height: 54px; min-height: 54px; } } /* All-Txs folded into the ƒx / Layers popover (Display > All transactions); hide the toolbar button. */ #all-txs-toggle { display: none !important; } /* Legend chips top-left of the chart (design: Whale · OB Walls · EMA 50). The whole row is #flow-settings-btn, so clicking any chip opens the Layers panel. */ #flow-settings-btn .leg-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--mono); letter-spacing: .2px; text-transform: none; color: var(--text-md); background: rgba(13,14,20,.82); border: 1px solid #1b1c27; padding: 3px 8px; border-radius: 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #flow-settings-btn .leg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } #flow-settings-btn .leg-wave { color: var(--flow-in, #34d39a); font-size: 11px; line-height: 1; } /* Row-break helpers: no breaks on desktop (single toolbar row); mobile forces 3 rows below. */ .hdr-break { display: none; flex-basis: 100%; height: 0; margin: 0; padding: 0; } @media (max-width: 860px) { /* ===== Chart header reworked to the design: 3 tight rows ===== row 1: pair (left) + venue pill (right) · row 2: big price + change · row 3: timeframe + fx */ .ark-chart-header { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 9px; padding: 11px 13px 12px; position: relative; } .ark-chart-header .hdr-break { display: block; } .ark-chart-header .hdr-break.b1 { order: 3; } .ark-chart-header .hdr-break.b2 { order: 6; } .ark-chart-header .pair-selector { order: 1; margin: 0; } .ark-chart-header .venue-sel { order: 2; margin: 0 0 0 auto; } /* Venue popover overflowed the right edge (anchored left:0 on a right-aligned button). Anchor it to the right + make the exchanges a vertical, scrollable list of full-width rows. */ .ark-chart-header .venue-panel { left: auto; right: 0; width: 240px; max-width: calc(100vw - 26px); max-height: 56vh; overflow-y: auto; } .ark-chart-header .venue-panel #entity-btns { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-width: 100%; } .ark-chart-header .venue-panel #entity-btns .ark-seg-btn { width: 100%; justify-content: flex-start; } .ark-chart-header #source-badge { display: none !important; } .ark-chart-header #cur-price { order: 4; font: 800 26px var(--font); letter-spacing: -.5px; line-height: 1; margin: 0; } .ark-chart-header #price-chg { order: 5; font: 700 12px var(--mono); padding: 3px 7px; border-radius: 6px; margin: 0; } .ark-chart-header #interval-btns { order: 7; margin: 0; padding-left: 0; border-left: 0; flex: 1 1 0; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .ark-chart-header #interval-btns::-webkit-scrollbar { display: none; } .ark-chart-header #interval-btns .ark-seg-btn { flex: 0 0 auto; } /* the fx Indicators toggle, now docked in the header, is a compact pill on row 3 (right) */ .ark-chart-header #chart-tools-toggle { order: 8; width: auto; flex: 0 0 auto; margin: 0; height: 30px; padding: 0 12px; border: 1px solid var(--border2); border-bottom: 1px solid var(--border2); border-radius: 8px; background: var(--bg-card2); color: var(--text-md); font: 600 12px var(--mono); } .ark-chart-header #chart-tools-toggle .fx-label { display: inline; } /* show "Tools" on mobile */ .ark-chart-header #chart-tools-toggle .mob-caret { margin-left: 0 !important; font-size: 17px; } /* the tools drop DOWN from the toggle (anchored to the header) instead of a full-width bar */ .ark-chart-header #chart-legend { order: 9; position: absolute !important; top: 100%; right: 12px; left: auto; z-index: 40; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start; gap: 8px !important; padding: 10px; min-width: 230px; max-width: calc(100% - 24px); width: auto; margin: 4px 0 0; background: var(--bg-card); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.55); } } .pair-search { padding: 8px; border-bottom: 1px solid var(--border, var(--border)); } .pair-search input { width: 100%; box-sizing: border-box; background: var(--bg-hover, var(--bg-card2)); border: 1px solid var(--border, var(--border)); border-radius: 4px; color: var(--text-hi, var(--text-hi)); font-family: inherit; font-size: 11px; padding: 6px 8px; outline: none; } .pair-search input:focus { border-color: var(--accent-2); } .pair-search input::placeholder { color: var(--text-lo, var(--text-lo)); } .pair-list { overflow-y: auto; flex: 1; padding: 4px 0; } .pair-list-section { font-size: 9px; font-weight: 700; color: var(--text-lo, var(--text-lo)); letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 12px 4px; font-family: var(--mono); } .pair-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; font-family: var(--mono); font-size: 11px; transition: background .1s; } .pair-row:hover { background: rgba(77, 168, 255, 0.08); } .pair-row.active { background: rgba(77, 168, 255, 0.12); color: var(--accent-2); } .pair-row .ticker-icon { width: 18px; height: 18px; font-size: 9px; } .pair-row .pair-info { flex: 1; min-width: 0; } .pair-row .pair-symbol { color: var(--text-hi, var(--text-hi)); font-weight: 700; } .pair-row .pair-meta { color: var(--text-lo, var(--text-lo)); font-size: 9px; margin-top: 1px; } .pair-row .pair-stats { color: var(--text-lo, var(--text-lo)); font-size: 9px; text-align: right; } .pair-row.dynamic .pair-symbol { color: var(--text-hi); } .pair-row.dynamic .pair-symbol::after { content: 'NEW'; display: inline-block; margin-left: 6px; font-size: 7px; font-weight: 700; color: #9b72ff; background: rgba(155, 114, 255, 0.15); padding: 1px 4px; border-radius: 2px; vertical-align: middle; letter-spacing: 0.5px; } .pair-empty { padding: 20px; text-align: center; color: var(--text-lo, var(--text-lo)); font-size: 10px; font-family: var(--mono); } /* ── Data source badge (shown when not from Binance) ── */ .ark-source-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; margin-left: 6px; border-radius: 100px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .ark-source-badge.coinbase { background: rgba(0, 82, 255, 0.12); color: #4d8aff; border: 1px solid rgba(0, 82, 255, 0.25); } .ark-source-badge.bybit { background: rgba(255, 165, 0, 0.10); color: #ffb84d; border: 1px solid rgba(255, 165, 0, 0.25); } .ark-source-badge.kraken { background: rgba(155, 114, 255, 0.12); color: #b495ff; border: 1px solid rgba(155, 114, 255, 0.25); } .ark-source-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ── Chart icon overlay (Phase 2 custom-icon markers) ───────── DOM badges positioned absolutely on top of the chart canvas - gives us Material/SVG icons that Lightweight Charts' built-in setMarkers() API doesn't support (it only ships arrowUp/arrowDown/circle/square). `pointer-events: none` so badges don't intercept crosshair hover - the existing tooltip-on-candle-hover flow stays intact. */ .chart-icon-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; } .chart-icon { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(11, 18, 32, 0.92); border: 1.5px solid currentColor; box-shadow: 0 0 6px rgba(0, 0, 0, 0.45); /* Anchor center-bottom of icon ABOVE candle high. --icon-scale comes from the layer (.chart-icon-layer { --icon-scale: ... }) - shrunk adaptively when the chart is zoomed out so icons don't overlap. */ transform: translate(-50%, -130%) scale(var(--icon-scale, 1)); transform-origin: 50% 100%; transition: opacity .12s, transform .12s; will-change: transform, left, top; cursor: pointer; /* parent .chart-icon-layer has pointer-events: none so it doesn't swallow chart crosshair tracking; each icon needs to opt back in for mouseenter/leave to fire on hover. */ pointer-events: auto; } .chart-icon:hover { transform: translate(-50%, -130%) scale(calc(var(--icon-scale, 1) * 1.4)); z-index: 6; } .chart-icon.transfer { transform: translate(-50%, -210%) scale(var(--icon-scale, 1)); } .chart-icon.transfer:hover { transform: translate(-50%, -210%) scale(calc(var(--icon-scale, 1) * 1.4)); } .chart-icon .mat-ic { font-size: 13px; line-height: 1; color: inherit; vertical-align: 0; } /* Severity bands - priority drives BORDER thickness + glow halo, not colour (colour belongs to Flow.classify market-perspective rules: green=inflow / red=outflow / orange=cold / purple=internal). Critical anomalies get a thicker ring + outer glow so they pop; medium stays subtle. */ .chart-icon.sev-critical { width: 24px; height: 24px; border-width: 2px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px 1px currentColor; } .chart-icon.sev-critical .mat-ic { font-size: 14px; } .chart-icon.sev-medium { border-width: 1.5px; } /* Swap / transfer have no anomaly priority - fixed treatment. */ .chart-icon.swap { color: #f5c400; } .chart-icon.transfer { /* mini neutral dot - no Material icon, just a tiny coloured circle */ width: 8px; height: 8px; background: currentColor; border: none; opacity: 0.55; transform: translate(-50%, -210%); } .chart-icon.transfer .mat-ic { display: none; } /* Cluster count - shown on a merged icon when the chart is zoomed out far enough that several event dots would overlap. The badge stays a constant size (counter-scales the layer's --icon-scale) so it's legible even when the icon itself is shrunk. */ .chart-icon .ci-count { position: absolute; top: -7px; right: -7px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: var(--accent-2, #a78bff); color: #fff; font-family: var(--mono); font-size: 8.5px; font-weight: 700; line-height: 14px; text-align: center; box-shadow: 0 0 0 1.5px var(--bg-page, #0b1220); pointer-events: none; transform: scale(calc(1 / var(--icon-scale, 1))); transform-origin: top right; } .chart-icon.clustered.transfer { /* promote the tiny dot so the badge has a host */ width: 11px; height: 11px; opacity: 1; } /* ── Whale-marker de-noise (redesign §5a) ────────────────────────── Notable moves become a quiet rounded $amt PILL (direction icon + amount) with ONE 1px drop-line; the top 6 (3 on mobile) keep the pill, the rest fall back to a quiet icon. No count bubbles, no glow halos, no MM radar ping. */ .chart-icon.pill { width: auto; height: auto; min-width: 0; border-radius: 100px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; background: color-mix(in srgb, currentColor 14%, #0b0c12); border: 1px solid color-mix(in srgb, currentColor 42%, transparent); box-shadow: none; font: 700 10px var(--mono); } .chart-icon.pill .mat-ic { font-size: 12px; } .chart-icon.pill .ci-amt { color: var(--text-hi); white-space: nowrap; line-height: 1; } .chart-icon.pill:hover { transform: translate(-50%, -130%) scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.5); } /* one faint 1px drop-line from the pill toward the candle high */ .chart-icon.pill::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 15px; background: currentColor; opacity: .4; pointer-events: none; } /* demoted (beyond the cap) or any non-pill icon: no amount shown */ .chart-icon:not(.pill) .ci-amt { display: none; } /* kill the cluster count bubble, the critical glow halo, and the MM radar ping */ .chart-icon .ci-count { display: none !important; } .chart-icon.sev-critical { box-shadow: 0 0 6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); } .chart-icon.mm::before { display: none !important; } .chart-icon.mm { box-shadow: none; } /* ── Phase 5: AI rail = our co-pilot (pet + composer) ────────────── The Setups rail is branded with the co-pilot pet and a composer that hands the prompt to the real agent (Copilot.ask). Full chat lives in the co-pilot; this is the rail's entry per spec 7. */ .ark-sidebar { display: flex; flex-direction: column; } .rail-pet { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex; justify-content: center; align-items: flex-start; background: radial-gradient(circle at 50% 38%, #1a1530, #0b0a14); border: 1px solid color-mix(in srgb, #c77dff 30%, transparent); } .rail-pet .cp-ufo { --s: .56; } .rail-composer { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px; padding: 7px 9px; border: 1px solid color-mix(in srgb, #c77dff 32%, transparent); border-radius: 12px; background: var(--bg-card2); box-shadow: inset 0 0 16px color-mix(in srgb, #c77dff 8%, transparent); } .rail-composer input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text-hi); font: 400 12.5px var(--font); } .rail-composer input::placeholder { color: var(--text-lo); } .rail-composer #rail-ask-send { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--accent-2, #8b6cff); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .rail-composer #rail-ask-send:hover { filter: brightness(1.08); } /* Desktop right column = ONE of three equal-width tabs: Agent (embedded chat) | Setups | OB Walls, switched by the .side-nav tabs. Default = Agent. Chart stays pinned (flex:1). On mobile the top pane-switcher handles Chart|Setups|OB, the agent is the bottom bar, and the dock is hidden. */ .side-nav { display: none; } #copilot-dock { display: none; } @media (max-width: 860px) { #copilot-dock { display: none !important; } } @media (min-width: 861px) { /* The nav owns a z-index:100 stacking context, which trapped the profile dropdown (z 1400) BELOW the docked agent. Lift the whole nav above the agent so its dropdown wins. */ .ark-nav { z-index: 1500; } .side-nav { display: flex; } #chart-main-row #copilot-dock { display: flex; } #chart-main-row .ark-sidebar[data-mview="Setups"], #chart-main-row .ark-sidebar[data-mview="OB Walls"] { display: none; } #chart-main-row.show-setups #copilot-dock { display: none; } #chart-main-row.show-setups .ark-sidebar[data-mview="Setups"] { display: flex; } #chart-main-row.show-ob #copilot-dock { display: none; } #chart-main-row.show-ob .ark-sidebar[data-mview="OB Walls"] { display: flex; } /* the co-pilot docks into the Agent tab; no floating launcher on the chart */ .cp-launch { display: none !important; } #copilot-dock-body { flex: 1; min-height: 0; display: flex; } .cp-panel.cp-docked { position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; max-height: none !important; flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; animation: none !important; } .cp-panel.cp-docked .cp-head { cursor: default !important; } .cp-panel.cp-docked .cp-close, .cp-panel.cp-docked .cp-min, .cp-panel.cp-docked .cp-resize, .cp-panel.cp-docked .cp-grip { display: none !important; } .cp-backdrop { display: none !important; } } /* MM action - a tracked market maker is on one side. Highest-signal event, so it gets a gold ring + a steady glow + an expanding "radar ping" so the eye is pulled straight to it. Sits above neighbours. */ .chart-icon.mm { border-color: #ffc83d !important; border-width: 2px; z-index: 7; box-shadow: 0 0 6px rgba(0,0,0,.45), 0 0 11px 1px rgba(255,200,61,.65); } .chart-icon.mm.transfer { /* the tiny dot variant → promote to a visible gold dot */ width: 11px; height: 11px; opacity: 1; border: 2px solid #ffc83d; background: currentColor; } .chart-icon.mm::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #ffc83d; pointer-events: none; animation: mm-ping 1.4s ease-out infinite; } /* Keep the MM ping running on hover - pausing it removed the halo and read as the marker shrinking. The icon itself also scales up via .chart-icon:hover. */ @keyframes mm-ping { 0% { transform: scale(.85); opacity: .85; } 100% { transform: scale(2.3); opacity: 0; } } /* Marker filter toggles - sit in #chart-legend next to Order Book menu. All ON by default; click toggles `.active` and the matching `.chart-icon-layer.hide-` rule hides those overlays without a full re-render. */ .marker-tog { font: 600 9px/1 var(--mono); background: transparent; border: 1px solid transparent; padding: 3px 6px; border-radius: 8px; cursor: pointer; transition: opacity .12s, background .12s, border-color .12s; } .marker-tog:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } .marker-tog:not(.active) { opacity: .35; text-decoration: line-through; } .chart-icon-layer.hide-deposit .chart-icon[data-filter-kind="deposit"], .chart-icon-layer.hide-withdraw .chart-icon[data-filter-kind="withdraw"], .chart-icon-layer.hide-cold .chart-icon[data-filter-kind="cold"], .chart-icon-layer.hide-internal .chart-icon[data-filter-kind="internal"], .chart-icon-layer.hide-swap .chart-icon[data-filter-kind="swap"] { display: none !important; } /* ── Round-trip links: arc connecting a matched withdraw↔deposit pair (same amount and/or same non-CEX wallet) = one completed action. ─── */ .event-link-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; } .event-link-layer .ell-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .event-link { fill: none; stroke: var(--accent-2, #a78bff); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 5 6; opacity: .6; animation: ell-flow 1.7s linear infinite; } @keyframes ell-flow { to { stroke-dashoffset: -22; } } /* Minimal pill: ↺ + match %. Purple (matches the arc); confidence is the %. */ .ell-pill { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 100px; background: rgba(18, 16, 34, .94); border: 1px solid var(--accent-border, rgba(167,139,250,.5)); color: var(--accent-2, #a78bff); font-family: var(--mono); font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,.5); pointer-events: auto; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform .12s, border-color .12s; } .ell-pill:hover { transform: translate(-50%, -50%) scale(1.1); border-color: var(--accent-2, #a78bff); } .ell-pill .ell-ic { font-size: 12px; line-height: 1; } /* Round-trip explainer popup */ .rtp { position: absolute; z-index: 220; width: 300px; max-height: 360px; overflow-y: auto; background: var(--bg-card2); border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 38px rgba(0,0,0,.62); pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .rtp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 13px; border-bottom: 1px solid var(--border); } .rtp-title { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-hi); } .rtp-ic { color: var(--accent-2, #a78bff); font-size: 14px; } .rtp-badge { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 100px; } .rtp-badge.high { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); } .rtp-badge.med { color: #a78bff; background: rgba(167,139,250,.14); } .rtp-badge.low { color: #aab; background: rgba(255,255,255,.06); } .rtp-close { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-lo); font-size: 18px; line-height: 1; border-radius: 6px; cursor: pointer; } .rtp-close:hover { color: var(--text-hi); background: rgba(255,255,255,.07); } .rtp-body { padding: 11px 13px 13px; } .rtp-story { font-size: 11.5px; line-height: 1.55; color: var(--text-md); margin-bottom: 11px; } .rtp-story b { color: var(--text-hi); } .rtp-legs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .rtp-leg { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: background .12s, border-color .12s; } .rtp-leg:hover { background: rgba(123,92,255,.08); border-color: var(--accent-border, rgba(167,139,250,.4)); } .rtp-step { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-hover, rgba(255,255,255,.07)); color: var(--text-lo); font-family: var(--mono); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .rtp-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .rtp-leg-main { flex: 1 1 auto; min-width: 0; } .rtp-leg-t { font-family: var(--mono); font-size: 12px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rtp-leg-s { font-size: 10px; color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .rtp-leg-go { flex: 0 0 auto; color: var(--text-lo); font-size: 16px; } .rtp-leg:hover .rtp-leg-go { color: var(--accent-2, #a78bff); } .rtp-break { border-top: 1px solid var(--border); padding-top: 10px; } .rtp-break-h { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-lo); margin-bottom: 7px; } .rtp-br { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-md); padding: 2px 0; } .rtp-pts { font-family: var(--mono); font-weight: 700; color: var(--text-hi); } .rtp-note { font-size: 10px; color: var(--text-lo); line-height: 1.45; margin-top: 8px; } /* ── Click popup: transaction list for a clicked event icon ───── */ .mlp { position: absolute; z-index: 210; width: 308px; max-height: 340px; display: flex; flex-direction: column; background: var(--bg-card2); border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.6); overflow: hidden; pointer-events: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .mlp-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 8px 9px 13px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-md); } .mlp-close { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--text-lo); font-size: 18px; line-height: 1; cursor: pointer; transition: all .12s; } .mlp-close:hover { color: var(--text-hi); background: rgba(255,255,255,.07); } .mlp-rows { overflow-y: auto; } .mlp-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--border); text-decoration: none; cursor: pointer; transition: background .12s; } .mlp-row:last-child { border-bottom: none; } .mlp-row:hover { background: rgba(123,92,255,.10); } .mlp-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .mlp-main { flex: 1 1 auto; min-width: 0; } .mlp-amt { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mlp-sub { font-size: 10px; color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .mlp-usd { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; font-weight: 700; } .mlp-arrow { flex: 0 0 auto; color: var(--text-lo); font-size: 17px; line-height: 1; transition: color .12s, transform .12s; } .mlp-row:hover .mlp-arrow { color: var(--accent-2); transform: translateX(2px); } /* ── Order-book depth panel (Bookmap-style) ─────────────────── A vertical ladder anchored to the right edge of the chart canvas. Each row = one price bucket. Quantity bar grows from the right edge leftward; longer bar = bigger size at that level. Bids (below mid) are green, asks (above mid) red. Y position of each row tracks the chart's price scale via priceToCoordinate(). */ .ob-depth-layer { position: absolute; right: 70px; /* leave room for the chart's native price-scale labels (60 touched, 80 was too far) */ top: 0; bottom: 32px; /* leave room for the time-scale label strip */ width: 190px; /* bumped from 160 so bigger bars don't crowd the qty text */ pointer-events: none; z-index: 4; overflow: hidden; font-family: var(--mono); font-size: 10px; } .ob-depth-row { position: absolute; right: 0; height: 18px; /* was 16 - chunkier rows read better */ width: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px 0 4px; white-space: nowrap; box-sizing: border-box; transform: translateY(-9px); /* anchor bar centre at the price line */ color: var(--text-hi); } .ob-depth-row .bar { position: absolute; right: 0; top: 1px; bottom: 1px; border-radius: 2px 0 0 2px; transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1); /* smooth liquidity shifts */ } .ob-depth-row.bid .bar { background: linear-gradient(to left, color-mix(in srgb, var(--green) 85%, transparent), color-mix(in srgb, var(--green) 14%, transparent)); } .ob-depth-row.ask .bar { background: linear-gradient(to left, color-mix(in srgb, var(--red) 85%, transparent), color-mix(in srgb, var(--red) 14%, transparent)); } /* ── Heatmap variant ── Bar WIDTH still tracks qty (so volume is readable at a glance), but the gradient/alpha is driven by CSS var --intensity (sqrt(qty/maxQty)). This is the hybrid the user asked for: width = "how much", alpha = "how hot". Small orders → narrow AND pale; whales → wide AND fully saturated. */ .ob-depth-layer.heatmap .ob-depth-row .bar { opacity: var(--intensity, 0.5); border-radius: 1px 0 0 1px; } .ob-depth-layer.heatmap .ob-depth-row.bid .bar { background: linear-gradient(to left, var(--green) 0%, color-mix(in srgb, var(--green) 65%, transparent) 45%, color-mix(in srgb, var(--green) 15%, transparent) 100%); } .ob-depth-layer.heatmap .ob-depth-row.ask .bar { background: linear-gradient(to left, var(--red) 0%, color-mix(in srgb, var(--red) 65%, transparent) 45%, color-mix(in srgb, var(--red) 15%, transparent) 100%); } /* Top wall keeps the ★ marker but with a brighter halo in heatmap mode */ .ob-depth-layer.heatmap .ob-depth-row.top .bar { box-shadow: inset 0 0 6px rgba(255, 204, 51, 0.4); } /* qty text: dimmer base, brighter when row is dense */ .ob-depth-layer.heatmap .ob-depth-row .qty { opacity: calc(0.45 + 0.55 * var(--intensity, 0.5)); } .ob-depth-row .qty { position: relative; z-index: 1; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.85); } .ob-depth-row.top .qty::before { content: "★ "; color: #ffcc33; font-size: 11px; } /* Liquidity flash - when a row's qty changes by >30% between fetches, highlight briefly. Gives the panel a "live" feel without per-frame randomness - animations only fire when the actual orderbook moved. */ .ob-depth-row.flash .bar { animation: depth-flash 0.8s ease-out; } @keyframes depth-flash { 0% { filter: brightness(2) saturate(1.3); } 100% { filter: brightness(1) saturate(1); } } /* Subtle ambient pulse on rows near mid-price (top 6 of each side) - conveys "this is where the action is" without being distracting. */ .ob-depth-row.near-mid .bar { animation: depth-pulse 2.8s ease-in-out infinite; } @keyframes depth-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } .ob-depth-header { position: absolute; right: 0; top: 0; z-index: 6; padding: 4px 8px; font-size: 9px; color: var(--text-md); background: var(--glass); /* theme-aware - was hardcoded dark, showed as a black box in light mode */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom-left-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; white-space: nowrap; } /* (.show-toggle styles removed - the old klines/onchain volume toggle is gone from the markup; setVolumeMode() in chart.js stays as a safe no-op.) */ /* ── Wall-match status badges (sidebar OB matches) ──────────────── High-contrast pills so the user can tell at a glance whether a wall is still standing or already filled - used to be an 8px footer note that nobody noticed. */ .wm-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .6px; font-family: var(--mono); padding: 2px 7px; border-radius: 10px; text-transform: uppercase; } .wm-status .mat-ic { font-size: 11px !important; } .wm-status--active { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 55%, transparent); } .wm-status--consumed { background: rgba(143,168,200,.15); color: var(--text-md); border: 1px solid rgba(143,168,200,.40); } .wm-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); animation: wmPulse 1.6s ease-out infinite; } @keyframes wmPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); } } /* ── Order-book depth settings dropdown ── */ .ob-menu { position: relative; display: inline-flex; } /* Overlay variant - lives inside #chart-legend, sitting LEFT of the MARKERS strip. Position is just `relative` so the flex parent lays it out next to MARKERS; backdrop blur keeps it readable over candles. */ .ob-menu--overlay { position: relative; } .ob-menu--overlay .ob-menu-trigger { background: var(--glass); /* theme-aware frosted panel - was hardcoded dark */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Panel opens DOWNWARD-leftward from the trigger; right:0 anchors to the trigger's right edge so a wide panel doesn't push out of the chart. */ .ob-menu--overlay .ob-menu-panel { right: 0; left: auto; } .ob-menu-trigger { height: 28px; padding: 0 11px; background: transparent; border: 1px solid var(--border); border-radius: 14px; color: var(--text-md); font-size: 11px; font-weight: 700; font-family: var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; } .ob-menu-trigger:hover { border-color: var(--border2); } .ob-menu-trigger.disabled { opacity: .55; } .ob-menu-trigger .caret { color: var(--text-md); font-size: 9px; transition: transform .15s; } .ob-menu.open .caret { transform: rotate(180deg); } /* ONE canonical state badge for EVERY toolbar button (ON · DRAG · Auto·Spot · ALL) - identical size, colour, weight. `.rx-hint` reuses it. The only intended variation is off-state toggles, which grey their badge (below). */ .ob-menu-trigger .badge, .range-xray .rx-hint { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: rgba(167,139,250,.22); color: var(--accent-2, #a78bff); letter-spacing: .3px; text-transform: uppercase; } .ob-menu-trigger .badge.fut { background: rgba(255, 204, 51, 0.18); color: #ffcc33; } .ob-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; min-width: 280px; background: var(--bg-card, var(--bg-card)); border: 1px solid var(--border, var(--border)); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.6); z-index: 500; padding: 10px; display: none; flex-direction: column; gap: 10px; font-family: var(--mono); } .ob-menu.open .ob-menu-panel { display: flex; } .ob-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ob-lbl { font-size: 10px; font-weight: 700; color: var(--text-md); text-transform: uppercase; letter-spacing: .5px; } .ob-seg { display: inline-flex; gap: 3px; } .ob-seg button { height: 22px; padding: 0 8px; background: transparent; border: 1px solid var(--border); border-radius: 11px; color: var(--text-lo); font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: all .12s; } .ob-seg button:hover { color: var(--text-md); border-color: var(--border2); } .ob-seg button.active { background: rgba(77, 168, 255, 0.12); border-color: rgba(77, 168, 255, 0.45); color: #cfe2ff; } .ob-seg button.disabled { opacity: .25; cursor: not-allowed; } .ob-toggle { height: 22px; padding: 0 12px; background: transparent; border: 1px solid var(--border); border-radius: 11px; color: var(--text-lo); font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: all .12s; } .ob-toggle.active { background: color-mix(in srgb, var(--green) 15%, transparent); border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); } /* Wall-match modal styles (.wm-*) live in style.css now - shared with the scanner tx-detail modal. Only the .wm-row hover for the sidebar list stays here since it's chart-specific (the sidebar rows it targets only exist on this page). */ .wm-row:hover { background: rgba(255,255,255,.04) !important; } .wm-row:active { transform: translateX(1px); } /* ── Toolbar buttons (On-Chain Flow · Range X-Ray · Order Book · All Txs · Events) all share the neutral outlined `.ob-menu-trigger` base - same size, shape, border, weight. The ONLY per-button difference is the small state badge ("ON"/"DRAG"/"ALL") + a faint accent border when a toggle is on. No filled purple pills or glows - they made three of the five shout while the two dropdowns stayed quiet. ── */ .range-xray { position: relative; } .range-xray .rx-ic { font-size: 13px; } /* ARMED - same subtle accent border every other "on" toggle uses. The DRAG badge already matches the canonical badge, so no per-state badge override. */ #range-select-toggle.active { border-color: var(--accent-border, rgba(167,139,250,.5)) !important; color: var(--text-hi); } /* On-Chain Flow toggle - ON by default. Accent border when on; the badge uses the canonical style. Off-state greys the badge. Flow icon stays green (it encodes net-flow direction). */ .flow-toggle.active { border-color: var(--accent-border, rgba(167,139,250,.5)) !important; color: var(--text-hi); } .flow-toggle.active .flow-ic { color: var(--flow-in); } .flow-toggle.active #onchain-vol-context, .flow-toggle.active #onchain-vol-context b { color: var(--text-hi) !important; } .flow-toggle:not(.active) { opacity: .85; } .flow-toggle:not(.active) .badge { background: var(--bg-hover, rgba(127,127,127,.15)) !important; color: var(--text-lo) !important; } /* All Txs toggle - plain on/off. */ #all-txs-toggle.active { border-color: var(--accent-border, rgba(167,139,250,.5)) !important; color: var(--text-hi); } #all-txs-toggle:not(.active) { opacity: .85; } #all-txs-toggle:not(.active) .badge { background: var(--bg-hover, rgba(127,127,127,.15)) !important; color: var(--text-lo) !important; } .rng-card { width: min(720px, 94vw); } .rng-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; margin-top: 4px; } .rng-row { display: grid; grid-template-columns: 60px 128px minmax(0,1fr) 96px 64px 20px; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 11px; text-decoration: none; color: inherit; cursor: pointer; } .rng-row:last-child { border-bottom: 0; } .rng-row:hover { background: var(--bg-hover, rgba(127,127,127,.07)); } .rng-time { color: var(--text-lo); } .rng-flow { overflow: hidden; } .rng-ft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-md); } .rng-amt { text-align: right; color: var(--text-md); white-space: nowrap; } .rng-usd { text-align: right; font-weight: 700; white-space: nowrap; } .rng-lnk { color: var(--text-lo); font-size: 15px; line-height: 1; text-align: center; } .rng-row:hover .rng-lnk { color: var(--accent-2, #4da8ff); } /* ── Mobile: Chart ↔ Events/OB are switched, not stacked ── The layout (single pane + segmented switch) is handled by the shared [data-mobile-views] rules in style.css + responsive-views.js. Here we only keep the chart-specific tweaks: don't let the canvas pane scroll (it fills), and let the header/legend wrap so their controls don't run off-screen. */ @media (max-width: 860px) { /* Full-page scroll on mobile. The chart used a fixed 100vh shell where only an inner pane scrolled, so the chart's bottom (on-chain flow bars) + the footer were trapped below the fold and unreachable. Now the whole page scrolls: the nav stays pinned, the canvas gets a fixed height so lightweight-charts draws it fully (incl. the volume bars), and the footer sits at the reachable end. */ body { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; } .ark-nav { position: sticky; top: 0; z-index: 100; } #chart-main-row { flex: none !important; overflow: visible !important; } #chart-wrap.mview-on, .ark-sidebar.mview-on { flex: none !important; height: auto !important; overflow: visible !important; } .ark-sidebar.mview-on #sidebar-body { overflow: visible !important; min-height: 0; } #chart-container { flex: none !important; height: 68vh !important; min-height: 320px; } #chart-legend { flex-wrap: wrap; justify-content: flex-end; gap: 6px !important; } .ark-chart-header { flex-wrap: wrap; row-gap: 6px; height: auto; padding: 8px 12px; } /* Mobile: take the overlay config legend OUT of its absolute overlay (which sat on top of the header/candles) and put it IN FLOW as a horizontally- scrollable row between the header and the chart - via flex `order`, since it's the last child of the flex-column #chart-wrap. No more overlap. On-Chain Flow stays hidden - it's a desktop power-feature. */ .ark-chart-header { order: 0; } #chart-wrap > #chart-container { order: 2; } #chart-legend { position: static !important; order: 1; width: auto; flex-wrap: wrap !important; /* wrap in flow - NOT overflow:auto, which would clip the OB/Events dropdowns */ justify-content: flex-start !important; gap: 6px !important; pointer-events: auto !important; padding: 6px 12px; border-bottom: 1px solid var(--border); } #chart-legend > * { flex: 0 0 auto; } #vol-mode-toggle { display: none !important; } #vol-tooltip { display: none !important; } } @media (max-width: 560px) { .rng-row { grid-template-columns: 52px 1fr 70px 18px; } .rng-row .rng-flow, .rng-row .rng-amt { display: none; } } /* ───────────────────────────────────────────────────────────────────── Mobile UI polish (chart page only - these rules live in chart's inline