/* Shared world-class interaction template for forms, quizzes, approvals, Profile and People. */
:root {
  --flow-space-1: 4px;
  --flow-space-2: 8px;
  --flow-space-3: 12px;
  --flow-space-4: 16px;
  --flow-space-5: 20px;
  --flow-radius: 8px;
  --flow-radius-sm: 6px;
  --flow-title: 18px;
  --flow-body: 14px;
  --flow-meta: 12px;
  --flow-row-min: 56px;
  --flow-control-min: 44px;
  --flow-primary: var(--accent, #086EA6);
  --flow-surface: var(--surface, #FBFDFE);
  --flow-soft: var(--accent-soft, #ECF4F9);
  --flow-ink: var(--ink, #152A3A);
  --flow-muted: var(--muted, #5A6975);
  --flow-line: var(--line, #D8E8F2);
}

.eagle-flow-card {
  padding: var(--flow-space-3) var(--flow-space-4);
  border-radius: var(--flow-radius);
  background: var(--flow-soft);
  color: var(--flow-ink);
}

.eagle-flow-soft-card {
  padding: var(--flow-space-3) var(--flow-space-4);
  border-radius: var(--flow-radius);
  border: 1px solid var(--flow-line);
  background: var(--flow-surface);
}

.eagle-flow-empty {
  display: grid;
  gap: var(--flow-space-2);
  place-items: center;
  text-align: center;
  padding: var(--flow-space-5) var(--flow-space-4);
  border: 1px solid var(--flow-line);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  color: var(--flow-muted);
  font-size: var(--flow-body);
}

.eagle-flow-empty strong {
  color: var(--flow-ink);
  font-size: var(--flow-body);
}

.eagle-flow-step {
  display: grid;
  gap: var(--flow-space-2);
  padding: var(--flow-space-2) 0 var(--flow-space-3);
}

.eagle-flow-step-meta {
  font-size: var(--flow-meta);
  color: var(--flow-muted);
}

.eagle-flow-step progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  appearance: none;
  accent-color: var(--flow-primary);
}

.eagle-flow-step progress::-webkit-progress-bar { background: var(--flow-line); border-radius: 3px; }
.eagle-flow-step progress::-webkit-progress-value { background: var(--flow-primary); border-radius: 3px; }
.eagle-flow-step progress::-moz-progress-bar { background: var(--flow-primary); }

.eagle-flow-row {
  display: grid;
  gap: 4px;
  min-height: var(--flow-row-min);
  padding: var(--flow-space-2) 0;
  border-bottom: 1px solid var(--flow-line);
  color: var(--flow-ink);
  text-align: left;
}

.eagle-flow-row strong { font-size: 15px; line-height: 1.35; }
.eagle-flow-row span { font-size: var(--flow-meta); color: var(--flow-muted); }

.eagle-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flow-space-2);
  align-items: center;
  padding-top: var(--flow-space-3);
  border-top: 1px solid var(--flow-line);
}

.eagle-flow-primary {
  min-height: var(--flow-control-min);
  padding: 10px 14px;
  border: 0;
  border-radius: var(--flow-radius-sm);
  background: var(--flow-primary);
  color: var(--theme-on-primary, #fff);
  font: inherit;
  font-weight: 600;
}

.eagle-flow-secondary {
  min-height: var(--flow-control-min);
  padding: 8px 12px;
  border: 1px solid var(--flow-line);
  border-radius: var(--flow-radius-sm);
  background: transparent;
  color: var(--flow-muted);
  font: inherit;
  font-size: 13px;
}

.eagle-flow-success {
  padding: 8px 10px;
  border-inline-start: 3px solid var(--flow-primary);
  background: var(--flow-soft);
  color: var(--flow-ink);
  font-size: var(--flow-body);
}

.eagle-flow-error {
  padding: 8px 10px;
  border-inline-start: 3px solid var(--flow-primary);
  color: var(--flow-ink);
  font-size: var(--flow-body);
}