/* =========================================================
   first-steps.css — v1.0.0
   «ابدأ من هنا / Start here» on the dashboard + short captions under the
   Sample Data / Walkthrough Scenario / Empty buttons (Audit Manager only).
   Built by app-bridge.js (section 9). Loaded on index.html only. Hidden in print.
   ========================================================= */
.fs-guide {
  margin: var(--space-3, 12px) 0;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--surface);
}
.fs-guide-title { margin: 0 0 var(--space-2, 8px); font-weight: 700; }
.fs-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fs-steps li { display: inline-flex; align-items: center; gap: 6px; }
.fs-step {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-xs, 14px);
}
.fs-step:hover, .fs-step:focus-visible { background: var(--surface-hover); }
.fs-arrow { color: var(--text-secondary); }

/* A demo button with its caption underneath */
.fs-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.fs-caption {
  margin: 0;
  font-size: var(--text-xs, 14px);
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
}
.fs-caption { max-width: 16rem; }
/* Arabic over English, no separator: the caption stays as narrow as its button */
.fs-caption .bi-inline { flex-direction: column; align-items: center; gap: 0; }
.fs-caption .bi-sep { display: none; }
.fs-caption.fs-warn { color: var(--danger-text, #991b1b); }

@media print {
  .fs-guide, .fs-caption { display: none !important; }
}