/* Shared styling for Flux Lab's price chart and top/bottom markers. */
.performance-chart {position:relative;min-width:0}
.performance-chart svg {display:block;width:100%;height:auto}
.chart-grid-label {font:12px var(--sans,Arial,sans-serif);fill:#626b64}
.chart-legend {display:flex;gap:12px 24px;flex-wrap:wrap;font-size:12px;margin:12px 0 0}
.chart-legend span {display:flex;align-items:center;gap:8px}
.chart-legend i {height:3px;width:20px;background:var(--series)}
.performance-market-switch {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid #d9ded7}
.performance-market-switch button {font:500 13px var(--sans,Arial,sans-serif);padding:9px 14px;background:transparent;border:1px solid transparent;border-radius:5px;color:#626b64;cursor:pointer;min-height:44px}
.performance-market-switch button[aria-pressed=true] {background:#edf5e8;border-color:#b7ceb4;color:#136842}
.performance-market-switch button:hover {color:#136842;border-color:#b7ceb4}
.performance-market-switch button:focus-visible {outline:2px solid #136842;outline-offset:3px}
.trade-marker {cursor:pointer;outline:none;--marker-color:#136842}
.trade-sell {--marker-color:#aa592c}
.trade-marker-stem {stroke:var(--marker-color);stroke-width:1;fill:none}
.trade-marker-point {fill:var(--marker-color);stroke:#fff;stroke-width:1}
.trade-marker-hit {fill:transparent;pointer-events:all}
.trade-marker-badge {fill:#fff;stroke:var(--marker-color);stroke-width:1.5}
.trade-marker-arrow {fill:var(--marker-color)}
.trade-marker:hover .trade-marker-badge,.trade-marker:focus .trade-marker-badge,.trade-marker.is-active .trade-marker-badge {stroke-width:3;fill:#f3f4f0}
.signal-chart-hint {display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;color:#626b64;font-size:12px;line-height:1.5;margin:13px 0 0}
.signal-buy-key {color:#136842}
.signal-sell-key {color:#aa592c}
.signal-tooltip {position:absolute;z-index:5;width:300px;max-width:calc(100% - 8px);background:#172a22;color:#f5f8f2;border:1px solid #395848;border-radius:8px;padding:16px;box-shadow:0 12px 35px #172a2233;font-size:12px;line-height:1.45}
.signal-tooltip[hidden] {display:none}
.signal-tooltip .signal-buy-key {color:#b0f1bc}
.signal-tooltip .signal-sell-key {color:#ffbf92}
.signal-tooltip-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.signal-tooltip-heading strong {font-size:14px}
.signal-tooltip-close {border:0;background:transparent;color:#c0d2c5;cursor:pointer;font-size:19px;line-height:1;padding:0 2px}
.signal-tooltip dl {margin:0}
.signal-tooltip dt {font-size:11px;color:#94ae9e;margin-top:8px}
.signal-tooltip dd {margin:2px 0 0}
.signal-chart-scroll {overflow-x:auto;overscroll-behavior-x:contain;padding-block:3px;scrollbar-width:thin;scrollbar-color:#b7ceb4 #f3f4f0}
@media(max-width:800px) {
  .signal-chart-scroll svg {min-width:760px}
  .chart-grid-label {font-size:22px}
  .performance-market-switch {gap:4px}
  .performance-market-switch button {font-size:11px;padding:7px 9px}
  .signal-tooltip {font-size:12px;padding:13px}
  .signal-chart-hint {font-size:11px;gap:7px 14px}
}
