/* @import lives FIRST so the browser actually honours it. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* === SHARED WIDGET CHROME (scoped) === */

/* ============ Tokens — scoped to the widget ============ */
.sift-rca-sync{
  --sift-orange:        #F04A01;
  --sift-orange-bright: #FF5722;
  --sift-orange-deep:   #EE4120;
  --rubber-black:       #1B1D1F;
  --vanta:              #000000;
  --steel:              #726E6E;
  --titanium:           #E1D7D0;
  --ceramic:            #EEEFEC;
  --lunar:              #848582;

  --gray-100: #111111;
  --gray-90:  #222222;
  --gray-80:  #353534;
  --gray-70:  #4B4C4A;
  --gray-60:  #6A6B68;
  --gray-50:  #848582;
  --gray-40:  #9E9F9C;
  --gray-30:  #BABAB6;
  --gray-20:  #D4D4D0;
  --gray-10:  #EEEFEC;

  /* Channels — telemetry plot lines. Shared across all three RCA animations
     so the same channel reads the same color from panel to panel. */
  --ch-red:    #FA4D56;
  --ch-orange: #F89E37;
  --ch-blue:   #4589FF;
  --ch-cyan:   #33B1FF;
  --ch-mint:   #4ED49B;
  --ch-purple: #BE95FF;
  --ch-yellow: #FCC539;
  --ch-derived: #4ED49B;

  --rec-red: #E62325;

  /* Syntax token colors. */
  --tok-var: #FFAB70;
  --tok-num: #79B8FF;
  --tok-op:  #F97583;
}.sift-rca-sync, .sift-rca-sync *, .sift-rca-sync *::before, .sift-rca-sync *::after{ box-sizing: border-box; }

/* ============ Demo stage (shared) ============
   Dark canvas every RCA animation draws onto. */
.sift-rca-sync.demo-stage{
  background: #131416;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  overflow: hidden;
  color: var(--ceramic);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  container-type: inline-size;
}
.sift-rca-sync.demo-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
  pointer-events: none;
}

/* Generic clip transition wrapper — fades content groups in/out. */
.sift-rca-sync .clip{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-sync .clip.in{
  opacity: 1;
  pointer-events: auto;
}

/* Axes — used by every plot SVG. */
.sift-rca-sync .axis-tick{
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  fill: var(--gray-50);
  letter-spacing: 0.06em;
}
.sift-rca-sync .axis-time{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  fill: var(--gray-40);
  letter-spacing: 0.04em;
}
.sift-rca-sync .axis-line{ stroke: #2A2C2E; stroke-width: 1; }
.sift-rca-sync .grid-line{ stroke: rgba(255, 255, 255, 0.04); stroke-width: 1; }

/* ============ Demo cursor ============ */
.sift-rca-sync .cursor{
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  transition: transform 760ms cubic-bezier(0.2,0,0,1),
              opacity 280ms ease-out;
}
.sift-rca-sync .cursor.fast{
  transition: transform 420ms cubic-bezier(0.2,0,0,1),
              opacity 220ms ease-out;
}
/* Synced-scrub mode used by Sync — cursor tracks the playhead in lockstep
   with the hairline + event-log scroll. No transform transition means the
   React state update lands on the same paint as the hairline + table. */
.sift-rca-sync .cursor.synced{
  transition: transform 0ms linear,
              opacity 220ms ease-out;
}
.sift-rca-sync .cursor.visible{ opacity: 1; }
.sift-rca-sync .cursor-icon{
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
}
.sift-rca-sync .cursor-icon.arrow{
  width: 44px; height: 44px;
  top: -9.625px;
  left: -13.75px;
  display: block;
  transform-origin: 13.75px 9.625px;
}
.sift-rca-sync .cursor.clicking .cursor-icon.arrow{
  animation: sift-rca-sync-cursor-click 220ms cubic-bezier(0.2, 0, 0, 1);
}@keyframes sift-rca-sync-cursor-click {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.82); }
  100% { transform: scale(1); }
}

/* Build-in fade utility — used by every animation to introduce elements
   top-to-bottom one phase at a time. */
.sift-rca-sync .bi{
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1);
}
.sift-rca-sync .bi-in{ opacity: 1; }

/* Annotation tab — used by the Compare animation for the divergence marker.
   White mono ink on solid orange, rotated 90° CW by the JSX. */
