@import url(https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=Montserrat:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap);
/* ==========================================================================
   Panel chrome — ported from webflow/style.css's .wrapper / .content /
   .content-title-wrapper / .content-title / .content-share-btn /
   .chart__dropdowns / .dropdown* / .content-tabs.tabbar, prefixed "rpc-"
   (this is its own Code Component, so unlike the page-level original there's
   one wrapper per chart instance, not one wrapper holding several).
   ========================================================================== */
.rpc-wrapper {
  position: relative;
  box-sizing: border-box;
  padding: 48px;
  width: 100%;
  background: #e9f5fe;
  border-radius: 32px;
  font-family: Roboto, sans-serif;
}

/* Scoped version of webflow/style.css's #blur-overlay — shown behind the
   token dropdown while it's open. Kept scoped to this panel (position:
   absolute inside .rpc-wrapper) rather than the original's viewport-covering
   position:fixed, since this component now shares the page with other
   Webflow content that shouldn't get blurred too. z-index sits below
   .rpc-dropdowns (10) so the dropdown itself stays sharp. Always mounted
   (ChartPanel toggles --active) rather than conditionally rendered, so the
   opacity transition below actually has something to animate from/to —
   matches the original's own opacity 0/1 + transition:opacity 0.3s pattern. */
.rpc-backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.2);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.rpc-backdrop--active {
  opacity: 1;
  pointer-events: auto;
}

.rpc-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.rpc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  width: 100%;
}

.rpc-title {
  color: #1a1b1f;
  text-align: center;
  font-size: 24px;
  line-height: 150%;
  font-weight: 500;
  position: relative;
  margin: 0 auto;
}

/* Icon pulled out of the inline text flow and pinned to the title's top-right
   corner (smaller than the base 16px .tooltip so it reads as a badge, not
   inline punctuation) — the content box then anchors off the icon itself,
   opening below and right of it. */
.rpc-title .tooltip {
  position: absolute;
  top: -6px;
  right: -16px;
  width: 11px;
  height: 11px;
  font-size: 7px;
}

.rpc-title .tooltip__content.active {
  top: 16px;
  right: -16px;
  z-index: 100000;
}

.rpc-share-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  background-color: #ffffff;
  border: 1px solid #222;
  top: 0;
  right: 0;
  width: 157px;
  border-radius: 54px;
  font-weight: bold;
  font-family: inherit;
  font-size: 14px;
  color: #1a1b1f;
  cursor: pointer;
}

.rpc-share-btn__icon {
  display: inline-flex;
}

/* Layout row holding either the lone token dropdown, or (when extraFilters
   is passed) the .rpc-dropdowns-group below — wraps on narrow widths instead
   of overflowing. */
.rpc-filters-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

/* Matches webflow's .dropdowns-wrapper — the shared pill that encloses the
   token dropdown plus any extraFilters (tail-risk/pro's Confidence Level/
   Period pickers) as one group, each still rendering its own smaller pill
   (.rpc-dropdowns--nested below) inside it. Only used when extraFilters is
   passed; a lone token dropdown renders .rpc-dropdowns directly instead,
   matching webflow's single-dropdown pages (no .dropdowns-wrapper there). */
.rpc-dropdowns-group {
  position: relative;
  display: flex;
  gap: 5px;
  border-radius: 41px;
  border: 1px solid #fff;
  background: #e9f5fe;
  padding: 5px;
  height: 56px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  z-index: 9;
}

@media screen and (max-width: 600px) {
  .rpc-dropdowns-group {
    flex-direction: column;
    height: auto;
    border-radius: 24px;
  }
}

.rpc-dropdowns {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: fit-content;
  max-width: 230px;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 41px;
  border: 1px solid #fff;
  background: linear-gradient(181deg, rgba(255, 255, 255, 0.5) 1.15%, rgba(255, 255, 255, 0) 98.91%);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  padding: 5px;
  gap: 5px;
  z-index: 10;
}

/* Matches webflow's ".dropdowns-wrapper .chart__dropdowns" override — inside
   the shared group pill above, each dropdown drops its own blur and padding
   (the group's own padding already insets it) since the group pill already
   supplies the enclosing glass surface. */
.rpc-dropdowns--nested {
  max-width: none;
  margin: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  z-index: auto;
}

@media screen and (max-width: 600px) {
  .rpc-dropdowns--nested {
    width: 100%;
    text-align: center;
  }
}

.rpc-dropdown-btn {
  width: 100%;
  box-sizing: border-box;
  border-radius: 30px;
  border: 1px solid #d3e3eb;
  background: rgba(211, 227, 235, 0.5);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  color: #1a1b1f;
  font-family: inherit;
  font-size: 14px;
  line-height: 150%;
  padding: 11px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.rpc-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  z-index: 9999;
  color: #000;
}

.rpc-dropdown--active {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 12px;
  margin-top: 4px;
  border-radius: 20px;
  border: 1px solid #fff;
  background: #e9f5fe;
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  gap: 5px;
  max-height: 250px;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 99999;
}

.rpc-dropdown-item {
  width: 100%;
  flex-shrink: 0;
  height: auto;
  box-sizing: border-box;
  border-radius: 30px;
  border: 1px solid #d3e3eb;
  background: rgba(211, 227, 235, 0.5);
  padding: 5px 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
}

