/* =====================================================================
   Shared styles. Backgrounds are transparent on purpose — set the navy
   on the WPBakery ROW. Every size is a variable so a block in a
   different context can be re-scaled without touching this file.
   ===================================================================== */
.rt-scope {
  --rt-navy: #1b1f5e;
  --rt-navy-deep: #14173f;
  --rt-paper: #f5f2ec;
  --rt-stroke: #8a8a94;
  --rt-red: #e03a2f;
  /* Was 0.21 — nudged up so the dashes hold on a phone. Tune here. */
  --rt-upcoming-line: rgba(127, 74, 74, 0.34);
  --rt-text: #f5f2ec;
  --rt-muted: #99a1cc;
  --rt-muted-dim: #7d86b4;

  --rt-font: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --rt-weight: 600;
  --rt-weight-heavy: 700;
  --rt-label-size: 18px;
  --rt-num-size: 31px;
  --rt-stat-size: 27px;
  --rt-list-size: 15px;
  --rt-tip-size: 18px;
  --rt-tip-max: 440px;
  --rt-map-pad: 18px;
  --rt-list-bg: #181c55;
  --rt-list-height: 620px;
  --rt-now-size: 40px;

  font-family: var(--rt-font);
  font-weight: var(--rt-weight);
  line-height: 1.3;
  color: var(--rt-text);
  box-sizing: border-box;
}
.rt-scope *, .rt-scope *::before, .rt-scope *::after { box-sizing: border-box; }
.rt-scope, .rt-scope b, .rt-scope small, .rt-scope span,
.rt-scope div, .rt-scope button, .rt-scope em { font-weight: var(--rt-weight); }

/* ---------- Countdown ---------- */
.rt-cd-label {
  font-size: var(--rt-label-size); letter-spacing: 0.19em; text-transform: uppercase;
  margin: 0 0 16px; line-height: 1.3;
}
.rt-cd-cells { display: flex; align-items: flex-start; gap: 0px; }
.rt-cd-sep { font-size: 30px; line-height: 1.5; }
.rt-cd-cell {
  background: var(--rt-paper); color: var(--rt-navy);
  width: 72px; padding: 12px 0 1px; text-align: center;
}
.rt-cd-cell b {
  display: block; font-size: var(--rt-num-size); line-height: 0.7; margin: 0;
  letter-spacing: -0.01em;
}
.rt-cd-cell small { font-size: 11px; letter-spacing: 0.15em; }

/* The fixed message that can replace the countdown after the start. */
.rt-underway {
  font-size: var(--rt-now-size); line-height: 1.1;
  font-weight: var(--rt-weight-heavy); letter-spacing: -0.01em;
}

/* Countdown — INLINE variant (sticky tray) */
.rt-cd--inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rt-cd--inline .rt-cd-label { margin: 0; font-size: 14px; letter-spacing: 0.14em; line-height: 1.15; max-width: 7em; }
.rt-cd--inline .rt-cd-cells { gap: 7px; }
.rt-cd--inline .rt-cd-sep { display: none; }
.rt-cd--inline .rt-cd-cell {
  background: transparent; color: inherit; border: 1.5px solid currentColor;
  width: auto; min-width: 62px; padding: 5px 9px 4px;
}
.rt-cd--inline .rt-cd-cell b { font-size: 22px; margin: 0 0 2px; }
.rt-cd--inline .rt-cd-cell small { font-size: 9.5px; letter-spacing: 0.1em; }
.rt-cd--inline .rt-underway { font-size: var(--rt-num-size); }

/* ---------- Stat ---------- */
.rt-stat {
  border: 1.5px solid rgba(245,242,236,0.85);
  padding: 21px 24px;
  background: var(--rt-card-bg, rgba(20,23,63,0.4));
}
.rt-stat b {
  display: block; font-size: var(--rt-stat-size); line-height: 1;
  letter-spacing: 0.04em; margin: 0 0 8px;
}
.rt-stat span {
  display: block; font-size: var(--rt-label-size); line-height: 1.15;
  letter-spacing: 0.17em; text-transform: uppercase;
}
.rt-stat--bare { border: 0; background: none; padding: 0; }
.rt-stat--plain { border: 0; background: none; padding: 0; }
.rt-stat.rt-tile { border: 1px solid rgba(245,242,236,.85); padding: var(--rt-tile-pad, 15px 18px); }

