/* 仅服务内置 p1 专业背景图；不改变流程、演示和其它案例。 */
.scene-detail[data-case-id="perforation-design-optimizer"] .p1-engineering {
  --p1-navy: #10283c;
  --p1-blue: #24658b;
  --p1-line: #d4dfe6;
  --p1-muted: #586d7b;
  margin: 24px 0 6px;
  border: 1px solid var(--p1-line);
  border-radius: 5px;
  background: #fff;
  color: #193143;
  overflow: hidden;
}

.p1-engineering .p1-engineering-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px 17px;
  border-top: 3px solid var(--p1-navy);
}
.p1-engineering .p1-kicker,
.p1-engineering .p1-figure-index,
.p1-engineering .p1-explanation-kicker {
  color: var(--p1-blue);
  font: 700 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .085em;
}
.p1-engineering .p1-engineering-head h2 {
  margin: 5px 0 6px;
  color: var(--p1-navy);
  font-size: 20px;
  line-height: 1.3;
}
.p1-engineering .p1-engineering-head p {
  max-width: 66ch;
  margin: 0;
  color: var(--p1-muted);
  font-size: 13px;
  line-height: 1.7;
}
.p1-engineering .p1-drawing-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #c6d5df;
  border-radius: 3px;
  background: #f2f6f8;
  color: #3b5b70;
  font-size: 11px;
  line-height: 1.35;
}
.p1-engineering .p1-scale-note {
  margin: 0 24px 20px;
  padding: 9px 12px;
  border-left: 3px solid #b78a53;
  background: #f7f5f0;
  color: #5e574b;
  font-size: 11.5px;
  line-height: 1.65;
}

.p1-engineering .p1-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 24px 22px;
}
.p1-engineering .p1-figure {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--p1-line);
  border-radius: 4px;
  background: #f9fbfc;
  overflow: hidden;
}
.p1-engineering .p1-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--p1-line);
  background: #fff;
}
.p1-engineering .p1-figure figcaption strong {
  color: #1a3649;
  font-size: 14px;
  line-height: 1.35;
}
.p1-engineering .p1-figure figcaption .p1-figure-unit {
  margin-left: auto;
  color: #637889;
  font-size: 11px;
  font-weight: 600;
}
.p1-engineering .p1-figure figcaption .p1-mobile-scroll-hint { display: none; }
.p1-engineering .p1-figure-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.p1-engineering .p1-figure-scroll:focus-visible {
  outline: 2px solid #2878a4;
  outline-offset: -2px;
}
.p1-engineering .p1-diagram {
  display: block;
  width: 100%;
  min-width: 420px;
  height: auto;
  max-width: none;
  background: #f9fbfc;
}
.p1-engineering .p1-figure-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  border-top: 1px solid var(--p1-line);
  background: #fff;
  color: #647683;
  font-size: 10.5px;
  line-height: 1.45;
}
.p1-engineering .p1-inline-selection {
  flex: 0 0 auto;
  color: #1f638c;
  font-weight: 700;
}