.rpc-dropdown-item:hover {
  background: rgba(211, 227, 235, 0.9);
}

.rpc-tabbar {
  width: 100%;
  max-width: 230px;
  border-radius: 41px;
  border: 1px solid #fff;
  background: linear-gradient(181deg, rgba(255, 255, 255, 0.5) 1.15%, rgba(255, 255, 255, 0) 98.91%);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  padding: 5px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.rpc-tabbar__btn {
  outline: none;
  border: none;
  background: none;
  width: 100%;
  height: 40px;
  color: #1a1b1f;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 150%;
  cursor: pointer;
  border-radius: 30px;
}

.rpc-tabbar__btn--active {
  border: 1px solid #d3e3eb;
  background: rgba(211, 227, 235, 0.5);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
}

.rpc-body {
  width: 100%;
  position: relative;
}

/* A sibling of .rpc-content (not one of its flex children) so it doesn't
   inherit that container's 48px header<->body gap — it only needs a small
   margin above it, sitting close under the chart rather than floating
   halfway down a big empty gap. */
.rpc-footer {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  text-align: right;
  color: #969696;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

@media (max-width: 600px) {
  .rpc-wrapper {
    padding: 16px 20px;
    border-radius: 24px;
  }

  .rpc-share-btn {
    display: none;
  }
}

@media (max-width: 1024px) {
  .rpc-share-btn {
    padding: 8px;
    width: auto;
  }
}

/* ==========================================================================
   Tooltip — reuses SmartTokensWidget/Tooltip.tsx's hardcoded .tooltip /
   .tooltip__content classnames verbatim (kept global to match that shared
   component, same convention DashboardCard/SmartTokensWidget already use).
   ========================================================================== */
.tooltip {
  position: relative;
  background: none;
  outline: none;
  padding: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: Roboto, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #000;
  cursor: default;
}

.tooltip__content {
  display: none;
}

.tooltip__content.active {
  position: absolute;
  width: 256px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 4px 12px 0px rgba(10, 10, 23, 0.15);
  display: block;
  color: #1a1b1f;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  line-height: 150%;
  text-align: left;
  text-wrap: wrap;
}

/* ==========================================================================
   Plot / line-chart chrome — ported from .plot-container / .line-controls / .plot
   ========================================================================== */
.rpc-plot-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

/* Matches webflow's .plotly-timeframe-selector — pinned to the plot area's
   own top-right corner (webflow anchors it with a hardcoded pixel offset off
   .content, tuned to that page's exact title-row height; anchoring off
   .rpc-plot-container itself instead reaches the same top-right-of-the-plot
   spot without depending on this panel's own header height). */
.rpc-plotly-timeframe-selector {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 4px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 4px;
  border: 1px solid #d3d3d3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 600px) {
  .rpc-plotly-timeframe-selector {
    top: -40px;
  }
}

.rpc-plotly-timeframe-selector__btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  border-radius: 3px;
  min-width: 32px;
  text-align: center;
  font-family: "Open Sans", verdana, arial, sans-serif;
  transition: background-color 0.2s ease;
  line-height: normal;
}

.rpc-plotly-timeframe-selector__btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.rpc-plotly-timeframe-selector__btn--active {
  background: #1f77b4;
  color: #fff;
}

.rpc-line-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 30px;
  margin-left: 30px;
  max-width: calc(100% - 180px);
}

.rpc-line-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  color: #222;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  line-height: 150%;
  text-transform: none !important;
}

.rpc-line-controls input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: black;
}

.rpc-line-controls__swatch {
  display: inline-block;
  width: 32px;
  height: 2px;
}

.rpc-plot {
  width: 100%;
}

/* Plotly.js injects its own base stylesheet into `document` via
   CSSStyleSheet.insertRule() when it loads — fine on a normal page, but a
   Shadow Root doesn't inherit rules from the outer document's stylesheets,
   so none of this reaches the chart elements once this component actually
   runs inside Shadow DOM (unlike this same file's plain \3c style> tag, which
   IS part of the component's own bundle and does apply inside the shadow
   root). Without it the stacked main-svg layers lose their absolute
   positioning and stack in normal flow instead of overlaying, and the
   modebar (camera/zoom/pan toolbar) has no layout at all and falls back to
   a plain vertical block stack instead of Plotly's actual default —
   horizontal, pinned to the plot's top-right corner. Copied verbatim from
   a live Plotly instance (same copy already used by
   SmartTokensWidget/style.css for this exact reason); mapbox-specific
   rules are omitted since none of these charts are maps. */
.js-plotly-plot .plotly .vertical [data-title]::before {
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(105, 115, 138);
  border-image: none;
  margin-top: 8px;
  margin-right: -30px;
}

.js-plotly-plot .plotly .vertical [data-title]::before,
.js-plotly-plot .plotly .vertical [data-title]::after {
  top: 0%;
  right: 200%;
}

.js-plotly-plot .plotly [data-title]::after {
  content: attr(data-title);
  background: rgb(105, 115, 138);
  color: rgb(255, 255, 255);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  margin-right: -18px;
  border-radius: 2px;
}

