/* ============================================================================
   settlement-trail.css
   ----------------------------------------------------------------------------
   The step trail on the settlements admin page. Loaded AFTER offering.css,
   which this file does not modify. One new class family - op-settletrail.
   ============================================================================ */
.op-settletrail {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    border-left: 2px solid var(--op-border, #E2E8F0);
    margin-left: .5rem;
}

.op-settletrail li {
    position: relative;
    padding: .5rem 0 .5rem 1.5rem;
    color: var(--op-muted, #64748B);
    font-size: .95rem;
}

/* Marker centred on the 2px rule: -7px puts a 12px dot's centre one pixel left
   of the padding edge, which is where the border's centre sits. */
.op-settletrail li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: .75rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--op-bg, #fff);
    border: 2px solid var(--op-border, #E2E8F0);
    box-sizing: border-box;
}

/* Filled rather than merely recoloured, so a completed step is distinguishable
   at a glance and not by colour alone. */
.op-settletrail li.is-done {
    color: var(--op-text, #1E293B);
}

.op-settletrail li.is-done::before {
    background: #16A34A;
    border-color: #16A34A;
}

/* Timestamp and reference are supporting detail, not the step itself. */
.op-settletrail li span {
    margin-left: .5rem;
    font-size: .85rem;
    opacity: .8;
}

.op-settletrail li em {
    margin-left: .5rem;
    font-family: ui-monospace, monospace;
    font-size: .8rem;
    font-style: normal;
    opacity: .7;
}