/* Atlas IQ-side additions (round 3). Night theme, glow used sparingly, motion = transform/opacity only. */

/* ============ HERO: "Rail Reservations." ============ */
/* Two lines on phones (Rail / Reservations.), one line from 880px. */
.ha-stage { --hs: 18.4vw; }
.ha-cardwrap { margin-top: calc(var(--hs) * -.1); }
@media (min-width: 880px) {
  .ha-stage { --hs: min(12.6vw, 12.6rem); }
  .ha-cardwrap { margin-top: calc(var(--hs) * -.16); }
}

/* ============ shared heads for the two new sections ============ */
.r2v-head, .tla-head { padding-top: clamp(8px, 1.6vw, 22px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 36px; }
.r2v-head .huge-atlas { font-size: 30vw; }
.tla-head .huge-atlas { font-size: 21vw; }
.tla-head .ln { display: block; }
.r2v-lede, .tla-lede { max-width: 40ch; }
.r2v-lede .tiny, .tla-lede .tiny { color: var(--night-muted); }
@media (min-width: 880px) {
  .r2v-head, .tla-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 6vw, 96px); margin-bottom: 56px; }
  .r2v-head .huge-atlas { font-size: clamp(8rem, 1rem + 15vw, 18rem); }
  .tla-head .huge-atlas { font-size: clamp(7rem, 1rem + 12.5vw, 15rem); }
  .r2v-lede, .tla-lede { padding-bottom: 1.4vw; }
}

/* ============ RESERVATIONS FEED VELO ============ */
.r2v-stage { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1080px; }
.r2v-pane { min-width: 0; border-radius: var(--radius-lg); padding: 16px 16px 12px; }
.r2v-atlas { background: var(--night-surface); border: 1px solid var(--night-line); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(95,184,159,.05); }
.r2v-top { display: flex; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--night-line); font-size: 11.5px; color: var(--night-muted); }
.r2v-top b { color: var(--glow); font-weight: 500; margin-right: 8px; }
.r2v-l { display: grid; grid-template-columns: 22px 66px minmax(0, 1fr); gap: 0 8px; margin: 0; padding: 7px 0; font: 400 11.5px/1.5 var(--font-mono); color: var(--night-text); }
.r2v-l .n { color: #7d786f; }
.r2v-l .v { color: var(--night-muted); letter-spacing: .04em; }
.r2v-l .v.c { color: var(--glow); opacity: .85; }
.r2v-l .v.g { color: var(--glow); font-weight: 500; }
.r2v-hot .t { font-weight: 500; }
.r2v-hot.r2v-l:last-child { margin-top: 2px; border-top: 1px solid var(--night-line); padding-top: 11px; }

/* connector: vertical on phones, horizontal on desktop */
.r2v-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; }
.r2v-link .kicker { color: var(--glow); text-align: center; }
.r2v-link i { position: relative; width: 0; height: 28px; border-left: 1px dashed var(--glow); }
.r2v-link i:last-child::before { content: ""; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 12px 1px var(--glow); opacity: 0; }

/* Velo order pane: Velo is DAY, so this one stays paper-coloured inside the night section */
.r2v-velo { background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding: 18px 18px 16px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(95,184,159,.18), 0 0 60px -20px rgba(95,184,159,.35); }
.r2v-vtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.r2v-vtop .mark-velo { width: 64px; color: var(--ink); }
.r2v-ord { font-size: 12px; letter-spacing: .04em; color: var(--ink); background: var(--inset); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.r2v-route { margin: 12px 0 8px; font-size: 13px; color: var(--ink-muted); }
.r2v-dl { margin: 0; }
.r2v-dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); }
.r2v-dl dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.r2v-dl dd { margin: 0; font-size: 13.5px; min-width: 0; }
.r2v-swap { display: grid; }
.r2v-swap > * { grid-area: 1 / 1; justify-self: start; align-self: center; }
.r2v-res { font-size: 14px; font-weight: 500; letter-spacing: .03em; color: var(--ok-ink); background: var(--accent-soft); border-radius: 6px; padding: 3px 9px; }
.r2v-res.r2v-was { color: var(--ink-muted); background: transparent; padding-left: 0; font-weight: 400; }
.r2v-velo .chip { background: var(--panel); white-space: nowrap; }
.r2v-velo .chip-ok { background: var(--accent-soft); color: var(--ok-ink); }
.r2v-velo .chip-warn { background: var(--warn-soft); color: var(--warn-ink); }
.r2v-was { opacity: 0; }
.r2v-seen { color: var(--ink); }
.r2v-prov { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .04em; color: var(--ok-ink); }
.r2v-prov .mark-quill { width: 7px; color: var(--accent); }

