/* ==========================================================================
   COIN FLOW — live sender → receiver network visualization
   Same product, mission-control metaphor: a dark ring of real recently-
   active accounts, connected by moving arcs, each arc a real Payment
   transaction traced from its real Account to its real Destination.
   ========================================================================== */

body.flow-page {
  background: #05070a;
  overflow-x: hidden;
}

/* -------------------------------------------------------------------- */
/* Header                                                                */
/* -------------------------------------------------------------------- */
.flow-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0) 100%);
  gap: var(--space-3) var(--space-4);
}
.flow-header .brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.flow-header .brand svg { width: 28px; height: 28px; color: #34e0a1; }
.flow-header .site-pills { grid-column: 2; justify-self: center; }
.flow-nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.flow-sound-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: #9fd8cf;
  border: 1px solid rgba(52, 224, 161, 0.28);
  background: rgba(52, 224, 161, 0.06);
  transition: var(--transition-interactive);
  position: relative;
}
.flow-sound-toggle svg { width: 16px; height: 16px; }
.flow-sound-toggle:hover { color: #d8fff5; border-color: #34e0a1; background: rgba(52, 224, 161, 0.12); }
.flow-sound-toggle svg line { transition: opacity 150ms ease; }
.flow-sound-toggle.is-on svg line { opacity: 0; }
.flow-sound-toggle.is-on { color: #34e0a1; border-color: #34e0a1; background: rgba(52, 224, 161, 0.16); }
.flow-sound-toggle.is-on:not(.is-unlocked)::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(52, 224, 161, 0.55);
  animation: flow-cue-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes flow-cue-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}

.sound-cue {
  /* Fixed near the header's sound toggle, well clear of the intro copy,
     rail, and panel -- same bottom-right placement convention used by
     Aurora's and the Globe's equivalent cue. */
  position: fixed;
  top: auto;
  bottom: 110px;
  left: auto;
  right: 28px;
  transform: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 12px 7px 10px;
  border-radius: var(--radius-full);
  background: rgba(6, 12, 10, 0.92);
  border: 1px solid rgba(52, 224, 161, 0.3);
  color: #d8fff5;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: flow-cue-in 600ms ease 900ms forwards;
  transition: opacity 400ms ease;
  z-index: 20;
}
.sound-cue svg { width: 14px; height: 14px; color: #34e0a1; flex-shrink: 0; }
.sound-cue.is-hidden { opacity: 0 !important; pointer-events: none; }
.sound-cue .short { display: none; }
@keyframes flow-cue-in { to { opacity: 1; } }

.flow-ambient-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: #9fd8cf;
  border: 1px solid rgba(52, 224, 161, 0.28);
  background: rgba(52, 224, 161, 0.06);
  transition: var(--transition-interactive);
}
.flow-ambient-toggle svg { width: 16px; height: 16px; }
.flow-ambient-toggle:hover { color: #d8fff5; border-color: #34e0a1; background: rgba(52, 224, 161, 0.12); }
.flow-ambient-toggle svg .icon-collapse { opacity: 0; }
.flow-ambient-toggle svg .icon-expand,
.flow-ambient-toggle svg .icon-collapse { transition: opacity 150ms ease; }
.flow-ambient-toggle.is-on { color: #34e0a1; border-color: #34e0a1; background: rgba(52, 224, 161, 0.16); }
.flow-ambient-toggle.is-on svg .icon-expand { opacity: 0; }
.flow-ambient-toggle.is-on svg .icon-collapse { opacity: 1; }

/* -------------------------------------------------------------------- */
/* Ambient / screensaver mode                                            */
/* -------------------------------------------------------------------- */
body.is-ambient .flow-header,
body.is-ambient .flow-intro,
body.is-ambient .flow-panel,
body.is-ambient .flow-hint,
body.is-ambient .flow-log-rail,
body.is-ambient .flow-sources,
body.is-ambient .flow-detail {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 700ms ease;
}
body.is-ambient,
body.is-ambient .flow-stage,
body.is-ambient #flow-canvas {
  cursor: none;
}
.flow-ambient-hint {
  position: fixed;
  left: 50%;
  bottom: var(--space-8);
  transform: translateX(-50%);
  z-index: 40;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: #b9c8c4;
  background: rgba(6, 12, 16, 0.55);
  border: 1px solid rgba(52, 224, 161, 0.22);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  backdrop-filter: blur(6px);
}
.flow-ambient-hint.is-visible { opacity: 1; }

/* -------------------------------------------------------------------- */
/* Stage                                                                 */
/* -------------------------------------------------------------------- */
.flow-stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(52, 224, 161, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(24, 32, 39, 0.9) 0%, transparent 60%),
    #05070a;
}
#flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.flow-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 45%, rgba(2, 4, 6, 0.6) 100%);
}

