/* ═══════════════════════════════════════════════════════════════════════════
   flow-guide.css — the setup bar (#2410)

   A Dynamics business-process-flow chevron strip above the workbench. Jeff Loucks,
   2026-09-07 16:30 [41:38]: "The business process bar across the top." [43:20] "I
   want a process flow type thing like lead, opportunity, quote, invoice."

   Its own sheet rather than a block inside flow-workbench.css: three surfaces load
   it (the portal Orchestrator, /try and the Template Generator) and only two of
   those load the workbench. It draws entirely from flow-workbench.css's tokens on
   the workbench pages; the Template Generator does not load that sheet, so the four
   values it needs are restated in the .tg-guide scope at the bottom.

   IT NEVER BLOCKS THE CANVAS. 34px of strip at rest; an expanded stage adds a panel
   that pushes nothing off screen because the workbench below is a flex child. The
   whole thing collapses to one 26px chip and is remembered.
   ═══════════════════════════════════════════════════════════════════════════ */

.flow-guide {
    flex: 0 0 auto;
    margin: 0 0 10px;
    background: var(--flow-surface, #fff);
    border: 1px solid var(--flow-line, #e4e8ee);
    border-radius: var(--flow-radius, 12px);
    box-shadow: var(--flow-card-shadow, 0 1px 2px rgba(16, 24, 40, .06));
    overflow: hidden;
}

.flow-guide[hidden] { display: none; }

.flow-guide-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 34px;
}

.is-collapsed .flow-guide-strip { display: none; }

/* ── The chevrons ─────────────────────────────────────────────────────────── */

.flow-guide-stages {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.flow-guide-stage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--flow-muted, #667085);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1;
    padding: 0 18px 0 20px;
    position: relative;
    cursor: pointer;
    transition: background var(--flow-ease, 160ms), color var(--flow-ease, 160ms);
}

/* The chevron notch. A clip-path is what makes this read as a Dynamics BPF rather
   than a row of tabs, and it costs one property per state instead of the two
   pseudo-element triangles the same shape used to take. */
.flow-guide-stage:not(:first-child) {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
    margin-left: -8px;
}

.flow-guide-stage:first-child {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.flow-guide-stage:hover { background: var(--flow-surface-sunken, #f7f9fb); }

.flow-guide-stage.is-open {
    background: var(--flow-accent-soft, #e7effa);
    color: var(--flow-accent-ink, #123a5e);
}

.flow-guide-stage[data-status="current"] {
    background: var(--flow-accent, #1e4d7b);
    color: #fff;
    font-weight: 600;
}

.flow-guide-stage[data-status="current"]:hover { background: var(--flow-accent-ink, #123a5e); }

.flow-guide-stage[data-status="done"] { color: var(--flow-text, #101828); }
.flow-guide-stage[data-status="na"],
.flow-guide-stage[data-status="locked"] { opacity: .65; }

/* The tick / number / lock in front of the name. */
.flow-guide-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: .62rem;
    font-weight: 700;
    border: 1px solid currentColor;
}

.flow-guide-stage[data-status="done"] .flow-guide-mark {
    background: var(--flow-success, #12b76a);
    border-color: var(--flow-success, #12b76a);
    color: #fff;
}

.flow-guide-stage[data-status="current"] .flow-guide-mark {
    background: #fff;
    border-color: #fff;
    color: var(--flow-accent, #1e4d7b);
}

/* #2477 — a stage with nothing to do KEEPS ITS NUMBER and says so with a dashed ring
   rather than by losing the number. A missing number reads as a missing step; a stage
   number must mean the same thing tomorrow as it does today, whatever the account has
   done since. The row's own sentence carries the "nothing to do yet". */
.flow-guide-stage[data-status="na"] .flow-guide-mark,
.flow-guide-step[data-status="na"] .flow-guide-step-n {
    border-style: dashed;
}

.flow-guide-step[data-status="na"] .flow-guide-step-name {
    color: var(--flow-muted, #667085);
}

.flow-guide-name { white-space: nowrap; }

/* "2/3" on Build while a card is selected: how much of THAT box is done. */
.flow-guide-substep {
    font-size: .66rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(16, 24, 40, .08);
}

.flow-guide-stage[data-status="current"] .flow-guide-substep {
    background: rgba(255, 255, 255, .24);
}

/* ── Collapse / restore ───────────────────────────────────────────────────── */

.flow-guide-toggle,
.flow-guide-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid var(--flow-line-soft, #eef1f5);
    background: transparent;
    color: var(--flow-muted, #667085);
    font-size: .74rem;
    padding: 0 10px;
    cursor: pointer;
}

.flow-guide-toggle:hover,
.flow-guide-chip:hover { background: var(--flow-surface-sunken, #f7f9fb); }

.flow-guide-chip {
    display: none;
    width: 100%;
    border-left: 0;
    min-height: 26px;
    justify-content: flex-start;
}

.is-collapsed .flow-guide-chip { display: inline-flex; }

/* ── The expanded stage ───────────────────────────────────────────────────── */

.flow-guide-panel {
    border-top: 1px solid var(--flow-line-soft, #eef1f5);
    background: var(--flow-surface-sunken, #f7f9fb);
    padding: 8px 12px 10px;
}

.flow-guide-panel[hidden] { display: none; }

.flow-guide-panel-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.flow-guide-panel-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--flow-text, #101828);
}

.flow-guide-panel-note {
    font-size: .74rem;
    color: var(--flow-muted, #667085);
}

.flow-guide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flow-guide-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
    max-width: 24rem;
    border: 1px solid var(--flow-line, #e4e8ee);
    border-radius: var(--flow-radius-sm, 8px);
    background: #fff;
    padding: 5px 10px;
    cursor: pointer;
    transition: border-color var(--flow-ease, 160ms), box-shadow var(--flow-ease, 160ms);
}

.flow-guide-action:hover:not(:disabled) {
    border-color: var(--flow-accent, #1e4d7b);
    box-shadow: var(--flow-card-shadow-hover, 0 4px 12px rgba(16, 24, 40, .12));
}

.flow-guide-action:disabled { opacity: .55; cursor: not-allowed; }

.flow-guide-action-label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--flow-accent-ink, #123a5e);
}

.flow-guide-action-hint {
    font-size: .7rem;
    line-height: 1.3;
    color: var(--flow-muted, #667085);
}

/* ── The selected card's own 1 - 2 - 3 ────────────────────────────────────── */

.flow-guide-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.flow-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex: 1 1 15rem;
    min-width: 13rem;
    border: 1px solid var(--flow-line, #e4e8ee);
    border-radius: var(--flow-radius-sm, 8px);
    background: #fff;
    padding: 6px 9px;
}

.flow-guide-step[data-status="current"] {
    border-color: var(--flow-accent, #1e4d7b);
    box-shadow: 0 0 0 3px rgba(var(--flow-accent-rgb, 30, 77, 123), .12);
}

.flow-guide-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 50%;
    font-size: .64rem;
    font-weight: 700;
    background: var(--flow-surface-sunken, #f7f9fb);
    border: 1px solid var(--flow-line, #e4e8ee);
    color: var(--flow-muted, #667085);
}

.flow-guide-step[data-status="done"] .flow-guide-step-n {
    background: var(--flow-success, #12b76a);
    border-color: var(--flow-success, #12b76a);
    color: #fff;
}

.flow-guide-step[data-status="current"] .flow-guide-step-n {
    background: var(--flow-accent, #1e4d7b);
    border-color: var(--flow-accent, #1e4d7b);
    color: #fff;
}

.flow-guide-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.flow-guide-step-name {
    font-size: .74rem;
    font-weight: 700;
    color: var(--flow-text, #101828);
}

.flow-guide-step-note {
    font-size: .7rem;
    line-height: 1.3;
    color: var(--flow-muted, #667085);
}

.flow-guide-actions.is-inline { margin-top: 3px; }
.flow-guide-actions.is-inline .flow-guide-action { padding: 3px 8px; }
.flow-guide-actions.is-inline .flow-guide-action-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
    .flow-guide-stage,
    .flow-guide-action { transition: none; }
}

/* ── #2414: which way the chevrons point ──────────────────────────────────────
   Jamie, 2026-09-08: "i want to see that flow thig jeff talked about acrossthe top
   right to left though". Jeff, on the tape [37:16]: "it's gonna be sort of a
   left-to-right flow"; [38:10] "a left-to-right flow that shows up at the top" — and
   the Dynamics business-process-flow he named as the model reads left to right. LTR
   ships, and the whole flip is `data-flow-direction="rtl"` on the .flow-guide element
   (FlowGuide writes the resolved value back on boot, so the markup and the module
   cannot disagree). See #2497.

   Nothing else moves: stage 1 stays the first DOM child and the first tab stop, the
   collapsed chip stays top-left, and the numbering is unchanged. Only the row order
   and the notch that draws the arrow are mirrored. */
.flow-guide[data-flow-direction="rtl"] .flow-guide-stages {
    flex-direction: row-reverse;
}

/* Mirrored: the notch is cut out of the RIGHT edge and the point is on the LEFT, so
   the arrow reads toward the stage that comes next — which, reversed, is leftward. */
.flow-guide[data-flow-direction="rtl"] .flow-guide-stage:not(:first-child) {
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 10px 100%, 0 50%);
    margin-left: 0;
    margin-right: -8px;
    padding: 0 20px 0 18px;
}

/* Stage one is the rightmost cell: flat on its right edge, pointed on its left. */
.flow-guide[data-flow-direction="rtl"] .flow-guide-stage:first-child {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    margin-left: 0;
    margin-right: 0;
    padding: 0 20px 0 18px;
}

/* ── The Template Generator's copy ────────────────────────────────────────── */

/* That page does not load flow-workbench.css, so the tokens the rules above read
   are declared here for its scope only. Same values, read from flow-workbench.css
   rather than invented, so the two bars are the same bar. */
.tg-guide {
    --flow-surface: #fff;
    --flow-surface-sunken: #f7f9fb;
    --flow-line: #e4e8ee;
    --flow-line-soft: #eef1f5;
    --flow-accent: #1e4d7b;
    --flow-accent-rgb: 30, 77, 123;
    --flow-accent-soft: #e7effa;
    --flow-accent-ink: #123a5e;
    --flow-muted: #667085;
    --flow-text: #101828;
    --flow-success: #12b76a;
    --flow-radius: 12px;
    --flow-radius-sm: 8px;
    --flow-ease: 160ms cubic-bezier(.2, .8, .2, 1);
    --flow-card-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --flow-card-shadow-hover: 0 4px 12px rgba(16, 24, 40, .12);
}