/* ==========================================================================
   BonicBD — Interactive routing overview

   The hero visual is a live-feeling demo: packets travel from the storefront
   through the BonicBD server container and fan out to six destinations at
   staggered intervals. Each destination is a real button — clicking it opens
   the payload inspector for that platform and highlights its path. A pause
   control stops the loop, and `prefers-reduced-motion` renders a static frame.

   Behaviour lives in static/site/js/bonicbd-route.js; this file is presentation
   only. Percentages match the 640x400 SVG viewBox so the DOM nodes and the SVG
   paths stay aligned at every card width.
   ========================================================================== */

.bbd-route {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  /* inherit the hero card treatment from bonicbd-warm.css */
}

/* --- header ------------------------------------------------------------- */

.bbd-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 11px;
  border-bottom: 1px dashed var(--bbd-warm-line);
  background: var(--bbd-warm-paper-3);
}

.bbd-route-head-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bbd-route-domain {
  font-family: var(--bbd-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--bbd-warm-ink-soft);
  font-variant-numeric: tabular-nums;
}

.bbd-route-play {
  appearance: none;
  border: 1px solid var(--bbd-warm-line);
  background: #fff;
  color: var(--bbd-warm-ink-2);
  font-family: var(--bbd-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms var(--bbd-ease), border-color 160ms var(--bbd-ease),
              color 160ms var(--bbd-ease);
}

.bbd-route-play:hover {
  background: var(--bbd-orange-50);
  border-color: var(--bbd-warm-line-orange);
  color: var(--bbd-orange-dark);
}

.bbd-route-play[aria-pressed="true"] {
  background: var(--bbd-warm-ink);
  border-color: var(--bbd-warm-ink);
  color: #fff;
}

/* --- live badge --------------------------------------------------------- */

.bbd-route-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.30);
  color: #0f7a3d;
  font-family: var(--bbd-font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bbd-route-live .bbd-chrome-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: bbdRouteLive 1.8s ease-out infinite;
}

.bbd-route[data-paused="true"] .bbd-route-live {
  background: rgba(16, 16, 31, 0.06);
  border-color: var(--bbd-warm-line);
  color: var(--bbd-warm-ink-soft);
}

.bbd-route[data-paused="true"] .bbd-route-live .bbd-chrome-live-dot {
  background: var(--bbd-warm-ink-soft);
  animation: none;
}

@keyframes bbdRouteLive {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* --- map ---------------------------------------------------------------- */

.bbd-route-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 480;
  background:
    radial-gradient(circle at 46% 52%, rgba(255, 107, 53, 0.055), transparent 55%),
    linear-gradient(to right, rgba(16, 16, 31, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 16, 31, 0.035) 1px, transparent 1px),
    #fffdfa;
  background-size: auto, 24px 24px, 24px 24px, auto;
  border-bottom: 1px solid var(--bbd-warm-line);
}

.bbd-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bbd-route-path {
  fill: none;
  stroke: rgba(16, 16, 31, 0.16);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 260ms var(--bbd-ease), stroke-width 260ms var(--bbd-ease);
}

.bbd-route-path.is-in {
  stroke: rgba(16, 16, 31, 0.13);
}

/* A destination being inspected lights its own path */
.bbd-route[data-focus="meta"]     .bbd-route-path[data-dest="meta"],
.bbd-route[data-focus="tiktok"]   .bbd-route-path[data-dest="tiktok"],
.bbd-route[data-focus="google"]   .bbd-route-path[data-dest="google"],
.bbd-route[data-focus="ga4"]      .bbd-route-path[data-dest="ga4"],
.bbd-route[data-focus="snapchat"] .bbd-route-path[data-dest="snapchat"],
.bbd-route[data-focus="x"]        .bbd-route-path[data-dest="x"] {
  stroke: var(--bbd-orange);
  stroke-width: 2.4;
}

/* The travelling packet */
.bbd-route-packet {
  fill: var(--bbd-orange);
  filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.85));
  pointer-events: none;
}

/* --- nodes -------------------------------------------------------------- */

.bbd-route-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  font-family: var(--bbd-font-body);
}

.bbd-route-source {
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--bbd-warm-line);
  border-radius: 10px;
  box-shadow: var(--bbd-warm-shadow-xs);
}

