/* =========================================================================
   The tracking timeline on narrow screens.

   On a desktop each entry's date sits in a gutter to the left of the card,
   pulled out of it by a negative percentage — -21% of the card's width, and
   -54% then -65% at two breakpoints below that.

   A percentage of a box that is itself shrinking does not track a gutter of
   a fixed 130px, so where the two happened to disagree the date ran off the
   left of the screen: at 390px wide it started at -9 and "27 Jul 2024" was
   cut. The three offsets are three guesses at the same sum.

   So on a phone the gutter goes. The date and its icon come back into the
   flow as a line above the entry they belong to, which is also what gives
   the card the full width instead of the 236px it was down to.
   ========================================================================= */

@media (max-width: 767px) {

    /* The rail the dates were pinned beside. */
    .timeline::before {
        display: none;
    }

    .timeline li {
        padding-left: 0;
    }

    .timeline-items {
        padding: 16px;
    }

    /* Back in the flow. left goes with it: left on a static box is ignored,
       but it is the declaration the breakpoints below 500px are still
       setting, and leaving it standing invites the next reader to trust it. */
    .new-icon-process {
        position: static;
        left: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    /* The icon was placed against the card at a fixed 42px/56px, which put it
       under the date in the gutter. Beside it now. */
    .new-icon-process i {
        position: static;
        left: auto;
        top: auto;
        flex: 0 0 auto;
        height: 32px;
        width: 32px;
        line-height: 29px;
        font-size: 14px;
    }

    /* The date is one string and reads as one; there is no good place to
       break "27 Jul 2024". */
    .timeline span {
        margin: 0;
        padding: 6px 14px;
        white-space: nowrap;
        font-size: 14px;
    }

    /* Each entry is its own block now, so the rule between them matters
       more than it did. */
    .timeline-repeat + .timeline-repeat {
        margin-top: 18px;
        padding-top: 18px;
    }

    .timeline-items p,
    .timeline-repeat > b {
        font-size: 15px;
    }
}