/*
 * HJ Master Detail R4 — page-specific conceptual diagrams
 * Each generated Master detail carries one deterministic visual key, semantic
 * content track and route derived from that page's scope. These diagrams are
 * planning aids only; they are never project photographs or as-built drawings.
 */

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: baseline;
  gap: 12px;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-head span {
  color: var(--me-r3-accent);
  font: 0.65rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-head strong {
  color: var(--me-text);
  font-size: 0.82rem;
  font-weight: 660;
  line-height: 1.4;
  text-align: right;
  text-wrap: balance;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-plot {
  display: block;
  width: 100%;
  height: auto;
  color: var(--me-r3-accent);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-frame {
  fill: rgba(var(--me-r3-panel), 0.42);
  stroke: rgba(var(--me-r3-accent-rgb), 0.18);
  stroke-width: 1;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-route {
  fill: none;
  stroke: var(--me-r3-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-route--echo {
  stroke: var(--me-r3-secondary);
  stroke-dasharray: 2 8;
  stroke-width: 1.25;
  opacity: 0.42;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node-ring {
  fill: rgba(var(--me-r3-accent-rgb), 0.035);
  stroke: rgba(var(--me-r3-accent-rgb), 0.22);
  stroke-width: 1;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node-core {
  fill: rgba(var(--me-r3-panel), 0.98);
  stroke: var(--me-r3-accent);
  stroke-width: 2;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node text {
  fill: var(--me-text);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.03em;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-legend li {
  min-height: 54px;
}

body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram figcaption {
  color: var(--me-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

/* Security surveillance: lens field, evidence route and recorded endpoint. */
body[data-hj-entry-content-track="security-surveillance"] .me-concept-diagram-plot {
  background:
    radial-gradient(circle at 17% 40%, transparent 0 12%, rgba(var(--me-r3-accent-rgb), 0.05) 12.5% 13%, transparent 13.5% 21%, rgba(var(--me-r3-secondary-rgb), 0.04) 21.5% 22%, transparent 22.5%),
    linear-gradient(115deg, transparent 0 48%, rgba(var(--me-r3-accent-rgb), 0.025) 48% 49%, transparent 49%);
  border-radius: 18px;
}

body[data-hj-entry-content-track="security-surveillance"] .me-visual-node-core {
  rx: 3px;
}

/* Identity access: threshold blocks and permission decision points. */
body[data-hj-entry-content-track="identity-access"] .me-visual-frame {
  stroke-dasharray: 38 7;
}

body[data-hj-entry-content-track="identity-access"] .me-visual-node-core {
  transform: rotate(45deg);
  transform-box: fill-box;
  transform-origin: center;
}

body[data-hj-entry-content-track="identity-access"] .me-visual-node text {
  fill: var(--me-r3-accent);
}

/* Vehicle access: lane centre line and four controlled passage states. */
body[data-hj-entry-content-track="vehicle-access-parking"] .me-concept-diagram-plot {
  background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(var(--me-r3-secondary-rgb), 0.055) 54px 72px, transparent 72px 126px) center / 100% 2px no-repeat;
}

body[data-hj-entry-content-track="vehicle-access-parking"] .me-visual-route {
  stroke-width: 4;
}

/* ICT transport: packet grid and a dashed resilient path. */
body[data-hj-entry-content-track="ict-network"] .me-concept-diagram-plot,
body[data-hj-entry-content-track="ict-compute-storage"] .me-concept-diagram-plot {
  background-image:
    linear-gradient(rgba(var(--me-r3-accent-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--me-r3-secondary-rgb), 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 18px;
}

body[data-hj-entry-content-track="ict-network"] .me-visual-route {
  stroke-dasharray: 10 4;
}

body[data-hj-entry-content-track="ict-compute-storage"] .me-visual-node-ring {
  fill: rgba(var(--me-r3-secondary-rgb), 0.045);
  stroke-dasharray: 3 3;
}

/* Communication and AV: waveform routing and presentation endpoint. */
body[data-hj-entry-content-track="communication-av"] .me-visual-route {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(var(--me-r3-secondary-rgb), 0.52));
}

body[data-hj-entry-content-track="communication-av"] .me-visual-node-core {
  rx: 13px;
}

body[data-hj-entry-content-track="communication-av"] .me-visual-node:nth-of-type(even) .me-visual-node-ring {
  stroke: var(--me-r3-secondary);
}

/* Smart automation: a continuous feedback loop. */
body[data-hj-entry-content-track="smart-automation"] .me-visual-frame,
body[data-hj-entry-content-track="facility-monitoring"] .me-visual-frame {
  stroke-dasharray: 2 7;
}

body[data-hj-entry-content-track="smart-automation"] .me-visual-node-core {
  rx: 10px;
}

body[data-hj-entry-content-track="smart-automation"] .me-visual-route--echo {
  stroke-dasharray: 14 5 2 5;
  opacity: 0.55;
}

/* Monitoring: sensor samples, threshold and response. */
body[data-hj-entry-content-track="facility-monitoring"] .me-concept-diagram-plot {
  background: linear-gradient(180deg, transparent 0 54%, rgba(var(--me-r3-secondary-rgb), 0.045) 54% 55%, transparent 55%);
}

body[data-hj-entry-content-track="facility-monitoring"] .me-visual-node-ring {
  stroke-dasharray: 1 4;
}

/* Fire and life safety: high-legibility monitored circuit. */
body[data-hj-entry-content-track="fire-life-safety"] .me-visual-frame {
  fill: rgba(var(--me-r3-accent-rgb), 0.045);
  stroke-width: 2;
}

body[data-hj-entry-content-track="fire-life-safety"] .me-visual-route {
  stroke-width: 4;
}

body[data-hj-entry-content-track="fire-life-safety"] .me-visual-node-core {
  rx: 13px;
  stroke-width: 3;
}

/* LV power: busbar path, isolation nodes and square inspection geometry. */
body[data-hj-entry-content-track="lv-power-infrastructure"] .me-concept-diagram-plot {
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(var(--me-r3-accent-rgb), 0.04) 47px 49px, transparent 50px 96px);
}

body[data-hj-entry-content-track="lv-power-infrastructure"] .me-visual-route {
  stroke-linecap: square;
  stroke-width: 4;
}

body[data-hj-entry-content-track="lv-power-infrastructure"] .me-visual-node-core {
  rx: 0;
}

/* Security operations: operator states and incident record trail. */
body[data-hj-entry-content-track="security-operations"] .me-visual-route {
  stroke-dasharray: 18 5 3 5;
}

body[data-hj-entry-content-track="security-operations"] .me-visual-node-ring {
  stroke-width: 2;
}

body[data-hj-entry-content-track="security-operations"] .me-visual-node--4 .me-visual-node-core {
  fill: rgba(var(--me-r3-secondary-rgb), 0.16);
}

/* Special systems: cue/effect path with dual-spectrum endpoints. */
body[data-hj-entry-content-track="special-systems"] .me-concept-diagram-plot {
  background:
    radial-gradient(circle at 20% 34%, rgba(var(--me-r3-secondary-rgb), 0.09), transparent 18%),
    radial-gradient(circle at 76% 68%, rgba(var(--me-r3-accent-rgb), 0.08), transparent 22%);
  border-radius: 18px;
}

body[data-hj-entry-content-track="special-systems"] .me-visual-route {
  filter: drop-shadow(0 0 10px rgba(var(--me-r3-secondary-rgb), 0.48));
}

body[data-hj-entry-content-track="special-systems"] .me-visual-node:nth-of-type(odd) .me-visual-node-core {
  fill: rgba(var(--me-r3-secondary-rgb), 0.14);
}

/* Delivery pages remain a stage gate, not a project-evidence diagram. */
body[data-hj-entry-content-track="project-delivery"] .me-concept-diagram-plot {
  background: linear-gradient(90deg, rgba(var(--me-r3-accent-rgb), 0.035), transparent 42%, rgba(var(--me-r3-secondary-rgb), 0.035));
  border-radius: 18px;
}

body[data-hj-entry-content-track="project-delivery"] .me-visual-route {
  stroke-dasharray: 24 4;
}

body[data-hj-entry-content-track="project-delivery"] .me-visual-node-core {
  rx: 2px;
}

/* Eight deterministic variants change rhythm without changing the meaning. */
body[data-hj-entry-visual-variant="1"] .me-visual-route--echo { transform: translateY(8px); }
body[data-hj-entry-visual-variant="2"] .me-visual-route--echo { transform: translateY(-8px); }
body[data-hj-entry-visual-variant="3"] .me-visual-route--echo { stroke-dasharray: 1 6; }
body[data-hj-entry-visual-variant="4"] .me-visual-route--echo { stroke-dasharray: 8 6; }
body[data-hj-entry-visual-variant="5"] .me-visual-frame { stroke-dasharray: 18 5; }
body[data-hj-entry-visual-variant="6"] .me-visual-node-ring { stroke-dasharray: 2 5; }
body[data-hj-entry-visual-variant="7"] .me-visual-node--2 .me-visual-node-ring,
body[data-hj-entry-visual-variant="7"] .me-visual-node--4 .me-visual-node-ring { stroke: var(--me-r3-secondary); }
body[data-hj-entry-visual-variant="8"] .me-visual-route { stroke-width: 3.75; }

@media (max-width: 900px) {
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-head {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-head strong {
    text-align: left;
  }

  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-legend {
    grid-template-columns: 1fr;
  }

  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-legend li {
    min-height: 50px;
  }
}

@media (max-width: 640px) {
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-plot {
    min-width: 0;
  }

  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram figcaption {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram *,
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram *::before,
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-frame,
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-route,
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node-ring,
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node-core {
    fill: Canvas;
    stroke: CanvasText;
  }

  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node text {
    fill: CanvasText;
  }
}

@media print {
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-concept-diagram-plot {
    filter: none;
  }

  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-frame,
  body[data-hj-master-entry][data-hj-entry-visual-version="r4"] .me-visual-node-core {
    fill: transparent;
  }
}