@media (min-width: 880px) {
  .r2v-stage { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; }
  .r2v-pane { padding: 22px 24px 18px; }
  .r2v-velo { padding: 24px 26px 20px; }
  .r2v-l { grid-template-columns: 26px 78px minmax(0, 1fr); font-size: 12.5px; }
  .r2v-link { flex-direction: column; justify-content: center; padding: 0 10px; gap: 10px; }
  .r2v-link i:first-child { display: none; }
  .r2v-link i:last-child { width: 100%; height: 0; border-left: 0; border-top: 1px dashed var(--glow); }
  .r2v-link i:last-child::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4px solid transparent; border-left: 6px solid var(--glow); border-right: 0; }
  .r2v-link i:last-child::before { left: 0; top: -4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .r2v-stage:not(.go) .r2v-l { opacity: 0; transform: translateY(6px); }
  .r2v-l { transition: opacity 380ms var(--ease) calc(var(--i, 0) * 420ms), transform 380ms var(--ease) calc(var(--i, 0) * 420ms); }
  .js .r2v-stage:not(.go) .r2v-now { opacity: 0; }
  .js .r2v-stage:not(.go) .r2v-was { opacity: 1; }
  .r2v-now, .r2v-was { transition: opacity 450ms var(--ease) 2300ms; }
  .js .r2v-stage:not(.go) .r2v-seen, .js .r2v-stage:not(.go) .r2v-prov { opacity: 0; transform: translateY(6px); }
  .r2v-seen { transition: opacity 450ms var(--ease) 2700ms, transform 450ms var(--ease) 2700ms; }
  .r2v-prov { transition: opacity 450ms var(--ease) 3000ms, transform 450ms var(--ease) 3000ms; }
  .r2v-stage.go .r2v-link i:last-child::before { animation: r2vY 2.6s var(--ease) 1.9s infinite; }
  @keyframes r2vY { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 880px) {
  .r2v-stage.go .r2v-link i:last-child::before { animation-name: r2vX; }
  @keyframes r2vX { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(124px); } }
}
@media (prefers-reduced-motion: reduce) {
  .r2v-link i:last-child::before { opacity: 1; left: -4px; }
  @media (min-width: 880px) { .r2v-link i:last-child::before { left: 50%; } }
}

/* ============ TRUCKLOAD AGENTS ============ */
.tla-grid { display: grid; gap: 12px; }
.tla-card { padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tla-card .kicker { color: var(--glow); }
.tla-card .strong { margin: 0; }
.lg { margin-top: 14px; padding: 12px 14px 8px; border: 1px solid var(--night-line); border-radius: 12px; background: var(--night-raised); }
.lg-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--night-line); font-size: 11.5px; color: var(--night-muted); }
.lg-top b { color: var(--glow); font-weight: 500; margin-right: 8px; }
.lg-l { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 0 8px; margin: 0; padding: 6px 0; font: 400 11.5px/1.5 var(--font-mono); color: var(--night-text); }
.lg-l .n { color: #7d786f; }
.lg-l .v { color: var(--night-muted); letter-spacing: .04em; }
.lg-l .v.c { color: var(--glow); opacity: .85; }
.lg-l .v.g { color: var(--glow); font-weight: 500; }
.lg-last { margin-top: 4px; border-top: 1px solid var(--night-line); padding-top: 9px; color: var(--night-muted); }
@media (min-width: 880px) {
  .tla-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tla-card { padding: 28px; }
  .lg { padding: 14px 18px 10px; }
  .lg-l { grid-template-columns: 26px 70px minmax(0, 1fr); font-size: 12.5px; }
}

/* ============ WHERE: browser control / instant messaging / any TMS ============ */
.wc-pts { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 7px; }
.wc-pts li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: var(--night-muted); }
.wc-pts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--glow); }

