/* ---------- cs-timeline --------------------------------------------------
   A long run of numbered chapters shown as a timeline you can walk through.
   assets/js/cs-timeline.js wraps the chapters that follow an
   <h2 data-cs-timeline>: a rail of numbered stops goes in the heading column
   and stays in view, the chapter beside it swaps as you move, and "See all"
   lays every chapter out again with the rail following the scroll.

   Base state is the page as written (h3, copy, mock, h3, ...), so no-JS
   readers lose nothing and these rules only ever meet the enhanced markup. */

.main > .cs-timeline {
    --tl-dot: 24px;
    --tl-row: 8px;
    --tl-quiet: color-mix(in srgb, var(--frgd) 22%, transparent);
    clear: both;
    display: grid;
    grid-template-columns:
        calc(var(--heading-col) - var(--gap) / 2)
        calc(var(--content-col) - var(--gap) / 2);
    column-gap: var(--gap);
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    margin: var(--space-6) 0 0;
    text-align: left;
}

/* style.css gives every `article button` the soft-button skin unless its class
   prefix is on the exclusion list there. These are rows and cards, so the
   button itself is flattened to a bare hit area and everything visible sits
   on the span inside it, where the ordinary cascade applies. */
.cs-timeline button[class^="cs-timeline"] {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    outline: none !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: normal !important;
    text-align: inherit !important;
}
.cs-timeline button[class^="cs-timeline"]::before {
    content: none !important;
}
.cs-timeline button[class^="cs-timeline"]:focus-visible > span {
    outline: 2px solid var(--frgd);
    outline-offset: 3px;
}

/* --- the rail ------------------------------------------------------------ */
.cs-timeline__rail {
    position: sticky;
    top: var(--space-5);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
    padding-top: 16px;
    text-align: right;
}

.main .cs-timeline__stops {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main .cs-timeline__item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

/* Each stop draws the stretch of line down to the next one, so the line is
   always as long as the rows are tall and fills in as the stages pass. */
.cs-timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(var(--tl-dot) / 2 - 1px);
    top: calc(var(--tl-row) + var(--tl-dot) + 3px);
    bottom: calc(-1 * var(--tl-row) + 3px);
    width: 2px;
    border-radius: 1px;
    background: var(--tl-quiet);
    transition: background-color 240ms ease;
}
.cs-timeline__item.is-done:not(:last-child)::after {
    background: var(--frgd);
}

.cs-timeline__stopIn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tl-dot);
    column-gap: 12px;
    justify-items: end;
    padding: var(--tl-row) 0;
    border-radius: 6px;
    cursor: pointer;
}

.cs-timeline__dot {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--tl-dot);
    height: var(--tl-dot);
    border: 1.5px solid var(--frgd);
    border-radius: 50%;
    /* Stops still ahead rest in soft yellow: the ones left to press. */
    background: var(--yellow-soft, #fcf7a7);
    color: var(--frgd);
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    line-height: 1;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.cs-timeline__label {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    line-height: var(--tl-dot);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--frgd) 65%, transparent);
    transition: color 200ms ease;
}

/* The stage's one-line takeaway opens under the stop you are on. */
.cs-timeline__line {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: 0fr;
    max-width: 24ch;
    font-family: var(--font-text);
    font-size: var(--text-functional);
    line-height: 1.4;
    color: color-mix(in srgb, var(--frgd) 75%, transparent);
    opacity: 0;
    transition: grid-template-rows 280ms ease, opacity 200ms ease;
}
.cs-timeline__line > span {
    min-height: 0;
    overflow: hidden;
}

.cs-timeline__item.is-done .cs-timeline__dot {
    background: var(--frgd);
    color: var(--bkgd);
}
/* The stop you are on wears the primary-button yellow, not the case accent,
   so the rail reads as a control and not as part of the figures beside it. */
