/* A definite column height makes the daily bar percentages measurable.
   Labels occupy their own rows, so even the tallest bar keeps both labels. */
[data-sessivio-production-chart] > [data-sessivio-production-column] {
  display: grid;
  height: 100%;
  /* A full MM-DD label measures 28px in the shipped 10px interface font. */
  flex: 1 0 28px;
  min-width: 28px;
  grid-template-rows: 1rem minmax(0, 1fr) 1rem;
  justify-items: center;
  gap: .5rem;
}

[data-sessivio-production-column] > span {
  max-width: 100%;
  line-height: 1rem;
}

[data-sessivio-production-column] > [data-sessivio-production-bar] {
  align-self: end;
  min-width: 0;
}

[data-sessivio-production-bar][data-sessivio-zero] {
  height: 0 !important;
}

/* Scroll only when the chart's available width cannot fit its date labels.
   Width is affected by sidebar space and zoom as well as the viewport. */
[data-sessivio-production-chart] {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-padding-inline: .25rem;
}

/* Extra height reserves room for the scrollbar while keeping both label rows.
   A chart that fits retains the original 160px desktop height. */
[data-sessivio-production-chart][data-sessivio-production-scroll] {
  height: 184px;
  padding-bottom: .5rem;
}

[data-sessivio-production-chart][data-sessivio-production-scroll]:focus-visible {
  outline: 2px solid var(--color-signal, #8b75ed);
  outline-offset: 3px;
  border-radius: 4px;
}