/**
 * css/views/report-timeline.css
 * -----------------------------
 * Right-edge rail that indexes every audit report card in the conversation.
 * ChatGPT-style dot navigation, but each node is a snapshot with its own stats.
 */

.report-timeline {
  position: absolute;
  top: 88px;
  right: 8px;
  bottom: 226px;
  width: 46px;
  z-index: 32;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.report-timeline.is-empty {
  display: none;
}

.rt-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The 12-dot window no longer fills the rail, so centre the chrome and the
     dot viewport as a group within the available height. */
  justify-content: center;
  gap: 8px;
  max-height: 100%;
  pointer-events: auto;
  /* A finger on the rail scrubs snapshots, so the browser must not claim the
     vertical drag as a page scroll part-way through the preview. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Fold / unfold chevron, above the counter chip */
.rt-collapse {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(13, 18, 31, 0.9);
  color: var(--text-dim);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.rt-collapse:hover,
.rt-collapse:focus-visible {
  color: var(--accent-cyan);
  border-color: rgba(6, 182, 212, 0.45);
  background: rgba(6, 182, 212, 0.12);
  outline: none;
}

/* Folded: the dots ARE the index now, so the chrome says so. */
.report-timeline.is-collapsed .rt-collapse,
.report-timeline.is-collapsed .rt-count {
  color: var(--accent-cyan);
  border-color: rgba(6, 182, 212, 0.4);
}

.report-timeline.is-collapsed .rt-count i {
  color: var(--accent-cyan);
}

/* Snapshot counter chip */
.rt-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(13, 18, 31, 0.9);
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.rt-count i {
  font-size: 0.55rem;
  color: var(--accent-emerald);
}

/* Overflow chip when older snapshots are windowed out of the rail */
.rt-more {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-dim);
  padding: 1px 4px;
  border-radius: 6px;
  border: 1px dashed var(--border-color);
  line-height: 1.3;
}

/* Scrollable dot track */
.rt-track {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 0;
  /* Must stay visible so hover tooltips can extend left over the conversation. */
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* A fixed 12-dot viewport sized to its content, not stretched down the whole
     rail. The JS renders exactly this many nodes; anything older or newer rolls
     off behind the faded edges and is reached by scrolling. */
  flex: 0 1 auto;
  min-height: 0;
}

.rt-track::-webkit-scrollbar {
  display: none;
}

/* Vertical spine behind the dots */
.rt-track::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--border-color) 6%,
    var(--border-color) 94%,
    transparent
  );
  pointer-events: none;
}

/* ─── Nodes ────────────────────────────────────────────────────────────────── */
.rt-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  /* Fixed row pitch. The rail now shows a set window of 12 dots rather than
     spreading them across the measured height, so each node reserves an equal
     slice and the dock magnification derives a stable spacing from it. The
     shrink factor lets the pitch tighten gracefully on a very short viewport
     rather than spill past the composer. */
  flex: 0 1 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.rt-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rt-color, var(--accent-emerald));
  border: 1px solid rgba(7, 9, 14, 0.9);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  /* --rt-scale is written per node by rtApplyDock(); every other visual change
     in the rail is derived from it so the swell stays perfectly in sync. */
  transform: scale(var(--rt-scale, 1));
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease, opacity 0.18s ease;
  will-change: transform;
  opacity: 0.62;
}

/* Grade letter lives inside the dot and only fades in once the dot is big
   enough to hold it legibly. */
.rt-dot-grade {
  font-family: var(--font-mono);
  font-size: 5.2px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #07090e;
  opacity: var(--rt-fade, 0);
  transition: opacity 0.12s ease;
  pointer-events: none;
  user-select: none;
}

/* Elapsed-hour tick label — only for the hovered or current node, so tight
   spacing never causes label collisions. */
.rt-tick {
  position: absolute;
  right: 100%;
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--text-dim);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
  white-space: nowrap;
}

.rt-node.is-active .rt-tick {
  opacity: 1;
  transform: translateX(0);
}

/* While the hover card is up the elapsed time is already inside it, and the
   tick would collide with the card's edge, so the card takes precedence. */
.rt-node.is-hot .rt-tick,
.rt-node:hover .rt-tick,
.rt-node:focus-visible .rt-tick {
  opacity: 0;
}

/* Size changes are owned by rtApplyDock(); these rules only add the glow ring
   and full opacity, otherwise a CSS scale would fight the dock's inline scale.
   The ring follows .is-hot rather than :hover so the ring and the swell can
   never disagree when two swollen dots overlap. */
.rt-node.is-hot .rt-dot,
.rt-node:focus-visible .rt-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-color) 22%, transparent);
}

.rt-node.is-active .rt-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-color) 26%, transparent);
}

.rt-node:focus-visible {
  outline: none;
}

.rt-node.is-active .rt-tick {
  color: var(--text-muted);
}

