/* ============================================================
   Start Project — "The Path" (wraps, never alters, the locked
   #projectForm)
   Steward: S9 Engineering   Page: start-project.html
   Sprint 7 signature experience. Additive, scoped IIFE + this
   sheet, deletable unit. Does not touch main.js, theme.js, or
   any other namespace. Does not restyle .contact-form/.form-group/
   .form-success/.btn — those keep their existing, locked
   presentation untouched; this sheet only styles the new path
   structure wrapped around them.

   This turn's directive: the Path must feel inevitable, not
   animated, not guided, not assisted — simply obvious. Every
   node's text is fully legible from first paint (nothing is
   revealed or hidden). The one dynamic element is the spine: a
   plain vertical line that quietly lengthens as required fields
   are filled. No counters, no checkmarks, no congratulation, no
   colour-of-success. Motion is a direct, unanimated reflection of
   state, not a performance.
   ============================================================ */

/* --- Fit line --- */
.cmn-fit {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- The path --- */
.cmn-path-section {
    padding-top: 56px;
}

.cmn-path {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* The spine: a plain vertical line behind the node markers.
   --cmn-fill is set by commission.js from the required-field
   ratio; the gradient stop is a direct state readout, not a
   transitioned/eased animation. */
.cmn-path::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    bottom: 14px;
    width: 1.5px;
    background: linear-gradient(to bottom,
            var(--text-primary) 0%,
            var(--text-primary) var(--cmn-fill, 12%),
            var(--border-hairline, var(--border)) var(--cmn-fill, 12%),
            var(--border-hairline, var(--border)) 100%);
}

.cmn-node {
    position: relative;
    display: flex;
    gap: 20px;
    padding: 0 0 36px 0;
}

.cmn-node:last-child {
    padding-bottom: 0;
}

.cmn-node-marker {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-hairline, var(--border));
    z-index: 1;
}

.cmn-node-you .cmn-node-marker {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.cmn-node-body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.cmn-node-owner {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.cmn-node-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cmn-node-desc {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.cmn-node-detail {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: 4px;
    padding: 2px 8px;
}

/* Node 1 holds the locked form; give it breathing room from its
   own label without touching .contact-form's own presentation. */
.cmn-node-you .cmn-node-title {
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .cmn-node {
        gap: 14px;
        padding-bottom: 28px;
    }

    .cmn-path::before {
        left: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmn-path::before {
        transition: none;
    }
}