/* Product profit check and audit checklist (guides/find-products-losing-money). Tokens from base.css only. */

/* ---- checklist */
.pa-check { margin-top: 32px !important; padding: 24px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--mist); box-shadow: var(--shadow-soft); }
.pa-check__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.pg-article__body .pa-check h3 { margin: 0 !important; font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.pa-check__count { margin: 0; font-size: var(--t-small); color: var(--storm); font-variant-numeric: tabular-nums; }
.pa-check__count b { font-weight: 500; color: var(--violet); }
.pa-check__track { margin-top: 14px; height: 8px; border-radius: var(--r-pill); background: var(--cloud); overflow: hidden; }
.pa-check__track i { display: block; width: 0; height: 100%; border-radius: var(--r-pill); background: var(--violet); transition: width .35s var(--ease); }
.pg-article__body .pa-check__list { list-style: none; margin: 18px 0 0; padding: 0; }
.pg-article__body .pa-check__list li + li { margin-top: 0; }
.pa-check__list li { border-top: 1px solid var(--mist); }
.pa-check__list li:first-child { border-top: 0; }
.pa-check__list label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; color: var(--storm); line-height: 1.45; }
.pa-check__list input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--violet); cursor: pointer; }
.pa-check__list input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pa-check__list li.is-done span { color: var(--fog); text-decoration: line-through; text-decoration-color: var(--haze); }
.pa-check__done { margin-top: 12px !important; padding: 14px 16px; border-radius: 12px; background: var(--mint); color: var(--mint-ink); font-size: var(--t-small); font-weight: 500; line-height: 1.45; }
.pa-check .calc__hint { margin-top: 12px !important; }

/* ---- calculator extras */
.calc__input input.pa-text { padding: 0 14px; }
.pa-add { margin-top: 18px; display: grid; gap: 8px; }
.pa-btn {
  justify-self: start; height: 44px; padding: 0 20px; border: 1px solid var(--violet); border-radius: var(--r-pill);
  background: var(--paper); color: var(--violet); font: 500 var(--t-small)/1 var(--font); letter-spacing: .01em; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pa-btn:hover { background: var(--lilac); }
.pa-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lilac); }
.pa-btn:disabled { border-color: var(--haze); color: var(--fog); background: var(--cloud); cursor: default; }

/* ---- comparison table */
.pa-compare { max-width: 760px; margin: 32px auto 0; }
.pa-compare .pg-table-wrap { position: relative; } /* keeps the sr-only header inside the scroll box */
.pa-table td:first-child { color: var(--ink); overflow-wrap: anywhere; }
.pa-table th, .pa-table td { white-space: nowrap; }
.pa-table td:first-child { white-space: normal; min-width: 120px; }
.pa-table td:not(:first-child), .pa-table th:not(:first-child) { text-align: right; }
.pa-remove {
  height: 32px; padding: 0 12px; border: 1px solid var(--haze); border-radius: var(--r-pill); background: var(--paper);
  color: var(--storm); font: 500 var(--t-small)/1 var(--font); cursor: pointer;
}
.pa-remove:hover { border-color: var(--coral-ink); color: var(--coral-ink); }
.pa-remove:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

@media (max-width: 639px) {
  .pa-check { padding: 20px 18px; }
  .pa-table th, .pa-table td { padding: 10px 12px; }
}