/* Scroll-led number-line examples. The page remains a normal document: the
   generous scene height supplies the scroll distance and JavaScript pins the
   inner panel within that space. No wheel or touch input is intercepted. */

.ordering-example { margin: 28px 0 8px; }
.ordering-example > h3 { margin: 0 0 14px; color: #09539d; font-size: 1.25rem; }
.ordering-example__steps { margin: 20px 0 0; }

.ordering-scene {
    position: relative;
    overflow-anchor: none;
}

.ordering-scene.is-ready { height: var(--scene-height); min-height: var(--scene-min-height); }

.ordering-scene__sticky {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    height: min(590px, calc(100vh - 112px));
    min-height: 430px;
    box-sizing: border-box;
    grid-template-rows: minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 2px solid #c8d9e7;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8fc 100%);
    box-shadow: 0 12px 30px rgba(20, 57, 78, .14);
    contain: layout paint;
    overflow-anchor: none;
    will-change: transform;
}

.ordering-scene__sticky.is-pinned {
    position: fixed;
    right: auto;
    z-index: 900;
    transform-origin: top left;
}

.ordering-scene__graphic { display: block; width: 100%; height: 100%; min-height: 0; }

.ordering-scene__caption {
    display: flex;
    height: 3.6em;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 28px 10px;
    align-items: center;
    justify-content: center;
    color: #243a45;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.ordering-scene__progress {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0 22px 17px;
}

.ordering-scene__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c6d4dc;
    transition: width .25s ease, border-radius .25s ease, background-color .25s ease;
}

.ordering-scene__dot.is-current { width: 28px; border-radius: 999px; background: #116e93; }
.ordering-scene__dot.is-past { background: #6c9bb0; }
.ordering-scene__script { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ordering-axis { stroke: #344c58; stroke-width: 4; stroke-linecap: round; }
.ordering-tick { stroke: #78909b; stroke-width: 2; }
.ordering-tick--zero { stroke: #344c58; stroke-width: 3; }
.ordering-tick-label { fill: #405660; font-size: 15px; text-anchor: middle; }
.ordering-token__stem {
    fill: none;
    stroke: #3568b8;
    stroke-width: 2.5;
    stroke-linecap: round;
}
.ordering-token__card { fill: #fff; stroke: #3568b8; stroke-width: 2; }
.ordering-token__text { fill: #183b70; font-size: 18px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }

.ordering-direction { fill: none; stroke: #b86821; stroke-width: 5; stroke-linecap: round; }
.ordering-direction__head { fill: #b86821; }

@media (max-width: 700px) {
    .ordering-scene__sticky {
        height: min(590px, calc(100vh - 150px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ordering-scene.is-ready { height: auto; min-height: 0; }
    .ordering-scene__sticky { position: relative; height: 540px; transform: none !important; }
    .ordering-scene__dot { transition: none; }
}