.bbd-route-source strong {
  font-family: var(--bbd-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--bbd-warm-ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.bbd-route-source span {
  font-family: var(--bbd-font-mono);
  font-size: 0.68rem;
  color: var(--bbd-warm-ink-soft);
  line-height: 1.2;
}

.bbd-route-server {
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--bbd-orange);
  border-radius: 14px;
  box-shadow: 0 10px 28px -14px rgba(255, 107, 53, 0.55);
  overflow: hidden;
}

.bbd-route-server-tag {
  font-family: var(--bbd-font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bbd-orange-dark);
}

.bbd-route-server strong {
  font-family: var(--bbd-font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bbd-warm-ink);
  line-height: 1.2;
}

.bbd-route-server-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  font-family: var(--bbd-font-mono);
  font-size: 0.7rem;
  color: var(--bbd-warm-ink-soft);
}

.bbd-route-server-count b {
  font-family: var(--bbd-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--bbd-orange-dark);
  font-variant-numeric: tabular-nums;
}

/* A soft sweep that suggests the container is working */
.bbd-route-server-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 107, 53, 0.10) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: bbdRouteSweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

.bbd-route[data-paused="true"] .bbd-route-server-pulse {
  animation: none;
  opacity: 0;
}

@keyframes bbdRouteSweep {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* --- destination buttons ------------------------------------------------ */

.bbd-route-dest {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--bbd-warm-line);
  border-radius: 9px;
  box-shadow: var(--bbd-warm-shadow-xs);
  cursor: pointer;
  text-align: left;
  appearance: none;
  transition: border-color 200ms var(--bbd-ease), box-shadow 200ms var(--bbd-ease),
              transform 200ms var(--bbd-ease), background 200ms var(--bbd-ease);
}

.bbd-route-dest:hover,
.bbd-route-dest:focus-visible {
  border-color: var(--bbd-warm-line-orange);
  box-shadow: var(--bbd-warm-shadow);
  transform: translateY(-1px);
  outline: none;
}

.bbd-route-dest[aria-pressed="true"] {
  border-color: var(--bbd-orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12);
}

.bbd-route-dest-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.bbd-route-dest-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--bbd-font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--bbd-warm-ink);
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbd-route-dest-bar {
  flex: 0 0 46px;
  height: 4px;
  border-radius: 999px;
  background: rgba(16, 16, 31, 0.08);
  overflow: hidden;
}

.bbd-route-dest-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bbd-orange);
  transform-origin: left center;
  transform: scaleX(0.15);
  transition: transform 600ms var(--bbd-ease-out);
}

.bbd-route-dest.is-hit .bbd-route-dest-bar i {
  transform: scaleX(1);
}

.bbd-route-dest-count {
  flex: 0 0 auto;
  font-family: var(--bbd-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bbd-warm-ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 1.8em;
  text-align: right;
}

/* --- footer: inspector + log side by side ------------------------------- */

.bbd-route-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border-top: 1px solid var(--bbd-warm-line);
  background: var(--bbd-warm-paper-3);
}

@media (max-width: 860px) {
  .bbd-route-foot {
    grid-template-columns: 1fr;
  }
}

.bbd-route-inspect {
  padding: 14px 20px 16px;
  border-right: 1px solid var(--bbd-warm-line);
}

.bbd-route-inspect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.bbd-route-inspect-title {
  font-family: var(--bbd-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bbd-warm-ink);
  letter-spacing: -0.01em;
}

.bbd-route-inspect-note {
  font-size: 0.68rem;
  color: var(--bbd-warm-ink-soft);
}

.bbd-route-payload {
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--bbd-warm-line);
  border-radius: 10px;
  font-family: var(--bbd-font-mono);
  font-size: 0.72rem;
  line-height: 1.62;
  color: var(--bbd-warm-ink-2);
  overflow-x: auto;
  white-space: pre;
}

.bbd-route-payload .k { color: var(--bbd-orange-dark); }
.bbd-route-payload .n { color: #0f7a3d; }
.bbd-route-payload .s { color: #1f5f9c; }
.bbd-route-payload .b { color: #8a5a1c; }

/* --- event log ---------------------------------------------------------- */

.bbd-route-log-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bbd-route-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 20px 7px;
  font-family: var(--bbd-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bbd-warm-ink-soft);
}

.bbd-route-log-hint {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(16, 16, 31, 0.55);
}

.bbd-route-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow: hidden;
  background: transparent;
}

.bbd-route-log-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 20px;
  font-family: var(--bbd-font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--bbd-warm-ink-soft);
  border-bottom: 1px solid rgba(16, 16, 31, 0.055);
  animation: bbdRouteRowIn 380ms var(--bbd-ease-out) both;
}

