/* ============================================================
   progress_history.css — «Прогресс как история» (С4).
   ============================================================ */
.ph-slot { margin-bottom: var(--space-lg); }
.ph-block { padding: var(--space-lg); }
.ph-head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.ph-head h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: var(--space-xs); }

/* главный вывод словами */
.ph-story { margin: var(--space-sm) 0 var(--space-md); font-size: 16.5px; line-height: 1.5;
  padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--accent-primary);
  background: var(--bg-card); border-radius: var(--radius-sm); }

/* столбики выполнения по неделям */
.ph-chart { display: flex; align-items: flex-end; gap: var(--space-sm); height: 140px; margin-bottom: var(--space-md); }
.ph-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ph-bar-wrap { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.ph-bar { width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 3px; }
.ph-bar.ph-ok { background: var(--status-success); }
.ph-bar.ph-mid { background: var(--status-warning); }
.ph-bar.ph-low { background: var(--status-danger); }
.ph-col-v { font-size: 12px; font-weight: 600; margin-top: 4px; }
.ph-col-l { font-size: 11px; color: var(--text-muted); }

.ph-insights { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-md); }
.ph-ins { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--text-muted); }

.ph-sub { margin: var(--space-md) 0 var(--space-xs); font-weight: 600; font-size: 14.5px; }
.ph-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ph-table th, .ph-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.ph-table th { color: var(--text-muted); font-weight: 600; }
.ph-ok { color: var(--status-success); font-weight: 600; }

.ph-ach { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ph-chip { display: inline-flex; align-items: center; gap: 4px; }

.ph-base { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); font-size: 14px; }
.ph-foot { margin-top: var(--space-sm); font-size: 12px; }

@media (max-width: 640px) {
  .ph-block { padding: var(--space-md); }
  .ph-chart { height: 110px; }
  .ph-table th:nth-child(2), .ph-table td:nth-child(2) { display: none; }
}