/* HJ Installation Canvas R1 — exact Product-system Canvas promoted into the
 * Installation hero while the established SVG and delivery nodes remain in
 * source as the deterministic page contract. */

body[data-hj-installation-canvas="r1"] .hj-install-signal {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(56, 189, 248, .24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(14, 165, 233, .13), transparent 42%),
    linear-gradient(155deg, rgba(3, 12, 28, .98), rgba(2, 8, 20, .98));
  box-shadow: 0 30px 72px rgba(0, 3, 14, .46), inset 0 1px rgba(255,255,255,.05);
}

body[data-hj-installation-canvas="r1"] .hj-install-canvas-picture {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 17px;
  background: #020816;
}

body[data-hj-installation-canvas="r1"] .hj-install-canvas-picture img {
  display: block;
  width: 100%;
  height: auto;
}

body[data-hj-installation-canvas="r1"] .hj-install-signal > :is(.hj-install-signal-label, .hj-install-title-plot, ol) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  body[data-hj-installation-canvas="r1"] .hj-install-signal {
    width: min(100%, 720px);
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  body[data-hj-installation-canvas="r1"] .hj-install-signal {
    padding: 7px;
    border-radius: 18px;
  }
  body[data-hj-installation-canvas="r1"] .hj-install-canvas-picture { border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-hj-installation-canvas="r1"] .hj-install-canvas-picture { transition: none !important; }
}

@media (forced-colors: active) {
  body[data-hj-installation-canvas="r1"] .hj-install-signal,
  body[data-hj-installation-canvas="r1"] .hj-install-canvas-picture { border: 2px solid CanvasText; }
}

@media print {
  body[data-hj-installation-canvas="r1"] .hj-install-signal { box-shadow: none; }
}