/* Route spine: the numbered stop list with its hand-ruled connecting line,
 * a filled disc to open, rings to carry, and a pennant to finish.
 *
 * Shared by the region page's On The Ground route cards and the wine routes
 * index. It lived in page/region-detail-editorial.css until the routes index
 * needed the same list; moved here rather than reimplemented, because the
 * pennant offset maths below is not worth getting wrong twice.
 *
 * Pairs with the sprite in common/route-icon-sprite.php.
 */

/* The duration badge that opens a route card. Filled primary with the road
   mark, so a card is read as a route before the name is read at all. Moved
   here from page/region-detail-editorial.css when the routes index adopted
   it: the two surfaces now share one definition. */
.region-route__day {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 18px;
}
/* The badge sits at 15px, under the 22px floor for the full-detail marks, so
   it takes the -sm cut (docs/specs/2026-08-04-region-route-icon-system.md). */
.region-route__day-mark {
    flex: none;
}

.region-route__steps {
    --rt-num-col: 15px;
    --rt-node-col: 22px;
    --rt-line: 20px;
    --rt-row-pad: 9px;
    /* Mirrors the finish marker size the view emits. */
    --rt-end-size: 19px;
    /* How far the pennant stands left of the spine, so the line no longer runs
       down the pole and hides it. */
    --rt-end-shift: 4px;
    /* Distance from the last node's centre up to the top of the pennant post:
       half the line box, less the marker's centring offset in it, less the
       post's own inset (y=5.2 of the 32 viewBox). The spine stops there, so it
       hands off to the flag instead of crossing it. */
    --rt-end-lift: calc(
        var(--rt-line) / 2
        - (var(--rt-line) - var(--rt-end-size)) / 2
        - var(--rt-end-size) * 5.2 / 32
    );
    list-style: none;
    padding: 18px 0 0;
    margin: 0;
    border-top: 1px dashed var(--color-outline-variant);
    counter-reset: region-route-step;
}
.region-route__step {
    counter-increment: region-route-step;
    position: relative;
    display: grid;
    grid-template-columns: var(--rt-num-col) var(--rt-node-col) minmax(0, 1fr);
    align-items: start;
    padding: var(--rt-row-pad) 0;
}
/* The number stays CSS-generated: the <ol> already carries the sequence for
   assistive tech, and now that the spine does the sequencing work visually it
   drops from a 26px numbered disc to a quiet label. */
.region-route__step::before {
    content: counter(region-route-step);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--rt-line);
    padding-right: 5px;
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-primary-400);
    font-variant-numeric: tabular-nums;
}
.region-route__step-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--rt-line);
    color: var(--color-primary);
    /* Inherited into the <use> shadow tree: the shapes that must punch through
       the spine carry no fill of their own and take the card's own surface. */
    fill: var(--color-surface-container-lowest);
}
.region-route__step-name {
    padding-left: 4px;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: var(--rt-line);
    color: var(--color-on-surface);
    overflow-wrap: anywhere;
}
.region-route__step-spine {
    position: absolute;
    left: var(--rt-num-col);
    width: var(--rt-node-col);
    top: calc(var(--rt-row-pad) + var(--rt-line) / 2);
    height: 100%;
    color: var(--color-primary);
    opacity: 0.42;
    pointer-events: none;
}
.region-route__step-spine svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* The pennant is the one marker the spine must not touch: pole and spine are
   both vertical strokes in the same colour, so drawn on the same centre line
   they read as one line with a flag stuck to it. The marker steps left and the
   last segment stops at the top of the pole. */
.region-route__step-node--end svg {
    transform: translateX(calc(var(--rt-end-shift) * -1));
}
.region-route__step:nth-last-child(2) .region-route__step-spine {
    height: calc(100% - var(--rt-end-lift));
}

/* The stop name tightens on narrow screens. Moved with the rest of the
   spine so the responsive step is not left behind in the page stylesheet. */
@media (max-width: 767px) {
    .region-route__step-name { font-size: 0.95rem; }
}