.js-plotly-plot .plotly [data-title]::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(105, 115, 138);
  border-image: none;
  z-index: 1002;
  margin-top: -12px;
  margin-right: -6px;
}

.js-plotly-plot .plotly [data-title]:hover::before,
.js-plotly-plot .plotly [data-title]:hover::after {
  display: block;
  opacity: 1;
}

.js-plotly-plot .plotly [data-title]::before,
.js-plotly-plot .plotly [data-title]::after {
  position: absolute;
  transform: translate3d(0px, 0px, 0px);
  display: none;
  opacity: 0;
  z-index: 1001;
  pointer-events: none;
  top: 110%;
  right: 50%;
}

.js-plotly-plot .plotly .modebar.vertical .modebar-group .modebar-btn {
  display: block;
  text-align: center;
}

.js-plotly-plot .plotly .modebar.vertical .modebar-group {
  display: block;
  float: none;
  padding-left: 0px;
  padding-bottom: 8px;
}

.js-plotly-plot .plotly .modebar.vertical svg {
  top: -1px;
}

.js-plotly-plot .plotly .modebar.vertical {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-end;
  max-height: 100%;
}

.js-plotly-plot .plotly .modebar-btn svg {
  position: relative;
  top: 2px;
}

.js-plotly-plot .plotly .modebar-btn {
  position: relative;
  font-size: 16px;
  padding: 3px 4px;
  height: 22px;
  cursor: pointer;
  line-height: normal;
  box-sizing: border-box;
}

.js-plotly-plot .plotly .modebar-group {
  float: left;
  display: flex;
  box-sizing: border-box;
  padding-left: 8px;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
}

.js-plotly-plot .plotly:hover .modebar--hover .modebar-group {
  opacity: 1;
}

.js-plotly-plot .plotly .modebar--hover> :not(.watermark) {
  opacity: 0;
  transition: opacity 0.3s;
}

.js-plotly-plot .plotly .ease-bg {
  transition: background-color 0.3s;
}

.js-plotly-plot .plotly .modebar {
  position: absolute;
  top: 2px;
  right: 2px;
}

.js-plotly-plot .plotly .cursor-grab {
  cursor: grab;
}

.js-plotly-plot .plotly .cursor-ne-resize {
  cursor: ne-resize;
}

.js-plotly-plot .plotly .cursor-n-resize {
  cursor: n-resize;
}

.js-plotly-plot .plotly .cursor-nw-resize {
  cursor: nw-resize;
}

.js-plotly-plot .plotly .cursor-e-resize {
  cursor: e-resize;
}

.js-plotly-plot .plotly .cursor-w-resize {
  cursor: w-resize;
}

.js-plotly-plot .plotly .cursor-se-resize {
  cursor: se-resize;
}

.js-plotly-plot .plotly .cursor-s-resize {
  cursor: s-resize;
}

.js-plotly-plot .plotly .cursor-sw-resize {
  cursor: sw-resize;
}

.js-plotly-plot .plotly .cursor-ew-resize {
  cursor: ew-resize;
}

.js-plotly-plot .plotly .cursor-ns-resize {
  cursor: ns-resize;
}

.js-plotly-plot .plotly .cursor-row-resize {
  cursor: row-resize;
}

.js-plotly-plot .plotly .cursor-col-resize {
  cursor: col-resize;
}

.js-plotly-plot .plotly .cursor-move {
  cursor: move;
}

.js-plotly-plot .plotly .cursor-crosshair {
  cursor: crosshair;
}

.js-plotly-plot .plotly .cursor-pointer {
  cursor: pointer;
}

.js-plotly-plot .plotly .cursor-default {
  cursor: default;
}

.js-plotly-plot .plotly .main-svg .draglayer {
  pointer-events: all;
}

.js-plotly-plot .plotly .main-svg {
  position: absolute;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.js-plotly-plot .plotly svg a:hover {
  fill: rgb(60, 109, 197);
}

.js-plotly-plot .plotly svg a {
  fill: rgb(68, 122, 219);
}

.js-plotly-plot .plotly svg {
  overflow: hidden;
}

.js-plotly-plot .plotly .user-select-none {
  user-select: none;
}

.js-plotly-plot .plotly .crisp {
  shape-rendering: crispedges;
}

.js-plotly-plot .plotly a:hover {
  text-decoration: none;
}

.js-plotly-plot .plotly a {
  text-decoration: none;
}

.js-plotly-plot .plotly input:focus,
.js-plotly-plot .plotly button:focus {
  outline: none;
}

.js-plotly-plot .plotly input,
.js-plotly-plot .plotly button {
  font-family: "Open Sans", verdana, arial, sans-serif;
}

.js-plotly-plot .plotly,
.js-plotly-plot .plotly div {
  direction: ltr;
  font-family: "Open Sans", verdana, arial, sans-serif;
  margin: 0px;
  padding: 0px;
}

/* Normalizes the y-axis title size across every chart to 14px. Each chart's
   own layout.yaxis.title.font.size varies (14/16 depending on the file) and
   Plotly renders that as an inline style on the <text class="ytitle">
   element, which a plain CSS rule can't beat — hence !important — rather
   than editing every chart's layout config individually. */
.js-plotly-plot .plotly .ytitle {
  font-size: 14px !important;
}

/* ==========================================================================
   Gauge row (Current Volatility Snapshot) — ported from #gauges-wrapper /
   .gauge-col. GaugeDial renders bare classnames (.gauge, .level, .risk-*,
   ...) that DashboardCard/style.css also defines its own copy of (for its
   smaller, title-less widget variant). In production each Code Component is
   its own Shadow DOM so those never collide — but in this shared dev preview
   (and defensively, in case anything ever renders un-isolated) equal-
   specificity rules are order-dependent, and DashboardCard's copy was
   winning and hiding this title/badge entirely. Every rule below is scoped
   under .rpc-gauge-row so it always outranks the unscoped original.
   ========================================================================== */
.rpc-gauge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  justify-content: center;
}

