/* A self-contained, illustrative machine monitor in Xenid's existing visual language. */
.services-detail-visual.pump-demo {
  --pump-ink: #07152f;
  --pump-blue: #3155ff;
  --pump-teal: #087e77;
  --pump-line: #dce4ee;
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--pump-line);
  border-radius: 22px;
  background: #fff;
  color: var(--pump-ink);
  box-shadow: 0 18px 54px rgb(7 21 47 / 9%);
}
.pump-demo *, .pump-demo *::before, .pump-demo *::after { box-sizing: border-box; }
.pump-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: var(--pump-ink); color: #fff; font-family: Poppins, Arial, sans-serif; }
.pump-demo-bar > strong { font-size: 16px; font-weight: 700; }
.pump-demo-bar > span { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; }
.pump-demo-bar i { width: 6px; height: 6px; border-radius: 50%; background: #43d8c7; }
.pump-demo-body { padding: 20px; }
.pump-demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.pump-demo .pump-demo-label { margin: 0 0 4px; color: #586a80; font: 600 10px/1.5 Poppins, Arial, sans-serif; }
.pump-demo .pump-demo-heading h3 { margin: 0; color: var(--pump-ink); font: 700 19px/1.35 Poppins, Arial, sans-serif; letter-spacing: -.025em; word-spacing: normal; text-transform: none; }
.pump-demo-status { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #b7e4d9; border-radius: 7px; background: #eaf9f3; color: #12674f; font: 700 10px/1.4 Poppins, Arial, sans-serif; }
.pump-demo-machine { overflow: hidden; border: 1px solid #e2e9f2; border-radius: 12px; background: #f5f8fc; }
.pump-demo-machine svg { display: block; width: 100%; height: auto; max-height: 150px; }
.pump-demo-machine svg text { fill: #53667f; font: 500 12px Poppins, Arial, sans-serif; }
.pump-demo-machine-note { display: block; padding: 3px 10px 8px; color: #596a81; font: 11px/1.4 Arial, sans-serif; text-align: center; }
.pump-demo-pipe { fill: none; stroke: #d4dfef; stroke-width: 18; stroke-linecap: round; }
.pump-demo-flow { fill: none; stroke: #13a998; stroke-width: 4; stroke-dasharray: 9 13; animation: pump-flow 1.5s linear infinite; }
.pump-demo-base { fill: none; stroke: #a7b8d0; stroke-width: 7; stroke-linecap: round; }
.pump-demo-feet { fill: none; stroke: #546e98; stroke-width: 12; }
.pump-demo-motor { fill: #e2eaff; stroke: #3155ff; stroke-width: 2; }
.pump-demo-fins { fill: none; stroke: #9aadf4; stroke-width: 2; }
.pump-demo-terminal, .pump-demo-flange, .pump-demo-neck { fill: #fff; stroke: #3155ff; stroke-width: 2; }
.pump-demo-casing { fill: #fff; stroke: #3155ff; stroke-width: 2.5; }
.pump-demo-window { fill: #e1f8f3; stroke: #b0e8dc; stroke-width: 1; }
.pump-demo-rotor { transform-origin: 222px 79px; animation: pump-rotate 2.6s linear infinite; }
.pump-demo-rotor path { fill: #11a89a; }
.pump-demo-sensor { fill: #13a998; }
.pump-demo-sensor-line { fill: none; stroke: #92a8c2; stroke-width: 1; }
.pump-demo[data-pump-state="fault"] .pump-demo-flow { stroke: #b86718; animation-duration: 3.8s; }
.pump-demo[data-pump-state="fault"] .pump-demo-sensor { fill: #bf6515; }
.pump-demo[data-pump-state="paused"] .pump-demo-flow { opacity: .18; }
.pump-demo[data-pump-state="offline"] .pump-demo-machine { opacity: .65; }
.pump-demo[data-pump-animated="false"] .pump-demo-flow,
.pump-demo[data-pump-animated="false"] .pump-demo-rotor { animation-play-state: paused; }
.pump-demo-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 13px 0; }
.pump-demo-readings > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--pump-line); border-radius: 10px; background: #fff; }
.pump-demo-readings dt { margin: 0 0 5px; color: #596b80; font: 600 11px/1.4 Poppins, Arial, sans-serif; }
.pump-demo-readings dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 0; color: var(--pump-ink); font: 700 25px/1.2 Poppins, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.pump-demo-readings dd small { color: #5a6b80; font: 400 11px/1.3 Arial, sans-serif; }
.pump-demo-history { margin-bottom: 12px; }
.pump-demo-history > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; font: 11px/1.5 Poppins, Arial, sans-serif; }
.pump-demo-history strong { font-weight: 600; }
.pump-demo-history span { color: #596b80; font-size: 10px; }
.pump-demo-history svg { display: block; width: 100%; height: 40px; overflow: hidden; }
.pump-demo-chart-grid { fill: none; stroke: #e5eaf2; stroke-width: 1; }
.pump-demo-history polyline { fill: none; stroke: var(--pump-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pump-demo-load { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
.pump-demo-load label { font: 600 12px/1.5 Poppins, Arial, sans-serif; }
.pump-demo-load output { color: var(--pump-blue); font: 700 14px/1.5 Poppins, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.pump-demo-load input[type="range"] { grid-column: 1 / -1; display: block; appearance: auto; width: 100%; height: 30px; padding: 0; margin: 0 0 4px; border: 0; border-radius: 0; accent-color: var(--pump-blue); cursor: pointer; background: transparent; box-shadow: none; }
.pump-demo-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pump-demo-actions button, .pump-demo-reset { min-width: 0; min-height: 44px; border: 1px solid #ccd7e7; border-radius: 8px; padding: 8px 7px; background: #f7f9fc; color: var(--pump-ink); cursor: pointer; font: 700 11px/1.35 Poppins, Arial, sans-serif; text-transform: none; letter-spacing: normal; transition: background .18s, border-color .18s; }
.pump-demo-actions button:hover { background: #eaf0ff; border-color: #7b93ff; }
.pump-demo-actions button[aria-pressed="true"] { background: #e8edff; border-color: #8ea4ff; color: #2448d3; }
.pump-demo-actions button[data-pump-action="fault"][aria-pressed="true"] { background: #fff2df; border-color: #dca258; color: #884200; }
.pump-demo button:disabled, .pump-demo input:disabled { opacity: .45; cursor: not-allowed; }
.pump-demo button:focus-visible, .pump-demo input:focus-visible, .pump-demo summary:focus-visible { outline: 3px solid #3155ff; outline-offset: 3px; }
.pump-demo .pump-demo-message { display: flex; align-items: flex-start; gap: 8px; min-height: 42px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #edf8f4; color: #17604e; font: 12px/1.55 Arial, sans-serif; }
.pump-demo-message > span:first-child { flex: 0 0 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.pump-demo[data-pump-state="fault"] .pump-demo-message, .pump-demo[data-pump-state="fault"] .pump-demo-status { color: #894606; background: #fff3e1; border-color: #edc590; }
.pump-demo[data-pump-state="offline"] .pump-demo-message, .pump-demo[data-pump-state="offline"] .pump-demo-status,
.pump-demo[data-pump-state="paused"] .pump-demo-message, .pump-demo[data-pump-state="paused"] .pump-demo-status { color: #485a73; background: #edf1f7; border-color: #d1d9e5; }
.pump-demo-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pump-demo-events { flex: 1; min-width: 0; }
.pump-demo-events summary { display: flex; align-items: center; gap: 5px; width: fit-content; min-height: 44px; padding: 5px 0; color: #355174; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; font: 600 11px/1.5 Poppins, Arial, sans-serif; }
.pump-demo-events summary::-webkit-details-marker { display: none; }
.pump-demo-events summary::after { content: "+"; margin-left: 4px; text-decoration: none; }
.pump-demo-events[open] summary::after { content: "−"; }
.pump-demo-events ul { display: grid; gap: 7px; margin: 0 0 12px; padding: 0; list-style: none; font: 11px/1.6 Arial, sans-serif; color: #50627b; }
.pump-demo-events li { padding-left: 9px; border-left: 2px solid #c6d4ef; }
.pump-demo-events time { display: inline; color: #263f61; margin-right: 6px; font-variant-numeric: tabular-nums; }
.pump-demo-reset { flex: 0 0 auto; padding: 4px 0; background: none; border: 0; color: #355174; text-decoration: underline; text-underline-offset: 3px; }
.pump-demo .pump-demo-hint { margin: 0; padding-top: 10px; border-top: 1px solid var(--pump-line); color: #596b80; font: 11px/1.65 Arial, sans-serif; }
@keyframes pump-flow { to { stroke-dashoffset: -44; } }
@keyframes pump-rotate { to { transform: rotate(360deg); } }
@media (max-width: 980px) { .services-detail-visual.pump-demo { max-width: 48rem; } }
@media (max-width: 760px) {
  .services-detail-visual.pump-demo { border-radius: 18px; }
  .pump-demo-body { padding: 14px; }
  .pump-demo-bar { padding: 15px 14px; }
  .pump-demo-bar > strong { font-size: 14px; }
  .pump-demo-bar > span { font-size: 9px; }
  .pump-demo-heading { flex-wrap: wrap; gap: 8px; }
  .pump-demo .pump-demo-heading h3 { font-size: 17px; }
  .pump-demo-status { font-size: 10px; }
  .pump-demo-machine svg { min-height: 110px; }
  .pump-demo-machine svg text { font-size: 13px; }
  .pump-demo-readings { gap: 6px; }
  .pump-demo-readings > div { padding: 9px 8px; }
  .pump-demo-readings dd { font-size: 23px; }
  .pump-demo-actions { gap: 5px; }
  .pump-demo-actions button { font-size: 10px; padding: 7px 4px; }
  .pump-demo-history > div { flex-wrap: wrap; gap: 2px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pump-demo-flow, .pump-demo-rotor { animation: none; }
  .pump-demo button { transition: none; }
}

/* Compact the desktop presentation beside its service copy, without clipping controls. */
@media (min-width: 981px) {
  .pump-demo-bar { padding: 12px 16px; }
  .pump-demo-body { padding: 14px 16px; }
  .pump-demo-heading { margin-bottom: 9px; }
  .pump-demo-machine svg { max-height: 96px; }
  .pump-demo-machine-note { padding: 2px 10px 5px; }
  .pump-demo-readings { margin: 9px 0; }
  .pump-demo-readings > div { padding: 7px 12px; }
  .pump-demo-readings dt { margin-bottom: 3px; }
  .pump-demo-history { margin-bottom: 7px; }
  .pump-demo-history > div { margin-bottom: 2px; }
  .pump-demo-history svg { height: 28px; }
  .pump-demo .pump-demo-message { min-height: 34px; margin-top: 8px; padding: 7px 10px; }
  .pump-demo .pump-demo-hint { padding-top: 6px; }
}