/* ─── Hover / focus card ───────────────────────────────────────────────────── */
/* One card for the whole rail, created by rtHoverCard() and positioned by JS.
   It lives on <body> rather than inside a node: the rail rebuilds its
   innerHTML every time a snapshot lands, and a card nested in a dot was being
   destroyed mid-hover (the card would vanish until the cursor moved again).
   Being an overlay also means no ancestor can clip it. */
.rt-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 208px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(13, 18, 31, 0.98);
  border: 1px solid var(--border-color);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  will-change: opacity;
}

.rt-hover-card.is-visible {
  opacity: 1;
  visibility: visible;
}

.rt-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rt-tip-grade {
  font-size: 0.78rem;
  font-weight: 800;
}

.rt-tip-verdict {
  margin-top: 4px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.rt-tip-risk {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.64rem;
  color: var(--text-dim);
}

.rt-tip-risk strong {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.rt-tip-bar {
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.rt-tip-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.rt-tip-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.rt-tip-stats div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rt-tip-stats span {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rt-tip-stats strong {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-main);
}

.rt-tip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-dim);
}

/* ─── Card flash when jumping to a snapshot ────────────────────────────────── */
@keyframes rtFlashPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }
  60% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.chat-msg.rt-flash .audit-report-container {
  animation: rtFlashPulse 1.3s ease-out;
  border-color: var(--border-accent);
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
/* Honour reduced-motion by snapping the dock instead of easing through it. */
@media (prefers-reduced-motion: reduce) {
  .rt-dot,
  .rt-dot-grade,
  .rt-tick,
  .rt-tooltip {
    transition-duration: 0.01ms !important;
  }

  .chat-msg.rt-flash .audit-report-container {
    animation: none;
  }
}

/* The rail stays available down to laptop widths; the message column reserves
   room for it so dots never sit on top of report text. */
@media (max-width: 1320px) {
  .report-timeline {
    right: 2px;
    width: 32px;
  }

  .rt-tooltip {
    width: 190px;
  }

  .chat-workspace.has-rt .messages-column-v4 {
    padding-right: 28px;
  }
}

/* The rail stays available at every width the rail is useful at. Hiding it
   entirely below 900px made the feature look broken on any window narrower
   than a maximised desktop one, so it now slims down instead of disappearing:
   the dots are the only way to jump between snapshots. */
@media (max-width: 900px) {
  .report-timeline {
    right: 0;
    width: 26px;
  }

  .rt-rail {
    gap: 6px;
  }

  /* The counter and overflow chips are wider than this strip, and being inside
     a centred column they used to widen the whole rail past the viewport edge.
     Drop the icon and tighten the padding so they fit the dots. */
  .rt-count {
    padding: 2px 4px;
    font-size: 0.55rem;
  }

  .rt-count i {
    display: none;
  }

  .rt-more {
    padding: 0 3px;
    font-size: 0.5rem;
  }

  .rt-node {
    width: 26px;
  }

  .rt-tooltip {
    width: 172px;
  }

  .chat-workspace.has-rt .messages-column-v4 {
    padding-right: 22px;
  }
}

/* Phones: the rail is the fastest way to reach a report on a small screen, so
   it stays — slimmed to a bare strip of dots. The counter chips cannot fit in
   this width, and the rail keeps a finger-width target while costing the
   conversation as little room as possible. */
@media (max-width: 560px) {
  .report-timeline {
    right: 0;
    width: 26px;
  }

  .rt-rail {
    gap: 4px;
  }

  .rt-node {
    width: 22px;
    min-height: 14px;
  }

  /* The counter chips cannot fit at this width, but the fold chevron stays:
     a foldable card list is worth more on a phone than on any other screen.
     It keeps a finger-sized target while the rail only widens by 4px. */
  .rt-count,
  .rt-more {
    display: none;
  }

  .rt-collapse {
    width: 24px;
    height: 22px;
    font-size: 0.6rem;
  }

  .rt-tooltip {
    width: 158px;
  }

  .chat-workspace.has-rt .messages-column-v4 {
    padding-right: 22px;
  }
}

/* While a finger is holding the rail the whole page is a scrub surface: stop
   iOS/Android opening a selection or callout under the finger. */
body.rt-scrubbing {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Settings chip: the rail's entry point to the timeline settings screen */
.rt-settings {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(13, 18, 31, 0.9);
  color: var(--text-dim);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.rt-settings:hover,
.rt-settings:focus-visible,
body.rt-page-open .rt-settings {
  color: var(--accent-cyan);
  border-color: rgba(6, 182, 212, 0.45);
  background: rgba(6, 182, 212, 0.12);
  outline: none;
}

/* ── Timeline settings screen ──────────────────────────────────────────────────
   Four settings, each with a sentence of explanation, so this is a screen and
   not a menu: a full-height column over the app, opened from the gear. It lives
   at body level because the rail rebuilds its innerHTML on every snapshot, and
   a panel nested inside it would be destroyed mid-tap. */
.rt-cfg-page {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 520;
  justify-content: center;
  overflow: hidden;
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.rt-cfg-page.is-open {
  display: flex;
}

/* An open screen owns the page: the conversation behind it must not scroll away
   under a finger that is only reaching for a switch. */
body.rt-page-open {
  overflow: hidden;
}

/* The rail's preview card belongs to a rail the screen is covering. */
body.rt-page-open #rtHoverCard {
  display: none !important;
}

.rt-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 620px);
  height: 100%;
  background: linear-gradient(180deg, #0d1421, #080d16);
  border-left: 1px solid rgba(6, 182, 212, 0.18);
  border-right: 1px solid rgba(6, 182, 212, 0.18);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  outline: none;
  animation: rtPageIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rtPageIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rt-page-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(9, 13, 24, 0.94);
}

.rt-page-back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.rt-page-back:hover,
.rt-page-back:focus-visible {
  color: var(--accent-cyan);
  border-color: rgba(6, 182, 212, 0.45);
  outline: none;
}

.rt-page-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.rt-page-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rt-page-title {
  margin: 1px 0 0;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
}

.rt-page-state {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rt-page-state.is-paused {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

/* The body is the only scrolling region, so the title and the way back stay put
   however many sections are added later. */
.rt-page-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 20px;
}

.rt-page-intro {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.rt-page-sec {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.04);
}

.rt-page-sec-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.rt-page-sec-head > i {
  flex-shrink: 0;
  width: 16px;
  margin-top: 3px;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  text-align: center;
}

.rt-page-sec h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.rt-page-sec p {
  margin: 3px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.rt-page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rt-page-row > div {
  min-width: 0;
}

.rt-page-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

/* Six cadence choices fit one row on a page, where the old 244px panel had to
   wrap them into two. */
.rt-page-seg-six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rt-page-opt {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(148, 163, 184, 0.06);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.rt-page-opt:hover,
.rt-page-opt:focus-visible {
  color: var(--text-main);
  border-color: rgba(6, 182, 212, 0.4);
  outline: none;
}

.rt-page-opt.is-on {
  color: #04121a;
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  font-weight: 700;
}

.rt-page-note {
  margin-top: 8px !important;
  font-family: var(--font-mono);
  font-size: 0.6rem !important;
  line-height: 1.4 !important;
  color: var(--text-dim);
  opacity: 0.82;
}

.rt-page-switch {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(148, 163, 184, 0.06);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.rt-page-switch-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4b5563;
  transition: background 0.2s, box-shadow 0.2s;
}

.rt-page-switch.is-on {
  color: var(--accent-emerald);
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
}

.rt-page-switch.is-on .rt-page-switch-dot {
  background: var(--accent-emerald);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.rt-page-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(10px + var(--safe-bottom));
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(9, 13, 24, 0.94);
}

.rt-page-reset {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: rgba(148, 163, 184, 0.06);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  cursor: pointer;
}

.rt-page-reset:hover,
.rt-page-reset:focus-visible {
  color: var(--text-main);
  border-color: rgba(148, 163, 184, 0.4);
  outline: none;
}

.rt-page-done {
  flex: 1 1 auto;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.16);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.rt-page-done:hover,
.rt-page-done:focus-visible {
  background: rgba(6, 182, 212, 0.26);
  outline: none;
}

/* Preview cards off: the rail still magnifies under the cursor, the card never
   opens. */
body.rt-no-previews #rtHoverCard {
  display: none !important;
}

@media (max-width: 560px) {
  .rt-settings {
    width: 24px;
    height: 22px;
    font-size: 0.6rem;
  }

  .rt-page {
    border-left: none;
    border-right: none;
  }

  /* Six chips across 390px leave about 47px each, which is tight enough that
     the 6h label sits on its own border; two rows of three stay comfortable. */
  .rt-page-seg-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ─── Drop ring on a dot ──────────────────────────────────────────────────── */
/* An unmarked dot means the counts held or grew since the result before it. A
   ringed one is the result that found engagement taken back — and only that
   one, because the comparison is previous result to current result, never to
   the highest value the post ever reached. Ringing every later dot would turn
   the rail into a wall of warnings that says nothing about when it happened.
   box-shadow is owned by the dock halo (hot / active / focus-visible), so the
   mark is a pseudo-element ring: it scales with the dot and can never be
   overwritten by the swell. */
.rt-node.is-drop .rt-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--accent-rose);
  border-radius: 50%;
  opacity: 0.95;
  pointer-events: none;
}

/* Idle dots sit at 0.62 opacity and the ring is their child, so a dropped
   result keeps a little more of its own weight to stay findable. */
.rt-node.is-drop .rt-dot {
  opacity: 0.88;
}

.rt-node.is-drop.is-hot .rt-dot,
.rt-node.is-drop:focus-visible .rt-dot,
.rt-node.is-drop.is-active .rt-dot {
  opacity: 1;
}

/* ─── Drop line in the hover card ─────────────────────────────────────────── */
/* The ring says which snapshot lost ground; this says what it lost and by how
   much, in the same units the report card uses. */
.rt-tip-drop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border-color);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rt-tip-drop strong {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
}