@media screen and (max-width: 600px) {
  .rpc-gauge-row {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
}

.rpc-gauge-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  flex: 1;
  min-width: 260px;
}

/* height:auto, not a fixed 300px — the title (h2) sits in normal flow above
   the svg, so a hardcoded 300px was too short once the title became visible
   (it used to be display:none), and the svg overflowed the box by the
   title's ~37px height, bleeding down into the stat card below. Letting the
   box size to its actual content (title + circle) removes that overflow;
   .gauge__value-container's bottom:42px still anchors correctly since it's
   relative to the svg's own bottom edge, which is now this box's bottom too. */
.rpc-gauge-row .gauge {
  width: 270px;
  height: auto;
  position: relative;
  transform: scale(1.1);
  /* bottom-anchored so the 10% scale grows the title upward instead of
     bleeding the circle's bottom edge further down into the card below. */
  transform-origin: center bottom;
}

.rpc-gauge-row .gauge h2 {
  display: block;
  color: #1a1b1f;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  position: relative;
  width: fit-content;
  margin: 0 auto 10px auto;
}

.rpc-gauge-row .gauge>svg {
  display: block;
  width: 270px;
  height: 300px;
  background: #f5f5f5;
  border-radius: 50%;
}

.rpc-gauge-row .gauge .gauge-key {
  transform-origin: center;
  transition: transform 0.6s ease;
}

.rpc-gauge-row .gauge .gauge__value-container {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  font-family: Roboto, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
  color: #ffffff;
  user-select: none;
}

.rpc-gauge-row .gauge-value__wrapper {
  position: relative;
  top: 10px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rpc-gauge-row .gauge-value__wrapper img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.rpc-gauge-row .gauge__value-container .bg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}

/* position:relative + z-index so this paints above .bg's decorative ribbon —
   without an explicit position, this static box was losing to .bg's
   position:absolute in the stacking order regardless of DOM order (static
   in-flow boxes always paint below positioned siblings), which hid the
   risk-level badge entirely even once the display:none collision above was fixed. */
.rpc-gauge-row .gauge .level {
  display: block;
  position: relative;
  z-index: 2;
  padding: 0 12px;
  text-wrap: nowrap;
  max-width: fit-content;
  margin: 0 auto;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  border-radius: 50px;
  color: #fff;
}

.rpc-gauge-row .risk-unknown {
  background-color: #6c757d;
}

.rpc-gauge-row .risk-very-low {
  background-color: #7865b3;
}

.rpc-gauge-row .risk-low {
  background-color: #73c5df;
}

.rpc-gauge-row .risk-medium {
  background-color: #9fbef2;
}

.rpc-gauge-row .risk-high {
  background-color: #cdc1e4;
}

.rpc-gauge-row .risk-very-high {
  background-color: #faa99e;
}

/* Level badge + percentage wedge shifted slightly right, but ONLY for the
   captured social share image — not the live interactive panel.
   ChartShareButton adds .rpc-capture-mode to the chart body right before
   calling html-to-image and removes it immediately after, so this never
   applies outside that brief capture window. */
.rpc-capture-mode .gauge .level,
.rpc-capture-mode .gauge__value-container .bg svg {
  transform: translateX(8px);
}

/* .rpc-gauge-row .gauge scales up 1.1x anchored at its own bottom edge (see
   that rule above), which paints the h2 title above this row's own layout
   box — invisible live (nothing clips a plain box's paint overflow), but
   html-to-image sizes the captured PNG to exactly that box, so the title was
   silently cropped out of the share image. Reserve room for that bleed only
   during capture, so the live layout stays pixel-identical. */
.rpc-capture-mode .rpc-gauge-row {
  padding-top: 40px;
}

/* ==========================================================================
   Stat card (Current Volatility Snapshot) — ported from charts/card/style.css
   ========================================================================== */
.rpc-card {
  --rpc-down: #f28b82;
  --rpc-up: #2fb36d;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, #f5fbff, #eef6ff);
  border: 1px solid #e6eef7;
  box-shadow: 0 10px 15px rgba(23, 58, 94, 0.08);
  font: 14px/1.35 Inter, sans-serif;
  color: #1f2937;
}

.rpc-card__title {
  margin: 0 0 8px;
  text-align: center;
  font-weight: 700;
  color: #222222;
  font-size: 1.17em;
  line-height: normal;
}

