/* Colours and motion for the expenditure diagram.
   Change a colour once here and it updates everywhere it is used. */

.expd {
  --expd-water: #85b7eb;
  --expd-water-pipe: #378add;
  --expd-grease: #5f5e5a;
  --expd-grease-dark: #444441;
  --expd-gold: #fac775;
  --expd-gold-wall: #ba7517;
  --expd-factory: #854f0b;
  --expd-leaf: #639922;
  --expd-stem: #3b6d11;
  --expd-pointer: #e24b4a;
  --expd-float: #ffffff;
  --expd-onliquid-text: #ffffff;
  --expd-onliquid-halo: #02325e; /* thin outline that keeps white text readable on light blue */
  --expd-onliquid-halo-grease: #444441;

  display: block;
  width: 100%;
  height: auto;
  color: inherit; /* walls, marks and text follow the page's text colour */
  font-family: inherit;
}

.expd-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The element the diagram is placed in */
[data-expenditure-diagram] { position: relative; max-width: 520px; margin: 1.5em auto; }

/* Text */
.expd text { fill: currentColor; }
.expd-label { font-size: 14px; font-weight: 500; }
.expd-small { font-size: 12px; opacity: 0.75; }

/* Tanks */
.expd-tank__headroom { fill: none; }
.expd-tank__liquid { fill: var(--expd-water); }
.expd-tank__walls { stroke: currentColor; stroke-width: 1.5; opacity: 0.7; }
.expd-tank--gold .expd-tank__headroom { fill: var(--expd-gold); }
.expd-tank--gold .expd-tank__walls { stroke: var(--expd-gold-wall); stroke-width: 4; opacity: 1; }

.expd-wealth__factory { fill: var(--expd-factory); }
.expd-wealth__stem { stroke: var(--expd-stem); stroke-width: 2.5; stroke-linecap: round; }
.expd-wealth__leaf { fill: var(--expd-leaf); }

.expd-grease { fill: var(--expd-grease); }
.expd-grease--dark { fill: var(--expd-grease-dark); }

/* Pipes */
.expd-pipe--water .expd-pipe__body { stroke: var(--expd-water-pipe); }
.expd-pipe--grease .expd-pipe__body { stroke: var(--expd-grease); }
.expd-pipe__flow { stroke: #ffffff; opacity: 0; stroke-dasharray: 6 10; }

/* Basin */
.expd-basin__water { fill: var(--expd-water); }
.expd-basin__grease { fill: var(--expd-grease); }
.expd-basin__walls { stroke: currentColor; stroke-width: 1.5; opacity: 0.7; }

/* NX virtual tank */
.expd-virtual__walls { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.7; }

/* Gauge */
.expd-gauge__line { stroke: currentColor; stroke-width: 1.5; opacity: 0.7; }
.expd-gauge__float { fill: var(--expd-float); stroke: currentColor; stroke-width: 1.5; }
.expd-gauge__pointer { fill: var(--expd-pointer); }
.expd-gauge__stick { stroke: var(--expd-grease); stroke-width: 6; }
.expd-gauge__bracket { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* Labels written on liquid: white text, no background */
.expd .expd-onliquid text {
  fill: var(--expd-onliquid-text);
  opacity: 1;
  stroke: var(--expd-onliquid-halo);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}
.expd .expd-onliquid--grease text { stroke: var(--expd-onliquid-halo-grease); }

/* Controller */
.expd-controller__pill { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.7; }
.expd-button { cursor: pointer; outline: none; }
.expd-button__hit { fill: black; }
.expd-button__ring { fill: none; stroke: currentColor; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.expd-button__glyph { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.expd-button:hover .expd-button__ring { fill: currentColor; fill-opacity: 0.1; }
.expd-button:focus-visible .expd-button__ring { stroke: var(--expd-water-pipe); stroke-width: 2.5; }
.expd-button[aria-disabled='true'] { opacity: 0.35; cursor: default; }
.expd-button[aria-disabled='true']:hover .expd-button__ring { fill: none; }

/* Motion: flowing pipes, and a gentle pulse on the switch until its first use */
@media (prefers-reduced-motion: no-preference) {
  @keyframes expd-flow { to { stroke-dashoffset: -16; } }
  @keyframes expd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
  .expd-pipe__flow { opacity: 0.45; animation: expd-flow 0.9s linear infinite; }
  .expd-controller--hint .expd-button:not([aria-disabled='true']) .expd-button__ring {
    animation: expd-pulse 1.4s ease-in-out infinite;
  }
}