/* Appendix F — vertical timeline rail.
   Styling only: the markdown inside .pl-timeline stays ordinary markdown, so
   entries are still edited as plain prose. Era headings (h2) get a filled node,
   individual entries (p) get a small hollow node, and the rail ends in an
   arrowhead. Colours come from mdBook theme variables so this works in light,
   rust, coal, navy, and ayu without per-theme overrides. */

.pl-timeline {
    position: relative;
    margin: 2rem 0 3rem;
    padding-left: 2.4rem;
}

/* the rail itself */
.pl-timeline::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.6rem;
    bottom: 0;
    width: 2px;
    background: currentColor;
    opacity: 0.25;
}

/* arrowhead: time keeps going */
.pl-timeline::after {
    content: "";
    position: absolute;
    left: calc(0.5rem - 4px);
    bottom: -0.65rem;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid currentColor;
    opacity: 0.25;
}

/* era headings — the major nodes */
.pl-timeline h2 {
    position: relative;
    margin-top: 2.6rem;
    border-bottom: none;
}

.pl-timeline h2::before {
    content: "";
    position: absolute;
    left: -2.02rem;
    top: 0.42em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--links);
    /* ring in page background so the node masks the rail behind it */
    box-shadow: 0 0 0 4px var(--bg);
}

/* individual entries — the minor nodes */
.pl-timeline p {
    position: relative;
}

.pl-timeline p::before {
    content: "";
    position: absolute;
    left: -1.83rem;
    top: 0.52em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid currentColor;
    opacity: 0.5;
    box-shadow: 0 0 0 3px var(--bg);
}

@media (max-width: 700px) {
    .pl-timeline {
        padding-left: 1.7rem;
    }

    .pl-timeline h2::before {
        left: -1.42rem;
    }

    .pl-timeline p::before {
        left: -1.23rem;
    }
}