/* ==========================================================================
   Intoxication Report
   Built from the existing chart pieces: .chart-page intro (charts/chart.css),
   .era-tabs, .card, the chart shell's charge band and song rows (main.css),
   and the Topic Trends field bars (.tt-field-*, topic-trends/style.css). This
   file only adds the intoxication hue and the few seams between them.
   ========================================================================== */

.ix-page { --ix-hue: #f07ab0; }

/* The tab strip sits on its own above the two cards, so it drops the inset
   .era-tabs carries for living inside a card. */
.ix-board .era-tabs { margin: 0 0 var(--rc-gap-panel, 1.25rem); flex-wrap: wrap; }
.ix-board .era-tab { flex: 1 1 9rem; }
.ix-board .era-tab-tagline { font-family: var(--rc-font-mono); }

/* Charge band in the intoxication hue: the count stands where the degree goes. */
.ix-page .reading-date { background: var(--ix-hue); }
.ix-page .reading-charge-bar { background: var(--ix-hue); }
.ix-page .reading-charge-degree { font-size: 1.05rem; }

/* Substance under the artist on each song row. */
.ix-substance {
  display: inline-block;
  margin-left: 0.45rem;
  font-family: var(--rc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-hue);
}

/* Field bars in the intoxication hue, counts in the last column. */
.ix-page .tt-field { padding: 0.4rem 0 0; }
.ix-page .tt-field-fill { background: var(--ix-hue); }
.ix-page .tt-field-row { grid-template-columns: 10rem 1fr 4.5rem; }

.ix-status, .ix-empty { color: var(--rc-text-dim); font-size: 0.88rem; line-height: 1.5; }
.ix-empty { padding: 0.6rem 0; }

.ix-note {
  max-width: 52rem;
  margin: var(--rc-gap-panel, 1.25rem) 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--rc-text-dim);
}

@media (max-width: 768px) {
  .ix-page .tt-field-row { grid-template-columns: 7rem 1fr 3.6rem; }
}