/* The revenue chart's own two ramps, five steps each, drawn on the bars themselves.

   Half of these point at the brand tokens because they were the brand colours under different names;
   the rest are genuinely chart-specific shades with no counterpart in the palette, and inventing a
   colour-mix for them would give a muddier ramp than the ones chosen by hand. That is the reason the
   list looks half-tokenised: the tokenised half is the half a brand change should move. */
:root {
  /* The same hex as --looc-stream-produce-dark, which the sankey already draws its dark end with. */
  --color-green-darker: var(--looc-stream-produce-dark);
  --color-green-dark: #036351;
  /* The brand palette, reached through the tokens rather than restated: these three were the same
     hex codes as --looc-green, --looc-teal and --looc-orange under different names, so a brand change
     moved everything in the Portal except this chart. */
  --color-green-medium: var(--looc-green);
  --color-green-light: var(--looc-teal);
  --color-green-lighter: #e5f2e3;
  --color-orange-darker: #330900;
  --color-orange-dark: #632303;
  /* The same hex as --looc-stream-consume-brown. */
  --color-orange-medium: var(--looc-stream-consume-brown);
  --color-orange-light: var(--looc-orange);
  --color-orange-lighter: #f7a77e;
  --canvas-bg: var(--rz-base-background);
  --canvas-text: #28363c;
  --bar-height: 6em;
  --bar-half: calc(var(--bar-height) / 2);
  --bar-third: calc(var(--bar-height) / 3);
  --bar-quarter: calc(var(--bar-height) / 4);
  --bar-tenth: calc(var(--bar-height) / 10);
  --bar-text-left: 4em;
  --bar-text-right: 6em;
}

.barchart {
  position: relative;
}

.bar__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bar {
  height: var(--bar-height);
  position: relative;
}

  .bar::before,
  .bar::after {
    clip-path: polygon(0 0, calc(100% - var(--bar-quarter)) 0, 100% var(--bar-half), calc(100% - var(--bar-quarter)) 100%, 0 100%);
    content: '';
    height: var(--bar-height);
    left: 0;
    position: absolute;
  }

  .bar::before {
    right: 0;
  }

  .bar::after {
    right: var(--bar-tenth);
  }

.bar--subsidy {
  animation: growBarSubsidy 1500ms ease-out forwards;
  width: var(--subsidy-bar-length);
}

  .bar--subsidy::before {
    background: var(--color-green-light);
  }

  .bar--subsidy::after {
    background: linear-gradient(290deg, var(--color-green-dark) var(--bar-height), var(--color-green-light) calc(3 * var(--bar-height)));
    border: 1px solid var(--color-green-medium);
  }

.bar--regular {
  animation: growBarRegular 1500ms ease-out forwards;
  width: var(--regular-bar-length);
}

  .bar--regular::before {
    background: var(--color-orange-light);
  }

  .bar--regular::after {
    background: linear-gradient(290deg, var(--color-orange-dark) var(--bar-height), var(--color-orange-light) calc(3 * var(--bar-height)));
    border: 1px solid var(--color-orange-medium);
  }

.bar__text {
  display: flex;
  flex-direction: column;
  height: var(--bar-height);
  justify-content: center;
  position: absolute;
  z-index: 1;
  max-width: calc(var(--bar-text-left) + var(--bar-text-right));
}

.bar--subsidy .bar__text {
  left: max(10px, calc(100% - var(--bar-text-left) - var(--bar-text-right) - 60px));
}

.bar--regular .bar__text {
  left: max(10px, calc(100% - var(--bar-text-left) - var(--bar-text-right) - 60px));
}

.bar__paragraph {
  align-items: center;
  color: var(--rz-on-primary);
  display: flex;
  line-height: 1.2;
  gap: 10px;
  justify-content: space-between;
  margin: 0;
  text-shadow: 1px 1px 1px hsl(0 0% 0% / 0.4), 0 0 5px hsl(0 0% 0% / 0.3);
}

.bar--targetless .bar__paragraph {
  color: var(--rz-text-color);
  text-shadow: none;
}

.bar__label {
  flex: 1 0 var(--bar-text-left);
}

.bar__time,
.bar__currency {
  flex: 1 0 var(--bar-text-right);
}

.bar__time {
  text-align: right;
}

.bar__currency {
  text-align: right;
}

.bar--targetless .bar__currency {
    text-align: right;
}

.bar__percentage {
  font-weight: 600;
  font-size: 16px;
  padding: 0 0.5em;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(200%, 70%);
  max-width: 4em;
}

