/* ============================================
   app-feedback.css
   ============================================
   Feedback card styles for collapsible feedback
   components and piece scaling details.
   ============================================ */

/* ── Feedback card (collapsible; mirrors piece-scaling-details pattern) ─ */
details.piece-feedback-card { background: var(--color-surface-page); border: var(--border-default); border-radius: var(--radius-element); padding: 0.75rem 1rem; }
details.piece-feedback-card>summary.piece-feedback-card-summary { cursor: pointer; font-weight: var(--wp-weight-semibold); font-size: var(--wp-text-sm); color: var(--color-text-secondary); }
.piece-feedback-card-inner { margin-top: 0.4rem; }
.feedback-row { display: flex; gap: var(--gap-sm); align-items: baseline; margin-bottom: 0.35rem; font-size: var(--wp-text-base); }
.feedback-label { color: var(--color-text-tertiary); font-size: var(--wp-text-sm); min-width: 100px; }
.feedback-l1-bars { margin: 0.5rem 0; }
.feedback-l1-row { display: flex; align-items: center; gap: var(--gap-sm); margin-bottom: 0.25rem; font-size: var(--wp-text-sm); }
.feedback-l1-label { min-width: 76px; color: var(--color-text-secondary); font-size: var(--wp-text-sm); }
.feedback-l1-track { flex: 1; background: var(--wp-border-default); border-radius: var(--radius-inset); height: 8px; overflow: hidden; }
.feedback-l1-bar { height: 100%; border-radius: var(--radius-inset); width: 0%; transition: width 0.3s ease; }
.feedback-l1-bar--strength { background: var(--wp-l1-strength); }
.feedback-l1-bar--engine { background: var(--wp-l1-engine); }
.feedback-l1-bar--gymnastics { background: var(--wp-l1-gymnastics); }
.feedback-empty-state { color: var(--color-text-tertiary); font-size: var(--wp-text-base); margin: 0; }