/* @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-compare{
  --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-compare, .sift-rca-compare *, .sift-rca-compare *::before, .sift-rca-compare *::after{ box-sizing: border-box; }

/* ============ Demo stage (shared) ============
   Dark canvas every RCA animation draws onto. */
.sift-rca-compare.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-compare.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-compare .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-compare .clip.in{
  opacity: 1;
  pointer-events: auto;
}

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

/* ============ Demo cursor ============ */
.sift-rca-compare .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-compare .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-compare .cursor.synced{
  transition: transform 0ms linear,
              opacity 220ms ease-out;
}
.sift-rca-compare .cursor.visible{ opacity: 1; }
.sift-rca-compare .cursor-icon{
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
}
.sift-rca-compare .cursor-icon.arrow{
  width: 44px; height: 44px;
  top: -9.625px;
  left: -13.75px;
  display: block;
  transform-origin: 13.75px 9.625px;
}
.sift-rca-compare .cursor.clicking .cursor-icon.arrow{
  animation: sift-rca-compare-cursor-click 220ms cubic-bezier(0.2, 0, 0, 1);
}@keyframes sift-rca-compare-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-compare .bi{
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1);
}
.sift-rca-compare .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-compare .anno-tab-rect{ fill: var(--sift-orange); }
.sift-rca-compare .anno-tab-text{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  fill: #FFFFFF;
  font-weight: 500;
}
.sift-rca-compare .anno-pop-host{
  animation: sift-rca-compare-anno-pop 280ms cubic-bezier(0.2,0,0,1);
}@keyframes sift-rca-compare-anno-pop {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.sift-rca-compare .anno-tab-host{
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: sift-rca-compare-tab-pop 320ms cubic-bezier(0.2,0,0,1);
}@keyframes sift-rca-compare-tab-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* Plot legend strip — square swatches, mono caps. */
.sift-rca-compare .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-compare .plot-legend .ch-key{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sift-rca-compare .plot-legend .swatch{
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* === PER-ANIMATION STYLES === */
/* =======================================================================
   Root Cause Analysis — Compare (browse channels) animation.

   Plot panel matches the Derive bundle's vocabulary; the channel-browser
   card matches the Sift Explore channels-panel tree (CSV root with
   timestamp subtitle, asset folder with cube glyph, sans tree rows,
   bright/bold for the currently-plotted leaf, dim 12-px type/unit tag on
   the right of each leaf). Card slides up from the bottom over the plot.
   ======================================================================= */

/* ---------- Plot panel — vocab matches Derive's r2-plot-* ---------- */
.sift-rca-compare .c3-plot-clip{
  position: absolute;
  inset: 26px 56px 24px 56px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-compare .c3-plot-clip.in{ opacity: 1; }

.sift-rca-compare .c3-plot-shell{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sift-rca-compare .c3-plot-head{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  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-compare .c3-plot-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;
}
.sift-rca-compare .c3-plot-name .c3-plot-asset{
  margin-left: 8px;
  color: var(--gray-50);
}

.sift-rca-compare .c3-plot-body{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0E0F11;
  border: 1px solid #2A2C2E;
  overflow: hidden;
}
.sift-rca-compare .c3-plot-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sift-rca-compare .c3-y-ticks{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  color: var(--gray-50);
  letter-spacing: 0.04em;
  line-height: 1;
}
.sift-rca-compare .c3-y-tick{
  position: absolute;
  right: 5px;
  transform: translateY(-50%);
  white-space: nowrap;
}
.sift-rca-compare .c3-y-unit{
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--gray-50);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}

.sift-rca-compare .c3-x-ticks{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  color: var(--gray-50);
  letter-spacing: 0.04em;
  line-height: 1;
}
.sift-rca-compare .c3-x-tick{
  position: absolute;
  bottom: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* Edge ticks anchor to the plot-body edges with the same 12px padding
   as the bottom — keeps the labels safely off the corner. */
.sift-rca-compare .c3-x-tick.edge-left{
  left: 12px;
  transform: none;
}
.sift-rca-compare .c3-x-tick.edge-right{
  left: auto;
  right: 12px;
  transform: none;
}

.sift-rca-compare .c3-ch-path{
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sift-rca-compare .c3-plot-legend{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 2px 0;
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gray-40);
}
.sift-rca-compare .c3-plot-legend .ch-key{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 280ms cubic-bezier(0.2,0,0,1),
              transform 280ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-compare .c3-plot-legend .ch-key.show{
  opacity: 1;
  transform: translateY(0);
}
.sift-rca-compare .c3-plot-legend .swatch{
  width: 9px;
  height: 9px;
  border-radius: 0;
  flex: 0 0 auto;
}
.sift-rca-compare .c3-plot-legend .ch-key-suffix{
  color: var(--gray-50);
  margin-left: 2px;
}

/* ---------- Right-click context menu ----------
   Pops at the cursor position (left/top set inline). Dark sans rows,
   square corners; matches the visual vocabulary of the Sift Explore
   context menus. */
.sift-rca-compare .c3-ctxmenu{
  position: absolute;
  z-index: 25;
  min-width: 220px;
  background: #1B1D1F;
  border: 1px solid #2A2C2E;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
  padding: 4px 0;
  font-family: "IBM Plex Sans", sans-serif;
  animation: sift-rca-compare-ctx-pop 140ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes sift-rca-compare-ctx-pop {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
.sift-rca-compare .c3-ctx-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 28px;
  padding: 0 12px;
  color: rgba(241, 247, 255, 0.85);
  font-size: 12.5px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}
.sift-rca-compare .c3-ctx-item.hover{
  background: rgba(255, 255, 255, 0.08);
  color: rgb(237, 238, 240);
}
.sift-rca-compare .c3-ctx-label{
  flex: 1 1 auto;
}
.sift-rca-compare .c3-ctx-chev{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  color: rgba(241, 247, 255, 0.55);
  margin-left: auto;
}

/* ---------- Edit Alignment card (right side) ----------
   Same scale + slide vocabulary as the Channels card. Anchored to the
   right margin at half the telemetry container's inset (28px). */
.sift-rca-compare .c3-align-card{
  position: absolute;
  right: 28px;
  top: 83px;
  width: 280px;
  background: #1B1D1F;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
  color: var(--ceramic);
  font-family: "IBM Plex Sans", sans-serif;
  display: flex;
  flex-direction: column;
  z-index: 22;
  transform-origin: 100% 0;
  opacity: 0;
  transform: translateY(120%) scale(0.85);
  will-change: opacity, transform;
}
.sift-rca-compare .c3-align-head{
  padding: 10px 14px 8px;
  border-bottom: 1px solid #2A2C2E;
}
.sift-rca-compare .c3-align-title{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ceramic);
  letter-spacing: -0.005em;
}
.sift-rca-compare .c3-align-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #2A2C2E;
}
.sift-rca-compare .c3-align-row:last-child{ border-bottom: none; }
.sift-rca-compare .c3-align-label{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: rgba(241, 247, 255, 0.85);
}
.sift-rca-compare .c3-align-sub-val{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: rgba(241, 247, 255, 0.55);
}
.sift-rca-compare .c3-align-row.sub .c3-align-sub-val{
  color: rgba(241, 247, 255, 0.55);
}
.sift-rca-compare .c3-align-row.sub .c3-align-sub-val:has(+ *){
  color: var(--ceramic);
}
.sift-rca-compare .c3-align-control{
  position: relative;
}
.sift-rca-compare .c3-align-select{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  min-width: 140px;
  background: #131416;
  border: 1px solid #2A2C2E;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: var(--ceramic);
  cursor: pointer;
}
.sift-rca-compare .c3-align-select.open{
  border-color: var(--sift-orange);
}
.sift-rca-compare .c3-align-select-val{ flex: 1 1 auto; }
.sift-rca-compare .c3-align-select-chev{
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(241, 247, 255, 0.55);
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}
.sift-rca-compare .c3-align-select.open .c3-align-select-chev{
  transform: rotate(180deg);
}
.sift-rca-compare .c3-align-btn{
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: var(--ceramic);
  background: #2A2C2E;
  border: 1px solid #3A3B38;
  border-radius: 0;
  cursor: pointer;
}
.sift-rca-compare .c3-align-btn.active{
  border-color: var(--sift-orange);
  color: var(--sift-orange);
}
.sift-rca-compare .c3-align-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: #1B1D1F;
  border: 1px solid #2A2C2E;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  padding: 4px 0;
  z-index: 24;
  animation: sift-rca-compare-ctx-pop 140ms cubic-bezier(0.2, 0, 0, 1);
}
.sift-rca-compare .c3-align-dropdown.right{
  left: auto;
  right: 0;
}
.sift-rca-compare .c3-align-option{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: rgba(241, 247, 255, 0.85);
  white-space: nowrap;
  cursor: pointer;
}
.sift-rca-compare .c3-align-option.hover,
.sift-rca-compare .c3-align-option:hover{
  background: rgba(255, 255, 255, 0.08);
  color: var(--ceramic);
}
.sift-rca-compare .c3-align-option-check{
  width: 12px;
  text-align: center;
  color: var(--sift-orange);
  font-size: 11px;
}
.sift-rca-compare .c3-align-option-label{ flex: 1 1 auto; }

/* ---------- Spool annotation band + tab ----------
   Vertical band marks the alignment peak on a channel. The tab carries
   the "Spool" label — anchored to PAD_T (top of the plot) and rendered
   either inside the band (when wide enough) or flush outside-left when
   the band is narrower than the measured tab length. Behavior mirrors
   the Rules · LiveEval rule-annotation tab. */
.sift-rca-compare .c3-spool-band{
  fill: rgba(240, 74, 1, 0.10);
  stroke: var(--sift-orange);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  animation: sift-rca-compare-anno-pop 280ms cubic-bezier(0.2, 0, 0, 1);
}
.sift-rca-compare .c3-spool-tab-host{
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: sift-rca-compare-tab-pop 320ms cubic-bezier(0.2, 0, 0, 1);
}
.sift-rca-compare .c3-spool-tab{ fill: var(--sift-orange); }
.sift-rca-compare .c3-spool-tab-text{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  fill: #FFFFFF;
  font-weight: 500;
}

/* ---------- Channel-browser card — slides up from the bottom ----------
   Visual vocab matched to the Sift Explore channels panel (per the
   RootCauseTimeSeries Figma): CSV file root with timer icon + UTC
   subtitle, asset folder with cube glyph, sans-serif tree rows at
   14/20 line, bright + bold for the currently-plotted leaf, 12-px
   type/unit label tucked to the right. */
.sift-rca-compare .c3-card{
  /* Inset is half of the telemetry container's: the panel sits at
     26px / 56px / 24px / 56px, the card hugs in at exactly half on
     every side. Width is fixed; bottom is free so the card can overflow
     the stage when the tree is taller than the available space.
     transform-origin keeps the 0.85 scale anchored to the top-left so
     the scaled card stays aligned with its inset.
     min-height keeps the card's bottom anchored off the stage edge so
     it doesn't visibly contract upward when the tree collapses. */
  position: absolute;
  left: 28px;
  top: 83px;
  width: 320px;
  min-height: 720px;
  background: #1B1D1F;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.55);
  color: var(--ceramic);
  font-family: "IBM Plex Sans", sans-serif;
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform-origin: 0 0;
  /* opacity + transform are driven by inline style from the JS tween
     (so the slide-in keeps working when document.visibilityState is
     'hidden' and CSS transitions would otherwise pause). */
  opacity: 0;
  transform: translateY(120%) scale(0.85);
  will-change: opacity, transform;
}

/* Panel header — "Channels" caption + view-mode toggles, mimicking the
   Explore-panel chrome above the tree. */
.sift-rca-compare .c3-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #2A2C2E;
  flex-shrink: 0;
}
.sift-rca-compare .c3-card-title{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ceramic);
  letter-spacing: -0.005em;
}
.sift-rca-compare .c3-card-actions{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sift-rca-compare .c3-card-action{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(241,247,255,0.50);
}
.sift-rca-compare .c3-card-action svg{ width: 12px; height: 12px; display: block; }
.sift-rca-compare .c3-card-action.active{ color: rgb(237,238,240); }

/* Search field. */
.sift-rca-compare .c3-card-search{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin: 8px 12px 6px;
  padding: 0 10px;
  background: #131416;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  flex-shrink: 0;
}
.sift-rca-compare .c3-card-search svg{
  width: 12px; height: 12px;
  color: rgba(241,247,255,0.50);
  flex-shrink: 0;
}
.sift-rca-compare .c3-card-search-placeholder{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: rgba(241,247,255,0.45);
  letter-spacing: 0;
}

/* Tree body. */
.sift-rca-compare .c3-tree{
  display: flex;
  flex-direction: column;
  padding: 4px 0 10px;
}

/* CSV root — single-line row with the file icon. */
.sift-rca-compare .c3-csv{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}
.sift-rca-compare .c3-csv-icon{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgb(237,238,240);
}
.sift-rca-compare .c3-csv-icon svg{ width: 100%; height: 100%; display: block; }
.sift-rca-compare .c3-csv-body{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sift-rca-compare .c3-csv-name{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(237,238,240);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A row in the tree — folder or leaf. Single line, 24px tall, indent
   via the .indent-N modifier. No left color bar (per spec). */
.sift-rca-compare .c3-row{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 12px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(241,247,255,0.708);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  background: transparent;
  transition: background 140ms cubic-bezier(0.2,0,0,1),
              color 140ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-compare .c3-row:hover{
  background: rgba(255,255,255,0.05);
}
.sift-rca-compare .c3-row.cursor-on{
  background: rgba(255,255,255,0.07);
}

/* Indent levels — each level adds 16px. */
.sift-rca-compare .c3-row.indent-0{ padding-left: 12px; }
.sift-rca-compare .c3-row.indent-1{ padding-left: 28px; }
.sift-rca-compare .c3-row.indent-2{ padding-left: 44px; }
.sift-rca-compare .c3-row.indent-3{ padding-left: 60px; }
.sift-rca-compare .c3-row.indent-4{ padding-left: 76px; }

/* Caret — sized to 12px, color tracks the row. */
.sift-rca-compare .c3-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: rgba(241,247,255,0.55);
}
.sift-rca-compare .c3-caret svg{ width: 100%; height: 100%; display: block; }
.sift-rca-compare .c3-caret.open svg{ transform: rotate(90deg); }

/* Asset cube glyph — only used on the asset folder. */
.sift-rca-compare .c3-cube{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(241,247,255,0.65);
  flex-shrink: 0;
}
.sift-rca-compare .c3-cube svg{ width: 100%; height: 100%; display: block; }

/* Leaf type glyph — "#" for numeric channels, "T" for strings. */
.sift-rca-compare .c3-glyph{
  width: 12px;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(241,247,255,0.55);
  flex-shrink: 0;
}

/* Leaf name takes the remaining space; unit/type tag tucks to the right. */
.sift-rca-compare .c3-row-name{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sift-rca-compare .c3-row-unit{
  margin-left: auto;
  padding-left: 8px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.030px;
  color: rgba(218,240,255,0.361);
  flex-shrink: 0;
}

/* Currently-plotted leaf: bright + bold to match the Figma's active
   "Signal_Strength" treatment. The matching channel color shows up
   as a small bar to the left of the type glyph. */
.sift-rca-compare .c3-row.plotted{
  color: rgb(237,238,240);
}
.sift-rca-compare .c3-row.plotted .c3-row-name{
  font-weight: 700;
}
.sift-rca-compare .c3-row.plotted .c3-glyph{
  color: var(--c3-leaf-color, var(--ch-orange));
  font-weight: 700;
}

/* Children container — markup stays mounted; we toggle max-height + opacity
   for the expand animation. */
.sift-rca-compare .c3-children{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms cubic-bezier(0.2,0,0,1),
              opacity 220ms cubic-bezier(0.2,0,0,1);
}
.sift-rca-compare .c3-children.open{
  max-height: 600px;
  opacity: 1;
}