.bar--subsidy .bar__percentage {
  color: var(--color-green-dark);
}

.bar--regular .bar__percentage {
  color: var(--color-orange-dark);
}

.marker__wrapper {
  position: initial;
}

.marker {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

.marker__arrow {
  clip-path: polygon(0 0, calc(100% - var(--bar-quarter)) 0, 100% var(--bar-half), calc(100% - var(--bar-quarter)) 100%, 0 100%);
  content: '';
  height: var(--bar-height);
  left: 0;
  position: absolute;
  right: 0;
}

.marker--subsidy {
  border-right: 2px solid var(--color-green-medium);
  right: calc(100% - var(--bar-max-percentage) * var(--subsidy-bar-max));
}

  .marker--subsidy .marker__arrow {
    background: var(--color-green-lighter);
    background: linear-gradient(100deg, var(--color-green-dark) 0, var(--color-green-lighter) calc(3 * var(--bar-height)));
    opacity: 0.5;
  }

.marker--regular {
  border-right: 2px solid var(--color-orange-medium);
  right: calc(100% - var(--bar-max-percentage) * var(--regular-bar-max));
}

  .marker--regular .marker__arrow {
    background: var(--color-orange-lighter);
    background: linear-gradient(100deg, var(--color-orange-dark) 0, var(--color-orange-lighter) calc(3 * var(--bar-height)));
    bottom: 0;
    opacity: 0.2;
  }

.marker__text {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  padding: 0 0.5em;
  position: absolute;
  right: 0;
}

.marker--subsidy .marker__text {
  color: var(--color-green-dark);
  transform: translate(100%, 0);
  top: 0;
}

.marker--regular .marker__text {
  color: var(--color-orange-medium);
  text-align: right;
  transform: translate(0, -100%);
  top: 50%;
}

@keyframes growBarSubsidy {
  from {
    width: 0;
  }
  30% {
    width: 0;
  }
  to {
    width: var(--subsidy-bar-length);
  }
}

@keyframes growBarRegular {
  from {
      width: 0;
  }
  30% {
    width: 0;
  }
  to {
    width: var(--regular-bar-length);
  }
}

/* Revenue arrow */
.revenue-arrow {
  --arrow-height: 3.5rem;
  --arrow-tip: calc(var(--arrow-height) / 2.5);
  position: relative;
  margin: 0.75rem 0;
  animation: arrowGrow 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.revenue-arrow__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - var(--arrow-tip)) 0, 100% 50%, calc(100% - var(--arrow-tip)) 100%, 0 100%);
  background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green-medium) 60%, var(--color-green-light) 100%);
  padding: 0.5rem 1.25rem;
  padding-right: calc(var(--arrow-tip) + 0.75rem);
  gap: 0.15rem;
}

.revenue-arrow__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.revenue-arrow__label {
  color: hsl(0 0% 100% / 0.85);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  width: 4.5rem;
}

.revenue-arrow__value {
  color: var(--rz-on-primary);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.25);
  white-space: nowrap;
  text-align: right;
  min-width: 6rem;
}

@keyframes arrowGrow {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Device sections */
.device-section {
  border-bottom: 1px solid hsl(0 0% 92%);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.device-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Device header */
.device-header {
  align-items: center;
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.device-header__name {
  color: var(--rz-text-color);
  font-size: 1rem;
  font-weight: 600;
}

/* Revenue cards */
.revenue-cards {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.revenue-card {
  align-items: center;
  background: linear-gradient(135deg, hsl(169 93% 36%), hsl(169 93% 26%));
  border-radius: 8px;
  color: var(--rz-on-primary);
  display: flex;
  flex: 1 1 0;
  justify-content: space-between;
  padding: 0.625rem 1rem;
}

.revenue-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
  text-transform: uppercase;
}

.revenue-card__value {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Revenue summary card */
.revenue-summary {
  border: 1px solid hsl(0 0% 90%);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  padding: 0.875rem 1rem;
}

.revenue-summary__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.revenue-summary__label {
  color: var(--rz-text-secondary-color);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.revenue-summary__amount {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.revenue-summary__amount--positive {
  color: var(--color-green-dark);
}

.revenue-summary__amount--negative {
  color: hsl(0 65% 45%);
}

.revenue-summary .revenue-cards {
  margin-top: 0.625rem;
  margin-bottom: 0;
}

.revenue-summary__footer {
  border-top: 1px solid hsl(0 0% 92%);
  color: var(--rz-text-secondary-color);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.125rem 1.5rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
}