.rpc-card__delta {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 8px;
  margin: 6px 0 2px;
  font-weight: 700;
  font-size: 18px;
}

.rpc-card__delta svg {
  width: 18px;
  height: 18px;
}

.rpc-card__delta-sub {
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}

.rpc-card--down .rpc-card__delta,
.rpc-card--down .rpc-card__delta svg,
.rpc-card--down .rpc-card__delta-sub {
  color: var(--rpc-down);
  fill: currentColor;
}

.rpc-card--up .rpc-card__delta,
.rpc-card--up .rpc-card__delta svg,
.rpc-card--up .rpc-card__delta-sub {
  color: var(--rpc-up);
  fill: currentColor;
}

.rpc-card--up .rpc-card__delta svg {
  transform: rotate(180deg);
}

.rpc-card__stats {
  display: flex;
  flex-direction: column;
  gap: 10px 16px;
  margin: 8px 0 5px;
  padding: 0 6px;
}

.rpc-card__stats-row {
  display: flex;
  justify-content: space-between;
}

.rpc-card__stats dt {
  font-weight: 600;
  color: #222222;
}

.rpc-card__stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ==========================================================================
   Loading state
   ========================================================================== */
.rpc-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  z-index: 20;
}

.rpc-spinner {
  width: 40px;
  height: 40px;
  border: 6px solid #ddd;
  border-top-color: #96e5f0;
  border-radius: 50%;
  animation: rpc-spin 1s linear infinite;
}

@keyframes rpc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Share capture header — ported from charts/shareModal/wrapper.html's
   .chart-header / .chart-logo / .chart-info. It exists only to be captured
   by html-to-image and composited onto the chart screenshot, never actually
   shown on the page — kept out of view via ChartShareButton's zero-size
   overflow:hidden wrapper, NOT by pushing this element itself far off-screen
   (position:fixed;left:-10000px used to be tried here: html-to-image
   serializes the DOM into an SVG foreignObject sized off the node's own
   bounding rect, and a rect thousands of px outside typical viewport bounds
   reliably rendered blank instead of the actual title/logo content). This
   stays at a normal in-flow position so its own capture is reliable; only
   its zero-size ancestor keeps it invisible on the page.
   ========================================================================== */
/* Vertical padding only — horizontal framing is added uniformly around both
   this header and the (padding-less) chart body by composeShareImage.ts's
   canvas step, so the two stay flush with each other's edges. */
.rpc-capture-header {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 0 20px;
  background: #e9f5fe;
}

.rpc-capture-logo {
  position: absolute;
  left: 28px;
  top: 28px;
  width: 100px;
  color: #222;
}

.rpc-capture-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.rpc-capture-info h3 {
  margin: 0 0 5px;
  color: #222;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
}

.rpc-capture-info p {
  margin: 0 0 5px;
  color: #222;
  font-family: Roboto, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 150%;
}

.rpc-capture-info p:last-child {
  margin-bottom: 0;
}

.rpc-capture-info span {
  font-size: 18px;
  font-weight: 600;
}

/* ==========================================================================
   Share modal — the header/socials/link/download row reuse DashboardCard's
   own dc-share, dc-social-btn, and dc-btn classes verbatim (imported
   cross-folder the same way GaugeDial/Tooltip/Modal already are) so this looks identical
   to the dashboard card's own share modal, per request. Only the preview
   image needs its own rule: DashboardCard's SharePanel clones a live
   CardPreview DOM node and scales it down to a fixed 446px box, which doesn't
   apply here — ChartShareButton just captures a screenshot and shows it, so
   it should run full width instead. Matches charts/shareModal/modal.css's
   own .sw-preview img exactly (that legacy stylesheet is the original source
   for this same chart share flow).
   ========================================================================== */
.sw-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* dc-modal / dc-share / dc-social-btn / dc-btn themselves were never
   actually duplicated here (unlike .sw-preview above) — ChartShareButton
   imports the DashboardCard `Modal` *component*, not DashboardCard's
   style.css, so these classnames rendered with zero CSS once this chart
   shipped as its own Code Component in its own Shadow DOM (dev only looks
   right because both stylesheets happen to share one page there). Copied
   verbatim from DashboardCard/style.css. */
.dc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.dc-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dc-modal__body {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  height: 100%;
  max-height: 700px;
  background-color: #fff;
  border-radius: 32px;
  padding: 40px;
  overflow: auto;
  box-sizing: border-box;
}

.dc-modal__body--compact {
  max-width: 600px;
  max-height: 770px;
}

.dc-modal__body--sheet {
  width: auto;
  height: auto;
  min-width: 550px;
  max-width: 70%;
  max-height: 90vh;
}

.dc-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.25s;
}

.dc-modal__close:hover {
  transform: scale(0.9);
}

.dc-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.dc-share__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dc-share__header h3 {
  margin: 0;
  color: #222;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  text-align: center;
}

.dc-share__socials {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.dc-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: #222;
  cursor: pointer;
}

.dc-social-btn svg {
  width: 33px;
  height: 33px;
}

.dc-social-btn--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.dc-share__link {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.dc-share__link input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 50px 12px 16px;
  border: 1px solid #222;
  border-radius: 16px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #222;
  background: transparent;
}

