/* ================================================================
   dt-panels.css — Dev Tools Shared CSS
   Extracted from alerts-style-adc.css
   DO NOT modify manually — source of truth is alerts-style-adc.css
   ================================================================ */


/* ── Pipe Kit: CSS змінні ── */
.dev-tools-scope.al-page {
  --sp-copper-light:  #9a7350;
  --sp-copper:        #7a5a35;
  --sp-copper-mid:    #6a4a2a;
  --sp-copper-dark:   #4a3518;
  --sp-copper-shadow: #3a2510;
  --sp-brass-light:   #c8a855;
  --sp-brass:         #a08535;
  --sp-brass-mid:     #806828;
  --sp-brass-dark:    #5a4a1a;
  --sp-brass-shadow:  #4a3a12;
  --sp-pipe-width:    22px;
  --sp-pipe-outer:    26px;
  --sp-band-width:    6px;
  --sp-rivet-size:    5px;
  --sp-steel-light:   #8A8A8A;
  --sp-steel:         #6A6A6A;
  --sp-steel-mid:     #555;
  --sp-steel-dark:    #3A3A3A;
  --sp-glow-amber:    #c58b3a;
  --sp-glow-teal:     #7c8f88;
  --sp-glow-red:      #c14418;
}

/* ═══ FRAME KIT ═══ */
.dev-tools-scope.al-page .sp-corner {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.dev-tools-scope.al-page .sp-corner-tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.dev-tools-scope.al-page .sp-corner-tr { top: 0; right: 0; transform: translate(50%, -50%); }
.dev-tools-scope.al-page .sp-corner-bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.dev-tools-scope.al-page .sp-corner-br { bottom: 0; right: 0; transform: translate(50%, 50%); }

.dev-tools-scope.al-page .sp-corner-gear {
  width: var(--sp-gear-size, 24px);
  height: var(--sp-gear-size, 24px);
}
.dev-tools-scope.al-page .sp-corner-gear svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes sp-spin-tl { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes sp-spin-tr { to { transform: translate(50%,-50%) rotate(-360deg); } }
@keyframes sp-spin-bl { to { transform: translate(-50%,50%) rotate(360deg); } }
@keyframes sp-spin-br { to { transform: translate(50%,50%) rotate(-360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .dev-tools-scope.al-page .sp-corner-tl.sp-corner-gear-spin { animation: sp-spin-tl 30s linear infinite; }
  .dev-tools-scope.al-page .sp-corner-tr.sp-corner-gear-spin { animation: sp-spin-tr 30s linear infinite; }
  .dev-tools-scope.al-page .sp-corner-bl.sp-corner-gear-spin { animation: sp-spin-bl 30s linear infinite; }
  .dev-tools-scope.al-page .sp-corner-br.sp-corner-gear-spin { animation: sp-spin-br 30s linear infinite; }
}

.dev-tools-scope.al-page .sp-edge-bolt {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--sp-brass-light), var(--sp-brass-mid) 60%, var(--sp-brass-shadow));
  border: 0.5px solid var(--sp-brass-shadow);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@keyframes sp-lamp-pulse-kf {
  0%, 100% {
    box-shadow:
      0 0 5px var(--sp-lamp-color, var(--sp-glow-amber)),
      0 0 10px color-mix(in srgb, var(--sp-lamp-color, var(--sp-glow-amber)) 40%, transparent),
      inset 0 1px 1px rgba(255,255,255,0.3);
  }
  50% {
    box-shadow:
      0 0 8px var(--sp-lamp-color, var(--sp-glow-amber)),
      0 0 16px color-mix(in srgb, var(--sp-lamp-color, var(--sp-glow-amber)) 55%, transparent),
      inset 0 1px 1px rgba(255,255,255,0.4);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dev-tools-scope.al-page .sp-lamp-pulse { animation: sp-lamp-pulse-kf 2.5s ease-in-out infinite; }
}

.al-pipe-section--beam-to-b1 { height: 112px; }
.al-pipe-section--b1-to-b2 { height: 56px; }

.dev-tools-scope.al-page .al-pipe-section {
  position: relative;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
  pointer-events: none;
  z-index: 2;
}

.dev-tools-scope.al-page .al-pipe {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.al-pipe--left  { left: 56px; }
.al-pipe--right { right: 56px; }

.dev-tools-scope.al-page .sp-pipe-v {
  position: relative;
  width: var(--sp-pipe-outer);
  background: linear-gradient(
    to right,
    var(--sp-copper-light) 0%,
    var(--sp-copper) 30%,
    var(--sp-copper-mid) 65%,
    var(--sp-copper-dark) 100%
  );
  border-left: 1px solid var(--sp-copper-light);
  border-right: 1px solid var(--sp-copper-shadow);
  box-shadow:
    inset 2px 0 3px rgba(218, 154, 107, 0.3),
    inset -2px 0 3px rgba(90, 53, 21, 0.4),
    2px 0 6px rgba(0, 0, 0, 0.5);
}
.dev-tools-scope.al-page .al-pipe-stretch { flex: 1; }

.dev-tools-scope.al-page .sp-band {
  position: absolute;
  background: linear-gradient(
    to bottom,
    var(--sp-brass-light),
    var(--sp-brass) 30%,
    var(--sp-brass-mid) 70%,
    var(--sp-brass-dark)
  );
  border: 1px solid var(--sp-brass-shadow);
  box-shadow:
    inset 0 1px 2px rgba(232, 208, 122, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.dev-tools-scope.al-page .sp-band-v {
  height: var(--sp-band-width);
  width: calc(var(--sp-pipe-outer) + 4px);
  left: -2px;
  border-radius: 1px;
}

.dev-tools-scope.al-page .sp-flange {
  position: relative;
  width: calc(var(--sp-pipe-outer) + 6px);
  height: 10px;
  background: linear-gradient(
    to right,
    var(--sp-brass-light),
    var(--sp-brass) 30%,
    var(--sp-brass-mid) 70%,
    var(--sp-brass-dark)
  );
  border: 1px solid var(--sp-brass-shadow);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 2px rgba(232, 208, 122, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
  flex-shrink: 0;
}

.dev-tools-scope.al-page .sp-rivet {
  width: var(--sp-rivet-size);
  height: var(--sp-rivet-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--sp-brass-light),
    var(--sp-brass-mid) 60%,
    var(--sp-brass-shadow)
  );
  border: 0.5px solid var(--sp-brass-shadow);
  flex-shrink: 0;
}

.dev-tools-scope.al-page .al-module-rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(circle at 32% 28%,
    var(--pewter-highlight) 0%, var(--pewter-light) 22%,
    var(--pewter-mid) 55%, var(--pewter-dark) 85%, var(--bg-void) 100%);
  border: 1px solid rgba(0,0,0,0.8);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    inset 0 1px 0.5px rgba(255,255,255,0.35),
    0 2px 3px rgba(0,0,0,0.8);
}
.dev-tools-scope.al-page .al-module-rivet::before {
  content: '';
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(0deg, transparent 44%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.5) 56%, transparent 56%),
    linear-gradient(90deg, transparent 44%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.5) 56%, transparent 56%);
  border-radius: 50%;
}
.al-module-rivet--tl { top: 8px; left: 8px; }
.al-module-rivet--tr { top: 8px; right: 8px; }
.al-module-rivet--bl { bottom: 8px; left: 8px; }
.al-module-rivet--br { bottom: 8px; right: 8px; }

/* ═══ GAUGE ═══ */
.dev-tools-scope.al-page .sp-gauge { display: flex; flex-direction: column; align-items: center; z-index: 5; }
.dev-tools-scope.al-page .sp-gauge-stub {
  width: 8px; height: 10px;
  background: linear-gradient(to right, var(--sp-brass-light), var(--sp-brass) 30%, var(--sp-brass-dark));
  border: 0.5px solid var(--sp-brass-shadow);
}
.dev-tools-scope.al-page .sp-gauge-body {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sp-brass-mid);
  border: 1.5px solid var(--sp-brass-shadow);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .sp-gauge-face {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(to bottom, #FFF8E8, #E8DCC0);
  border: 0.5px solid var(--sp-brass-mid);
  position: relative; overflow: hidden;
}
.dev-tools-scope.al-page .sp-gauge-needle {
  position: absolute; bottom: 50%; left: 50%;
  width: 1.5px; height: 9px;
  background: #8B0000;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--angle, 45deg));
  border-radius: 1px 1px 0 0;
}
.dev-tools-scope.al-page .sp-gauge-needle::after {
  content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; background: #444; border-radius: 50%;
}
.dev-tools-scope.al-page .sp-gauge-label {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  font-family: serif; font-size: 4px; color: #666; letter-spacing: 0.5px;
}
.dev-tools-scope.al-page .al-pipe-gauge {
  position: absolute;
  top: 15px;
  left: calc(var(--sp-pipe-outer) + 2px);
  flex-direction: row-reverse !important;
  align-items: center !important;
}
.dev-tools-scope.al-page .al-pipe-gauge .sp-gauge-stub {
  width: 10px !important;
  height: 6px !important;
}

/* ═══ VALVE ═══ */
.dev-tools-scope.al-page .sp-valve { display: flex; flex-direction: column; align-items: center; z-index: 5; }
.dev-tools-scope.al-page .sp-valve-body {
  width: 36px; height: 28px;
  background: linear-gradient(to bottom, #c8a845, #a08530 50%, #7a6220);
  border: 1px solid var(--sp-brass-shadow);
  border-radius: 3px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(200,168,70,0.3), 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
}
.dev-tools-scope.al-page .sp-valve-stem {
  width: 5px; height: 16px;
  background: linear-gradient(to right, var(--sp-brass-light), var(--sp-brass) 30%, var(--sp-brass-dark));
  border: 0.5px solid var(--sp-brass-shadow);
  margin: 0 auto;
}
.dev-tools-scope.al-page .sp-valve-wheel {
  width: 24px; height: 24px;
  border: 2.5px solid var(--sp-brass-mid);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0.5px rgba(160,133,53,0.4);
}
.dev-tools-scope.al-page .sp-valve-wheel::before,
.dev-tools-scope.al-page .sp-valve-wheel::after {
  content: ''; position: absolute;
  background: var(--sp-brass-mid); border-radius: 1px;
}
.dev-tools-scope.al-page .sp-valve-wheel::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.dev-tools-scope.al-page .sp-valve-wheel::after { width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
.dev-tools-scope.al-page .sp-valve-nut {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 30%, var(--sp-brass-light), var(--sp-brass-mid) 60%, var(--sp-brass-shadow));
  border-radius: 50%; border: 0.5px solid var(--sp-brass-shadow); z-index: 1;
}
.dev-tools-scope.al-page .al-pipe-valve {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--sp-pipe-outer) + 4px);
}
.dev-tools-scope.al-page .al-block-valve {
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  z-index: 5;
  transform-origin: center center;
}