/* The VA console. One sheet, and nothing in it is used anywhere else.
   Layout only: the cards, pills, chips and buttons are the shared ones. */

/* ---- The activate screen ---- */

.va-hero .card-body { padding: 22px 24px 24px; }
.va-hero h3 { margin: 0 0 6px; font-size: 20px; }
.va-hero p { max-width: 62ch; margin: 0 0 18px; }

.va-launch { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.va-launch-opts { display: flex; flex-direction: column; gap: 10px; }
.va-opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.va-opt-row .chips { margin: 0; }

/* The one button this screen exists for, so it is allowed to be bigger than
   every other button in the CRM. */
.btn.va-go {
  font-size: 16px; padding: 14px 22px; border-radius: var(--radius);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn.va-go svg { width: 18px; height: 18px; }

.va-plan-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.va-plan-row:last-child { border-bottom: 0; }
.va-plan-row.empty { opacity: .5; }
.va-plan-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--bg); color: var(--muted);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ---- The run ---- */

.va-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
}
.va-bar-main { display: flex; flex-direction: column; min-width: 180px; flex: 1 1 220px; }
.va-bar-main b { white-space: nowrap; }
.va-bar-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.va-progress {
  flex: 1 1 120px; min-width: 80px; height: 6px; border-radius: 3px;
  background: var(--border); overflow: hidden;
}
.va-progress span { display: block; height: 100%; background: var(--blue); }

.va-item .card-head h3 { margin: 0; }
.va-said {
  background: var(--bg); border-left: 3px solid var(--blue);
  padding: 10px 12px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 12px; white-space: pre-wrap;
}
.va-done-panel { text-align: center; padding: 40px 24px; }
.va-done-panel h3 { margin: 0 0 8px; }
.va-done-panel p { margin: 0 0 18px; }

/* ---- Settings ---- */

.va-tasks { display: flex; flex-direction: column; gap: 8px; }
.va-task {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.va-task.off { opacity: .55; }
.va-task.dragging { opacity: .4; }
.va-task.over { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.va-grip { color: var(--muted); cursor: grab; padding-top: 2px; }
.va-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  background: var(--bg); color: var(--muted);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.va-tick { padding-top: 2px; }
.va-task-main { flex: 1; min-width: 0; }
.va-why { font-style: italic; margin-top: 2px; }
.va-opts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.va-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.va-opt input { width: 72px; padding: 4px 6px; }
.va-move { display: flex; flex-direction: column; gap: 2px; }

/* What to do about this row, when the step has more to offer than "open it".
   Sits with the Open button rather than beside Done and Skip, because these
   are ways of working the row, not ways of leaving it. */
.va-hint { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--border); }