/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* TipTap inline entity nodes — #topic and @mention pills */
.inline-tag {
  display: inline;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.875em;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
  user-select: all;
}

.topic-tag-pill {
  background-color: #2c2c2c;
  color: #f0ebe0;
}

.mention-tag-pill {
  background-color: #f5e6cc;
  color: #5c3a24;
  border: 1px solid rgba(200, 148, 74, 0.3);
}

/* Popularity indicators — visual weight via colour from brand palette */
.popularity-buzzing {
  color: #c8944a; /* brand-amber — warm gold, high energy */
}

.popularity-rising {
  color: #4b7040; /* forest — growth, upward */
}

.popularity-falling {
  color: #7a8b96; /* slate-blue — cooling, muted */
}

.popularity-lonely {
  color: #b0bec5; /* slate-blue-light — barely there */
}

/* Inline topic pills: popularity accent border */
.topic-tag-pill[data-popularity="buzzing"] {
  border: 1px solid #c8944a;
}

.topic-tag-pill[data-popularity="rising"] {
  border: 1px solid #4b7040;
}

.topic-tag-pill[data-popularity="falling"] {
  border: 1px solid rgba(122, 139, 150, 0.4);
}

/* Dropdown popularity labels */
.popularity-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}