.cs-timeline__item.is-active .cs-timeline__dot {
    background: var(--yellow-strong, #ffd02f);
    box-shadow: 2px 2px 0 var(--frgd);
    transform: translate(-1px, -1px);
}
.cs-timeline__item.is-active .cs-timeline__label {
    color: var(--frgd);
}
.cs-timeline__item.is-active .cs-timeline__line {
    grid-template-rows: 1fr;
    padding-bottom: 6px;
    opacity: 1;
}
.cs-timeline__stop:hover .cs-timeline__label {
    color: var(--frgd);
}
.cs-timeline__item:not(.is-active) .cs-timeline__stop:hover .cs-timeline__dot {
    background: var(--yellow-strong, #ffd02f);
    color: var(--frgd);
}

/* On a phone the stops lose their labels, so the current one is spelled out
   in a line under the row instead. */
.main .cs-timeline__now {
    display: none;
    margin: 0;
}

.cs-timeline__modeIn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1.5px solid var(--frgd);
    border-radius: 99px;
    background: var(--yellow-soft, #fcf7a7);
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.cs-timeline__mode:hover .cs-timeline__modeIn {
    background: var(--yellow-strong, #ffd02f);
}
.cs-timeline__modeIn svg {
    flex: none;
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* --- the stage ----------------------------------------------------------- */
.cs-timeline__stages {
    min-width: 0;
}

/* The page's column rules are written for direct children of .main; inside a
   stage the column is the stage itself. */
.cs-timeline__stage > :is(p, ol, ul, h3, .cs-cards, .ax-mock) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: var(--space-5) 0;
}
.cs-timeline__stage > :is(p, ol, ul, h3) {
    display: flow-root;
}
/* .main hangs list markers in the gutter, which is where the rail's line
   runs, so here they sit inside the column. */
.cs-timeline__stage > :is(ol, ul) {
    padding-left: 32px;
    list-style-position: outside;
}
.cs-timeline__stage > .cs-cards {
    display: grid;
}
.cs-timeline__stage > .ax-mock {
    margin: 1.5rem 0 2rem;
}
/* The global h3 pulls itself up 8px with !important. */
.cs-timeline .cs-timeline__stage > h3 {
    margin: 0 0 calc(0.75rem * var(--ds-space-scale)) !important;
    padding: 1.25rem 0 var(--space-3);
    border-top: 1.5px solid var(--frgd);
    font-size: calc(clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem) * var(--ds-font-scale));
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: left;
}
.cs-timeline__stage > h3:focus {
    outline: none;
}
.cs-timeline__stage > h3 + ul {
    margin-top: 0 !important;
}
.cs-timeline[data-mode="all"] .cs-timeline__stage + .cs-timeline__stage > h3 {
    margin-top: 3.5rem !important;
}

/* A stage arrives as a whole, so the page's own scroll-in fade on figures
   and cards would run a second, slower entrance on top of it. */
.cs-timeline__stage .section-appear {
    opacity: 1;
    transform: none;
    transition: none;
}

.cs-timeline__stage.is-entering > * {
    animation: cs-timeline-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cs-timeline__stage.is-entering > :nth-child(2) { animation-delay: 40ms; }
.cs-timeline__stage.is-entering > :nth-child(3) { animation-delay: 80ms; }
.cs-timeline__stage.is-entering > :nth-child(n+4) { animation-delay: 120ms; }
.cs-timeline[data-dir="back"] .cs-timeline__stage.is-entering > * {
    animation-name: cs-timeline-in-back;
}
@keyframes cs-timeline-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes cs-timeline-in-back {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
}

/* The run of stages ends at the first element marked `hidden`. .main > p sets
   a display of its own, which would bring a hidden paragraph back to life
   right under the timeline. */
.main > .cs-timeline + [hidden],
.main > .cs-timeline + [hidden] + [hidden] {
    display: none;
}

/* --- the way on ----------------------------------------------------------
   Two arrows and a count. The arrow ahead rests in the same soft yellow as
   the stops still to come. */
.cs-timeline__pager {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: var(--space-6) 0 0;
}
.cs-timeline[data-mode="all"] .cs-timeline__pager {
    display: none;
}
.cs-timeline .cs-timeline__pager > button {
    flex: none;
    width: auto !important;
}

.cs-timeline__goIn,
.cs-timeline__backIn {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--frgd);
    border-radius: 8px;
    background: var(--bkgd);
    box-shadow: 2px 2px 0 var(--shadow);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.cs-timeline__goIn {
    background: var(--yellow-soft, #fcf7a7);
}
.cs-timeline__count {
    min-width: 5ch;
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    letter-spacing: 0.04em;
    text-align: center;
    color: color-mix(in srgb, var(--frgd) 65%, transparent);
}
.cs-timeline__pager svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: var(--frgd);
}
:is(.cs-timeline__go, .cs-timeline__back):not(:disabled):hover > span {
    background: var(--yellow-strong, #ffd02f);
    box-shadow: 3px 4px 0 var(--frgd);
    transform: translate(-1px, -1px);
}
:is(.cs-timeline__go, .cs-timeline__back):not(:disabled):active > span {
    box-shadow: 0 0 0 var(--frgd);
    transform: translate(1px, 1px);
}
.cs-timeline__back:disabled > span {
    box-shadow: none;
    opacity: 0.3;
    cursor: default;
}

/* --- one column: the rail lies down above the stage ---------------------- */
@media only screen and (max-width: 768px) {
    .main > .cs-timeline {
        display: block;
        margin-top: var(--space-5);
    }

    .cs-timeline__rail {
        top: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        align-items: center;
        margin-bottom: var(--space-5);
        padding: 8px 10px 10px;
        border: 1.5px solid var(--frgd);
        border-radius: 8px;
        background: var(--bkgd);
        box-shadow: 2px 2px 0 var(--shadow);
        text-align: left;
    }

    .main .cs-timeline__stops {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .main .cs-timeline__item {
        flex: 1 1 0;
        min-width: 0;
    }
    .cs-timeline__item:not(:last-child)::after {
        top: calc(50% - 1px);
        bottom: auto;
        left: calc(50% + var(--tl-dot) / 2 + 3px);
        right: calc(-50% + var(--tl-dot) / 2 + 3px);
        width: auto;
        height: 2px;
    }
    .cs-timeline__stopIn {
        display: grid;
        grid-template-columns: auto;
        justify-items: center;
        padding: 10px 0;
    }
    .cs-timeline__dot {
        grid-column: 1;
    }
    .cs-timeline__label,
    .cs-timeline__line {
        display: none;
    }

    .main .cs-timeline__now {
        display: block;
        min-width: 0;
        font-family: var(--font-text);
        font-size: var(--text-functional);
        line-height: 1.4;
        color: color-mix(in srgb, var(--frgd) 75%, transparent);
        text-align: left;
    }
    .cs-timeline__now b {
        font-family: var(--font-meta);
        font-size: var(--text-functional-sm);
        font-weight: 400;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--frgd);
    }

    .cs-timeline__stage > :is(ol, ul) {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-timeline__stage.is-entering > * {
        animation-name: none;
    }
    .cs-timeline__dot,
    .cs-timeline__line,
    .cs-timeline__goIn,
    .cs-timeline__backIn {
        transition: none;
    }
    .cs-timeline__item.is-active .cs-timeline__dot,
    :is(.cs-timeline__go, .cs-timeline__back):is(:hover, :active) > span {
        transform: none;
    }
}

/* Paper has no stops to press: every stage, in order, no controls. */
@media print {
    .main > .cs-timeline {
        display: block;
    }
    .cs-timeline__rail,
    .cs-timeline__pager {
        display: none;
    }
    .cs-timeline__stage[hidden] {
        display: block !important;
        content-visibility: visible !important;
    }
}