/* Stats window (see SkillWindow): sections with a small title, one row per stat and thin progress bars (colors from theme.css) */
#skill-window > .body {
  padding: 4px 6px 6px;
}

.stats-section + .stats-section {
  margin-top: 6px;
}

/* Small uppercase title followed by a thin line */
.stats-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 2px;
  color: var(--color-text-dim);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.stats-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* Stats and sections unchecked in the filter panel */
.stats-hidden {
  display: none !important;
}

/* Message when every stat is hidden */
.stats-empty {
  padding: 8px 4px;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
}

.outer-skill-wrapper {
  padding: 2px 4px;
  border-radius: 4px;
}

.outer-skill-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.bar-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-gap: 3px;
}

/* The name takes its own width and the value the rest; a value that does not fit (e.g., a high experience) moves to its own line */
.skill-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 6px;
}

.skill-wrapper > span {
  white-space: nowrap;
  color: var(--color-text-soft);
}

.skill-wrapper > .skill {
  margin-left: auto;
  text-align: right;
  color: white;
  font-variant-numeric: tabular-nums;
}

/* The level stands out with the soft accent */
.outer-skill-wrapper[skill="level"] .skill {
  color: var(--color-accent-text);
}

/* Thin rounded track: hovering it shows the percentage left to advance */
.bar-wrapper > .bar {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.bar-wrapper > .bar > .value {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background-image: linear-gradient(to bottom, var(--color-skill-bar-top), var(--color-skill-bar-bottom));
  transition: width 0.3s ease;
}

/* The experience bar uses the accent like the level */
.outer-skill-wrapper[skill="experience"] .bar > .value {
  background-image: linear-gradient(to bottom, var(--color-accent-text), var(--color-accent));
}