/* Side-scroll rails (see scroll-rail.js). */
.rail{position:relative;min-width:0}
.rail-scroll{scroll-behavior:auto}
/* edge fades: only on the side that has more to see */
.rail.rail-on .rail-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 52px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 52px),transparent 100%)}
.rail.rail-on.at-start .rail-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 52px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 52px),transparent 100%)}
.rail.rail-on.at-end .rail-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 100%)}
.rail.rail-on.at-start.at-end .rail-scroll{-webkit-mask-image:none;mask-image:none}
/* arrow buttons */
.rail-btn{position:absolute;top:50%;z-index:2;width:30px;height:30px;margin-top:-15px;display:none;align-items:center;justify-content:center;padding:0;border:1px solid var(--rule,#D7DADD);border-radius:50%;background:#fff;color:var(--navy,#0D1B2A);box-shadow:0 2px 8px rgba(13,27,42,.14);cursor:pointer;transition:opacity .2s,transform .2s}
.rail-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rail-prev{left:0}.rail-prev svg{transform:rotate(180deg)}
.rail-next{right:0}
.rail.rail-on .rail-btn{display:inline-flex}
.rail.at-start .rail-prev,.rail.at-end .rail-next{opacity:0;pointer-events:none}
.rail-dark .rail-btn{background:var(--navy,#0D1B2A);border-color:rgba(212,175,55,.6);color:var(--gold,#D4AF37);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.rail-btn:focus-visible{outline:2px solid var(--gold,#D4AF37);outline-offset:2px}
/* scene scroller: arrows sit level with the buildings, not the padding */
.pst .rail-btn{top:42%}
/* the one-time peek also nudges the arrow */
.rail-nudge .rail-next{animation:railNudge .55s ease-in-out 2}
@keyframes railNudge{50%{transform:translateX(4px)}}

/* tab rows on phones: text tabs with a sliding gold indicator instead of boxed cells */
@media (max-width:900px){
  .s .tabs.rail-tabs{position:relative;gap:4px;border-bottom:1px solid var(--rule)}
  .s .tabs.rail-tabs button{border:0;background:none;color:var(--slate);font-weight:600;padding:0 14px;min-height:50px;transition:color .2s}
  .s .tabs.rail-tabs{padding:0 6px}
  .s .tabs.rail-tabs button:hover{background:none;color:var(--navy)}
  .s .tabs.rail-tabs button[aria-selected="true"]{background:none;color:var(--navy)}
  .rail-ind{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--gold);pointer-events:none;transition:left .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .s .cre .tabs button{border-right:0}
}
@media (min-width:901px){.rail-ind{display:none}}
@media (prefers-reduced-motion:reduce){.rail-ind,.rail-btn{transition:none}.rail-nudge .rail-next{animation:none}}