/* Progression tracker. Field-manual theme: numbers in ink, bars ink on --rule-2, chips as
   ink-outlined plates (red when on), the ladder as ruled rows. */
.prog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.prog-head .lede { margin-bottom: .2rem; }
.prog-actions { display: flex; gap: .5rem; padding-bottom: .2rem; }
.hud-note { margin: .5rem 0 0; font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--ink-2); }

.prog-banner { margin-bottom: 1rem; }
.prog-banner-body { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-end; }
.prog-career-num { display: flex; align-items: baseline; gap: .45rem; }
.prog-career-num strong { font-family: var(--mono); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.prog-career-cap { color: var(--ink-3); font-family: var(--mono); }
.prog-banner-stats { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: .8rem 1.4rem; flex: 1; }
.prog-banner-stats .label { display: block; margin-bottom: .15rem; }
.prog-banner-stats strong { font-family: var(--mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.prog-banner-stats .dim { color: var(--ink-3); font-family: var(--mono); font-size: .85rem; }

.prog-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
@media (max-width: 980px) { .prog-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prog-tracks { grid-template-columns: 1fr; } .prog-banner-stats { grid-template-columns: 1fr; } }

.prog-track-row { display: grid; grid-template-columns: 3.2rem 4.2rem 1fr; gap: .45rem; align-items: center; margin-bottom: .55rem; }
.prog-num { width: 100%; padding: .35rem .4rem; background: #fff; color: var(--ink); border: 1px solid var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.prog-num:focus { border-color: var(--red); outline: none; }
.prog-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: .5rem 0; background: var(--rule-2); border: 1px solid var(--rule); border-radius: 0; outline: none; }
.prog-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.prog-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.prog-slider:focus-visible::-webkit-slider-thumb { background: var(--red); border-color: var(--red); }
.prog-slider:focus-visible::-moz-range-thumb { background: var(--red); border-color: var(--red); }
.prog-track-meta { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.prog-track-meta em { font-style: normal; color: var(--ink); font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }

.prog-ladder-bar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.prog-filters { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; }
.prog-search { max-width: 280px; margin: 0; }

.chip {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .3rem;
  font-family: var(--mono); font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: .42rem .6rem; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; text-align: center;
}
.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on { background: var(--red); color: #FBF6EA; border-color: var(--red); }

.prog-ladder { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink); }
.prog-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 7rem auto; gap: .6rem 1rem; align-items: center; padding: .55rem .75rem .55rem .6rem; background: transparent; border-bottom: 1px solid var(--rule-2); border-left: 3px solid transparent; }
.prog-row.locked { color: var(--ink-3); }
.prog-row.locked .prog-row-lvl, .prog-row.locked .prog-row-cost { color: var(--ink-3); }
.prog-row.open { border-left-color: var(--red); background: var(--plate); }
.prog-row.paid { border-left-color: var(--good); }
.prog-row[hidden] { display: none; }
.prog-row-lvl { font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.prog-row-track { display: block; font-family: var(--mono); color: var(--ink-3); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; margin-top: .1rem; font-weight: 400; }
.prog-row-items { display: flex; flex-wrap: wrap; gap: .25rem .55rem; }
.prog-row-items span { font-size: .95rem; }
.prog-row-cost { text-align: right; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-mark { font-family: var(--mono); font-weight: 700; font-size: .68rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; padding: .45rem .6rem; cursor: pointer; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); }
.prog-mark:hover { background: var(--ink); color: var(--paper); }
.prog-row.paid .prog-mark { color: var(--good); border-color: var(--good); background: transparent; }
.prog-row.paid .prog-mark:hover { background: var(--good); color: #FBF6EA; }

@media (max-width: 720px) {
  .prog-row { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .prog-row-cost, .prog-mark { grid-column: 2; }
  .prog-row-cost { text-align: left; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .prog-head { flex-direction: column; align-items: stretch; }
  .prog-actions { flex-wrap: wrap; }
  .prog-actions .btn { flex: 1 1 auto; }
  .prog-ladder-bar { flex-direction: column; align-items: stretch; }
  .prog-search { max-width: none; }
}