/* tls-rail.css - the surface rail: the second row of chrome that only the
   deep-dive pages carry.

   The problem it solves: click "The Website" out of a lander's switchboard and
   you land on a 7,600px page whose only route onward is the footer Explore
   column at the very bottom, and whose toolbar marks nothing as current, so
   nothing on screen even tells you which vertical you are inside. Every one of
   the 25 surface pages had that shape.

   The rail names the vertical, links back to its lander, and lists that
   vertical's other surfaces with the current one marked. It sticks directly
   under the toolbar, whose measured height tls-rail.js publishes as --tlnav-h.

   Same contract as tls-topbar.css and tls-footer.css: every colour reads from a
   --tlrail-* property declared HERE, because each world defines its own --ink /
   --muted / --hairline with different meanings. The five theme blocks mirror
   the toolbar's palette for the same world on purpose; if one moves, move both.

   z-index sits BELOW the toolbar's 100 so the mega-menu (.meganav, absolutely
   positioned inside .nav at z-99) and the mobile menu still drop over the rail
   rather than behind it. */

.tl-rail{
  position: sticky;
  top: var(--tlnav-h, 76px);
  z-index: 90;
  background: var(--tlrail-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tlrail-hairline);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tlrail-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.tl-rail-in{
  display: flex; align-items: stretch; gap: 12px;
  width: min(1180px, 91vw); margin-inline: auto;
  min-height: 46px;
}

/* the way back to the vertical's own front page */
.tl-rail-home{
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  color: var(--tlrail-ink); text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  padding: 0 12px 0 8px; margin-left: -8px;
  border-radius: 7px;
  transition: background 180ms var(--tlrail-ease), color 180ms var(--tlrail-ease);
}
.tl-rail-home:hover{ background: var(--tlrail-hover-fill); color: var(--tlrail-accent); }
.tl-rail-home svg{ width: 13px; height: 13px; flex: none; color: var(--tlrail-accent); }

.tl-rail-div{
  flex: none; width: 1px; margin: 11px 2px;
  background: var(--tlrail-hairline);
}

/* the siblings. A scroller rather than a wrap: the rail must stay one row tall
   because it is sticky, and a second row would eat the page on a phone. */
.tl-rail-links{
  display: flex; align-items: stretch; gap: 2px;
  min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.tl-rail-links::-webkit-scrollbar{ display: none; }

.tl-rail-links a{
  display: inline-flex; align-items: center; flex: none;
  color: var(--tlrail-link); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  padding: 0 11px;
  border-bottom: 2px solid transparent;
  scroll-snap-align: center;
  transition: color 160ms var(--tlrail-ease), border-color 160ms var(--tlrail-ease);
}
.tl-rail-links a:hover{ color: var(--tlrail-ink); }
.tl-rail-links a.is-current{
  color: var(--tlrail-ink); font-weight: 700;
  border-bottom-color: var(--tlrail-accent);
}

/* the scroller's edges fade so a cut-off label reads as "there is more here" */
.tl-rail-scroll{ position: relative; min-width: 0; flex: 1 1 auto; display: flex; }
.tl-rail-scroll::before,
.tl-rail-scroll::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 26px;
  pointer-events: none; opacity: 0; transition: opacity 200ms var(--tlrail-ease);
}
.tl-rail-scroll::before{ left: 0; background: linear-gradient(90deg, var(--tlrail-bg-solid), transparent); }
.tl-rail-scroll::after{ right: 0; background: linear-gradient(270deg, var(--tlrail-bg-solid), transparent); }
.tl-rail-scroll.can-left::before,
.tl-rail-scroll.can-right::after{ opacity: 1; }

.tl-rail a:focus-visible{
  outline: 2px solid var(--tlrail-accent); outline-offset: -3px; border-radius: 5px;
}

/* The vertical's name stays on a phone: an unlabelled back arrow next to a row
   of surface names does not tell you where it goes. The sibling list is a
   scroller, so it is the part that gives up the room. */
@media (max-width: 640px){
  .tl-rail-in{ width: auto; padding-inline: 16px; gap: 8px; min-height: 44px; }
  .tl-rail-home{ font-size: 12.5px; padding: 0 9px 0 6px; }
  .tl-rail-links a{ padding: 0 9px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce){
  .tl-rail *, .tl-rail{ transition: none !important; }
}

/* ---------- Themes. Mirrors of the toolbar skin for the same world. ---------- */

.tl-rail--dark{
  --tlrail-bg: rgba(18,19,23,0.90);
  --tlrail-bg-solid: #121317;
  --tlrail-ink: #F4F2EC;
  --tlrail-link: #B7BAC2;
  --tlrail-hairline: rgba(255,255,255,0.09);
  --tlrail-hover-fill: rgba(255,255,255,0.06);
  --tlrail-accent: #FF7A1E;
}
.tl-rail--tile{
  --tlrail-bg: rgba(242,244,245,0.92);
  --tlrail-bg-solid: #F2F4F5;
  --tlrail-ink: #16202B;
  --tlrail-link: #55636F;
  --tlrail-hairline: rgba(22,32,43,0.12);
  --tlrail-hover-fill: rgba(122,43,47,0.08);
  --tlrail-accent: #7A2B2F;
}
.tl-rail--cream{
  --tlrail-bg: rgba(249,242,233,0.92);
  --tlrail-bg-solid: #F9F2E9;
  --tlrail-ink: #3B2F28;
  --tlrail-link: #6B5A4E;
  --tlrail-hairline: rgba(59,47,40,0.12);
  --tlrail-hover-fill: rgba(185,138,78,0.10);
  --tlrail-accent: #B98A4E;
}
.tl-rail--parchment{
  --tlrail-bg: rgba(244,239,230,0.92);
  --tlrail-bg-solid: #F4EFE6;
  --tlrail-ink: #14110F;
  --tlrail-link: #55524B;
  --tlrail-hairline: rgba(20,17,15,0.12);
  --tlrail-hover-fill: rgba(179,33,39,0.07);
  --tlrail-accent: #B32127;
}
.tl-rail--blueprint{
  --tlrail-bg: rgba(18,41,63,0.90);
  --tlrail-bg-solid: #12293F;
  --tlrail-ink: #EAF2F8;
  --tlrail-link: #A9C0D4;
  --tlrail-hairline: rgba(234,242,248,0.11);
  --tlrail-hover-fill: rgba(111,179,224,0.10);
  --tlrail-accent: #FFC64B;
}