/* challenges.css — challenge-level price tables: /best-prop-firms/account-size/ pages (tools/challenges/build-pages.py)
   and the "Accounts and prices" block on reviews (tools/challenges/review-prices.py).
   Page frame, filter bar, chips and "How this list works" come from listing.css. Type sizes use the --fs-* tokens only.
   Desktop: a table. 768px and below: each row becomes a card with labelled values. */

/* ---------- stat chips (size pages) ---------- */
.chp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 16px; }
.chp-stat { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; min-width: 0; }
.chp-stat dt { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-tertiary); }
.chp-stat dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); line-height: 1.25; overflow-wrap: anywhere; }
.chp-stat-s { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); }

/* ---------- account-size links ---------- */
.chp-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.chp-sizes-t { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.chp-sizes-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chp-sizes .lst-chip[aria-current="page"] { background: rgba(56, 189, 248, .14); border-color: var(--data); }
.chp-chip-n { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ---------- table ---------- */
.chp-wrap { width: 100%; overflow-x: auto; }
table.chp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.chp-cap { caption-side: top; text-align: left; padding: 0 0 8px; font-size: var(--fs-xs); color: var(--text-tertiary); }
.chp-table th { padding: 10px 8px; text-align: left; background: var(--bg-card); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600;
  border-bottom: 1px solid var(--border-light); vertical-align: bottom; }
.chp-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-secondary); }
.chp-table tbody tr:hover { background: var(--bg-card); }
.chp-row[hidden] { display: none !important; }
.chp-firm { min-width: 190px; }
.chp-firm .lst-firm-in { align-items: flex-start; }
.chp-prog { color: var(--text-primary); font-size: var(--fs-sm); }
.chp-sub { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-tertiary); }
.chp-v { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.chp-ns { color: var(--text-tertiary); font-style: italic; }
.chp-k { display: none; }
.chp-price, .chp-allin { min-width: 104px; }
.chp-ratio { min-width: 110px; }
.chp-rules { min-width: 170px; font-size: var(--fs-xs); line-height: 1.5; }
.chp-rules span:not(.chp-k) { display: block; }
.chp-src a { color: var(--link); font-weight: 500; }
.chp-src a:hover { color: var(--link-hover); }
.chp-src a:focus-visible, .chp-linkbtn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.chp-note { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); max-width: 80ch; }
.chp-other { margin: 32px 0 0; }
.chp-other[hidden] { display: none; }
.chp-empty, .chp-none { margin: 16px 0; padding: 20px; text-align: center; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; }
.chp-none[hidden] { display: none; }
.chp-linkbtn { background: none; border: 0; padding: 0 0 0 4px; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; min-height: 24px; }
.chp-f-sort { flex: 2 1 230px; }
.chp-filters .lst-f input::placeholder { color: var(--text-tertiary); }
.content-wrapper > .cta-box { margin-top: 40px; }

/* ---------- review block ---------- */
.rv-prices { margin: 0 0 28px; }
.rv-prices h2 { margin: 0 0 6px; }
.rv-prices-lead { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.rv-prices-prog { margin: 18px 0 8px; font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.rv-prices-prog .chp-sub { display: inline; margin-left: 6px; font-weight: 400; }
.rv-prices .chp-table td, .rv-prices .chp-table th { white-space: normal; }
.rv-prices-more { margin: 10px 0 0; font-size: var(--fs-sm); }
.rv-prices .chp-sub a, .chp-table .chp-sub a { color: var(--link); font-weight: 500; }
.rv-prices .chp-sub a:hover { color: var(--link-hover); }
.rv-prices-more a { color: var(--link); }

/* ---------- 768px and below: cards ---------- */
@media (max-width: 768px) {
  .chp-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .chp-stat { padding: 10px 12px; }
  .chp-stat dd { font-size: var(--fs-md); }
  .chp-stat-s { font-size: var(--fs-xs); }
  .chp-sizes-list { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; max-width: calc(100% + 32px); }

  .chp-filters .lst-count { flex: 1 1 100%; order: 3; }
  .chp-wrap { overflow: visible; }
  table.chp-table, .chp-table tbody, .chp-table caption { display: block; width: 100%; }
  .chp-table thead { display: none; }
  .chp-table tr.chp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; margin: 0 0 10px; padding: 12px;
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; }
  .chp-table tr.chp-row:hover { background: var(--bg-card); }
  .chp-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .chp-firm { grid-column: 1 / 2; grid-row: 1; min-width: 0; }
  .rv-prices .tbl-scroll { overflow: visible; border: 0; }
  .rv-prices table.chp-table { border: 0; background: none; }
  .rv-prices .chp-table thead { display: none; }
  .rv-prices .chp-table tr.chp-row { display: grid; }
  .rv-prices .chp-table td { display: block; padding: 0; border: 0; background: none; }
  .rv-size { grid-column: 1 / -1; }
  .rv-size .chp-k { display: none !important; }
  .rv-size .chp-v { font-size: var(--fs-md); }
  .chp-ti { grid-column: 2 / 3; grid-row: 1; justify-self: end; }
  .chp-ti .chp-k { display: none !important; }
  .chp-rules { grid-column: 1 / -1; }
  .chp-src { grid-column: 1 / -1; display: flex !important; align-items: baseline; gap: 10px; padding-top: 8px !important; border-top: 1px solid var(--border-subtle) !important; }
  .chp-src .chp-sub { margin: 0; }
  .chp-src a { display: inline-flex; align-items: center; min-height: 32px; }
  .chp-k { display: block; margin-bottom: 2px; font-size: var(--fs-xs); color: var(--text-tertiary); }
  .chp-v { white-space: normal; }
  .chp-price, .chp-allin, .chp-ratio, .chp-rules { min-width: 0; }
}

/* Visit links (mpgVisitLink markup, same look as list pages; Ad pill stays inside the button) */
.chp-visit .visit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 6px 12px;
  background: var(--action); border: 1px solid var(--action); border-radius: 8px; color: #000; font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; white-space: nowrap; }
.chp-visit .visit-btn:hover { filter: brightness(1.08); }
.chp-visit .visit-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 760px) { .chp-visit .visit-btn { display: flex; width: 100%; min-height: 40px; } }