/* TMS Power Economics v1. Written by the WPCode snippet, never edited here. */

.tms-econ,
.tms-econ *,
.breakdance .tms-econ,
.breakdance .tms-econ * {
  box-sizing: border-box !important;   /* never depend on the host card's reset */
}

.tms-econ,
.breakdance .tms-econ {
  position: relative !important;
  z-index: 6 !important;             /* over the whole card CTA overlay (z2), under the rankings slot (z8) */
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 100%) !important;
  border: 1px solid rgba(21, 25, 35, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  text-align: left !important;
}

.tms-econ__periods,
.breakdance .tms-econ__periods {
  display: none !important;          /* revealed once the controller is ready */
  flex-direction: row !important;
  gap: 4px !important;
  align-items: center !important;
}

.tms-econ[data-econ-ready="1"] .tms-econ__periods,
.breakdance .tms-econ[data-econ-ready="1"] .tms-econ__periods {
  display: flex !important;
}

.tms-econ__period,
.breakdance .tms-econ__period {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  color: #2e3748 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(21, 25, 35, 0.16) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

.tms-econ__period[aria-pressed="true"],
.breakdance .tms-econ__period[aria-pressed="true"] {
  background: linear-gradient(180deg, #ff9900, #ff7a00) !important;
  color: #ffffff !important;
  border-color: rgba(255, 153, 0, 0.92) !important;
}

.tms-econ__period:focus-visible,
.breakdance .tms-econ__period:focus-visible {
  outline: 2px solid #d97200 !important;
  outline-offset: 2px !important;
}

.tms-econ__grid,
.breakdance .tms-econ__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.tms-econ__cell,
.breakdance .tms-econ__cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.tms-econ__val,
.breakdance .tms-econ__val {
  color: #151923 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
}

.tms-econ__val--earn,
.breakdance .tms-econ__val--earn { color: #197327 !important; }

.tms-econ__val--cost,
.breakdance .tms-econ__val--cost { color: #b42318 !important; }

.tms-econ__val--profit,
.breakdance .tms-econ__val--profit { color: #197327 !important; }

.tms-econ__val--profit.is-negative,
.breakdance .tms-econ__val--profit.is-negative { color: #b42318 !important; }

.tms-econ__lab,
.breakdance .tms-econ__lab {
  color: #5a6577 !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.tms-econ__roi,
.breakdance .tms-econ__roi {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  align-items: flex-start !important;
  width: 100% !important;
}
/* one line each: a small label, then the figure, centred on each other
   because a small caps label on a shared baseline reads as a drop */
.tms-ecard__roi-item,
.tms-effcard__roi-item,
.tms-vcard__roi-item,
.tms-ocard__roi-item,
.breakdance .tms-ecard__roi-item,
.breakdance .tms-effcard__roi-item,
.breakdance .tms-vcard__roi-item,
.breakdance .tms-ocard__roi-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 9px 0 !important;
}

.tms-econ__roi-val,
.breakdance .tms-econ__roi-val {
  color: #151923 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
}

.tms-econ__bar,
.breakdance .tms-econ__bar {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 10px !important;
  overflow: hidden !important;
  background: rgba(21, 25, 35, 0.12) !important;
  border-radius: 4px !important;
  cursor: default !important;
}

.tms-econ__bar:focus-visible,
.breakdance .tms-econ__bar:focus-visible {
  outline: 2px solid #d97200 !important;
  outline-offset: 3px !important;
}

/* the product page's own profit and loss colours, so a shopper meets the same
   red and green in both places (--aer-pp-cost and --aer-pp-profit) */
.tms-econ__bar-cost,
.breakdance .tms-econ__bar-cost {
  display: block !important;
  height: 100% !important;
  width: var(--tms-econ-cost, 0) !important;
  background: #dc2626 !important;
}

.tms-econ__bar-profit,
.breakdance .tms-econ__bar-profit {
  display: block !important;
  height: 100% !important;
  width: var(--tms-econ-profit, 0) !important;
  background: #16a34a !important;
}

/* Cost, profit, net ROI and the bar stay out of the layout until a usable
   electricity price is in play. Keyed on the state attribute alone, so it
   works for the panel and for a card that hosts the figures in its own
   furniture. */
[data-econ-state="gross"] [data-econ-needs-power],
.breakdance [data-econ-state="gross"] [data-econ-needs-power] {
  display: none !important;
}

.tms-econ__hint,
.breakdance .tms-econ__hint {
  margin: 0 !important;
  color: #5a6577 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.tms-econ[data-econ-state="power"] .tms-econ__hint,
.breakdance .tms-econ[data-econ-state="power"] .tms-econ__hint {
  display: none !important;
}

/* compact: the shop product card and the Overall card body column */
.tms-econ--compact,
.breakdance .tms-econ--compact {
  gap: 6px !important;
  padding: 8px 10px !important;
}

.tms-econ--compact .tms-econ__val,
.breakdance .tms-econ--compact .tms-econ__val { font-size: 12px !important; }

.tms-econ--compact .tms-econ__roi-val,
.breakdance .tms-econ--compact .tms-econ__roi-val { font-size: 11px !important; }

.tms-econ--compact .tms-econ__bar,
.breakdance .tms-econ--compact .tms-econ__bar { height: 8px !important; }

/* row: one dark line for the ROI teaser, spanning its grid */
.tms-econ--row,
.breakdance .tms-econ--row {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 8px 0 0 !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(239, 147, 36, 0.22) !important;
}

.tms-econ--row .tms-econ__grid,
.breakdance .tms-econ--row .tms-econ__grid {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  width: auto !important;
}

.tms-econ--row .tms-econ__roi,
.breakdance .tms-econ--row .tms-econ__roi { width: auto !important; }

.tms-econ--row .tms-econ__bar,
.breakdance .tms-econ--row .tms-econ__bar {
  flex: 1 1 120px !important;
  width: auto !important;
  min-width: 90px !important;
  height: 8px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.tms-econ--row .tms-econ__val,
.tms-econ--row .tms-econ__roi-val,
.breakdance .tms-econ--row .tms-econ__val,
.breakdance .tms-econ--row .tms-econ__roi-val { color: #f4f6fa !important; font-size: 12px !important; }

.tms-econ--row .tms-econ__val--earn,
.tms-econ--row .tms-econ__val--profit,
.breakdance .tms-econ--row .tms-econ__val--earn,
.breakdance .tms-econ--row .tms-econ__val--profit { color: #1fa83d !important; }

.tms-econ--row .tms-econ__val--cost,
.tms-econ--row .tms-econ__val--profit.is-negative,
.breakdance .tms-econ--row .tms-econ__val--cost,
.breakdance .tms-econ--row .tms-econ__val--profit.is-negative { color: #f97066 !important; }

.tms-econ--row .tms-econ__lab,
.tms-econ--row .tms-econ__hint,
.breakdance .tms-econ--row .tms-econ__lab,
.breakdance .tms-econ--row .tms-econ__hint { color: #aab4c4 !important; }

.tms-econ--row .tms-econ__period,
.breakdance .tms-econ--row .tms-econ__period {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6eaf1 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* emphasis: the figure this card family is about reads first */
.tms-econ--emph-profit .tms-econ__val--profit,
.breakdance .tms-econ--emph-profit .tms-econ__val--profit,
.tms-econ--emph-cost .tms-econ__val--cost,
.breakdance .tms-econ--emph-cost .tms-econ__val--cost {
  font-size: 15px !important;
  font-weight: 900 !important;
}

.tms-econ--emph-roi .tms-econ__roi-item:first-child .tms-econ__roi-val,
.breakdance .tms-econ--emph-roi .tms-econ__roi-item:first-child .tms-econ__roi-val {
  font-size: 15px !important;
  font-weight: 900 !important;
}

.tms-econ--compact.tms-econ--emph-profit .tms-econ__val--profit,
.breakdance .tms-econ--compact.tms-econ--emph-profit .tms-econ__val--profit,
.tms-econ--compact.tms-econ--emph-cost .tms-econ__val--cost,
.breakdance .tms-econ--compact.tms-econ--emph-cost .tms-econ__val--cost {
  font-size: 13.5px !important;
}/* ---------------------------------------------------------------
   Earnings card: the controller writes into the card's own cells,
so
   these rules only add the pieces that appear once a price is in play.
   --------------------------------------------------------------- */
.tms-ecard__econ,
.breakdance .tms-ecard__econ,
.tms-effcard__econ,
.breakdance .tms-effcard__econ,
.tms-vcard__econ,
.breakdance .tms-vcard__econ,
.tms-ocard__econ,
.breakdance .tms-ocard__econ {
  position: relative !important;
  /* the card's CTA stretches a click overlay across the whole face at z2, so
     this zone rides above it and the period buttons take their own clicks.
     The rankings slot stays higher still at z8, so an open panel wins. */
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}/* No panel around the figures: the card's own surface carries them,
and the
   ladder keeps the only box on this side. */
.tms-ecard__econ .tms-econ__period,
.breakdance .tms-ecard__econ .tms-econ__period,
.tms-effcard__econ .tms-econ__period,
.breakdance .tms-effcard__econ .tms-econ__period,
.tms-vcard__econ .tms-econ__period,
.breakdance .tms-vcard__econ .tms-econ__period,
.tms-ocard__econ .tms-econ__period,
.breakdance .tms-ocard__econ .tms-econ__period {
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {.tms-ecard__econ,
.breakdance .tms-ecard__econ,
.tms-effcard__econ,
.breakdance .tms-effcard__econ,
.tms-vcard__econ,
.breakdance .tms-vcard__econ,
.tms-ocard__econ,
.breakdance .tms-ocard__econ { transition: none !important; }/* the meter is a band beneath the table,
wide enough to carry both shares
   and their figures */
}




/* the meter is a band beneath the table, wide enough to carry both shares
   and their figures */
.tms-ecard__econ .tms-econ__bar,
.tms-effcard__econ .tms-econ__bar,
.tms-vcard__econ .tms-econ__bar,
.tms-ocard__econ .tms-econ__bar,
.breakdance .tms-ecard__econ .tms-econ__bar,
.breakdance .tms-effcard__econ .tms-econ__bar,
.breakdance .tms-vcard__econ .tms-econ__bar,
.breakdance .tms-ocard__econ .tms-econ__bar {
  width: 100% !important;
  height: 16px !important;
  border-radius: 4px !important;
}.tms-ecard__econ .tms-econ__bar-cost,
.tms-ecard__econ .tms-econ__bar-profit,
.breakdance .tms-ecard__econ .tms-econ__bar-cost,
.breakdance .tms-ecard__econ .tms-econ__bar-profit,
.tms-effcard__econ .tms-econ__bar-cost,
.tms-effcard__econ .tms-econ__bar-profit,
.breakdance .tms-effcard__econ .tms-econ__bar-cost,
.breakdance .tms-effcard__econ .tms-econ__bar-profit,
.tms-vcard__econ .tms-econ__bar-cost,
.tms-vcard__econ .tms-econ__bar-profit,
.breakdance .tms-vcard__econ .tms-econ__bar-cost,
.breakdance .tms-vcard__econ .tms-econ__bar-profit,
.tms-ocard__econ .tms-econ__bar-cost,
.tms-ocard__econ .tms-econ__bar-profit,
.breakdance .tms-ocard__econ .tms-econ__bar-cost,
.breakdance .tms-ocard__econ .tms-econ__bar-profit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.tms-econ__bar-pct,
.breakdance .tms-econ__bar-pct {
  padding: 0 5px !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}/* With a price the trio reads Earnings,
Cost,
Profit,
so the wide column and
   the tint move to the last cell and the middle one,
always the smallest
   figure,
takes the least room. */
.tms-ecard[data-econ-state="power"] .tms-ecard__ladder,
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__ladder,
.tms-effcard[data-econ-state="power"] .tms-effcard__ladder,
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__ladder,
.tms-vcard[data-econ-state="power"] .tms-vcard__ladder,
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__ladder,
.tms-ocard[data-econ-state="power"] .tms-ocard__ladder,
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__ladder {
  /* Matched outer columns, so the middle of the cost cell is the middle of the
     card and the payback divider below it lands on the same line. The middle
     column is the narrower one because cost is the smaller figure, but not by
     much: a yearly cost carries as many digits as a yearly earning. The
     min-content floors mean a figure grows its column rather than spilling. */
  grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 0.84fr) minmax(min-content, 1fr) !important;
}.tms-ecard[data-econ-state="power"] .tms-ecard__lcell--mo,
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__lcell--mo,
.tms-effcard[data-econ-state="power"] .tms-effcard__lcell--mo,
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__lcell--mo,
.tms-vcard[data-econ-state="power"] .tms-vcard__lcell--mo,
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__lcell--mo,
.tms-ocard[data-econ-state="power"] .tms-ocard__lcell--mo,
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__lcell--mo {
  background: transparent !important;
}.tms-ecard[data-econ-state="power"] .tms-ecard__lcell:last-child,
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__lcell:last-child,
.tms-effcard[data-econ-state="power"] .tms-effcard__lcell:last-child,
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__lcell:last-child,
.tms-vcard[data-econ-state="power"] .tms-vcard__lcell:last-child,
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__lcell:last-child,
.tms-ocard[data-econ-state="power"] .tms-ocard__lcell:last-child,
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__lcell:last-child {
  background: rgba(31, 174, 82, 0.08) !important;
}.tms-ecard[data-econ-state="power"] .tms-ecard__lcell:last-child .tms-ecard__lval,
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__lcell:last-child .tms-ecard__lval,
.tms-effcard[data-econ-state="power"] .tms-effcard__lcell:last-child .tms-effcard__lval,
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__lcell:last-child .tms-effcard__lval,
.tms-vcard[data-econ-state="power"] .tms-vcard__lcell:last-child .tms-vcard__lval,
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__lcell:last-child .tms-vcard__lval,
.tms-ocard[data-econ-state="power"] .tms-ocard__lcell:last-child .tms-ocard__lval,
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__lcell:last-child .tms-ocard__lval {
  font-size: 17.5px !important;
}/* the cost label carries its own rate,
so it sits a step smaller to keep the
   line on one row */
.tms-ecard[data-econ-state="power"] .tms-ecard__lcell[data-econ-tip],
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__lcell[data-econ-tip],
.tms-effcard[data-econ-state="power"] .tms-effcard__lcell[data-econ-tip],
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__lcell[data-econ-tip],
.tms-vcard[data-econ-state="power"] .tms-vcard__lcell[data-econ-tip],
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__lcell[data-econ-tip],
.tms-ocard[data-econ-state="power"] .tms-ocard__lcell[data-econ-tip],
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__lcell[data-econ-tip] {
  cursor: help !important;
}/* the table itself is the period control */
.tms-ecard__ladder[data-econ-cycle],
.breakdance .tms-ecard__ladder[data-econ-cycle],
.tms-effcard__ladder[data-econ-cycle],
.breakdance .tms-effcard__ladder[data-econ-cycle],
.tms-vcard__ladder[data-econ-cycle],
.breakdance .tms-vcard__ladder[data-econ-cycle],
.tms-ocard__ladder[data-econ-cycle],
.breakdance .tms-ocard__ladder[data-econ-cycle] {
  cursor: pointer !important;
}.tms-ecard__ladder[data-econ-cycle]:focus-visible,
.breakdance .tms-ecard__ladder[data-econ-cycle]:focus-visible,
.tms-effcard__ladder[data-econ-cycle]:focus-visible,
.breakdance .tms-effcard__ladder[data-econ-cycle]:focus-visible,
.tms-vcard__ladder[data-econ-cycle]:focus-visible,
.breakdance .tms-vcard__ladder[data-econ-cycle]:focus-visible,
.tms-ocard__ladder[data-econ-cycle]:focus-visible,
.breakdance .tms-ocard__ladder[data-econ-cycle]:focus-visible {
  outline: 2px solid #d97200 !important;
  outline-offset: 2px !important;
}/* cost: the smallest figure, and it says so */
.tms-ecard[data-econ-state="power"] .tms-ecard__lcell--mo .tms-ecard__lval,
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__lcell--mo .tms-ecard__lval,
.tms-effcard[data-econ-state="power"] .tms-effcard__lcell--mo .tms-effcard__lval,
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__lcell--mo .tms-effcard__lval,
.tms-vcard[data-econ-state="power"] .tms-vcard__lcell--mo .tms-vcard__lval,
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__lcell--mo .tms-vcard__lval,
.tms-ocard[data-econ-state="power"] .tms-ocard__lcell--mo .tms-ocard__lval,
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__lcell--mo .tms-ocard__lval {
  color: #b42318 !important;
  font-size: 14px !important;
}/* the resting card keeps its generous cells; with a price the figures sit
   closer so the zone does not carry empty space */
.tms-ecard[data-econ-state="power"] .tms-ecard__lcell,
.breakdance .tms-ecard[data-econ-state="power"] .tms-ecard__lcell,
.tms-effcard[data-econ-state="power"] .tms-effcard__lcell,
.breakdance .tms-effcard[data-econ-state="power"] .tms-effcard__lcell,
.tms-vcard[data-econ-state="power"] .tms-vcard__lcell,
.breakdance .tms-vcard[data-econ-state="power"] .tms-vcard__lcell,
.tms-ocard[data-econ-state="power"] .tms-ocard__lcell,
.breakdance .tms-ocard[data-econ-state="power"] .tms-ocard__lcell {
  padding: 12px 10px !important;
  gap: 5px !important;
}.tms-ecard__lval.is-negative,
.breakdance .tms-ecard__lval.is-negative,
.tms-effcard__lval.is-negative,
.breakdance .tms-effcard__lval.is-negative,
.tms-vcard__lval.is-negative,
.breakdance .tms-vcard__lval.is-negative,
.tms-ocard__lval.is-negative,
.breakdance .tms-ocard__lval.is-negative { color: #b42318 !important; }/* net and gross ROI,
in their own row under the earnings */
.tms-ecard__roiwrap,
.breakdance .tms-ecard__roiwrap,
.tms-effcard__roiwrap,
.breakdance .tms-effcard__roiwrap,
.tms-vcard__roiwrap,
.breakdance .tms-vcard__roiwrap,
.tms-ocard__roiwrap,
.breakdance .tms-ocard__roiwrap {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #d7dce2 !important;
}/* the meter is its own band beneath the table,
not a row of it */
.tms-ecard__meterrow,
.breakdance .tms-ecard__meterrow,
.tms-effcard__meterrow,
.breakdance .tms-effcard__meterrow,
.tms-vcard__meterrow,
.breakdance .tms-vcard__meterrow,
.tms-ocard__meterrow,
.breakdance .tms-ocard__meterrow {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}/* Two even halves,
so the divider between gross and net lands on the middle of
   the row. Gross sits under the earnings it comes from,
net under the profit. */
.tms-ecard__roi,
.breakdance .tms-ecard__roi,
.tms-effcard__roi,
.breakdance .tms-effcard__roi,
.tms-vcard__roi,
.breakdance .tms-vcard__roi,
.tms-ocard__roi,
.breakdance .tms-ocard__roi {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}.tms-ecard__roi-item + .tms-ecard__roi-item,
.breakdance .tms-ecard__roi-item + .tms-ecard__roi-item,
.tms-effcard__roi-item + .tms-effcard__roi-item,
.breakdance .tms-effcard__roi-item + .tms-effcard__roi-item,
.tms-vcard__roi-item + .tms-vcard__roi-item,
.breakdance .tms-vcard__roi-item + .tms-vcard__roi-item,
.tms-ocard__roi-item + .tms-ocard__roi-item,
.breakdance .tms-ocard__roi-item + .tms-ocard__roi-item {
  border-left: 1px solid rgba(21, 25, 35, 0.12) !important;
}/* one line each: a small label,
then the figure at full size */
.tms-ecard__roi-item,
.breakdance .tms-ecard__roi-item,
.tms-effcard__roi-item,
.breakdance .tms-effcard__roi-item,
.tms-vcard__roi-item,
.breakdance .tms-vcard__roi-item,
.tms-ocard__roi-item,
.breakdance .tms-ocard__roi-item {
  display: flex !important;
  flex-direction: row !important;
  /* centred on the figure rather than sat on its baseline: the label is small
     caps against a taller numeral, so a shared baseline reads as a drop */
  align-items: center !important;
  justify-content: center !important;
  /* the sides give way before the type does, so a five figure day count still
     clears the middle line */
  gap: 4px !important;
  min-width: 0 !important;
  padding: 9px 0 !important;
}.tms-ecard__roiwrap[data-econ-roicycle],
.breakdance .tms-ecard__roiwrap[data-econ-roicycle],
.tms-effcard__roiwrap[data-econ-roicycle],
.breakdance .tms-effcard__roiwrap[data-econ-roicycle],
.tms-vcard__roiwrap[data-econ-roicycle],
.breakdance .tms-vcard__roiwrap[data-econ-roicycle],
.tms-ocard__roiwrap[data-econ-roicycle],
.breakdance .tms-ocard__roiwrap[data-econ-roicycle] {
  cursor: pointer !important;
}.tms-ecard__roiwrap[data-econ-roicycle]:focus-visible,
.breakdance .tms-ecard__roiwrap[data-econ-roicycle]:focus-visible,
.tms-effcard__roiwrap[data-econ-roicycle]:focus-visible,
.breakdance .tms-effcard__roiwrap[data-econ-roicycle]:focus-visible,
.tms-vcard__roiwrap[data-econ-roicycle]:focus-visible,
.breakdance .tms-vcard__roiwrap[data-econ-roicycle]:focus-visible,
.tms-ocard__roiwrap[data-econ-roicycle]:focus-visible,
.breakdance .tms-ocard__roiwrap[data-econ-roicycle]:focus-visible {
  outline: 2px solid #d97200 !important;
  outline-offset: -2px !important;
}.tms-ecard__roi-item[data-econ-tip],
.breakdance .tms-ecard__roi-item[data-econ-tip],
.tms-effcard__roi-item[data-econ-tip],
.breakdance .tms-effcard__roi-item[data-econ-tip],
.tms-vcard__roi-item[data-econ-tip],
.breakdance .tms-vcard__roi-item[data-econ-tip],
.tms-ocard__roi-item[data-econ-tip],
.breakdance .tms-ocard__roi-item[data-econ-tip] {
  cursor: pointer !important;
}/* the figure reads at the family's small money size,
its label stays the
   small caps heading: told apart by style,
not by shrinking either of them. It
   carries the card's own label ink,
so this row never out-weighs the money
   above it,
which is the darker and more colourful of the two */
.tms-ecard__roi-val,
.breakdance .tms-ecard__roi-val,
.tms-effcard__roi-val,
.breakdance .tms-effcard__roi-val,
.tms-vcard__roi-val,
.breakdance .tms-vcard__roi-val,
.tms-ocard__roi-val,
.breakdance .tms-ocard__roi-val {
  color: #2e3748 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}



/* Show Stats: the rankings strip wearing the pill row's clothes. The button
   keeps its class, so the cards snippet's popover controller, its aria state
   and its focus ring all keep working untouched. */
.miner-card__ranks-word,
.breakdance .miner-card__ranks-word {
  display: none !important;
}/* the extra pill can be one too many for a 486px rail card,
so the row is
   allowed to take a second line rather than run off the card's edge */
.tms-ecard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.tms-effcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.tms-vcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.tms-ocard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__rank-flags--bar-top {
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: 22px !important;
  row-gap: 6px !important;
}.tms-ecard[data-econ-state="power"] .miner-card__ranks-toggle,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__ranks-toggle,
.tms-effcard[data-econ-state="power"] .miner-card__ranks-toggle,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__ranks-toggle,
.tms-vcard[data-econ-state="power"] .miner-card__ranks-toggle,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__ranks-toggle,
.tms-ocard[data-econ-state="power"] .miner-card__ranks-toggle,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__ranks-toggle {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  /* tighter than a rank pill on purpose: with three rank pills beside it the
     row is within a few pixels of wrapping, and this is the one pill whose
     padding is ours to spend */
  padding: 0 6px !important;
  /* the pill row fills from the left, so this one claims the rest of the row
     and finishes hard against the right edge */
  margin-left: auto !important;
  background: linear-gradient(180deg, #182338, #0b1220) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 14px rgba(5, 6, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
}.tms-ecard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.tms-effcard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.tms-vcard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.tms-ocard[data-econ-state="power"] .miner-card__ranks-toggle::after,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__ranks-toggle::after {
  content: none !important;
}.tms-ecard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.tms-effcard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.tms-vcard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.tms-ocard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__ranks-toggle .miner-card__rankbar--strip {
  display: none !important;
}.tms-ecard[data-econ-state="power"] .miner-card__ranks-word,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__ranks-word,
.tms-effcard[data-econ-state="power"] .miner-card__ranks-word,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__ranks-word,
.tms-vcard[data-econ-state="power"] .miner-card__ranks-word,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__ranks-word,
.tms-ocard[data-econ-state="power"] .miner-card__ranks-word,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__ranks-word {
  display: inline !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* The tooltip lives on the body, because every card family clips overflow. */
.tms-econ-tip {
  position: fixed !important;
  z-index: 99999 !important;
  max-width: 240px !important;
  padding: 7px 9px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  white-space: pre-line !important;
  text-align: left !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-radius: 7px !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
}

.tms-econ-tip[data-econ-tip-open="1"] { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .tms-econ-tip { transition: none !important; }
}

@media (max-width: 560px) {
  .tms-econ__grid,
  .breakdance .tms-econ__grid { gap: 6px !important; }
  .tms-econ__val,
  .breakdance .tms-econ__val { font-size: 12px !important; }
}

/* With a price in play the strip has moved INTO the pill row, so the row's
   bottom margin is clearing something that is no longer beneath it: that was
   8px of dead space between the pills and the money table. The panel closes
   the last gap too, so it reads as opening out of the Show Stats pill. */
.tms-ecard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.tms-effcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.tms-vcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.tms-ocard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__rank-flags--bar-top,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__rank-flags--bar-top {
  margin-bottom: 0 !important;
}

.tms-ecard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.tms-effcard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.tms-vcard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.tms-ocard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.breakdance .tms-ecard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.breakdance .tms-effcard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.breakdance .tms-vcard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel,
.breakdance .tms-ocard[data-econ-state="power"] .miner-card__ranks-slot .miner-card__ranks-panel {
  /* measured: the button bottom sits 36px from the slot origin, so the
     panel starts exactly there and reads as opening out of the pill */
  top: 36px !important;
}