/* ======================================
   ATTRIBUTE / CONDITION BARS
   ====================================== */
.bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.bar-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
}

.bar-track {
  flex: 1;
  height: var(--bar-height);
  background: var(--bg-surface);
  border-radius: var(--bar-radius);
  overflow: hidden;
  position: relative;
}
.bar-track.thin { height: var(--bar-height-thin); }

/* ONE FILL FOR EVERY BAR (maggie, 2026-08-11): the deep-to-bright gold
   gradient from her mockup, defined once in tokens.css. The per-variant
   colour rules that used to live here (attributes, conditions, love /
   friendship / hate, skill, dragon bond) are deliberately GONE - she asked
   for every bar in the game to read the same. The variant class names stay
   on the markup, harmlessly, so nothing needed a JS pass and a future
   re-colouring only needs rules added back here. */
.bar-fill {
  height: 100%;
  border-radius: var(--bar-radius);
  transition: var(--bar-transition);
  background: var(--bar-fill-gradient);
}

.bar-value {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--accent-gold);   /* values read gold, like the mockup */
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Attribute bars run the full width of their card (maggie, 2026-08-11) -
   the old 220px cap left the Skills-tab card mostly empty air. */
/* Room for values with a worn-item bonus AND the modifier bracket beside them,
   e.g. "13+1/20 (+2)" - the bracket landed 2026-08-12 and 60px cut it in half. */
#attributes-list .bar-value { width: 96px; white-space: nowrap; }

/* Phone: fixed 90px labels leave the bar itself too little room */
@media (max-width: 768px) {
  .bar-label { width: 74px; font-size: 0.72rem; }
}

/* What the score is worth on a roll: "(+2)". Quieter than the value it follows,
   because the value is the thing a player says out loud and this is the figure
   they need when choosing what to train (2026-08-12). */
.attr-mod-txt {
  color: var(--text-muted);
  font-size: 0.95em;
  font-weight: 400;
}

/* Quiet "+n" next to an attribute value - the lift from worn items */
.attr-bonus-txt {
  color: var(--accent-violet);
  font-size: 0.95em;
  font-weight: 400;
}

/* And the "-n" beside it - what a lasting wound takes off the score (2026-08-27).
   Deliberately the same weight and size as the bonus above it: they are the two
   halves of one sum and the eye should read them as a pair. Danger red rather
   than violet, because one of them is something you put on this morning and the
   other is not. Hovering names the wounds; see renderGeneralTab. */
.attr-wound-txt {
  color: var(--text-danger);
  font-size: 0.95em;
  font-weight: 400;
  cursor: help;
}