/* fsq-stepper.css - step indicator and stepper rail (CMP-390 / 391). Adapted from the mERP UI library; provenance in the FSQ Brain (brain/ui/fsq_ui_registry.md). */

/* ---- CMP-390: step indicator (pills joined by connectors) ---- */
.fsq-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 0; margin-bottom: 20px; padding: 12px 0; }
.fsq-step { display: flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: .82rem; font-weight: 500; min-height: 44px; }
a.fsq-step:hover { background: var(--fsq-surface-hover); text-decoration: none; }
.fsq-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.fsq-step-pending .fsq-step-num { background: #e5e7eb; color: #4b5563; }
.fsq-step-pending .fsq-step-label { color: #5b6472; }
.fsq-step-active .fsq-step-num { background: var(--fsq-brand-fill); color: var(--fsq-on-brand); }
.fsq-step-active .fsq-step-label { color: var(--fsq-brand); font-weight: 600; }
.fsq-step-done .fsq-step-num { background: #d1fae5; color: #065f46; }
.fsq-step-done .fsq-step-label { color: #065f46; font-weight: 600; }
.fsq-step-connector { width: 40px; height: 2px; background: #e5e7eb; flex-shrink: 0; }
.fsq-step-connector-done { background: #10b981; }
[data-merp-theme="dark"] .fsq-step-pending .fsq-step-num { background: #374151; color: #cbd5e1; }
[data-merp-theme="dark"] .fsq-step-pending .fsq-step-label { color: #9ca3af; }
[data-merp-theme="dark"] .fsq-step-active .fsq-step-num { background: var(--fsq-brand-fill); color: var(--fsq-on-brand); }
[data-merp-theme="dark"] .fsq-step-active .fsq-step-label { color: var(--fsq-brand); }
[data-merp-theme="dark"] .fsq-step-done .fsq-step-num { background: #064e3b; color: #6ee7b7; }
[data-merp-theme="dark"] .fsq-step-done .fsq-step-label { color: #6ee7b7; }
[data-merp-theme="dark"] .fsq-step-connector { background: #374151; }
@media (max-width: 575px) {
  .fsq-step-connector { width: 14px; }
  .fsq-step { padding: 6px 8px; }
}

/* ---- CMP-391: stepper rail (numbered nodes on a line) ---- */
.fsq-rail-card {
  background: var(--fsq-surface); border: 1px solid var(--fsq-border); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--fsq-shadow); overflow-x: auto; position: relative;
}
.fsq-rail { display: flex; align-items: flex-start; gap: 0; min-width: 100%; }
.fsq-rail-node { flex: 1; min-width: 74px; display: flex; flex-direction: column; align-items: center; position: relative; text-decoration: none; color: inherit; padding: 4px 2px; }
.fsq-rail-node::before { content: ''; position: absolute; left: 0; right: 50%; top: 18px; height: 2px; background: #e5e7eb; }
.fsq-rail-node::after { content: ''; position: absolute; left: 50%; right: 0; top: 18px; height: 2px; background: #e5e7eb; }
.fsq-rail-node:first-child::before { display: none; }
.fsq-rail-node:last-child::after { display: none; }
.fsq-rail-node.done::before, .fsq-rail-node.current::before, .fsq-rail-node.done::after { background: #10b981; }
.fsq-rail-marker {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; background: #fff; border: 2px solid #9ca3af; color: #4b5563; margin: 3px 0 6px;
}
.fsq-rail-node.done .fsq-rail-marker { background: #10b981; border-color: #10b981; color: #fff; }
.fsq-rail-node.current .fsq-rail-marker { background: var(--fsq-brand-fill); border-color: var(--fsq-brand-fill); color: var(--fsq-on-brand); box-shadow: 0 0 0 4px rgba(var(--fsq-brand-fill-rgb), .15); }
.fsq-rail-label { font-size: .72rem; color: #4b5563; text-align: center; line-height: 1.15; min-height: 2.1em; overflow-wrap: anywhere; }
.fsq-rail-node.done .fsq-rail-label, .fsq-rail-node.current .fsq-rail-label { color: var(--fsq-text); font-weight: 600; }
.fsq-rail-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-merp-theme="dark"] .fsq-rail-marker { background: #1a1d23; border-color: #6b7280; color: #cbd5e1; }
[data-merp-theme="dark"] .fsq-rail-node::before, [data-merp-theme="dark"] .fsq-rail-node::after { background: #374151; }
[data-merp-theme="dark"] .fsq-rail-node.done::before, [data-merp-theme="dark"] .fsq-rail-node.current::before, [data-merp-theme="dark"] .fsq-rail-node.done::after { background: #10b981; }
[data-merp-theme="dark"] .fsq-rail-node.done .fsq-rail-marker { background: #10b981; border-color: #10b981; color: #052e1b; }
[data-merp-theme="dark"] .fsq-rail-node.current .fsq-rail-marker { background: var(--fsq-brand-fill); border-color: var(--fsq-selected-border); color: var(--fsq-on-brand); }
[data-merp-theme="dark"] .fsq-rail-label { color: #9ca3af; }
[data-merp-theme="dark"] .fsq-rail-node.done .fsq-rail-label, [data-merp-theme="dark"] .fsq-rail-node.current .fsq-rail-label { color: #e4e6ea; }