/* ============================================================================
   feat-a.css — GROUP A (Training features) styles.
   Dark theme, brand red #e10600. Include in the Stats tab styles.
   All selectors scoped to feat-a IDs/classes or prefixed pr-/streak-/onerm-.
   ============================================================================ */

/* ---------- PR board ---------- */
.pr-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-type {
  background: var(--card, #121217);
  border: 1px solid var(--line, #23232a);
  border-radius: 14px;
  padding: 12px;
}
.pr-type h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--red-soft, #ff4d45);
}
.pr-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 6px 0; border-top: 1px solid var(--line, #23232a);
}
.pr-row small { color: var(--muted, #9a9aa3); font-size: 11px; line-height: 1.3; }
.pr-row b { font-size: 14px; white-space: nowrap; }
.pr-row .pr-date { display: block; color: var(--muted, #9a9aa3); font-size: 10px; font-weight: 400; }
.pr-type .pr-empty { color: var(--muted, #9a9aa3); font-size: 13px; margin: 4px 0 8px; }
.pr-type h3 .pr-trophy { margin-right: 6px; }

/* ---------- NEW PR celebration banner ---------- */
.pr-celebrate {
  background: linear-gradient(135deg, #2a0d0b, #121217);
  border: 1px solid #e10600;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center;
  animation: prPulse 1.6s ease-in-out infinite;
}
.pr-celebrate b { color: #fff; font-size: 17px; letter-spacing: .5px; display: block; margin-bottom: 4px; }
.pr-celebrate p { margin: 0; font-size: 14px; color: var(--muted, #9a9aa3); }
.pr-celebrate p b { display: inline; font-size: 14px; color: var(--red-soft, #ff4d45); }
@keyframes prPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, .35); }
  50% { box-shadow: 0 0 18px 4px rgba(225, 6, 0, .35); }
}

/* ---------- Streaks ---------- */
.streak-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.streak-card {
  background: var(--card, #121217);
  border: 1px solid var(--line, #23232a);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
}
.streak-flame { font-size: 22px; margin-bottom: 6px; }
.streak-card b { display: block; font-size: 30px; font-weight: 800; color: var(--red-soft, #ff4d45); }
.streak-card small { color: var(--muted, #9a9aa3); font-size: 10px; line-height: 1.5; letter-spacing: .4px; }

/* ---------- 1RM calculator ---------- */
.onerm-card {
  background: var(--card, #121217);
  border: 1px solid var(--line, #23232a);
  border-radius: 14px;
  padding: 14px;
}
.onerm-sub { color: var(--muted, #9a9aa3); font-size: 13px; margin: 0 0 12px; }
.onerm-inputs { display: flex; gap: 10px; align-items: flex-end; }
.onerm-inputs label {
  flex: 1; font-size: 11px; color: var(--muted, #9a9aa3);
  text-transform: uppercase; letter-spacing: .5px;
}
.onerm-inputs input {
  display: block; width: 100%; margin-top: 6px;
  background: var(--card-2, #17171c); color: var(--text, #fff);
  border: 1px solid var(--line, #23232a); border-radius: 10px;
  padding: 10px 12px; font-size: 16px;
}
.onerm-inputs input:focus { outline: none; border-color: #e10600; }
.onerm-inputs .btn-red { flex: 1; padding: 11px 8px; }
.onerm-error { color: var(--red-soft, #ff4d45); font-size: 13px; margin: 10px 0 0; }
.onerm-max { margin: 14px 0 10px; font-size: 13px; letter-spacing: 1px; color: var(--muted, #9a9aa3); }
.onerm-max b { display: block; font-size: 34px; color: #fff; letter-spacing: 0; margin-top: 2px; }
.onerm-table { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.onerm-row { display: grid; grid-template-columns: 44px 1fr 52px; gap: 8px; align-items: center; font-size: 12px; }
.onerm-row .pct { color: var(--muted, #9a9aa3); }
.onerm-row .bar { height: 8px; background: var(--card-2, #17171c); border-radius: 4px; overflow: hidden; }
.onerm-row .bar i { display: block; height: 100%; background: #e10600; border-radius: 4px; }
.onerm-row .wt { text-align: right; font-weight: 700; }
.onerm-row.goal .bar i { background: #fff; }

@media (max-width: 420px) {
  .pr-board { grid-template-columns: 1fr; }
  .streak-board { grid-template-columns: repeat(3, 1fr); }
}