/* fx-bars: a bar chart on a labelled scale whose bars are windows onto one still, low-contrast grain in the accent */
.cx-bars { display: grid; gap: var(--s-5); padding: var(--s-6); min-width: 0; }
.cx-bars__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); flex-wrap: wrap; }
.cx-bars__title { font: 500 var(--t-body)/1.3 var(--font-text); margin: 0; }
.cx-bars__sub { font-size: var(--t-label); color: var(--muted); margin: 4px 0 0; }
.cx-bars__total { display: grid; justify-items: end; gap: 4px; }
.cx-bars__label { font-size: var(--t-label); color: var(--muted); }
.cx-bars__value { font: 560 32px/1 var(--font-display); letter-spacing: -0.03em; }
.cx-bars__delta { font-size: var(--t-label); color: color-mix(in oklab, var(--accent) 75%, var(--ink)); }

/* the scale sits in a 40px column left of the plot; its rules run under the bars */
.cx-bars__chart { --scale-w: 40px; display: grid; grid-template-columns: var(--scale-w) minmax(0, 1fr); row-gap: var(--s-3); }
.cx-bars__scale { position: relative; grid-row: 1; grid-column: 1 / -1; pointer-events: none; }
.cx-bars__scale span { position: absolute; left: var(--scale-w); right: 0; height: 0; border-top: 1px dashed var(--cx-line); }
.cx-bars__scale span.is-base { border-top: 1px solid var(--cx-line-2); }
.cx-bars__scale span::before {
  content: attr(data-v); position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%);
  font: 400 11px/1 var(--cx-mono); color: var(--muted); white-space: nowrap;
}
.cx-bars__plot { position: relative; isolation: isolate; grid-row: 1; grid-column: 2; height: 220px; }
.cx-bars__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: clamp(4px, 1.2%, 10px); }
.cx-bars__col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.cx-bars__bar {
  position: relative; width: 100%; height: var(--h); border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--accent);
}
.cx-bars.is-live .cx-bars__bar { background: transparent; }
/* the latest month is marked by a thin ring set off from the bar (outside the effect window), never by
   veiling the others: a veil of the card colour turns a warm accent muddy on a coloured ground */
.cx-bars__col:last-child .cx-bars__bar { box-shadow: 0 0 0 2px var(--cx-card), 0 0 0 3.5px var(--accent); }
.cx-bars__col:hover .cx-bars__bar { box-shadow: 0 0 0 2px var(--cx-card), 0 0 0 3.5px var(--cx-line-2); }
.cx-bars__col:last-child:hover .cx-bars__bar { box-shadow: 0 0 0 2px var(--cx-card), 0 0 0 3.5px var(--accent); }
/* a bar's value shows on hover; October's is in the header, so its tag stays hidden */
.cx-bars__tag {
  position: absolute; left: 50%; bottom: calc(var(--h) + 8px); transform: translateX(-50%); z-index: 3;
  font: 500 11px/1 var(--cx-mono); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .15s var(--cx-ease);
  padding: 3px 5px; border-radius: var(--r-sm); background: var(--cx-card);
}
.cx-bars__col:not(:last-child):hover .cx-bars__tag { opacity: 1; }
.cx-bars__fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cx-bars__axis { grid-row: 2; grid-column: 2; display: flex; gap: clamp(4px, 1.2%, 10px); font: 400 11px/1 var(--cx-mono); color: var(--muted); }
.cx-bars__axis span { flex: 1; text-align: center; }
@media (max-width: 639px) {
  .cx-bars { padding: var(--s-5); }
  .cx-bars__total { justify-items: start; }
  .cx-bars__plot { height: 180px; }
  .cx-bars__chart { --scale-w: 36px; }
}