/* SVG 材料及参数图例：颜色只用于区分材料，尺寸不代表比例。 */
.p1-engineering .p1-rock { fill: #e8e3d9; stroke: #b9ae9e; stroke-width: 1.4; }
.p1-engineering .p1-cement { fill: #c8d3d6; stroke: #8097a1; stroke-width: 1.4; }
.p1-engineering .p1-casing { fill: #708695; stroke: #3e5665; stroke-width: 1.8; }
.p1-engineering .p1-wellbore { fill: #f5fafb; stroke: #466273; stroke-width: 1.8; }
.p1-engineering .p1-material-line { fill: none; stroke: #93a8ad; stroke-width: 1; }
.p1-engineering .p1-steel-line { fill: none; stroke: #b3c3ca; stroke-width: 1; }
.p1-engineering .p1-channel { fill: #ab7756; stroke: #79543c; stroke-width: 1.5; }
.p1-engineering .p1-channel-axis { fill: none; stroke: #e6cfb8; stroke-width: 1; stroke-dasharray: 6 5; }
.p1-engineering .p1-channel-ray { fill: none; stroke: #9d6648; stroke-width: 11; stroke-linecap: round; }
.p1-engineering .p1-phase-guide { fill: none; stroke: #7992a1; stroke-width: 1.3; stroke-dasharray: 4 4; }
.p1-engineering .p1-phase-arc { fill: none; stroke: #2a688e; stroke-width: 2.4; }
.p1-engineering .p1-dimension { fill: none; stroke: #2a688e; stroke-width: 1.8; }
.p1-engineering .p1-projection { fill: none; stroke: #7493a6; stroke-width: 1; stroke-dasharray: 3 3; }
.p1-engineering .p1-key-leader { fill: none; stroke: #8aa0ac; stroke-width: 1; }
.p1-engineering .p1-label-strong { fill: #1c3a4c; font: 700 13px/1.2 system-ui, sans-serif; }
.p1-engineering .p1-label-unit { fill: #24658b; font: 700 12px/1.2 ui-monospace, monospace; }
.p1-engineering .p1-label-muted { fill: #526977; font: 11px/1.2 system-ui, sans-serif; }
.p1-engineering .p1-hit-line { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; }
.p1-engineering .p1-hotspot { cursor: pointer; }
.p1-engineering .p1-hotspot.is-active .p1-selectable-shape,
.p1-engineering .p1-hotspot:focus-visible .p1-selectable-shape {
  stroke: #156b9b;
  stroke-width: 3;
}
.p1-engineering .p1-hotspot-channel.is-active .p1-channel,
.p1-engineering .p1-hotspot-channel:focus-visible .p1-channel { fill: #bb7048; }
.p1-engineering .p1-hotspot-channel.is-active .p1-channel-ray,
.p1-engineering .p1-hotspot-channel:focus-visible .p1-channel-ray { stroke: #bb7048; stroke-width: 15; }
.p1-engineering .p1-hotspot-phase.is-active .p1-phase-arc,
.p1-engineering .p1-hotspot-phase:focus-visible .p1-phase-arc { stroke: #155f8b; stroke-width: 4; }
.p1-engineering .p1-hotspot:focus-visible { outline: 2px solid #2779a6; outline-offset: 2px; }

.p1-engineering .p1-inspector {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr);
  gap: 0;
  border-top: 1px solid var(--p1-line);
  background: #f5f8fa;
}
.p1-engineering .p1-parts { padding: 19px 24px 22px; border-right: 1px solid var(--p1-line); }
.p1-engineering .p1-parts h3,
.p1-engineering .p1-explanation h3 { margin: 0 0 7px; color: var(--p1-navy); font-size: 15px; }
.p1-engineering .p1-parts p { margin: 0 0 13px; color: var(--p1-muted); font-size: 11.5px; line-height: 1.6; }
.p1-engineering .p1-part-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.p1-engineering .p1-part-button {
  min-height: 33px;
  padding: 6px 10px;
  border: 1px solid #c6d5de;
  border-radius: 3px;
  background: #fff;
  color: #36556a;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  cursor: pointer;
}
.p1-engineering .p1-part-button:hover,
.p1-engineering .p1-part-button:focus-visible { border-color: #2779a6; outline: 2px solid transparent; color: #13415c; }
.p1-engineering .p1-part-button:focus-visible { outline: 2px solid #2779a6; outline-offset: 2px; }
.p1-engineering .p1-part-button.is-active {
  border-color: #24658b;
  background: #e7f0f5;
  color: #123b58;
  font-weight: 700;
}
.p1-engineering .p1-explanation { min-width: 0; padding: 19px 24px 22px; background: #fff; }
.p1-engineering .p1-explanation h3 { margin-top: 5px; font-size: 17px; }
.p1-engineering .p1-explanation dl { display: grid; gap: 12px; margin: 12px 0 0; }
.p1-engineering .p1-explanation dl > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
.p1-engineering .p1-explanation dt { color: #557084; font-size: 11px; font-weight: 700; }
.p1-engineering .p1-explanation dd { margin: 0; color: #324a5b; font-size: 12px; line-height: 1.65; }

@media (max-width: 920px) {
  .p1-engineering .p1-figures { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .p1-engineering .p1-inspector { grid-template-columns: 1fr; }
  .p1-engineering .p1-parts { border-right: 0; border-bottom: 1px solid var(--p1-line); }
}
@media (max-width: 560px) {
  .p1-engineering .p1-engineering-head { display: block; padding: 17px 14px 14px; }
  .p1-engineering .p1-engineering-head h2 { font-size: 18px; }
  .p1-engineering .p1-drawing-badge { display: inline-block; margin-top: 10px; }
  .p1-engineering .p1-scale-note { margin: 0 14px 14px; }
  .p1-engineering .p1-figures { gap: 12px; padding: 0 14px 16px; }
  .p1-engineering .p1-figure figcaption { padding: 10px; }
  .p1-engineering .p1-figure figcaption .p1-figure-unit { width: 100%; margin-left: 0; }
  .p1-engineering .p1-figure figcaption .p1-mobile-scroll-hint {
    display: block;
    color: #47728c;
    font-size: 10px;
    font-weight: 600;
  }
  .p1-engineering .p1-figure-foot { display: block; padding: 9px 10px; }
  .p1-engineering .p1-inline-selection { display: block; margin-top: 3px; }
  .p1-engineering .p1-parts,
  .p1-engineering .p1-explanation { padding: 16px 14px; }
  .p1-engineering .p1-explanation dl > div { grid-template-columns: 1fr; gap: 3px; }
}

/* D1 工业平台样板：仅统一视觉与响应式，不改动结构图含义。 */
.detail-sample-p1 .p1-engineering {
  --p1-navy: var(--platform-nav);
  --p1-blue: var(--platform-accent);
  --p1-line: var(--platform-border);
  --p1-muted: var(--platform-muted);
  margin-top: 14px;
  border-color: var(--platform-border);
  border-radius: var(--platform-radius-lg);
  color: var(--platform-text);
  box-shadow: var(--platform-shadow-sm);
}
.detail-sample-p1 .p1-engineering .p1-engineering-head {
  padding: 22px 24px 18px;
  border-top: 0;
  border-bottom: 1px solid var(--platform-border);
  background: #fff;
}
.detail-sample-p1 .p1-engineering .p1-engineering-head::before {
  align-self: stretch;
  width: 3px;
  border-radius: 3px;
  background: var(--platform-accent);
  content: "";
}
.detail-sample-p1 .p1-engineering .p1-engineering-head > div { flex: 1; }
.detail-sample-p1 .p1-engineering .p1-kicker,
.detail-sample-p1 .p1-engineering .p1-figure-index,
.detail-sample-p1 .p1-engineering .p1-explanation-kicker { color: var(--platform-accent); }
.detail-sample-p1 .p1-engineering .p1-engineering-head h2,
.detail-sample-p1 .p1-engineering .p1-parts h3,
.detail-sample-p1 .p1-engineering .p1-explanation h3 { color: var(--platform-text); }
.detail-sample-p1 .p1-engineering .p1-engineering-head p,
.detail-sample-p1 .p1-engineering .p1-parts p { color: var(--platform-text-2); }
.detail-sample-p1 .p1-engineering .p1-drawing-badge {
  border-color: #cfe0f3;
  color: var(--platform-accent-dark);
  background: var(--platform-accent-soft);
}
.detail-sample-p1 .p1-engineering .p1-scale-note {
  margin: 16px 24px;
  border-left-color: var(--platform-warning);
  background: var(--platform-warning-soft);
  color: #6f572c;
}
.detail-sample-p1 .p1-engineering .p1-figures {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: 16px;
  padding: 0 24px 24px;
}
.detail-sample-p1 .p1-engineering .p1-figure {
  border-color: var(--platform-border);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface-soft);
}
.detail-sample-p1 .p1-engineering .p1-figure figcaption,
.detail-sample-p1 .p1-engineering .p1-figure-foot { border-color: var(--platform-border); }
.detail-sample-p1 .p1-engineering .p1-figure figcaption strong { color: var(--platform-text); }
.detail-sample-p1 .p1-engineering .p1-figure figcaption .p1-figure-unit,
.detail-sample-p1 .p1-engineering .p1-figure-foot { color: var(--platform-muted); }
.detail-sample-p1 .p1-engineering .p1-inline-selection { color: var(--platform-accent-dark); }
.detail-sample-p1 .p1-engineering .p1-inspector {
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  border-color: var(--platform-border);
  background: #f6f9fc;
}
.detail-sample-p1 .p1-engineering .p1-parts { border-color: var(--platform-border); }
.detail-sample-p1 .p1-engineering .p1-part-button {
  min-height: 36px;
  border-color: var(--platform-border-strong);
  border-radius: var(--platform-radius-sm);
  color: var(--platform-text-2);
}
.detail-sample-p1 .p1-engineering .p1-part-button:hover,
.detail-sample-p1 .p1-engineering .p1-part-button:focus-visible { border-color: #87add4; color: var(--platform-accent-dark); }
.detail-sample-p1 .p1-engineering .p1-part-button.is-active {
  border-color: #8db8e7;
  color: var(--platform-accent-dark);
  background: var(--platform-accent-soft);
}
.detail-sample-p1 .p1-engineering .p1-explanation dl > div {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--platform-border);
}
.detail-sample-p1 .p1-engineering .p1-explanation dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.detail-sample-p1 .p1-engineering .p1-explanation dt { color: var(--platform-muted); }
.detail-sample-p1 .p1-engineering .p1-explanation dd { color: var(--platform-text-2); }

@media (max-width: 1060px) {
  .detail-sample-p1 .p1-engineering .p1-figures { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .detail-sample-p1 .p1-engineering .p1-inspector { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .detail-sample-p1 .p1-engineering { border-radius: var(--platform-radius-md); }
  .detail-sample-p1 .p1-engineering .p1-engineering-head { padding: 17px 14px 14px; }
  .detail-sample-p1 .p1-engineering .p1-engineering-head::before { display: none; }
  .detail-sample-p1 .p1-engineering .p1-scale-note { margin: 0 14px 14px; }
  .detail-sample-p1 .p1-engineering .p1-figures { padding: 0 14px 16px; }
}