/* ==========================================================================
   Milestone checklist — shared/components/milestone_checklist.html
   --------------------------------------------------------------------------
   The current stage's step rows and their Complete / Skip / Reopen / Send /
   No-show actions. Used on the booking Pipeline tab (and its HTMX swap).

   Lived in a <style> block inside the partial until the phone pass: an inline
   block cannot be reached by the page's phone media query, so the rows and
   buttons could not grow to a thumb-sized target. Everything here is on tokens.

   Prefix: pipelines-  (the checklist is the pipelines app's component).
   ========================================================================== */

.pipelines-milestone-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pipelines-milestone-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-smd);
    padding: var(--spacing-smd) var(--spacing-md);
    min-height: var(--control-h-touch);
    border-bottom: 1px solid var(--color-border);
}

.pipelines-milestone-row:last-child {
    border-bottom: none;
}

/* Brief highlight when the blocked list jumps you to a step in the checklist. */
.pipelines-milestone-row:target {
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

/* The status circle is the canonical .global-status-dot atom; only its optical
   alignment with the first line of the name is local. */
.pipelines-milestone-row__dot {
    margin-top: var(--spacing-2xs);
}

.pipelines-milestone-row__body {
    flex: 1;
    min-width: 0;
}

.pipelines-milestone-row__name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Done reads as the check dot plus a quieter name. The row itself keeps full
   opacity: its Reopen button and detail line are still live and still read. */
.pipelines-milestone-row--done .pipelines-milestone-row__name {
    color: var(--color-text-secondary);
}

.pipelines-milestone-row--skipped .pipelines-milestone-row__name {
    text-decoration: line-through;
    text-decoration-color: var(--color-text-muted);
}

.pipelines-milestone-row__detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-2xs);
}

.pipelines-milestone-row__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    flex-shrink: 0;
    margin-top: var(--spacing-2xs);
}

.pipelines-milestone-action {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-smd);
    white-space: nowrap;
}

/* Shared status legend — the system words every surface uses. Renders once, at
   the top of the current stage's list. */
.pipelines-milestone-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-md);
    padding: var(--spacing-smd) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.pipelines-milestone-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
}

.pipelines-milestone-legend__note {
    margin-left: auto;
    font-weight: var(--font-weight-medium);
}

/* Phone: the legend is desktop chrome (the dot colours still read on the rows);
   the step's actions drop under its text as one row of equal, thumb-sized
   buttons so a coordinator can Complete or Skip from the job site. */
@media (max-width: 767.98px) {
    .pipelines-milestone-legend {
        display: none;
    }

    .pipelines-milestone-row {
        flex-wrap: wrap;
    }

    .pipelines-milestone-row__actions {
        width: 100%;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-sm);
    }

    .pipelines-milestone-row__actions .global-badge {
        align-self: center;
        justify-self: start;
    }

    .pipelines-milestone-action {
        min-height: var(--control-h-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-md);
    }
}