.sift-rca-sync .anno-tab-rect{ fill: var(--sift-orange); }
.sift-rca-sync .anno-tab-text{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  fill: #FFFFFF;
  font-weight: 500;
}
.sift-rca-sync .anno-pop-host{
  animation: sift-rca-sync-anno-pop 280ms cubic-bezier(0.2,0,0,1);
}@keyframes sift-rca-sync-anno-pop {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.sift-rca-sync .anno-tab-host{
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: sift-rca-sync-tab-pop 320ms cubic-bezier(0.2,0,0,1);
}@keyframes sift-rca-sync-tab-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* Plot legend strip — square swatches, mono caps. */
.sift-rca-sync .plot-legend{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gray-40);
}
.sift-rca-sync .plot-legend .ch-key{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sift-rca-sync .plot-legend .swatch{
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* === PER-ANIMATION STYLES === */
/* =======================================================================
   Root Cause Analysis — Inspect / Sync animation — styles.

   Every selector scoped under `.sift-rca-sync`. The bundle's JS mounts a
   <div class="sift-rca-sync demo-stage r1-stage">…</div> root, so nothing here can leak to
   the host page or be overridden unless the host scopes under `.sift-rca-sync`.

   The host page needs to:
     1. Provide an element with id="rca-sync-root" for React to mount into.
     2. Load React 18 + ReactDOM 18 BEFORE RootCauseAnalysis_Sync.js.
     3. Load IBM Plex Sans + IBM Plex Mono (imported below via Google Fonts).

   No other dependencies. No shared CSS. No other animation files referenced.
   ======================================================================= */

/* === rca-anim-1.css ============================================
   Animation 1 — synced panels (Propulsion / Comms / GNC body rates /
   event log) wired to the LUCENT-1 incident telemetry.

   Layout mirrors the Sift product surface: a 2×2 grid of panels sharing
   a single synced cursor. The bottom-right cell is a TABLE instead of a
   plot — it holds the avionics event log, and the row matching the
   synced cursor's timestamp lights up alongside the hairline in the
   other three panels.

   Depends on shared chrome in Root Cause Analysis.html.
   ================================================================= */

/* Shell — outer padding matches anims 2 & 3 (56px L/R). */
.sift-rca-sync .r1-shell{
  position: absolute;
  inset: 26px 56px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top bar — title + asset chip on the left, Sync Time pill on the right. */
.sift-rca-sync .r1-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.sift-rca-sync .r1-title{
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ceramic);
  letter-spacing: -0.005em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sift-rca-sync .r1-title .r1-asset{
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--gray-30);
  letter-spacing: 0.04em;
  background: #2A2C2E;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
}
.sift-rca-sync .r1-sync{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ceramic);
  background: #1f2123;
  border: 1px solid #3A3B38;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 200ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-sync .r1-sync .r1-sync-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sift-orange);
}
.sift-rca-sync .r1-sync.active{
  border-color: var(--sift-orange);
  color: var(--sift-orange);
}

/* Grid — 2 columns × 2 rows. Each row is equal-height. */
.sift-rca-sync .r1-grid{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

/* Panel — wrapper for the head (tab) and body (data container). The
   tab and body each have their own borders + fill; the panel itself
   is just a layout container. */
.sift-rca-sync .r1-panel{
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
}
.sift-rca-sync .r1-panel-head{
  /* Tab — sized to content with symmetric padding. Sits above the data
     container with the same fill color so the tab visually attaches to
     the top of the data box; the seam between them is hidden by a 1px
     negative margin so the body's top border doesn't draw through the
     tab. */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: #0E0F11;
  border-top: 1px solid #2A2C2E;
  border-left: 1px solid #2A2C2E;
  border-right: 1px solid #2A2C2E;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.sift-rca-sync .r1-panel-name{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-30);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sift-rca-sync .r1-panel-name .r1-panel-tag{
  margin-left: 6px;
  color: var(--gray-60);
}
.sift-rca-sync .r1-panel-unit{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--gray-60);
  white-space: nowrap;
  flex-shrink: 0;
}
.sift-rca-sync .r1-panel-body{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0E0F11;
  border: 1px solid #2A2C2E;
  overflow: hidden;
}
.sift-rca-sync .r1-panel-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Y-axis tick label overlays — rendered as HTML, not SVG, so they
   stay at a fixed pixel size instead of inheriting the panel SVG's
   non-uniform preserveAspectRatio="none" stretch. Container width is
   set inline from PAD_L / svgW; ticks are vertically positioned via
   inline top:% (centered with translateY(-50%)). */
.sift-rca-sync .r1-y-ticks{
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 7.5px;
  color: var(--gray-50);
  letter-spacing: 0.04em;
  line-height: 1;
}
.sift-rca-sync .r1-y-ticks-left{ left: 0; }
.sift-rca-sync .r1-y-ticks-right{ right: 0; }
.sift-rca-sync .r1-y-tick{
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
}
.sift-rca-sync .r1-y-ticks-left .r1-y-tick{
  right: 4px;
}
.sift-rca-sync .r1-y-ticks-right .r1-y-tick{
  left: 4px;
}

/* Readout strip — sits in the top-right of each plot panel and shows
   the multi-channel values at the current synced time. Each chip is a
   little color swatch + value + unit. Hidden until the hairline turns
   on. The strip is anchored to the panel HEAD so it doesn't overlap
   the data area; the heading text shrinks to make room. */
.sift-rca-sync .r1-readouts{
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.2,0,0,1);
  pointer-events: none;
  flex-shrink: 0;
}
.sift-rca-sync .r1-readouts.show{ opacity: 1; }
.sift-rca-sync .r1-readout{
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  color: var(--ceramic);
  letter-spacing: 0.02em;
}
.sift-rca-sync .r1-readout .r1-readout-sw{
  width: 6px;
  height: 6px;
  border-radius: 1px;
  margin-right: 1px;
  transform: translateY(1px);
}
.sift-rca-sync .r1-readout .r1-readout-val{
  font-weight: 500;
}

