/* #2465 — ONE numbered-step component, shared by every configuration surface.
   Jeff, 2026-09-07 16:30 [14:27]: "I like the fact that there are numbers like one, two,
   three ... that's something we should continue to replicate across our entire UI."
   Jamie, ~23:10: "some of the stuff about restructure is good so 1, 2, 3, etc."

   The look is #2421's, deliberately: that ticket settled what a numbered step looks like
   on this product (a 34px filled circle at 1rem, a 1rem label beside it, a real bounding
   box around the area, nothing in small caps). Those values live in data-browser.css for
   the browser modal's own grid; this file is the general form of the same thing, for a
   column of steps rather than a row of panes. Keeping the numbers here means a page can
   adopt the convention with markup alone — no per-page styling, which is what the
   acceptance asks for.

   Markup:
     <div class="stepboxes">
       <section class="stepbox">
         <div class="stepbox-head">
           <span class="stepbox-n">1</span>
           <span class="stepbox-title">Choose the system<span class="stepbox-sub">…</span></span>
         </div>
         <div class="stepbox-body"> … existing controls, ids unchanged … </div>
       </section>
       …
     </div>

   A step that cannot be done yet gets a `.stepbox-lock` line saying what unlocks it. Where
   the page already toggles `d-none` on the content, the lock hides itself off that same
   class (`.stepbox-body:not(.d-none) + .stepbox-lock`) so nothing new has to be remembered
   in script. */

.stepboxes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stepbox {
    background: #fff;
    border: 1px solid #d7dde5;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.stepbox-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e9ecef;
    background: #fcfdfe;
}

.stepbox-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

/* #2475 — the same badge on a DENSE surface. The Orchestrator's step inspector is a
   narrow panel whose own section headings are 0.66rem, and a 34px circle in there is not
   the convention at a different size, it is a different thing. Same shape, same fill,
   sized for the panel — and declared HERE rather than in the workbench sheet, so there is
   still exactly one step badge in the product. */
.stepbox-n.is-compact {
    width: 20px;
    height: 20px;
    font-size: 0.68rem;
}

.stepbox-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.25;
    min-width: 0;
}

/* The one-line "what this step is for". Second line of the heading, not a tooltip: a
   person who needs the sentence is exactly the person who will not hover to find it. */
.stepbox-sub {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

.stepbox-body {
    padding: 14px;
}

/* The last step is the one that commits, so it reads as the button's own box. */
.stepbox-final .stepbox-head {
    border-bottom: none;
}

.stepbox-final .stepbox-body {
    padding-top: 0;
}

/* A numbered HEADING, for a page whose sections already carry a box of their own. Same
   badge, same order, no second card around the card. */
.stepbox-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

/* Not yet available — say what unlocks it rather than showing a dead control. */
.stepbox-lock {
    padding: 14px;
    font-size: 0.82rem;
    color: #6c757d;
}

.stepbox-body:not(.d-none) + .stepbox-lock {
    display: none;
}

.stepbox.is-locked .stepbox-n {
    background: #adb5bd;
}

@media (max-width: 575.98px) {
    .stepbox-n {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}