/* -------------------------------------------------------------------- */
/* Intro copy                                                            */
/* -------------------------------------------------------------------- */
.flow-intro {
  position: absolute;
  top: calc(var(--space-16) + var(--space-8));
  left: var(--space-6);
  max-width: 460px;
  z-index: 10;
  pointer-events: none;
}
.flow-intro .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34e0a1;
}
.flow-intro h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: var(--space-3) 0 var(--space-3);
  color: #eafffb;
  text-shadow: 0 0 24px rgba(52, 224, 161, 0.2);
}
.flow-intro p {
  color: #8aa39c;
  font-size: var(--text-sm);
  line-height: 1.65;
}
.flow-intro .flow-intro-hint {
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  margin-top: var(--space-2);
}
.flow-intro code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: #6ff0d8;
}

/* -------------------------------------------------------------------- */
/* Vitals panel                                                          */
/* -------------------------------------------------------------------- */
.flow-panel {
  position: absolute;
  top: var(--space-16);
  right: var(--space-6);
  z-index: 10;
  width: 280px;
  background: rgba(9, 13, 17, 0.72);
  border: 1px solid rgba(52, 224, 161, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 40px rgba(52, 224, 161, 0.06);
}
.flow-panel .panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.flow-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(52, 224, 161, 0.10);
}
.flow-stat-row:first-of-type { border-top: none; }
.flow-stat-row .label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.flow-stat-row .value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #eafffb;
  font-size: var(--text-sm);
}
.flow-stat-row .value.mono { color: #9fd8cf; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.legend-dot.pulse-live { background: #34e0a1; box-shadow: 0 0 8px #34e0a1; animation: flow-dot-breathe 2.4s ease-in-out infinite; }
@keyframes flow-dot-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.flow-status {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(52, 224, 161, 0.10);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
}
.flow-status.is-live { color: #34e0a1; }

/* -------------------------------------------------------------------- */
/* Hint + loading                                                        */
/* -------------------------------------------------------------------- */
.flow-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #cfe9ec;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  background: rgba(6, 10, 14, 0.55);
  border: 1px solid rgba(52, 224, 161, 0.14);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: flow-hint-in 700ms ease 1000ms forwards;
  transition: opacity 400ms ease;
}
.flow-hint.is-hidden { opacity: 0 !important; }
@keyframes flow-hint-in { to { opacity: 1; } }
.flow-hint svg { width: 16px; height: 16px; }

.flow-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  background: #05070a;
  transition: opacity 600ms ease;
  flex-direction: column;
  gap: var(--space-3);
}
.flow-loading.is-hidden { opacity: 0; pointer-events: none; }
.flow-loading .spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(52, 224, 161, 0.18);
  border-top-color: #34e0a1;
  animation: flow-spin 900ms linear infinite;
}
.flow-loading p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.05em; text-transform: uppercase; }
@keyframes flow-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- */
/* Flow log rail (left side, scrollable)                                 */
/* -------------------------------------------------------------------- */
.flow-log-rail {
  position: absolute;
  top: 24rem;
  left: var(--space-6);
  z-index: 10;
  width: 320px;
  /* Reserve room below for the fixed .flow-hint pill (up to ~90px tall
     once it wraps to 2 lines) -- without this, once enough live entries
     load in the rail grows to its old cap and sits directly on top of the
     hint text. Confirmed by screenshot at 1200px and 950px with a mature
     feed (a handful of items wasn't enough to reproduce it). */
  max-height: calc(100dvh - 24rem - 150px);
  display: flex;
  flex-direction: column;
  background: rgba(9, 13, 17, 0.66);
  border: 1px solid rgba(52, 224, 161, 0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.flow-log-rail .rail-header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid rgba(52, 224, 161, 0.12);
  flex: none;
}
.flow-log-rail .rail-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fd8cf;
}
.flow-log-rail .rail-sub {
  display: block;
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--color-text-faint);
  line-height: 1.5;
}
.flow-log-rail .rail-list {
  overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 224, 161, 0.25) transparent;
}
.flow-log-rail .rail-list::-webkit-scrollbar { width: 6px; }
.flow-log-rail .rail-list::-webkit-scrollbar-thumb { background: rgba(52, 224, 161, 0.25); border-radius: var(--radius-full); }

