/* gráfico de barras de tempo · ver bars.js */
.apbars { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.apbars text { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; fill: #8c8373; }
.apbars .ax { font-size: 12px; }
.apbars .ax.unit { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.apbars .ax.band { fill: #ff7be6; font-size: 12px; }
.apbars .grp { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; fill: #8c8373; }
.apbars .lab .nm { font-family: 'Asteroid Blocks', 'Chakra Petch', monospace; font-size: 19px; }
.apbars .lab .sb { fill: #c4b8a2; font-size: 13px; }
.apbars .lab .sb.hi { fill: #f2e8d8; }
.apbars .row { cursor: pointer; outline: none; }
.apbars .row .bar { transition: filter .2s, opacity .2s; filter: drop-shadow(0 0 6px var(--glow, transparent)); }
.apbars:hover .row:not(.on) { opacity: .45; }
.apbars .row.on .bar { animation: apbeat var(--beat) ease-out infinite; }
.apbars .row:focus-visible .hit { stroke: #ffb21a; stroke-width: 2; }
@keyframes apbeat { 0% { filter: drop-shadow(0 0 14px var(--glow, #fff)) brightness(1.5); } 60%, 100% { filter: drop-shadow(0 0 4px var(--glow, transparent)); } }
@media (max-width: 620px) { .apbars .lab .nm { font-size: 15px; } .apbars .lab .sb { font-size: 11.5px; } .apbars text { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .apbars .row.on .bar { animation: none; filter: drop-shadow(0 0 10px var(--glow, #fff)); } }

.apbars .lab .pl { fill: #ffb21a; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.apbars .row.playing .lab .pl { fill: #f2e8d8; }
.apbars .row.playing .bar { animation: apbeat var(--beat) ease-out infinite; }