/* TILE variant — shared with hand-built tiles in the stat bar */
.rt-tile {
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(245,242,236,.85);
  padding: var(--rt-tile-pad, 15px 18px); background: none; height: 100%;
}
.rt-tile b {
  display: block; font-size: var(--rt-tile-num, 30px); line-height: 1;
  min-width: 0; overflow-wrap: anywhere;
  margin: 0 0 8px; letter-spacing: -.01em; font-weight: var(--rt-weight-heavy);
}
.rt-tile span {
  display: block; font-size: var(--rt-tile-label, 14px); line-height: 1.15;
  letter-spacing: .05em; text-transform: none;
}

/* ---------- Stat pair (two metrics in one block) ---------- */
/* Desktop: stacked. Phone: side by side (set in the mobile rule below). */
.rt-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rt-stats-gap, 14px); align-items: stretch; }
.rt-stats > .rt-stat { min-width: 0; height: 100%; }

/* Stat — INLINE variant */
.rt-stat--inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; border: 0; background: transparent; padding: 0;
}
.rt-stat--inline span { order: -1; font-size: 13px; letter-spacing: 0.12em; line-height: 1.15; max-width: 9em; }
.rt-stat--inline b { font-size: 30px; margin: 0; letter-spacing: 0.02em; }

/* ---------- Map + tabs ---------- */
.rt-map-block { position: relative; padding: var(--rt-map-pad); }
.rt-tabs {
  display: flex; justify-content: center; border-bottom: 3px solid var(--rt-red);
  margin: 0 0 6px;
}
.rt-tab {
  font-family: inherit; font-weight: bold; font-size: 16px; letter-spacing: 0.12em;
  padding: 13px 42px; border: none; background: transparent; color: var(--rt-text);
  cursor: pointer; text-transform: uppercase; line-height: 1.4;
}
.rt-tab.rt-on { background: var(--rt-red); color: #fff; }
.rt-panel { display: none; }
.rt-panel.rt-on { display: block; }
.rt-holder { aspect-ratio: 975 / 610; }
.rt-holder svg { width: 100%; height: auto; display: block; }

.rt-state { fill: var(--rt-paper); stroke: var(--rt-stroke); stroke-width: 1.1; stroke-linejoin: round; }

/* Legs: completed solid, upcoming dashed and muted. */
.rt-leg-done { stroke: var(--rt-red); stroke-opacity: .9; stroke-width: 3; fill: none; }
.rt-leg-up {
  stroke: var(--rt-upcoming-line); stroke-width: 2.5; fill: none;
  stroke-dasharray: 7 6; stroke-linecap: round;
}

/* Dots carry a transparent stroke purely to enlarge the hover target. */
.rt-dot-done, .rt-dot-up {
  stroke-width: 9; pointer-events: all; cursor: pointer;
}
.rt-dot-done { fill: var(--rt-red); stroke: transparent; }
/* Upcoming: white fill, red outline. The visible ring is drawn with a
   real stroke, so the transparent hit-area trick can't be reused here —
   a separate wider invisible circle handles that instead. */
.rt-dot-up { fill: #ffffff; stroke: var(--rt-red); stroke-width: 2.5; }
.rt-dot-hit { fill: transparent; stroke: transparent; stroke-width: 16; pointer-events: all; cursor: pointer; }

.rt-dot-cur { fill: var(--rt-red); pointer-events: none; }
.rt-glow { fill: var(--rt-red); pointer-events: none; animation: rtPulse 2.2s ease-in-out infinite; }
@keyframes rtPulse { 0%,100% { opacity: .14; } 50% { opacity: .4; } }
.rt-icon { pointer-events: none; }

/* Activity arc — a short stroke orbiting the marker while a marathon is
   underway. Deliberately NOT a progress indicator: it conveys "he's out
   there", nothing about how far along he is. */
.rt-orbit {
  fill: none; stroke: var(--rt-red); stroke-width: 2.5; stroke-linecap: round;
  pointer-events: none;
  transform-box: fill-box; transform-origin: center;
  animation: rtOrbit 1.5s linear infinite;
}
@keyframes rtOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* No static track ring behind it on purpose — a full circle sitting
   under a moving arc reads as a progress bar again, which is the exact
   thing we're getting rid of. */

@media (prefers-reduced-motion: reduce) {
  .rt-orbit { animation: none; }
  .rt-glow { animation: none; opacity: .28; }
}

/* ---------- Legend ---------- */
.rt-legend {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  margin-top: 16px; font-size: 14px; letter-spacing: .13em; text-transform: uppercase;
}
.rt-legend span { display: inline-flex; align-items: center; gap: 10px; }
.rt-legend-cur { font-style: normal; }
/* Legend swatches are measured against the map at runtime — see
   sizeLegend(). The engine sets --rt-key-*-size to the exact on-screen
   size of the real thing, so the key is literally true to scale.
   max() keeps the floor at the old fixed sizes: on a phone the map is
   drawn small enough that true scale would come out ~7px, and these read
   better slightly oversized there. On desktop the computed value always
   wins. */
.rt-key { border-radius: 50%; display: inline-block; flex: none; }
.rt-key.up {
  background: #fff;
  border: var(--rt-key-up-border, 2.5px) solid var(--rt-red);
  width:  max(15px, var(--rt-key-up-size, 15px));
  height: max(15px, var(--rt-key-up-size, 15px));
}
.rt-key.done {
  background: var(--rt-red);
  width:  max(15px, var(--rt-key-done-size, 15px));
  height: max(15px, var(--rt-key-done-size, 15px));
}
.rt-key.will {
  background: var(--rt-red); box-shadow: 0 0 10px 4px rgba(224,58,47,.55);
  width:  max(15px, var(--rt-key-done-size, 15px));
  height: max(15px, var(--rt-key-done-size, 15px));
}
.rt-key-badge {
  display: inline-block; flex: none;
  width:  max(20px, var(--rt-key-will-size, 20px));
  height: max(20px, var(--rt-key-will-size, 20px));
}

/* Just the city and state he's in. */
.rt-status {
  text-align: center; margin-top: 14px; font-size: 12.5px; letter-spacing: .09em;
  opacity: .8; text-transform: uppercase; line-height: 1.6;
}

/* ---------- Hover popup ---------- */
.rt-tip {
  position: absolute; z-index: 10; pointer-events: auto; display: none;
  background: var(--rt-navy-deep); border: 1px solid var(--rt-red); color: #fff;
  font-size: var(--rt-tip-size); font-weight: var(--rt-weight);
  letter-spacing: .03em; padding: 11px 15px 12px; line-height: 1.4;
  white-space: normal; overflow-wrap: break-word;
  width: max-content; max-width: min(var(--rt-tip-max), calc(100% - 20px));
}
.rt-tip-head { color: #fff; text-wrap: pretty; }
.rt-tip-meta { color: var(--rt-muted); font-size: .8em; margin-top: 3px; }
.rt-tip-link {
  display: inline-block; margin-top: 9px; font-size: .82em;
  color: var(--rt-red); text-decoration: none; letter-spacing: .08em; text-transform: uppercase;
}
.rt-tip-link:hover, .rt-tip-link:focus { text-decoration: underline; color: var(--rt-red); }
.rt-tip-close {
  display: none; position: absolute; top: 2px; right: 4px;
  background: none; border: 0; color: var(--rt-muted); cursor: pointer;
  font-family: inherit; font-size: 26px; line-height: 1; padding: 6px 10px;
}
.rt-tip-close:hover, .rt-tip-close:focus { color: #fff; }

/* ---------- Route list ----------
   IMPORTANT: the scrolling element and the container-query element are
   deliberately SEPARATE. In v1 both jobs sat on .rt-list, and the size
   containment that container-type introduces is what stopped it
   scrolling. .rt-list scrolls; .rt-list-inner answers container queries. */
.rt-list {
  margin: 24px auto 0;
  /* Fallback baked in: if --rt-list-height ever fails to reach here —
     a stray page-level rule, a theme reset, the variable declared on a
     scope this element isn't inside — max-height would resolve to the
     initial value 'none' and the list would simply grow forever instead
     of scrolling. The literal keeps it scrolling regardless. */
  max-height: var(--rt-list-height, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--rt-list-bg);
}
.rt-list-inner { container-type: inline-size; container-name: rtlist; }
/* tabindex="0" makes the list keyboard-scrollable; only show a ring for
   keyboard users, not on click. */
.rt-list:focus { outline: none; }
.rt-list:focus-visible { outline: 2px solid var(--rt-red); outline-offset: 2px; }

.rt-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 4px 12px; padding: 12px 14px;
  font-size: var(--rt-list-size); line-height: 1.35; letter-spacing: .04em;
  border-bottom: 1px solid rgba(245,242,236,.14);
}
/* justify-self:start makes each cell shrink to its text. Grid items are
   blockified, so without it a struck-through cell would draw its line
   across the full column width including the empty space after the
   text. */
.rt-row > * { min-width: 0; justify-self: start; overflow-wrap: normal; word-break: normal; }
.rt-row .rt-n    { grid-column: 1; grid-row: 1; }
.rt-row .rt-loc  { grid-column: 2; grid-row: 1; }
.rt-row .rt-time { grid-column: 3; grid-row: 1; }
.rt-row .rt-link { grid-column: 2; grid-row: 2; }

.rt-row.rt-head {
  text-transform: uppercase; font-size: 12.5px; color: var(--rt-muted);
  position: sticky; top: 0; background: var(--rt-list-bg); z-index: 3;
}

/* Upcoming rows sit back; the next one up is brightest. */
.rt-row.rt-up { color: var(--rt-muted); }
.rt-row.rt-up .rt-n, .rt-row.rt-up .rt-time { color: var(--rt-muted-dim); }
.rt-row.rt-next { color: #fff; background: rgba(224,58,47,.16); outline: 1px solid var(--rt-red); }
.rt-row.rt-next .rt-n, .rt-row.rt-next .rt-time { color: #fff; }

/* Done — dimmed and struck through, both at the moment the miles are
   credited (start + 6h). One trigger, so the list can never disagree
   with the counters. */
.rt-row.rt-done { color: var(--rt-muted); }
.rt-row.rt-done .rt-n, .rt-row.rt-done .rt-time { color: var(--rt-muted-dim); }
/* Every cell in the row, not just the city — number and start time too.
   Applied per cell rather than to the row so the line breaks at the
   column gaps instead of running edge to edge. */
.rt-row.rt-done > * {
  text-decoration: line-through;
  text-decoration-color: var(--rt-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.rt-list-link {
  width: fit-content; font-size: .82em; color: var(--rt-red);
  text-decoration: none; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.rt-list-link:hover, .rt-list-link:focus { text-decoration: underline; color: var(--rt-red); }

@container rtlist (max-width: 620px) {
  .rt-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 6px 10px; padding: 14px;
  }
  .rt-row .rt-n    { grid-column: 1; grid-row: 1; }
  .rt-row .rt-loc  { grid-column: 2; grid-row: 1; }
  .rt-row .rt-time { grid-column: 2; grid-row: 2; }
  .rt-row .rt-link { grid-column: 2; grid-row: 3; margin-top: 2px; }
}

@media (max-width: 640px) {
  .rt-scope {
    --rt-label-size: 14px;
    --rt-num-size: 24px;
    --rt-stat-size: 22px;
    --rt-list-size: 13.5px;
    --rt-tip-size: 13px;
    --rt-tip-max: 260px;
    --rt-now-size: 28px;
    --rt-map-pad: 0px;
  }
  /* The map is drawn in a 975-unit viewBox scaled to the screen, so on a
     390px phone every stroke is multiplied by about 0.4. The dashes were
     specified at 2.5 units — under 1px once scaled, which is why they
     washed out. Widening them here restores roughly the weight they have
     on desktop; the solid legs get the same treatment so the two keep
     their relative heft. */
  .rt-leg-up   { stroke-width: 4; stroke-dasharray: 9 7; }
  .rt-leg-done { stroke-width: 4.5; }

  .rt-tab { padding: 11px 18px; font-size: 13px; }
  .rt-legend { gap: 18px; font-size: 11.5px; }
  /* Countdown fills the column on a phone rather than sitting in a
     narrow huddle on the left: the cells share the row equally. */
  .rt-cd-cells { width: 100%; gap: 0; align-items: center; }
  .rt-cd-sep { flex: 0 0 auto; padding: 0 6px; font-size: 24px; line-height: 1; }
  .rt-cd-cell { width: auto; flex: 1 1 0; min-width: 0; padding: 9px 0 1px; }
  .rt-cd--inline .rt-cd-cell { min-width: 0; }
  /* The combined stats block switches to two equal columns on phones. */
  .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); --rt-stats-gap: 10px; }
  /* Half-width tiles: scale the big number to the column so a long
     figure like 602.6/1310 can never spill out of its box. */
  .rt-stats > .rt-stat { padding: 14px 12px; --rt-tile-num: clamp(15px, 5.4vw, 30px); }
  .rt-stats > .rt-stat b { white-space: nowrap; }
  .rt-stats > .rt-stat span { letter-spacing: 0.10em; }

  /* Two separate stat blocks that live in their own columns: the engine
     tags the row and the two columns, and here they go half-and-half so
     they sit shoulder to shoulder on a phone instead of stacking. */
  .rt-pair-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: stretch; }
  .rt-pair-col { display: block !important; width: auto !important; max-width: none !important; flex: none !important; float: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
  .rt-pair-col > .vc_column-inner,
  .rt-pair-col > .vc_column-inner > .wpb_wrapper,
  .rt-pair-col > .wpb_wrapper,
  .rt-pair-col > * { height: 100%; min-width: 0; }
  .rt-pair-col .wpb_content_element { margin-bottom: 0 !important; height: 100%; }
  .rt-pair-col .rt-stat { height: 100%; padding: 14px 12px; --rt-tile-num: clamp(15px, 5.4vw, 30px); }
  .rt-pair-col .rt-stat b { white-space: nowrap; }
  .rt-pair-col .rt-stat span { letter-spacing: 0.10em; }
  .rt-tip { padding: 10px 13px 11px; }
  /* Fallback for browsers without @container support. */
  .rt-row { grid-template-columns: 44px minmax(0, 1fr); }
  .rt-row .rt-time { grid-column: 2; grid-row: 2; }
  .rt-row .rt-link { grid-column: 2; grid-row: 3; }
}

/* ---------- Optional per-city note ------------------------------------ */
.rt-row .rt-note { grid-column: 2 / -1; grid-row: 3; font-size: .84em; color: var(--rt-red); letter-spacing: .06em; text-transform: uppercase; }
.rt-row.rt-done .rt-note { color: var(--rt-muted-dim); }
@container rtlist (max-width: 620px) { .rt-row .rt-note { grid-row: 4; } }

/* The one line under the legend that can carry a schedule change. */
.rt-note-line {
  text-align: center; margin-top: 8px; font-size: 12.5px; letter-spacing: .09em;
  text-transform: uppercase; line-height: 1.6; color: var(--rt-red);
}
.rt-note-line:empty { display: none; }

@media (hover: none), (pointer: coarse) {
  .rt-tip-close { display: block; }
  .rt-tip { padding-top: 42px; }
  .rt-tip-close { top: 4px; right: 4px; font-size: 26px; padding: 6px 12px; min-width: 44px; min-height: 36px; }
  .rt-dot-hit { stroke-width: 26; }
}