/* _content/Eggnine.SentientHorizon.Shared/Components/ShUserDrawer.razor.rz.scp.css */

.two-bar-card .tb-header[b-8p3iz7powq] {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .25rem;
}

.two-bar-card .bar-wrap[b-8p3iz7powq] {
  display: grid;
  grid-template-rows: var(--chart-size) auto auto;
  justify-items: center;
  row-gap: .4rem;
}

.two-bar-card .bar[b-8p3iz7powq] {
  width: 56px;                       /* vertical default width */
  border-radius: 12px;
  box-shadow: var(--mud-elevation-2);
  transition: height .18s ease, width .18s ease, transform .12s ease;
  will-change: height, width, transform;
}

.two-bar-card .bar:hover[b-8p3iz7powq] { transform: translateY(-2px); }

.two-bar-card .label[b-8p3iz7powq] {
  font-size: .9rem;
  color: var(--mud-palette-text-secondary);
  text-align: center;
}

.two-bar-card .value[b-8p3iz7powq] {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mud-palette-text-primary);
}

/* Legend */
.two-bar-card .tb-legend[b-8p3iz7powq] {
  display: flex; gap: .5rem; justify-content: center;
  margin-top: .5rem; flex-wrap: wrap;
}
.two-bar-card .pill[b-8p3iz7powq] {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
  background: rgba(255,255,255,.03);
  padding: .25rem .6rem; border-radius: 999px;
  font-size: .875rem; color: var(--c);
}
.two-bar-card .pill .dot[b-8p3iz7powq] {
  width: .65rem; height: .65rem; border-radius: 999px; background: var(--c);
  box-shadow: 0 0 10px var(--c);
}