/* mini browser window */
.bw { border: 1px solid var(--night-line); border-radius: 12px; overflow: hidden; background: var(--night-raised); }
.bw-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #0f0e0d; border-bottom: 1px solid var(--night-line); }
.bw-dots { display: inline-flex; gap: 5px; }
.bw-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--night-line); }
.bw-url { flex: 1; min-width: 0; padding: 4px 12px; border: 1px solid var(--night-line); border-radius: 999px; background: var(--night); font-size: 11.5px; line-height: 1.4; color: var(--night-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-body { position: relative; padding: 14px 14px 16px; }
.bw-chip { margin-bottom: 12px; }
.bw-chip .dot { box-shadow: 0 0 8px var(--glow); }
.bw-title { margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); }
.bw-fields { position: relative; }
.bw-f { display: grid; grid-template-rows: 14px 30px; gap: 2px; height: 54px; padding-bottom: 8px; box-sizing: content-box; }
.bw-k { font-size: 10.5px; line-height: 14px; color: var(--night-muted); }
.bw-v { display: block; height: 30px; padding: 0 10px; border: 1px solid var(--night-line); border-radius: 6px; background: var(--night); font-size: 12px; line-height: 28px; color: var(--night-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-go { margin-top: 2px; }
.bw-cur { position: absolute; left: 58%; top: 26px; width: 15px; height: 19px; pointer-events: none; transform: translate(-40px, 216px); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.fake-ghost { background: transparent; color: var(--night-text); box-shadow: inset 0 0 0 1px var(--night-line); }

@media (prefers-reduced-motion: no-preference) {
  .bw-cur { animation: bwcur 10s var(--ease) infinite; }
  .bw-f:nth-child(1) .bw-v { animation: bwf0 10s linear infinite; }
  .bw-f:nth-child(2) .bw-v { animation: bwf1 10s linear infinite; }
  .bw-f:nth-child(3) .bw-v { animation: bwf2 10s linear infinite; }
  .bw-f:nth-child(4) .bw-v { animation: bwf3 10s linear infinite; }
  .bw-chip .dot { animation: bwpulse 1.6s ease-in-out infinite; }
  @keyframes bwcur {
    0% { transform: translate(70px, -30px); opacity: 0; }
    6% { opacity: 1; }
    12%, 24% { transform: translate(0, 0); }
    32%, 44% { transform: translate(0, 54px); }
    52%, 62% { transform: translate(0, 108px); }
    70%, 78% { transform: translate(0, 162px); }
    88%, 94% { transform: translate(-40px, 216px); opacity: 1; }
    100% { transform: translate(-40px, 216px); opacity: 0; }
  }
  @keyframes bwf0 { 0%, 14% { opacity: 0; } 18%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes bwf1 { 0%, 34% { opacity: 0; } 38%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes bwf2 { 0%, 54% { opacity: 0; } 58%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes bwf3 { 0%, 72% { opacity: 0; } 76%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes bwpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* instant messaging: chat + peeking approval card */
.wc-im { padding-bottom: 0; overflow: hidden; }
.wc-im > .im-note { margin-top: 0; }
.wc-im .chat { flex: 1; }
.wc-im .bub { font-size: 13px; }
.peek { margin: 4px 0 -12px; padding: 14px 14px 26px; border: 1px solid rgba(95,184,159,.45); border-bottom: 0; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, rgba(95,184,159,.12), var(--night-raised) 70%); box-shadow: 0 -14px 40px -14px rgba(95,184,159,.4); display: grid; gap: 4px; }
.peek .kicker { color: var(--glow); }
.peek-t { margin: 0; font: 700 14px/1.35 var(--font-body); }
.peek-d { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--night-muted); }
.peek-b { display: flex; gap: 8px; margin-top: 8px; }
.peek-b .fake-btn { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .peek { transition: transform 800ms var(--ease) 500ms; }
  .js .wc-im.reveal:not(.in) .peek { transform: translateY(75%); }
}

/* standalone card: any TMS line */
.wc-foot { margin-top: auto; display: grid; gap: 8px; }
.wc-foot .tiny { color: var(--night-muted); }
.wc-foot .any-tms { color: var(--glow); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .peek { transform: none; }
  .bw-cur { animation: none; }
}

/* ============ TRUCKLOAD: positioning line under "Not only rail." ============ */
.tla-lede .tla-orig { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--night-text); }

/* ============ NAV: six links fit between 761px and ~1000px ============ */
@media (min-width: 761px) and (max-width: 1000px) {
  .site-nav .wrap { gap: 10px; }
  .site-nav .links { gap: 0; font-size: 13px; }
  .site-nav .links a { padding-inline: 6px; margin-inline: 0; }
  .site-nav .actions { gap: 6px; }
  .site-nav .actions .btn { padding-inline: 12px; }
}