.dc-share__link button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #222;
  cursor: pointer;
  padding: 0;
}

.dc-share__link button svg {
  width: 25px;
  height: 25px;
}

.dc-share__link button:disabled {
  opacity: 0.5;
  cursor: default;
}

.dc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  border-radius: 30px;
  padding: 6px 15px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.dc-btn--solid {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
}

.dc-btn--solid:hover {
  background-color: #fff;
  color: #000;
}

.dc-share__download {
  width: 125px;
  height: 44px;
  flex: none;
  font-family: Inter, sans-serif;
  border-radius: 100px;
}

/* ==========================================================================
   Volatility heatmap table — forecast/pro's forecast-volatility-heatmap has
   no chart at all, just a sortable table of risk levels per asset. Ported
   verbatim from webflow/style.css's generic table/th/td, thead tr,
   tbody/tbody td, .header-realized/.header-forecast and .risk-* rules (that
   page has no table styling of its own beyond those shared, page-wide
   rules) — every selector scoped under .rpc-heatmap so it doesn't leak into
   this shared dev preview's other tables.
   ========================================================================== */
.rpc-heatmap-wrap {
  width: 100%;
  overflow-x: auto;
}

.rpc-heatmap {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 25px;
  overflow: hidden;
  font-family: Roboto, sans-serif;
}

.rpc-heatmap th,
.rpc-heatmap td {
  border: 1px solid #eeeeee;
  text-align: center;
  vertical-align: middle;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 150%;
}

.rpc-heatmap th {
  font-weight: 600;
}

.rpc-heatmap thead tr {
  background: #fff;
  height: 45px;
  color: #222;
}

.rpc-heatmap__th-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.rpc-heatmap__group {
  border: 3px solid #5e5e5e !important;
}

.rpc-heatmap__group--forecast {
  border-top-right-radius: 25px;
  border-left: none !important;
}

/* Continues the Realized/Forecast divider (row 1's .rpc-heatmap__group
   border-right, and the tbody td:nth-child(5) rule below) through the
   1D/7D/30D sub-header row too, between "30 Days" and the next "1 Day".
   Scoped to .rpc-heatmap--forecast, not the bare .rpc-heatmap base class —
   RiskPerformanceTable and TopDrawdown reuse .rpc-heatmap with entirely
   different column layouts, where nth-child(3) is a different, unrelated
   column. */
.rpc-heatmap--forecast thead tr:nth-child(2) th:nth-child(3) {
  border-right: 3px solid #5e5e5e;
}

.rpc-heatmap__sortable {
  cursor: pointer;
  user-select: none;
}

.rpc-heatmap__sort-icon {
  display: inline-flex;
  vertical-align: middle;
}

.rpc-heatmap tbody {
  background-color: #fff;
}

.rpc-heatmap tbody td {
  border: 1px solid #fff;
  background: linear-gradient(109deg, rgba(219, 232, 242, 0.5) 37.07%, rgba(237, 247, 255, 0) 68.09%);
  padding: 24px 16px;
}

@media (max-width: 1024px) {
  .rpc-heatmap tbody td {
    padding: 4px;
  }
}

/* Continues the Realized/Forecast divider (the header's border-right above)
   down through the data rows — matches webflow's inline border-right on
   this same column's <td>. Scoped to .rpc-heatmap--forecast, not the bare
   .rpc-heatmap base class — see the thead rule above for why. */
.rpc-heatmap--forecast tbody td:nth-child(5) {
  border-right: 3px solid #5e5e5e;
}

/* Top 20 Drawdown Events by Magnitude — scoped to .rpc-heatmap--drawdown,
   not the bare .rpc-heatmap base class, since RiskPerformanceTable and the
   Volatility Regime Heatmap reuse that same class with their own padding. */
.rpc-heatmap--drawdown tbody td {
  padding: 8px;
}

/* webflow declares tbody td:first-child twice — an earlier `font-style:
   italic; font-weight: 400 !important` and a later `font-weight: bold` with
   no !important, so the !important wins and it renders as italic/regular,
   not bold, despite the second rule's intent. Matched here as it actually
   renders, not as it reads. */
.rpc-heatmap tbody td:first-child {
  font-style: italic;
  font-weight: 400;
}

/* webflow's .risk-* rules only ever set background-color — every cell keeps
   the table's default black text, even "Very Low"'s dark purple. */
.rpc-heatmap .risk-very-low {
  background-color: #7865b3;
}

.rpc-heatmap .risk-low {
  background-color: #73c5df;
}

.rpc-heatmap .risk-medium {
  background-color: #9fbef2;
}

.rpc-heatmap .risk-high {
  background-color: #cdc1e4;
}

.rpc-heatmap .risk-very-high {
  background-color: #faa99e;
}

.rpc-heatmap .risk-unknown {
  background-color: #6c757d;
}

.sw-preview img {
  max-width: 100%;
  max-height: 530px;
  border-radius: 12px;
  display: block;
}

/* ==========================================================================
   riskOffOn's epoch table (CurrentEpoch/PreviousEpoch) and payoff cards
   (EstimatedTokenValue) — ported from webflow/riskOffOn's current-epoch.js/
   previous-epoch.js (renderEpochTable) and estimated-token-value.js
   (renderSmartTokenChart/renderScenarioTable).
   ========================================================================== */
