/* Point Buy Calculator */
.pb-points { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.pb-points__label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pb-points__value { font: 700 1.8rem/1 var(--font-serif); color: var(--accent); margin-left: .35rem; vertical-align: middle; }
.pb-points__value.is-over { color: var(--bad); }
.pb-points__value.is-done { color: var(--good); }

.pb-grid { display: flex; flex-direction: column; gap: .5rem; }
.pb-row {
  display: grid; align-items: center; gap: .6rem;
  grid-template-columns: minmax(130px, 1.4fr) auto 70px 80px 60px 60px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .75rem;
}
.pb-row--head { background: none; border: 0; padding-top: 0; padding-bottom: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pb-ability strong { font-family: var(--font-serif); font-size: 1.05rem; margin-right: .25rem; }
.pb-bonus { min-height: 38px; padding: .4rem .5rem; }
.pb-final { font: 700 1.5rem/1 var(--font-serif); text-align: center; }
.pb-mod { font: 700 1.05rem/1 var(--font-body); text-align: center; padding: .35rem 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.pb-cost { color: var(--muted); font-size: .9rem; }
.pb-row--head span:nth-child(5), .pb-row--head span:nth-child(6) { text-align: center; }

@media (max-width: 640px) {
  .pb-points { grid-template-columns: 1fr auto; }
  .pb-points__bar { grid-column: 1 / -1; grid-row: 2; }
  .pb-row--head { display: none; }
  .pb-row { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .pb-ability { grid-column: 1 / -1; }
  .pb-col-cost { display: none; }
  .pb-row .stepper { justify-self: start; }
  .pb-final { text-align: left; }
  .pb-final::before { content: "Final "; font: 600 .8rem var(--font-body); color: var(--muted); }
}