/* Plan module — sprint completion visuals (Tony ruling 2026-07-29: every component with a
 * percentage shows it visually — left-to-right fill; 100% reads fully green at a glance).
 * Tokens only. Prefix plan- (module classes predate the css/<module>.css split; new rules live
 * here rather than growing app.css). */

/* Overall project completion bar under the project picker. */
.plan-total-track {
  height: 6px; border-radius: 999px; background: var(--surface-2);
  margin: 2px 0 12px; overflow: hidden;
}
.plan-total-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--st-active); transition: width 0.3s;
}
.plan-total-fill.done { background: var(--st-done); }

/* Sprint header: proportional left-to-right fill behind the summary content. */
.plan-sprint-summary { position: relative; overflow: hidden; }
.plan-progress {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0;
  background: var(--st-done-bg); pointer-events: none; transition: width 0.3s;
}
/* Keep the summary's real content above the fill layer. */
.plan-sprint-summary > *:not(.plan-progress) { position: relative; }

/* 100% — the whole header reads green. */
.plan-sprint-summary.plan-done { background: var(--st-done-bg); box-shadow: inset 3px 0 0 var(--st-done); }
.plan-sprint-summary.plan-done .plan-sprint-name { color: var(--st-done); }
.plan-sprint-summary.plan-done .plan-sprint-meta { color: var(--st-done); opacity: 0.85; }

.plan-task-wrap { border-radius: var(--border-radius-md); }
.agent-badge { border: 1px solid var(--color-border-secondary); border-radius: 999px; background: transparent; color: var(--color-text-tertiary); font: inherit; font-size: 10px; padding: 2px 7px; cursor: pointer; }
.agent-badge.ready { color: var(--st-done); border-color: var(--st-done); }
.agent-badge.leased { color: var(--st-active); border-color: var(--st-active); }
.agent-badge.incomplete, .agent-badge.paused { color: var(--st-blocked); border-color: var(--st-blocked); }
.agent-badge.unavailable { color: var(--st-blocked); border-color: var(--st-blocked); background: var(--st-blocked-bg); }
.agent-control-alert { margin: 0 0 12px; padding: 9px 11px; color: var(--st-blocked); background: var(--st-blocked-bg); border: 1px solid var(--st-blocked); border-radius: var(--border-radius-md); font-size: 11px; }
.plan-launch-btn:disabled { opacity: .45; cursor: not-allowed; }
.agent-form { margin: 6px 0 8px 20px; padding: 10px; display: grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap: 8px 12px; background: var(--surface-2); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); }
.agent-form-head, .agent-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.agent-form-head { justify-content: space-between; }
.agent-form label:not(.agent-check) { display: grid; gap: 3px; font-size: 10px; color: var(--color-text-tertiary); }
.agent-form input, .agent-form select, .agent-form button { border: 1px solid var(--color-border-secondary); border-radius: 5px; background: var(--color-background-primary); color: var(--color-text-primary); padding: 5px 7px; font: inherit; font-size: 11px; }
.agent-form-actions { justify-content: flex-end; flex-wrap: wrap; }
.agent-check { font-size: 11px; margin-right: auto; }
@media (max-width: 720px) { .agent-form { grid-template-columns: 1fr; margin-left: 0; } }