/* ============================================================================
   components-ext-feedback.css — MMD Central Design System, batch-2
   expansion (2026-09-03): inline validation summary, progress bar
   (determinate + indeterminate, additive to the existing hairline
   [data-slot="ds-meter"]), and a generic tab badge counter (the existing
   .ds-tb-tab .n only covers the top-level app-tab strip; this is the
   reusable version for any other tab family — ribbon, gsp-menu, etc).
   ========================================================================= */

/* ---- Inline validation summary ---- */
.ds-validation-summary {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--baobab); border-left: 3px solid var(--baobab);
  border-radius: var(--ds-radius-sm); background: color-mix(in srgb, var(--baobab) 6%, var(--rp-white, var(--paper)));
}
.ds-validation-summary-title { font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--baobab); }
.ds-validation-summary-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ds-validation-summary-item { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ink); }
.ds-validation-summary-item-field { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); flex: none; }
.ds-validation-summary-item:hover { text-decoration: underline; cursor: pointer; }

/* ---- Progress bar: determinate + indeterminate (additive to the existing
   hairline [data-slot="ds-meter"] -- this is the heavier-weight bar for a
   standalone progress indicator, e.g. an upload or a long-running job). ---- */
.ds-progress-bar { position: relative; height: 8px; border-radius: 4px; background: var(--rp-silver, var(--paper-2)); overflow: hidden; }
.ds-progress-bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; background: var(--baobab); border-radius: 4px; transition: width 0.2s ease; }
.ds-progress-bar-fill[data-pct="5"] { width: 5%; }
.ds-progress-bar-fill[data-pct="10"] { width: 10%; }
.ds-progress-bar-fill[data-pct="15"] { width: 15%; }
.ds-progress-bar-fill[data-pct="20"] { width: 20%; }
.ds-progress-bar-fill[data-pct="25"] { width: 25%; }
.ds-progress-bar-fill[data-pct="30"] { width: 30%; }
.ds-progress-bar-fill[data-pct="35"] { width: 35%; }
.ds-progress-bar-fill[data-pct="40"] { width: 40%; }
.ds-progress-bar-fill[data-pct="45"] { width: 45%; }
.ds-progress-bar-fill[data-pct="50"] { width: 50%; }
.ds-progress-bar-fill[data-pct="55"] { width: 55%; }
.ds-progress-bar-fill[data-pct="60"] { width: 60%; }
.ds-progress-bar-fill[data-pct="65"] { width: 65%; }
.ds-progress-bar-fill[data-pct="70"] { width: 70%; }
.ds-progress-bar-fill[data-pct="75"] { width: 75%; }
.ds-progress-bar-fill[data-pct="80"] { width: 80%; }
.ds-progress-bar-fill[data-pct="85"] { width: 85%; }
.ds-progress-bar-fill[data-pct="90"] { width: 90%; }
.ds-progress-bar-fill[data-pct="95"] { width: 95%; }
.ds-progress-bar-fill[data-pct="100"] { width: 100%; }
.ds-progress-bar-fill--done { background: var(--signal-grass); }
.ds-progress-bar-fill--danger { background: var(--baobab); }
@keyframes ds-progress-indeterminate {
  0% { left: -40%; width: 40%; }
  50% { left: 30%; width: 45%; }
  100% { left: 100%; width: 40%; }
}
.ds-progress-bar--indeterminate .ds-progress-bar-fill {
  width: 40%; animation: ds-progress-indeterminate 1.3s ease-in-out infinite;
}
.ds-progress-bar-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 11px; color: var(--ink-mute); }
.ds-progress-bar-pct { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Generic tab badge counter (reusable on any tab family) ---- */
.ds-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--baobab); color: var(--baobab-on, var(--paper));
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 1; margin-left: 5px;
}
.ds-tab-badge--mute { background: var(--rp-silver, var(--paper-2)); color: var(--ink-mute); }