.rail-empty {
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
}
.rail-empty svg { width: 34px; height: 34px; margin: 0 auto var(--space-3); color: rgba(52, 224, 161, 0.4); }
.rail-empty p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.rail-empty-sub { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.6; max-width: 30ch; margin: 0 auto; }

.flow-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--transition-interactive);
  animation: flow-item-in 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.flow-item:hover { background: rgba(52, 224, 161, 0.08); border-color: rgba(52, 224, 161, 0.28); }
.flow-item.is-whale { border-color: rgba(255, 176, 32, 0.28); }
.flow-item.is-whale:hover { background: rgba(255, 176, 32, 0.1); border-color: rgba(255, 176, 32, 0.4); }
@keyframes flow-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.flow-item-glow {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}
.flow-item-glow.xrp {
  background: radial-gradient(circle, rgba(52, 224, 161, 0.9), rgba(52, 224, 161, 0.15));
  box-shadow: 0 0 14px rgba(52, 224, 161, 0.5);
  color: #04211c;
}
.flow-item-glow.whale {
  background: radial-gradient(circle, rgba(255, 176, 32, 0.9), rgba(255, 176, 32, 0.15));
  box-shadow: 0 0 14px rgba(255, 176, 32, 0.55);
  color: #2c1c00;
}
.flow-item-body { flex: 1; min-width: 0; }
.flow-item-amount {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #eafffb;
  white-space: nowrap;
}
.flow-item-meta {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-item-meta .arrow { color: #34e0a1; margin: 0 3px; }

/* -------------------------------------------------------------------- */
/* Detail modal                                                          */
/* -------------------------------------------------------------------- */
.flow-detail {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 50;
  width: min(420px, calc(100vw - var(--space-8)));
  background: rgba(9, 13, 17, 0.94);
  border: 1px solid rgba(52, 224, 161, 0.22);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.flow-detail.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.flow-detail-close {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  background: transparent;
}
.flow-detail-close svg { width: 14px; height: 14px; }
.flow-detail-close:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.flow-detail-body dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); }
.flow-detail-body dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.05em; align-self: center; }
.flow-detail-body dd { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text); word-break: break-all; }
.flow-detail-body a { color: #34e0a1; }
.flow-detail-body .detail-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-4); }

