/* Trains: one page, five views of the same trains: Noses, Timeline and Speed (a line-up you can flick through), List (the table), and Gallery (one train
   per screen). Without scripting the page is the list. With scripting the view is held in html[data-view] (set before the first paint), so nothing flashes. */
.trains-heading{margin:clamp(1.75rem,4.5vw,3rem) 0 clamp(.9rem,2vw,1.25rem)}
.trains-heading h1{margin:0}

/* the view bar: the five names, a hairline, and an underline that follows the flick */
.trains-bar{display:none;position:sticky;top:0;z-index:6;align-items:flex-end;gap:1rem;background:var(--paper)}
html.trains-js .trains-bar{display:flex}
.trains-views{position:relative;flex:1 1 auto;min-width:0;display:flex;gap:clamp(1.15rem,3.2vw,2rem);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--rule)}
.trains-views::-webkit-scrollbar{display:none}
.trains-views button{flex:none;font:inherit;font-size:.9375rem;line-height:1.3;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:.78rem 0 .66rem;min-height:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color 140ms ease}
.trains-views button[aria-selected=true]{color:var(--ink)}
.trains-views button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:4px}
.overview-indicator{position:absolute;left:0;bottom:0;width:var(--ind-w,0);height:2px;transform:translateX(var(--ind-x,0));background:var(--accent);border-radius:2px 2px 0 0;pointer-events:none;will-change:transform,width}
.overview-indicator.is-gliding{transition:transform 240ms cubic-bezier(.3,.7,.2,1),width 240ms cubic-bezier(.3,.7,.2,1)}
.trains-progress{flex:none;font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);padding-bottom:.7rem;min-width:4.5em;text-align:end}
html:not([data-view=gallery]) .trains-progress{display:none}
@media(hover:hover) and (pointer:fine){.trains-views button:hover{color:var(--ink)}}
.trains-views button:active{color:var(--ink)}

/* the category pills */
.trains-filters{display:none;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 1rem}
html.trains-js .trains-filters{display:flex}
.trains-filters button{position:relative;font:inherit;font-size:.8125rem;white-space:nowrap;border:1px solid var(--rule);border-radius:999px;padding:.3rem .85rem;min-height:32px;line-height:1.3;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.trains-filters button[aria-pressed=true]{background:var(--panel);color:var(--ink);border-color:var(--muted)}
.trains-filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.trains-filters button:hover{background:var(--panel);border-color:var(--muted)}}
@media(max-width:700px){.trains-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-.1rem;padding:.1rem .1rem;overscroll-behavior-x:contain}.trains-filters::-webkit-scrollbar{display:none}}

/* the page's reading measure (70ch) is for prose; these panels use the full width */
main>section.trains-panel.trains-panel{max-width:none}

/* which panel shows */
html.trains-js .trains-panel{display:none}
html.trains-js:is([data-view=noses],[data-view=timeline],[data-view=speed]) .trains-grid{display:block}
html.trains-js[data-view=list] .trains-list{display:block}
html.trains-js[data-view=gallery] .trains-gallery{display:block}
.fleet-table[hidden]{display:none}

/* the line-up: every train's nose, large enough to tell the shapes apart; three arrangements side by side, flick or tap to move between them */
.trains-grid{padding-bottom:clamp(1.5rem,4vw,3rem)}
.overview-pager{display:flex;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.overview-pager::-webkit-scrollbar{display:none}
.overview-page{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding-block:.25rem}
.overview-page h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.overview-page ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.25rem),1fr));gap:clamp(1.25rem,3vw,1.9rem) clamp(.75rem,2vw,1.25rem)}
@media(max-width:520px){.overview-page ul{grid-template-columns:repeat(auto-fill,minmax(min(100%,8rem),1fr))}}
.overview-cell[hidden]{display:none}
.overview-cell a{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.overview-cell .nose{position:relative;display:block;aspect-ratio:2.4/1;overflow:hidden}
/* each drawing is scaled so the same window (nose, cab and first door; --crop of its width) fills the cell, whatever the width of the cell */
.overview-cell .nose img{position:absolute;left:0;bottom:0;display:block;width:calc(100% / var(--crop,.5));height:auto;max-width:none;transform-origin:0 100%;transition:transform 180ms cubic-bezier(.3,.7,.2,1)}
.overview-cell b{display:block;margin-top:.4rem;font-weight:600;font-size:.9375rem;line-height:1.3}
.overview-cell small{display:block;font-size:.8125rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.overview-cell a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.overview-cell a:hover .nose img{transform:scale(1.045)}.overview-cell a:hover b{color:var(--accent)}}
@media(prefers-reduced-motion:reduce){.overview-cell .nose img,.trains-views button{transition:none}.overview-indicator.is-gliding{transition:none}}
.overview-page[inert] ul{visibility:hidden}

/* the Gallery: one train per screen, on the page's own scroll (the header stays reachable above it). Snapping belongs to this view only; the line-up and
   the list scroll freely. */
.trains-gallery .gallery-stop{display:grid;align-content:center;gap:clamp(1rem,2vw,1.5rem);min-height:calc(100vh - var(--trains-bar,3.5rem));min-height:calc(100dvh - var(--trains-bar,3.5rem));padding-block:clamp(1.25rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.trains-gallery .gallery-stop[hidden]{display:none}
.gallery-caption{width:min(100%,60rem);min-width:0;margin-inline:auto}
.gallery-image>img{display:block;height:auto;max-height:16rem;object-fit:contain;object-position:center bottom}
.gallery-caption small{font-size:.8125rem;color:var(--muted)}
.gallery-caption h2{font-family:inherit;font-weight:600;font-size:clamp(1.5rem,3vw,2.75rem);line-height:1.2;letter-spacing:-.02em;margin:.25rem 0;overflow-wrap:anywhere}
.gallery-image{display:block;width:min(100%,60rem);margin-inline:auto;-webkit-tap-highlight-color:transparent}
.gallery-image:focus-visible,.gallery-caption h2 a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.gallery-image>img{width:100%}
.gallery-caption h2 a{text-decoration:none}
.gallery-caption h2 a::after{content:"\00a0\2192";display:inline-block;color:var(--muted);font-weight:400;transition:transform 160ms cubic-bezier(.3,.7,.2,1),color 160ms ease}
@media(hover:hover) and (pointer:fine){.gallery-caption h2 a:hover{color:var(--accent)}.gallery-caption h2 a:hover::after,.gallery-image:hover+.gallery-caption h2 a::after{color:var(--accent);transform:translateX(.25em)}}
@media(prefers-reduced-motion:reduce){.gallery-caption h2 a::after{transition:none}}
.gallery-caption p{font-size:1rem;line-height:1.6;max-width:62ch;margin:.5rem 0 0}
.gallery-caption .gallery-jp{font-size:.9375rem;color:var(--muted);line-height:1.5;margin:.25rem 0 .6rem;letter-spacing:0}
html:is(:lang(ja),:lang(zh),:lang(ko),:lang(th),:lang(ne),:lang(my)) .gallery-caption h2{line-height:1.4;letter-spacing:0}
html[data-view=gallery]{scroll-padding-top:var(--trains-bar,3.5rem)}
html[data-view=gallery].trains-snap{scroll-snap-type:y mandatory}
html[data-view=gallery].trains-snap .masthead{scroll-snap-align:start}
html[data-view=gallery].trains-snap .trains-gallery .gallery-stop{scroll-snap-align:start;scroll-snap-stop:normal}
@media(prefers-reduced-motion:reduce){html[data-view=gallery].trains-snap{scroll-snap-type:y proximity}}