/* ── Hero gradient (deep blue-purple) ───────────────────── */
.chart-hero {
  background: linear-gradient(135deg, #3B2D7A 0%, #6B3FA0 50%, #9B6BAB 100%);
}

/* ── Filter pills ────────────────────────────────────────── */
.filter-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 500;
  padding: 6px 16px; border-radius: 6px;
  border: 1px solid #E5E7EB;
  background: white; color: #374151;
  cursor: pointer; transition: all 0.15s;
  text-decoration: none; display: inline-block;
}
.filter-pill:hover { border-color: #9B6BAB; color: #1C1C1C; }
.filter-pill.active {
  background: #3B2D7A; border-color: #3B2D7A;
  color: white; font-weight: 600;
}

/* ── Table styles ────────────────────────────────────────── */
.chart-table { width: 100%; border-collapse: collapse; }
.chart-thead th {
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #9CA3AF; padding: 10px 14px;
  text-align: left; border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}
.chart-row {
  border-bottom: 1px solid #F3F4F6;
  transition: background 0.1s;
}
.chart-row:hover { background: #FAFAFA; }
.chart-row td { padding: 12px 14px; vertical-align: middle; }
.chart-row.hidden { display: none; }

/* Terpene name cell */
.terpene-name {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 15px; font-weight: 800;
  text-transform: uppercase; color: #1C1C1C;
  letter-spacing: 0.02em; white-space: nowrap;
}
.terpene-name a { text-decoration: none; color: inherit; }
.terpene-name a:hover { color: #C8700A; }

/* Category badge in table */
.cat-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  white-space: nowrap;
}
.cat-tag-mono  { background: #FFF3E0; color: #C8700A; }
.cat-tag-sesq  { background: #F3E8FF; color: #7C3AED; }
.cat-tag-di    { background: #DCFCE7; color: #166534; }

/* Aroma chip */
.aroma-chip {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  margin: 2px 2px 2px 0;
}
/* Aroma chips use muted category-ish colors */
.aroma-earthy   { background: #FEF3C7; color: #92400E; }
.aroma-citrus   { background: #FFF3E0; color: #C8700A; }
.aroma-floral   { background: #F3E8FF; color: #7C3AED; }
.aroma-herbal   { background: #DCFCE7; color: #166534; }
.aroma-spicy    { background: #FFE4E6; color: #BE123C; }
.aroma-woody    { background: #FEF3C7; color: #92400E; }
.aroma-fresh    { background: #ECFDF5; color: #065F46; }
.aroma-sweet    { background: #FDF2F8; color: #9D174D; }
.aroma-default  { background: #F3F4F6; color: #374151; }

/* Effect chip */
.effect-chip {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
  margin: 2px 2px 2px 0;
}
.effect-chip-orange { background: #FFF3E0; color: #C8700A; }
.effect-chip-green  { background: #DCFCE7; color: #166534; }
.effect-chip-blue   { background: #DBEAFE; color: #1E40AF; }
.effect-chip-purple { background: #F3E8FF; color: #7C3AED; }
.effect-chip-red    { background: #FFE4E6; color: #BE123C; }

/* Boiling point cell */
.bp-text {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 500;
  color: #374151; white-space: nowrap;
}

/* Legend row below table */
.chart-legend {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 0; flex-wrap: wrap;
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Outfit', sans-serif; font-size: 12px; color: #6B7280;
}
.legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
}

/* Understanding section cards */
.understanding-card {
  background: white; border: 1px solid #E5E7EB;
  border-radius: 12px; padding: 24px;
}
.understanding-card h3 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 18px; font-weight: 800;
  text-transform: uppercase; color: #1C1C1C;
  margin-bottom: 12px;
}
.understanding-card p {
  font-family: 'Outfit', sans-serif;
  font-size: 14px; color: #3D4A56; line-height: 1.7;
}

/* Print styles */
@media print {
  nav, footer, .filter-bar, .filter-pill,
  .cta-section, .understanding-section { display: none !important; }
  .chart-hero { background: #3B2D7A !important; -webkit-print-color-adjust: exact; }
  .chart-row:hover { background: none; }
  body { font-size: 11px; }
}