/* Hairline + per-channel dots — drawn inside each panel's SVG. */
.sift-rca-sync .r1-hair{
  stroke: var(--ceramic);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-sync .r1-hair.show{ opacity: 0.7; }
.sift-rca-sync .r1-hair-dot{
  stroke: #0E0F11;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-sync .r1-hair-dot.show{ opacity: 1; }

/* Channel paths — kept thin so the hairline stays legible above them. */
.sift-rca-sync .r1-channel-path{
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- Event log table (bottom-right cell) ----------
   Per-second row table. The full 132-row body sits inside an overflow:
   hidden viewport; an inner .r1-table-scroll wrapper is translated up
   as the playhead advances so the highlighted (current-second) row is
   always pinned to slot 2 of the visible window. */
.sift-rca-sync .r1-table{
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  background: #0E0F11;
  border: 1px solid #2A2C2E;
  overflow: hidden;
}
.sift-rca-sync .r1-table-grid{
  display: grid;
  /* TIME (HH:MM:SS) | DATA RATE (kbps) | SIGNAL (dBm) */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  padding: 0 12px;
}
.sift-rca-sync .r1-table-head{
  flex-shrink: 0;
  border-bottom: 1px solid #1f2123;
  padding-top: 3px;
  padding-bottom: 3px;
  background: rgba(255,255,255,0.02);
}
.sift-rca-sync .r1-table-head > span{
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-60);
}
.sift-rca-sync .r1-table-head > span:nth-child(2),
.sift-rca-sync .r1-table-head > span:nth-child(3){
  text-align: right;
}
.sift-rca-sync .r1-table-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.sift-rca-sync .r1-table-scroll{
  position: relative;
  will-change: transform;
}
.sift-rca-sync .r1-table-row{
  height: 16px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--gray-30);
  cursor: default;
}
/* Highlight for the current-second row. Background-only — does NOT
   shift the row contents left or add a border. A light-grey wash on
   the dark panel reads as "this row is current" without competing
   with the orange channel emphasis on the plots. */
.sift-rca-sync .r1-table-row.active{
  background: rgba(255, 255, 255, 0.10);
  color: var(--ceramic);
}
.sift-rca-sync .r1-table-row .r1-tt{
  color: var(--ceramic);
  font-variant-numeric: tabular-nums;
}
.sift-rca-sync .r1-table-row.active .r1-tt{ color: var(--ceramic); }

.sift-rca-sync .r1-table-row .r1-num{
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--gray-20);
}
.sift-rca-sync .r1-table-row.active .r1-num{ color: var(--ceramic); }

.sift-rca-sync .r1-table-cell-evt{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sift-rca-sync .r1-table-cell-evt.empty{
  color: var(--gray-70);
}

/* ---------- Bottom strip — high-precision timestamp ---------- */
.sift-rca-sync .r1-ts-strip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 0;
  flex-shrink: 0;
}
.sift-rca-sync .r1-ts{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.sift-rca-sync .r1-ts-label{
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-60);
}
.sift-rca-sync .r1-ts-value{
  font-size: 13px;
  color: var(--ceramic);
  letter-spacing: 0.02em;
}
.sift-rca-sync .r1-ts-ms{ color: var(--ceramic); }
.sift-rca-sync .r1-ts-us{ color: var(--gray-30); }
.sift-rca-sync .r1-ts-ns{ color: var(--gray-50); }
.sift-rca-sync .r1-ts-sep{ color: var(--gray-70); padding: 0 1px; }

.sift-rca-sync .r1-hint{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-60);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-sync .r1-hint.show{ opacity: 1; }