/* ============================================
   app-strategy.css
   ============================================
   Mobile strategy card styles and Phase-1 UX styles
   for strategy components.
   ============================================ */

/* ── Mobile strategy card ───────────────────────────────────────── */

@media (max-width: 640px) {
  .workout-structure-block { overflow-x: auto; }
  .parse-table { min-width: 220px; font-size: var(--wp-text-sm); }
  .parse-table th, .parse-table td { padding: 0.35rem 0.5rem; }
  .parse-unknowns-list { padding-left: 1rem; font-size: var(--wp-text-sm); }
}

/* ── Phase-1 UX: CTA + Section layout ───────────────────────────── */
.training-context { margin-bottom: 1rem; }
.training-context>summary { cursor: pointer; font-size: var(--wp-text-lg); font-weight: var(--wp-weight-bold); color: var(--color-text-secondary); margin: 1.5rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: var(--border-default); list-style: none; }
.training-context>summary::-webkit-details-marker { display: none; }
.training-context>summary::before { content: "\25B6 "; font-size: var(--wp-text-xs); }
.training-context[open]>summary::before { content: "\25BC "; }
.training-details-section>summary { cursor: pointer; font-size: var(--wp-text-lg); font-weight: var(--wp-weight-bold); color: var(--color-text-secondary); margin: 1.5rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: var(--border-default); list-style: none; }
.training-details-section>summary::-webkit-details-marker { display: none; }
.training-details-section>summary::before { content: "\25B6 "; font-size: var(--wp-text-xs); }
.training-details-section[open]>summary::before { content: "\25BC "; }
.first-use-callout p { margin: 0 0 0.5rem; font-size: var(--wp-text-base); }

/* Flex on inner wrapper avoids table-layout quirks from display:flex on <td>. */
.movement-row--rest td { color: var(--color-text-tertiary); }
#restore-notification { background: var(--color-success-bg); border: var(--border-accent); color: var(--color-success-light); padding: 0.6rem 1rem; border-radius: var(--radius-inset); font-size: var(--wp-text-base); margin-bottom: 0.75rem; }
.strength-logged-summary ul { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.strength-logged-summary li { font-size: var(--wp-text-base); color: var(--color-success-light); padding: 0.15rem 0; }
.benchmark-trend-card { background: var(--color-surface-card); border: var(--border-default); border-radius: var(--radius-element); padding: 1rem; margin-bottom: 1rem; }
.benchmark-trend-card h3 { margin: 0 0 0.75rem; display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }
.trend-direction { font-size: var(--wp-text-sm); font-weight: var(--wp-weight-semibold); padding: 0.15rem 0.5rem; border-radius: var(--radius-inset); }
.benchmark-trend-details dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.benchmark-trend-details dt { font-weight: var(--wp-weight-semibold); font-size: var(--wp-text-sm); color: var(--color-text-secondary); }
.benchmark-trend-details dd { margin: 0; font-size: var(--wp-text-sm); }
.benchmark-bar-chart { background: var(--color-surface-muted); border-radius: var(--radius-inset); height: 1.5rem; overflow: hidden; }
.benchmark-bar { background: var(--wp-interactive); color: var(--color-text-primary); font-size: var(--wp-text-xs); line-height: var(--wp-leading-normal)rem; padding: 0 0.5rem; border-radius: var(--radius-inset); min-width: 2rem; text-align: right; white-space: nowrap; }