/* -------------------------------------------------------------------- */
/* Sources footer                                                        */
/* -------------------------------------------------------------------- */
.flow-sources {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  line-height: 1.7;
}
.flow-sources a { color: #34e0a1; }
.flow-sources code { font-family: var(--font-mono); color: #9fd8cf; }

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .flow-header { grid-template-columns: 1fr auto; }
  .flow-header .site-pills { display: none; }
  .flow-panel { width: 220px; padding: var(--space-4); }
  .flow-log-rail { width: 260px; }
  .flow-intro { max-width: 320px; }
}
@media (max-width: 900px) and (min-width: 641px) {
  /* The narrower 320px intro column wraps to more lines here (measured up
     to 454.8px tall at 900px), tall enough to run under the flow-log-rail's
     fixed top:24rem (384px) -- confirmed by screenshot, the rail box sitting
     directly over the intro's last paragraph line. Push the rail down past
     the tallest measured intro; the base rule's 150px bottom reserve
     (for the .flow-hint pill) still applies since only top changes here. */
  .flow-log-rail { top: 472px; max-height: calc(100dvh - 472px - 150px); }
}
@media (max-width: 640px) {
  .flow-panel { display: none; }
  .flow-log-rail { top: auto; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); width: auto; max-height: 40dvh; }
  /* On mobile the intro copy has no room to sit beside the flow ring, so it
     has to overlay it directly — pointer-events:auto (overriding the desktop
     none) lets a tap on it fire the tap-to-hide handler in flow.js instead
     of silently falling through to the canvas underneath. */
  /* Nudged down from +space-4 to +space-12 (an extra 32px) specifically
     to open a safe gap below the header for the sound cue below — the
     intro is absolutely positioned and overlays the canvas, so this only
     moves the intro itself, nothing else depends on its old offset. */
  .flow-intro { top: calc(var(--space-16) + var(--space-12)); left: var(--space-4); right: var(--space-4); max-width: none; pointer-events: auto; cursor: pointer; }
  .flow-intro .overlay-hide-hint { display: flex; }
  .flow-hint { display: none; }
  /* Below 640px, a static bottom-right offset used to be display:none
     unconditionally, losing the only affordance telling a mobile visitor
     sound is available. flow.js measures the header's actual rendered
     bottom edge at runtime and pins the cue in whatever gap is left
     below it, hiding it only if that gap is genuinely too tight — same
     technique as aurora.css/globe.css's equivalent cue. */
  .sound-cue {
    top: 0; bottom: auto; left: 50%; right: auto;
    transform: translateX(-50%);
    font-size: 11px;
    padding: 6px 11px 6px 9px;
  }
  .sound-cue .full { display: none; }
  .sound-cue .short { display: inline; }
  .sound-cue.no-room { opacity: 0 !important; pointer-events: none; }
}

/* -------------------------------------------------------------------- */
/* Embedded mode — this page nested as one act inside the flagship's    */
/* single scroll journey (index.html). Hides the logo + cross-page pill */
/* nav (redundant inside the flagship's own header) and this page's own */
/* sources disclosure block, matching the identical rule on reef.css/   */
/* aurora.css/globe.css. Audio unlock and mute/duck are already driven  */
/* by postMessage from the parent (see embed-bridge.js), so hiding this */
/* header loses no functionality inside the flagship.                   */
/* -------------------------------------------------------------------- */
html.lv-embedded .flow-header {
  display: none !important;
}
/* Same embed-only fix as reef.css/aurora.css/globe.css: unreachable by
   scroll inside the flagship's cropped iframe, but still keyboard-
   tabbable — hide it in embed mode so Tab can't jump into content no
   mouse user could ever see. */
.lv-embedded .flow-sources { display: none; }

/* Panel-hide toggle — a small always-tappable button that only ever
   hides/shows the intro copy, vitals panel, and flow log rail, nothing
   else (no sound change, no cursor hiding). It only renders when
   embedded in the flagship (html.lv-embedded), because that's the one
   context where the header — and its full ambient-mode toggle — is
   hidden and there is otherwise no way to see the flow unobstructed.
   Standalone, the header's own ambient toggle already covers this. */
.lv-panel-toggle {
  display: none;
}
html.lv-embedded .lv-panel-toggle {
  display: flex;
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 40;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(6, 16, 20, 0.72);
  border: 1px solid rgba(52, 224, 161, 0.22);
  color: rgba(214, 245, 240, 0.8);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.lv-panel-toggle svg { width: 17px; height: 17px; position: absolute; }
.lv-panel-toggle .icon-eye-off { opacity: 0; }
.lv-panel-toggle.is-hidden .icon-eye { opacity: 0; }
.lv-panel-toggle.is-hidden .icon-eye-off { opacity: 1; }
.lv-panel-toggle.is-hidden {
  color: #34e0a1;
  border-color: #34e0a1;
  background: rgba(52, 224, 161, 0.16);
}
body.lv-panel-hidden .flow-intro,
body.lv-panel-hidden .flow-panel,
body.lv-panel-hidden .flow-log-rail {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 320ms ease;
}