/* Seasonality and demand calendar — tool-specific styles.
   Everything else comes from jbm-core.css. */

.sea-rows {
  display: grid;
  gap: .3rem;
  margin: 1rem 0 0;
}

/* one period: label, track, value, index */
.sea-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) 1fr minmax(4rem, auto) 3.1rem;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
}

.sea-row__label {
  font-size: .78rem;
  color: var(--jbm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sea-row__track {
  position: relative;
  height: .85rem;
  background: var(--jbm-line);
  border-radius: 2px;
  overflow: hidden;
}

.sea-row__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  min-width: 2px;
  background: var(--jbm-good);
}

.sea-row__fill[data-tone="high"] { background: var(--jbm-good); }
.sea-row__fill[data-tone="mid"]  { background: var(--jbm-warn); }
.sea-row__fill[data-tone="low"]  { background: var(--jbm-bad); }

.sea-row__value,
.sea-row__index {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.sea-row__value { color: var(--jbm-ink-soft); }
.sea-row__index { color: var(--jbm-muted); }

.sea-axis {
  margin: .6rem 0 0;
  font-size: .75rem;
  color: var(--jbm-muted);
}

@media (max-width: 30rem) {
  .sea-row {
    grid-template-columns: minmax(3.5rem, 5rem) 1fr 3rem;
    row-gap: 0;
  }
  .sea-row__value { display: none; }
}

.sea-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: .75rem 0 0;
  font-size: .75rem;
  color: var(--jbm-muted);
}

.sea-legend i {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-right: .3rem;
  border-radius: 2px;
  vertical-align: -1px;
}

.sea-bands {
  display: grid;
  gap: .2rem;
  margin: .75rem 0 0;
  font-size: .8rem;
}

.sea-bands__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--jbm-line);
}

.sea-bands__row:last-child { border-bottom: 0; }
.sea-bands__row[data-active="true"] { font-weight: 600; }
.sea-bands__range { color: var(--jbm-muted); font-variant-numeric: tabular-nums; }