.season-page {
  display: flex;
  flex-direction: row;
  width: fit-content;
  max-width: 100%;
  gap: 1.75rem;
  margin-inline: auto;
}

.season-column {
  display: flex;
  flex-direction: column;
}

.season-column--left {
  flex: 0 0 18.75rem;
  gap: 0.5625rem;
}

.season-column--right {
  flex: 0 0 auto;
  gap: 0.5625rem;
}

.season-table-block {
  display: flex;
  flex-direction: column;
}

.season-grid {
  box-sizing: border-box;
  border: var(--table--border-size) solid var(--table--border-color);
}

.season-grid sup {
  font-size: 0.65em;
  line-height: 0;
  margin-left: 0.08em;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
}

.season-grid--compact {
  display: grid;
  grid-template-columns: 3.6rem 3.6rem 3.6rem minmax(6rem, auto);
  width: 100%;
}

.season-grid--raid {
  display: grid;
  grid-template-columns: repeat(6, minmax(max-content, 1fr));
  width: 100%;
}

.season-grid--matrix {
  display: grid;
  grid-template-columns: 3.75rem 2.5rem 5rem 2.5rem 5rem 2.5rem 5rem 2.5rem 5rem;
  width: fit-content;
}

.season-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0.1875rem 0.125rem;
  color: var(--table--text-color);
  font-size: 110%;
  text-align: center;
  white-space: nowrap;
  border-right: var(--table--border-size) solid var(--table--border-color);
  border-bottom: var(--table--border-size) dotted var(--table--border-color);
}

.season-cell--last-column {
  border-right: none;
}

.season-cell--col-header {
  background-color: var(--table--col-header-color);
  font-weight: 700;
}

.season-cell--row-header {
  background-color: var(--table--row-header-color);
  font-weight: 700;
}

.season-cell--hard {
  border-bottom-style: solid;
}

.season-cell--end {
  border-bottom: none;
}

.season-cell--block {
  position: relative;
  overflow: visible;
}

.season-block-label {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  padding: 0 0.125rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.season-inline-segment {
  display: inline-block;
  white-space: nowrap;
}

.season-cell--join-right {
  border-right: none;
}

.season-cell--2rows { grid-row: span 2; }
.season-cell--3rows { grid-row: span 3; }
.season-cell--4rows { grid-row: span 4; }
.season-cell--5rows { grid-row: span 5; }
.season-cell--6rows { grid-row: span 6; }

.season-fill--undefined {
  background-color: var(--table--cell-color);
}

.season-fill--spark {
  background-color: var(--spark--color);
}

.season-fill--track-adventurer { background-color: var(--track-color--adventurer); }
.season-fill--track-veteran { background-color: var(--track-color--veteran); }
.season-fill--track-champion { background-color: var(--track-color--champion); }
.season-fill--track-hero { background-color: var(--track-color--hero); }
.season-fill--track-myth { background-color: var(--track-color--myth); }

.season-fill--crest-adventurer { background-color: var(--crest-color--adventurer); }
.season-fill--crest-veteran { background-color: var(--crest-color--weathered); }
.season-fill--crest-champion { background-color: var(--crest-color--carved); }
.season-fill--crest-hero { background-color: var(--crest-color--runed); }
.season-fill--crest-myth { background-color: var(--crest-color--gilded); }

.season-table-notes {
  color: var(--text-color);
  font-style: italic;
}

.season-table-notes--empty {
  visibility: hidden;
}

@media (max-width: 780px) {
  .season-page {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }

  .season-column {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .season-column--left,
  .season-column--right {
    flex-basis: auto;
  }
}

@media (max-width: 689px) {
  .season-page {
    overflow-x: auto;
  }

  .season-table-block {
    width: fit-content;
  }
}