/* Interactive bar chart — hover grow + selection + floating detail panel. Shared rules for tile .chart .bar and .chart-tall .bar. */ .chart .bar, .chart-tall .bar { cursor: pointer; transform-origin: 50% 100%; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease, background 0.15s ease, box-shadow 0.18s ease; } @media (hover: hover) { .chart .bar:hover, .chart-tall .bar:hover { transform: translateY(-2px) scaleX(1.4); filter: brightness(1.3) saturate(1.1); z-index: 2; } } .chart .bar.selected, .chart-tall .bar.selected { filter: brightness(1.35) saturate(1.15); background: linear-gradient(180deg, #4ea892 0%, #225e46 100%); box-shadow: 0 0 0 1px rgba(110,150,135,0.6), 0 2px 6px rgba(0,0,0,0.45); transform: translateY(-2px) scaleX(1.25); z-index: 2; } .chart .bar.drag-target, .chart-tall .bar.drag-target { filter: brightness(1.5) saturate(1.2); } /* Floating bar-detail panel — single instance appended to . */ .bar-detail { position: fixed; z-index: 10001; top: -9999px; left: -9999px; min-width: 96px; padding: 8px 10px; border-radius: var(--r-sm); background: linear-gradient(180deg, rgba(36,52,46,0.97), rgba(20,36,30,0.97)); border: 1px solid rgba(110,150,135,0.4); box-shadow: 0 8px 22px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset; color: var(--text); pointer-events: none; opacity: 0; transform: scale(0.92) translateY(4px); transform-origin: 50% 100%; transition: opacity 0.16s ease, transform 0.20s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; gap: 6px; } .bar-detail.show { opacity: 1; transform: none; } .bar-detail-row { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .bar-detail-row .ic { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--dim); pointer-events: auto; } .bar-detail-row .ic svg { width: 14px; height: 14px; display: block; } .bar-detail-row .num { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.2px; } .bar-detail .hint { font-size: 10px; color: var(--dim); opacity: 0.7; text-align: center; letter-spacing: 0.3px; } /* touch-action на chart-tall для pointer-drag по барам */ .chart-tall { touch-action: none; }