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

.bar-label {
  font-size: var(--fs-small);
  color: var(--text-muted);
  width: 96px;
  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: var(--fs-text);
  /* the book face with even figures, not DM Mono - no machine type inside the
     book (the manuscript look, stage 2, 2026-09-30) */
  font-family: var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  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. */
/* A FLOOR, NOT A WIDTH (2026-10-08, a player: "staty postaci wychodza poza
   okienko przez sekretne bonusy"). "16+3-2/20 (+3)" in a larger text size is
   wider than 96px, and a fixed box let it spill past the card's edge, where the
   card cut it off. The floor is in em, so it grows with the text and every
   row keeps the same bar length (a bar is a share of its track); the rare
   value wider still takes what it needs and that one bar gives way. */
#attributes-list .bar-value { width: auto; min-width: 6.6em; white-space: nowrap; }
#attributes-list .bar-track { min-width: 0; }
/* On a wide page one row per attribute put the value 1,000px from its name
   (2026-10-01): the six take as many 26rem columns as fit - one on a phone
   and on the default desktop page. */
#attributes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); column-gap: 2rem; }

/* Phone: fixed 90px labels leave the bar itself too little room */
@media (max-width: 768px) {
  .bar-label { width: 74px; font-size: var(--fs-small); }
  /* "Constitution" at the phone's 14px needs more than 74px (2026-09-30). */
  #attributes-list .bar-label { width: 96px; }
}

/* 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;
}