/* MOD-207: all rules stay inside the existing left-hand component. */
.hp207-network { gap: 12px; padding: 20px; }
.hp207-network .hp206-heading h2 { font-size: clamp(1.5rem,1.65vw,1.875rem); }
.hp207-network .hp206-heading h2 span { color: #1464f6; white-space: nowrap; }
.hp207-network .hp207-tools,.hp207-network [data-simple-controls] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp207-network .hp207-tools { justify-content: space-between; }
.hp207-network .hp207-view-badge { background: #1464f6; color: #fff; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 650; }
.hp207-network [data-speed] { background: #eef6ff; color: #1464f6; }
.hp207-network .hp207-scroll { overflow-x: auto; min-width: 0; border-radius: 14px; scrollbar-width: thin; }
.hp207-network .hp207-scroll:focus-visible { outline: 2px solid #1464f6; outline-offset: 2px; }
.hp207-network .hp207-scroll-hint { font-size: 11px; color: #64748b; margin: 0; }
.hp207-network .hp207-diagram { position: relative; height: 370px; min-width: 580px; }
.hp207-network .hp207-zone { position: absolute; width: 100%; border: 1px solid #d4e7fd; border-radius: 14px; background: linear-gradient(125deg,#f2f9ff,#eaf5ff); }
.hp207-network .hp207-service-zone { top: 0; height: 166px; }
.hp207-network .hp207-operations-zone { top: 219px; height: 151px; }
.hp207-network .hp207-zone h3 { margin: 10px 14px; color: #486389; font-size: 14px; font-weight: 700; }
.hp207-network .hp207-backup-group { position: absolute; left: 56.7%; width: 41.3%; top: 229px; height: 134px; border: 1px solid #c9ddf6; border-radius: 13px; background: #fff; text-align: center; }
.hp207-network .hp207-backup-group h4 { font-size: 15px; font-weight: 700; margin: 5px 0 0; }
.hp207-network .hp207-backup-group > span { color: #637591; font-size: 11px; }
.hp207-network .hp207-svg { position: absolute; inset: 0; width: 100%; height: 370px; overflow: visible; pointer-events: none; }
.hp207-network .hp207-edge { fill: none; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hp207-network .hp207-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 0; padding: 8px 4px; border: 1px solid #c1d9f8; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px #23569607; color: #142c52; line-height: 1.25; }
.hp207-network .hp207-node:disabled { opacity: 1; cursor: default; }
.hp207-network .hp207-node[aria-pressed="true"] { outline: 2px solid #1464f6; outline-offset: 2px; }
.hp207-network .hp207-node strong { font-size: 14px; font-weight: 700; white-space: nowrap; }
.hp207-network .hp207-node small { font-size: 11px; color: #5c7192; white-space: nowrap; }
.hp207-network .hp207-icon { width: 27px; height: 27px; flex: none; }
.hp207-network .hp207-node .hp206-node-icon { stroke-width: 1.8; }
.hp207-network .hp207-area { width: calc(100% - 10px); font-size: 12px; padding: 4px; border-radius: 7px; margin-top: 2px; }
.hp207-network .hp207-type-os .hp207-area { color: #6623ba; background: #f0e6ff; }
.hp207-network .hp207-type-data .hp207-area { color: #875300; background: #fff0d2; }
.hp207-network [data-simple-node="os_backup"] { background: #fbf8ff; border-color: #cda7ff; }
.hp207-network [data-simple-node="data_backup"] { background: #fffbf3; border-color: #f5cd80; }
.hp207-network [data-simple-node="os_backup"] .hp206-node-icon { stroke: #923cfa; }
.hp207-network [data-simple-node="data_backup"] .hp206-node-icon { stroke: #c88000; }
.hp207-network :is([data-simple-node="monitoring"],[data-simple-node="ai_analysis"]) .hp206-node-icon { stroke: #0499a2; }
.hp207-network .hp207-edge-label { position: absolute; transform: translateX(-50%); font-size: 11px; line-height: 16px; font-weight: 650; white-space: nowrap; color: #1464f6; background: #f4faff; padding-inline: 2px; pointer-events: none; }
.hp207-network .hp207-label-os-backup { color: #8031d4; }
.hp207-network .hp207-label-data-backup { color: #956000; }
.hp207-network .hp207-label-telemetry { color: #087f89; }
.hp207-network .hp207-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11px; color: #4d6383; }
.hp207-network :is(.hp207-legend,.hp206-legend) span::before { content: ''; display: inline-block; width: 18px; border-top: 2px solid var(--key-color); vertical-align: middle; margin-right: 6px; }
.hp207-network .hp206-key-service,.hp207-network .hp207-key-service { --key-color: #1464f6; }
.hp207-network .hp207-key-os { --key-color: #923cfa; }
.hp207-network .hp207-key-data { --key-color: #f2a000; }
.hp207-network .hp206-key-telemetry,.hp207-network .hp207-key-telemetry { --key-color: #04afb9; }
.hp207-network .hp207-key-replica { --key-color: #64748b; }
.hp207-network .hp207-key-replica::before { border-top-style: dashed !important; }
.hp207-network .hp207-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e1ecf8; padding-top: 10px; }
.hp207-network .hp207-footer p { color: #577093; font-size: 12px; line-height: 1.5; margin: 0; }
.hp207-network .hp207-footer button { flex: none; }
.hp207-network .hp207-selection { background: #edf5ff; padding: 12px; border-radius: 10px; }
.hp207-network .hp207-selection p,.hp207-network .hp207-explanation { font-size: 12px; line-height: 1.65; color: #536985; margin: 0; }
.hp207-network .hp207-explanation summary { cursor: pointer; }
.hp207-network .hp207-explanation p { margin: 6px 0 0; }
.hp207-network .hp207-trail { fill: none; stroke-linecap: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.hp207-network .hp207-head { pointer-events: none; }
.hp207-network .hp206-edge { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hp207-network .hp207-backup-types { display: flex; gap: 6px; flex-wrap: wrap; margin-block: 10px; }
.hp207-network .hp207-backup-types [aria-pressed="true"] { border-color: #923cfa; background: #f5ecff; }
@media (max-width: 599.98px) {
  .hp207-network { padding: 14px; }
  .hp207-network .hp207-tools { gap: 6px; }
  .hp207-network [data-simple-controls] { gap: 4px; }
  .hp207-network [data-simple-controls] button { padding-inline: 8px; font-size: 12px; }
  .hp207-network .hp207-footer { flex-wrap: wrap; }
  .hp207-network .hp207-footer button { width: 100%; }
}

.hp207-network .hp207-label-service { font-size: 10px; padding-inline: 0; }

.hp207-network :is(.hp207-edge,.hp206-edge) { opacity: .85; }

/* Darker bases keep orange/teal routes visible on the pale zones; heads keep the bright palette. */
.hp207-network [data-kind="data-backup"] :is(.hp207-edge,.hp206-edge) { stroke: #b57500; }
.hp207-network :is([data-kind="telemetry"],[data-kind="analysis"]) :is(.hp207-edge,.hp206-edge) { stroke: #078b96; }

/* The two columns size independently. Preserve the pre-207 right column's
   fluid minimum: the former compact diagram's 760:442 aspect ratio, its 280px
   minimum, 22px frame padding, heading line boxes and toolbar/footer spacing.
   These are the original component dimensions, not per-viewport heights.
   Content may still grow (long text, text zoom); the new map never stretches it. */
@media (min-width: 1200px) {
  .hp207-home .mod17502-grid { container-type: inline-size; align-items: start; }
  .hp207-home .mod17502-copy {
    --hp207-legacy-heading: clamp(1.25rem,1.6vw,1.75rem);
    --hp207-legacy-diagram: max(280px, calc(((100cqw - 22px) / 2 - 46px) * 442 / 760));
    min-block-size: calc(46px + 1.5rem + var(--hp207-legacy-heading) * 1.3 + 16px + .8125rem * 1.5 + 18px + 28px + 88px + var(--hp207-legacy-diagram));
  }
}
/* The diagram alone scrolls sideways; surrounding text and controls grow. */
.hp207-network > :not(dialog) { flex-shrink: 0; }