.bbd-route-log-row:last-child {
  border-bottom: none;
}

.bbd-route-log-row.is-enter {
  background: rgba(255, 107, 53, 0.055);
}

.bbd-route-log-time {
  color: rgba(16, 16, 31, 0.38);
  font-variant-numeric: tabular-nums;
}

.bbd-route-log-name {
  color: var(--bbd-warm-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bbd-route-log-dest {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.bbd-route-log-dest i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  display: inline-block;
}

.bbd-route-log-status {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #0f7a3d;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

@keyframes bbdRouteRowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- footer note -------------------------------------------------------- */

.bbd-route .bbd-visual-foot {
  border-top: 1px solid var(--bbd-warm-line);
  background: var(--bbd-warm-paper-3);
  font-size: 0.7rem !important;
  line-height: 1.5;
}

/* --- responsive --------------------------------------------------------- */

/* Two SVG variants: horizontal on desktop, vertical on narrow screens.
   The DOM nodes re-flow into the vertical stack with the same class names. */
.bbd-route-svg--narrow {
  display: none;
}

@media (max-width: 720px) {
  .bbd-route-head {
    padding: 10px 13px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .bbd-route-domain {
    display: none;
  }

  /* Vertical flow: two sources side by side, server, then six lanes.
     All positions are % of a 360x490 viewBox so the SVG paths line up with the
     DOM cards. Keep in sync with the narrow <svg> in home.html. */
  .bbd-route-svg--wide { display: none; }
  .bbd-route-svg--narrow { display: block; }

  .bbd-route-map {
    aspect-ratio: 360 / 490;
    background-size: auto, 20px 20px, 20px 20px, auto;
  }

  .bbd-route-source,
  .bbd-route-server,
  .bbd-route-dest {
    position: absolute !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* two sources side by side, no overlap */
  .bbd-route-source {
    width: 44% !important;
    padding: 7px 8px;
    gap: 1px;
  }

  .bbd-route-source[data-node="src-site"] { left: 2% !important;  top: 2.9% !important; }
  .bbd-route-source[data-node="src-gtm"]  { left: 54% !important; top: 2.9% !important; }

  .bbd-route-source strong { font-size: 0.76rem; line-height: 1.15; }
  .bbd-route-source span   { font-size: 0.56rem; line-height: 1.2; }

  /* server card */
  .bbd-route-server {
    left: 50% !important;
    top: 24.08% !important;
    transform: translateX(-50%);
    width: min(70%, 240px) !important;
    padding: 10px 12px;
    align-items: center;
    text-align: center;
  }

  .bbd-route-server-sub {
    display: none;
  }

  /* lanes: full width, 34px tall, 38px pitch */
  /* lanes start at 11% so the 6.7% bus trunk stays in the gutter */
  .bbd-route-dest {
    left: 11% !important;
    width: 86% !important;
    height: 34px !important;
    padding: 0 10px;
    gap: 7px;
    border-radius: 9px;
  }

  .bbd-route-dest[data-bbd-route-dest="meta"]     { top: 47.35% !important; }
  .bbd-route-dest[data-bbd-route-dest="tiktok"]   { top: 55.10% !important; }
  .bbd-route-dest[data-bbd-route-dest="google"]   { top: 62.86% !important; }
  .bbd-route-dest[data-bbd-route-dest="ga4"]      { top: 70.61% !important; }
  .bbd-route-dest[data-bbd-route-dest="snapchat"] { top: 78.37% !important; }
  .bbd-route-dest[data-bbd-route-dest="x"]        { top: 86.12% !important; }

  /* The bus lines ran flat against the cards lower down; tighten the curve so
     each stub enters its lane horizontally at the card's vertical centre. */
  .bbd-route-svg--narrow .bbd-route-path {
    stroke-width: 1.6;
    stroke-opacity: 0.42;
  }

  .bbd-route-svg--narrow .bbd-route-path.is-active {
    stroke-width: 2.4;
    stroke-opacity: 0.9;
  }

  .bbd-route-dest-name {
    font-size: 0.8rem;
  }
  .bbd-route-dest-bar {
    flex: 0 0 40px;
    height: 3px;
  }
  .bbd-route-dest-count {
    font-size: 0.68rem;
  }

  .bbd-route-inspect {
    padding: 12px 13px 13px;
    border-right: none;
  }
  .bbd-route-payload {
    font-size: 0.68rem;
    padding: 11px 12px;
    max-height: 210px;
  }
  .bbd-route-log-head {
    padding: 8px 13px 6px;
  }
  .bbd-route-log-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 6px 13px;
    font-size: 0.64rem;
  }
  .bbd-route-log-dest span {
    display: none;
  }
}

/* Very narrow: keep labels legible rather than shrinking further */
@media (max-width: 400px) {
  .bbd-route-dest-name { font-size: 0.76rem; }
  .bbd-route-dest-bar { display: none; }
}

/* --- reduced motion: one static frame, no loop -------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bbd-route-packet,
  .bbd-route-server-pulse {
    animation: none !important;
  }
  .bbd-route-server-pulse {
    opacity: 0;
  }
  .bbd-route-live .bbd-chrome-live-dot {
    animation: none;
  }
  .bbd-route-log-row {
    animation: none;
  }
}

/* ==========================================================================
   Live KPI strip
   A dashboard reads as real when a few numbers sit above the diagram and move
   on their own. Values are illustrative and the footer says so.
   ========================================================================== */

.bbd-route-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--bbd-warm-line);
  background: #fff;
}

.bbd-route-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 16px 12px;
  border-right: 1px solid var(--bbd-warm-line);
  min-width: 0;
}

.bbd-route-kpi:last-child {
  border-right: none;
}

.bbd-route-kpi-k {
  font-family: var(--bbd-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bbd-warm-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbd-route-kpi-v {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--bbd-font-display);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bbd-warm-ink);
  font-variant-numeric: tabular-nums;
}

.bbd-route-kpi-v b {
  font-weight: 700;
}

.bbd-route-kpi-v i {
  font-family: var(--bbd-font-mono);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 500;
  color: var(--bbd-warm-ink-soft);
}

.bbd-route-kpi-sub {
  font-family: var(--bbd-font-mono);
  font-size: 0.6rem;
  color: rgba(16, 16, 31, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbd-route-trend {
  font-weight: 700;
}

.bbd-route-trend.is-up {
  color: #0f7a3d;
}

/* ==========================================================================
   Packets
   ========================================================================== */

.bbd-route-path.is-active {
  stroke: var(--bbd-orange);
  stroke-opacity: 0.75;
  stroke-width: 2.4;
}

.bbd-route-packets circle {
  filter: drop-shadow(0 0 5px rgba(255, 107, 53, 0.55));
  will-change: transform;
}

/* ==========================================================================
   Destination sparkline + focused state
   ========================================================================== */

.bbd-route-dest-spark {
  flex: 0 0 44px;
  height: 16px;
  opacity: 0.5;
  transition: opacity 160ms ease;
}

.bbd-route-dest-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bbd-route-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bbd-route-dest:hover .bbd-route-dest-spark,
.bbd-route-dest.is-focused .bbd-route-dest-spark {
  opacity: 0.95;
}

.bbd-route-dest.is-focused {
  border-color: var(--bbd-orange) !important;
  background: rgba(255, 107, 53, 0.07) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.16);
}

.bbd-route-dest.is-focused .bbd-route-dest-name {
  color: var(--bbd-ink);
}

/* ==========================================================================
   Source nodes are buttons now
   ========================================================================== */

.bbd-route-source {
  appearance: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.bbd-route-source:hover {
  border-color: var(--bbd-orange) !important;
  transform: translateY(-1px);
}

.bbd-route-source.is-hit {
  border-color: var(--bbd-orange) !important;
  background: rgba(255, 107, 53, 0.08) !important;
}

/* ==========================================================================
   "Send test event" button
   ========================================================================== */

.bbd-route-fire {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--bbd-warm-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--bbd-warm-ink);
  font-family: var(--bbd-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.bbd-route-fire svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.bbd-route-fire:hover {
  border-color: var(--bbd-orange);
  color: var(--bbd-orange-dark);
  background: rgba(255, 107, 53, 0.07);
}

.bbd-route-fire:active {
  transform: scale(0.97);
}

.bbd-route-fire.is-fired {
  background: var(--bbd-orange);
  border-color: var(--bbd-orange);
  color: var(--bbd-ink);
}

.bbd-route-inspect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.bbd-route-inspect-note {
  display: none;
}

/* ==========================================================================
   Responsive: KPI strip and sparklines
   ========================================================================== */

@media (max-width: 900px) {
  .bbd-route-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bbd-route-kpi:nth-child(2n) {
    border-right: none;
  }
  .bbd-route-kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--bbd-warm-line);
  }
  .bbd-route-kpi-v {
    font-size: 1.18rem;
  }
}

@media (max-width: 720px) {
  .bbd-route-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bbd-route-kpi {
    padding: 9px 12px 10px;
  }
  .bbd-route-kpi-k {
    font-size: 0.55rem;
  }
  .bbd-route-kpi-v {
    font-size: 1.06rem;
  }
  .bbd-route-kpi-sub {
    font-size: 0.55rem;
  }
  .bbd-route-dest-spark {
    display: none;
  }
  .bbd-route-fire {
    font-size: 0.56rem;
    padding: 5px 9px;
  }
  .bbd-route-inspect-head {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ==========================================================================
   Disclaimer strip
   The simulation disclosure has to be legible — it is the honest part of the
   widget, so it must not look like fine print that is meant to be skimmed past.
   ========================================================================== */

.bbd-route .bbd-visual-foot {
  padding: 10px 20px 11px;
  border-top: 1px solid var(--bbd-warm-line);
  background: #fff;
  font-family: var(--bbd-font-mono);
  font-size: 0.63rem;
  line-height: 1.5;
  color: rgba(16, 16, 31, 0.62);
}

@media (max-width: 720px) {
  .bbd-route .bbd-visual-foot {
    padding: 9px 13px 10px;
    font-size: 0.6rem;
  }
}

/* ==========================================================================
   Fan-out hub + quieter hint pill
   ========================================================================== */

.bbd-route-hub {
  fill: var(--bbd-orange);
  fill-opacity: 0.9;
}

.bbd-route-hub-ring {
  fill: none;
  stroke: var(--bbd-orange);
  stroke-opacity: 0.3;
  stroke-width: 1.4;
}

/* brutal.css paints .bbd-visual-tag orange !important on the homepage with
   specificity (0,2,1); this selector has to outrank it to read as a quiet hint
   instead of a warning. */
body.bbd-homepage .bbd-route .bbd-visual-tag.bbd-route-hint {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: #5a5a72 !important;
  font-family: var(--bbd-font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bbd-route-hint::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #8a8aa3;
  animation: bbd-route-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes bbd-route-hint-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .bbd-route-hint::before { animation: none; opacity: 0.8; }
}

/* The log pane should fill the inspector's height instead of leaving a white gap */
.bbd-route-log {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bbd-route-log-row {
  flex: 0 0 auto;
}

.bbd-route-log-row:nth-child(n + 7) {
  display: none;
}

/* The lane hint has to match the layout: side-by-side on desktop, stacked on
   mobile. Desktop wording pointed at a column that does not exist at 390px. */
.bbd-hint-narrow {
  display: none;
}

@media (max-width: 720px) {
  .bbd-hint-wide { display: none; }
  .bbd-hint-narrow { display: inline; }
}

/* The routing widget is a data panel; viewport-fixed chat/back-to-top buttons
   sit on top of the payload and log while it is on screen. Fade them out for
   the duration and bring them back the moment the widget scrolls away. */
body.bbd-route-in-view .bbd-whatsapp-float,
body.bbd-route-in-view .bbd-back-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.bbd-whatsapp-float,
.bbd-back-top {
  transition: opacity 180ms ease, transform 180ms ease;
}

/* ==========================================================================
   Destination brand marks

   The lanes carried a coloured dot as a stand-in for the platform. They now use
   the real mark from the inlined sprite, tinted with the platform's own colour so
   the six lanes stay scannable at a glance.
   ========================================================================== */

.bbd-route-dest-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: currentColor;
}

.bbd-route-dest.is-focused .bbd-route-dest-ico,
.bbd-route-dest:hover .bbd-route-dest-ico {
  transform: scale(1.08);
}

.bbd-route-dest-ico {
  transition: transform 160ms ease;
}

/* The log rows also used a bare dot; give them the same treatment via a tiny
   inline svg that the JS injects. */
.bbd-route-log-dest svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .bbd-route-dest-ico {
    width: 12px;
    height: 12px;
  }
}