/* A pocket-sized, hand-started engine inside the existing workshop seal. */
.service-seal.eng-seal {
  display: flex;
  gap: 16px;
  align-items: center;
}

.eng-button {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 62px;
  min-width: 44px;
  min-height: 44px;
  padding: 2px;
  border: 1px solid #555d6470;
  border-radius: 8px 2px 8px 2px;
  color: #38414a;
  background: linear-gradient(145deg, #edf0f14d, #a0a6ab33 52%, #f5f7f85c);
  box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #4d535c33, 0 1px 0 #f4f6f899;
  transition: border-color .18s, box-shadow .18s, color .18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.service-seal .eng-drawing {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(.5px .8px 0 #fafbfc);
  pointer-events: none;
}

.eng-case {
  fill: #d9dfe333;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.eng-head, .eng-shaft, .eng-spoke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eng-bore {
  fill: #717c8914;
  stroke: #4b566375;
  stroke-width: 1.2;
}

.eng-charge {
  fill: var(--blue, #0638db);
  opacity: .04;
  transition: opacity .18s;
}

.eng-wheel {
  fill: #a7b1b930;
  stroke: #374655;
  stroke-width: 1.4;
}

.eng-spoke { stroke-width: 1; }
.eng-shaft { stroke-width: 1.5; opacity: .7; }
.eng-journal, .eng-hub, .eng-wrist { fill: #364657; }
.eng-journal { stroke: #e5e9ed; stroke-width: .7; }
.eng-rod { stroke: #33475e; stroke-width: 2.4; stroke-linecap: round; }
.eng-piston-body { fill: url(#eng-piston-metal); stroke: #3e4c5b; stroke-width: 1.1; }
.eng-piston-ring { stroke: #3d4c5a; stroke-width: .8; }
.eng-ignition { fill: #66737e; stroke: #e6eaed; stroke-width: 1; transition: fill .18s; }

.eng-button:hover {
  color: #073cbb;
  border-color: #073cbb80;
}

.eng-button:focus-visible {
  outline: 3px solid var(--blue, #0638db);
  outline-offset: 4px;
}

.eng-button:active {
  box-shadow: inset 0 1px 4px #172d4b70, 0 1px 0 #fff9;
}

.eng-button[data-state="running"], .eng-button[data-state="lit"] {
  color: #073cbb;
  border-color: #0638db99;
  box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #0638db44, 0 1px 0 #f4f6f899;
}

.eng-button[data-state="running"] .eng-charge,
.eng-button[data-state="lit"] .eng-charge { opacity: .25; }
.eng-button[data-state="running"] .eng-ignition,
.eng-button[data-state="lit"] .eng-ignition { fill: var(--blue, #0638db); }

@media (max-width: 1180px) {
  .service-seal.eng-seal { gap: 12px; }
  .eng-button { width: 72px; height: 56px; }
}

@media (max-width: 900px) {
  .service-seal.eng-seal { margin-top: 20px; padding-top: 17px; }
  .service-seal.eng-seal > span { font-size: 8px; }
}

@media (max-width: 620px) {
  .service-seal.eng-seal {
    order: 20;
    grid-column: 1;
    margin-top: 18px;
    padding-top: 17px;
  }
  .service-seal.eng-seal > span { font-size: 9px; letter-spacing: .12em; }
}

.reduce-motion .eng-button, .reduce-motion .eng-charge, .reduce-motion .eng-ignition {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-override) .eng-button,
  html:not(.motion-override) .eng-charge,
  html:not(.motion-override) .eng-ignition { transition: none; }
}

@media (forced-colors: active) {
  .eng-button { color: CanvasText; border-color: ButtonText; background: Canvas; box-shadow: none; }
  .eng-case, .eng-bore, .eng-wheel { fill: Canvas; stroke: CanvasText; }
  .eng-head, .eng-shaft, .eng-spoke, .eng-rod, .eng-piston-ring { stroke: CanvasText; }
  .eng-piston-body, .eng-journal, .eng-hub, .eng-wrist { fill: CanvasText; }
  .eng-ignition { fill: GrayText; stroke: CanvasText; }
  .eng-button[data-state="running"], .eng-button[data-state="lit"] { color: Highlight; border-color: Highlight; box-shadow: none; }
  .eng-button[data-state="running"] .eng-ignition,
  .eng-button[data-state="lit"] .eng-ignition { fill: Highlight; }
  .eng-button:focus-visible { outline-color: Highlight; }
}