.rpc-epoch-table-wrap {
  width: 100%;
  /* Matches webflow's .epoch-table { margin-top: 50px; }. */
  margin-top: 50px;
  /* Its 11 columns squeeze unreadably narrow on mobile widths (headers
     collapse into single-letter-per-line stacks) — scroll horizontally
     instead of shrinking them. */
  overflow-x: auto;
}

/* Matches the page's generic table/th/td/thead-tr rules plus .epoch-table's
   own radius override (rounded top corners only — this table is always the
   last thing on the page, so there's no bottom content for a matching
   bottom radius to read against) — same ported rules as .rpc-heatmap and
   .rpc-scenario__table, re-declared under this table's own class.
   table-layout:auto (each th/td width:auto) sizes its 11 columns to their
   own content instead of forcing them all equal-width, which was squeezing
   long headers/values into overlapping text; the wrap's overflow-x:auto
   above scrolls the resulting wider-than-container table on narrow
   viewports instead. */
.rpc-epoch-table {
  width: 100%;
  min-width: 720px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 25px 25px 0 0;
  overflow: hidden;
  font-family: Roboto, sans-serif;
}

.rpc-epoch-table th,
.rpc-epoch-table td {
  width: auto;
  border: 1px solid #eeeeee;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  line-height: 150%;
}

.rpc-epoch-table th {
  border-top: none;
  border-left: none;
  font-weight: 600;
  padding: 8px;
}

.rpc-epoch-table thead tr {
  background: #fff;
  color: #222;
}

/* Matches webflow's generic tbody { background-color: white; } — visible
   through the tbody td gradient's transparent tail (its 68.09% stop fades to
   rgba(...,0)), so without this the row shows whatever sits behind the panel
   instead of white there. */
.rpc-epoch-table tbody {
  background-color: #fff;
}

.rpc-epoch-table tbody td {
  border: 1px solid #fff;
  background: linear-gradient(109deg,
      rgba(219, 232, 242, 0.5) 37.07%,
      rgba(237, 247, 255, 0) 68.09%);
  padding: 24px 16px;
}

.rpc-epoch-table tbody td:first-child {
  background: #fff;
  font-style: italic;
  font-weight: 400;
  border-bottom: 1px solid #eeeeee;
}

/* Matches webflow's generic .positive/.negative (#72ba8e/#f5a196, normal
   weight) — also used, correctly, by tail-risk/pro's TopDrawdown table
   (webflow/js/top-drowdown.js's magnitude cell is class="magnitude
   negative"), which reuses this same class. Not #2fb36d/#d64545 — those
   don't appear anywhere in the webflow reference. */
.rpc-epoch-table__positive {
  color: #72ba8e;
}

.rpc-epoch-table__negative {
  color: #f5a196;
}

/* Ported from components/summary-card/style.css's .cards-wrapper (loaded by
   estimated-token-value.html via a "../../components/..." relative path that
   resolves to that root-level folder, not anything under webflow/). */
.rpc-payoff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  justify-content: center;
}

/* Matches webflow/style.css's .riskOffOnCard. */
.rpc-payoff-card {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.176);
  border-radius: 10px;
  overflow: hidden;
  font-family: Inter, sans-serif;
  box-sizing: border-box;
}

/* webflow's rule reads `font-weight: 600px`, an invalid CSS value the
   browser drops entirely, so this actually renders at the inherited normal
   (400) weight rather than the bold the rule's author evidently intended —
   matched here as it actually renders, not as it reads. */
.rpc-payoff-card__header {
  padding: 8px 16px;
  font-size: 16px;
  color: #000;
  text-align: center;
  background-color: #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.176);
}

/* Matches webflow's .riskOffOnCard-body — only the chart itself sits in this
   padded box; the scenario title/sub/table below are a separate, unpadded
   section (.riskOffOnCard-table) that runs edge-to-edge with the card. */
