/*
 * trend.css — feature grid-trend (spec 04 §12.3): trend chart below the grid.
 * Values copied verbatim from the original stylesheet, in its source order.
 * `.trend-data-wrap { position: relative }` and the `.trend-data-wrap.is-vip-locked`
 * blur are part of shared rules in grid.css; the room-switch animation is in spells.css.
 */

.trend-board {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 0;
  border-top: 1px solid #d7dbe4;
  border-radius: 0;
  background: #ffffffeb;
  color: #3d4250;
}

.trend-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.trend-head,
.trend-row {
  display: grid;
  grid-template-columns: 46px repeat(9, minmax(18px, 1fr)) 26px 26px 26px 26px;
}

.trend-head {
  position: relative;
  z-index: 3;
  min-height: 27px;
  background: #bfe8f7;
  color: #18283d;
  font-weight: 900;
}

.trend-head span,
.trend-cell,
.trend-period,
.trend-cat {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 28px;
  border-right: 1px solid rgba(86, 91, 107, .16);
  border-bottom: 1px solid rgba(86, 91, 107, .12);
  font-size: 13px;
}

.trend-head span {
  min-height: 27px;
  border-color: #4185a142;
}

.trend-period,
.trend-cell,
.trend-cat {
  color: #76667175;
  font-family: Arial, Helvetica Neue, PingFang SC, Microsoft YaHei, sans-serif;
  font-weight: 400;
}

.trend-cat.active {
  color: #fff;
  font-weight: 700;
}

.trend-cat.small,
.trend-cat.big {
  color: #238fc0;
}

.trend-cat.odd,
.trend-cat.even {
  color: #2f9d39;
}

.trend-line {
  position: absolute;
  top: 27px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: calc(100% - 27px);
  pointer-events: none;
  overflow: visible;
}

.trend-rows {
  position: relative;
  z-index: 4;
}

.trend-cell.active-number {
  color: #fff;
}

.trend-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  box-shadow: inset 0 1px #ffffff38, 0 1px 3px #0000002e;
}

.trend-cell.active-number .trend-dot {
  background: #bf314d;
}

.trend-cat.size-choice.active .trend-dot {
  background: #61c1e6;
}

.trend-cat.parity-choice.active .trend-dot {
  background: #58a83c;
}