/* The Bootstrap semantic-variable remap this app used to define locally
   now lives in base/css/styles.css's :root, applied site-wide. */

/* Bootstrap's .bg-dark/.border-secondary utility classes carry !important,
   so background-color/border-color here must too, or they silently lose to
   Bootstrap and never re-theme - see combat/static/combat/css/styles.css's
   identical fix for the bug this caused (unreadable dark-ink-on-Bootstrap-
   black text under High-Fantasy: Nature). */
#features-root .card.bg-dark {
  background-color: var(--ioe-bg-elevated) !important;
  color: var(--ioe-text);
  border-color: var(--ioe-border) !important;
}
#features-root .text-muted {
  color: var(--ioe-text-muted) !important;
}

.feature-title {
  color: var(--ioe-heading);
  text-decoration: none;
  font-weight: 600;
}
.feature-title:hover {
  text-decoration: underline;
}

.vote-count {
  min-width: 2ch;
  text-align: center;
}

.feature-detail-header {
  align-items: stretch;
}
.feature-icon-col {
  width: 15%;
  min-width: 96px;
  background-color: rgba(159, 176, 226, 0.04);
  border-right: 1px solid var(--ioe-border);
}
.feature-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.feature-icon-placeholder {
  font-size: 2.5rem;
  color: var(--ioe-text-muted);
}
.feature-info-col {
  width: 85%;
}

.feature-form-control {
  background-color: var(--ioe-bg-elevated);
  color: var(--ioe-text);
  border: 1px solid var(--ioe-border-strong);
}
.feature-form-control:focus {
  background-color: var(--ioe-bg-elevated);
  color: var(--ioe-text);
  border-color: var(--ioe-accent);
  box-shadow: none;
}
.feature-form-control::placeholder {
  color: var(--ioe-text-muted);
}