.rpc-payoff-card__chart {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.rpc-scenario {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #000;
}

.rpc-scenario__title {
  margin: 24px 0 6px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.rpc-scenario__sub {
  margin-bottom: 4px;
  color: rgba(33, 37, 41, 0.75);
  font-size: 14px;
  text-align: center;
}

.rpc-scenario__sub em {
  color: #666;
  font-style: italic;
}

.rpc-scenario__current {
  margin-bottom: 4px;
  color: #000;
  text-align: center;
}

.rpc-scenario__value {
  font-size: 20px;
  font-weight: 700;
}

/* webflow's .positive/.negative palette (#72ba8e/#f5a196) — distinct from
   .rpc-epoch-table__positive/negative's darker #2fb36d/#d64545, which belong
   to the separate current/previous-epoch tables, not this scenario one. */
.rpc-scenario__positive {
  color: #72ba8e;
}

.rpc-scenario__negative {
  color: #f5a196;
}

/* Matches the page's generic table/th/td/thead-tr rules (this table has no
   styling of its own beyond .riskOffOnCard-table's padding:0 override below)
   — same ported rules as .rpc-heatmap, just re-declared under this table's
   own class instead of sharing a selector across unrelated tables. */
.rpc-scenario__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 25px;
  overflow: hidden;
  margin-bottom: 40px;
}

.rpc-scenario__table th,
.rpc-scenario__table td {
  border: 1px solid #eeeeee;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  line-height: 150%;
}

.rpc-scenario__table th {
  border-top: none;
  border-left: none;
  font-weight: 600;
  padding: 8px;
}

.rpc-scenario__table thead tr {
  background: #fff;
  color: #222;
}

/* Matches .riskOffOnCard-table tbody td's padding:0 !important — this
   table's data rows are packed tight, unlike the heatmap's 24px/16px. */
.rpc-scenario__table tbody td {
  border: 1px solid #fff;
  background: linear-gradient(109deg, rgba(219, 232, 242, 0.5) 37.07%, rgba(237, 247, 255, 0) 68.09%);
  padding: 0;
}

.rpc-scenario__table tbody td:first-child {
  background: #fff;
  font-style: italic;
  font-weight: 400;
  border-bottom: 1px solid #eeeeee;
}

/* webflow's JS tags the row closest to the stop-loss/barrier change with a
   "highlight" class (rpc-scenario__row--highlight in PayoffCard.tsx), but no
   stylesheet (including components/summary-card's) ever styles it — it's
   dead markup there, so no rule is declared here either, matching that
   rather than inventing a highlight webflow itself never renders. */

/* ==========================================================================
   tail-risk/pro's stat cards (daily-returns, distribution, frequency-extreme)
   — matches components/summary-card/style.css's .info-card/.info-title/
   .info-value markup those pages all use (that stylesheet is loaded via a
   "../../../components/..." relative path resolving to that root-level
   folder, not anything under webflow/ — see the .rpc-payoff-row/.cards-wrapper
   comment above for the same file).
   ========================================================================== */
/* Matches components/summary-card/style.css's #cardsContainer.cards-wrapper
   — gap:20px between cards, and its padding-bottom:80px (here margin-bottom,
   since this row has no content of its own following it to pad against)
   separating the cards from the chart below. */
.rpc-info-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 80px;
}

.rpc-info-card {
  min-width: 300px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 16px 32px;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .rpc-info-card {
    width: 100%;
  }
}

/* Frequency of Extreme Moves' six cards — matches webflow/js/frequency-
   extreme.js's renderCards() setting cardEl.style.minWidth = "130px" inline,
   overriding the shared .info-card default (240px there, tuned for rows of
   2-3 cards) so six can fit per row instead of wrapping immediately. */
.rpc-info-cards--compact .rpc-info-card {
  min-width: 130px;
}

.rpc-info-card__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #222;
  margin-bottom: 16px;
}

/* Matches components/summary-card/style.css's span.tooltip override (size
   still comes from webflow/style.css's base span.tooltip, loaded alongside
   it on the same page — 10x10px/8px font, smaller than the shared .tooltip
   default sized for other contexts like the panel title). */
.rpc-info-card__title .tooltip {
  position: absolute;
  top: 0;
  right: -20px;
  width: 10px;
  height: 10px;
  font-size: 8px;
}

.rpc-info-card__value {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

/* webflow's .info-value.positive/.negative (#72ba8e/#f5a196) — same generic
   palette as .rpc-heatmap's risk colors and .rpc-scenario__positive/negative,
   not the #2fb36d/#d64545 pair, which don't appear anywhere in webflow. */
.rpc-info-card__value--positive {
  color: #72ba8e;
}

.rpc-info-card__value--negative {
  color: #f5a196;
}

.rpc-info-card__value--neutral {
  color: #1a1b1f;
}

/* risk/pro's group-performance / sector-performance expandable tables and
   the historical-*-performance-* line charts' shared chrome. Scoped under
   .rpc-perf-table so its th/td rules always win over .rpc-heatmap's despite
   both living in this one stylesheet (see the shared/ dev-preview note on
   cross-folder class collisions — real Webflow Shadow DOM wouldn't need this). */
.rpc-perf-table__th-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Matches webflow's .tooltip-wrapper — position:relative so the "i" tooltip
   trigger below can pin to its top-right corner instead of sitting inline
   next to the label text. */
.rpc-perf-table__th-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Matches webflow's span.tooltip on this table (10x10px, 8px font) — smaller
   than the shared .tooltip default (16x16px, 10px font) sized for other
   contexts like the panel title. */
.rpc-perf-table__th-label .tooltip {
  position: absolute;
  top: -5px;
  right: -15px;
  width: 10px;
  height: 10px;
  font-size: 8px;
}

.rpc-perf-table .rpc-perf-table__positive {
  color: #2fb36d;
}

.rpc-perf-table .rpc-perf-table__negative {
  color: #d64545;
}

.rpc-perf-table__group-row {
  cursor: pointer;
}

.rpc-perf-table__name-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rpc-perf-table__chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.rpc-perf-table__chevron--open {
  transform: rotate(180deg);
}

.rpc-perf-table__asset-row td:first-child {
  padding-left: 24px;
}

.rpc-perf-table__asset-name {
  color: #5b5b5b;
}

.rpc-perf-table__comparison {
  margin-top: 24px;
}

.rpc-perf-table__comparison-header {
  text-align: left !important;
}