.plan-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px}.plan-toolbar>label{margin:0;min-width:140px;margin-bottom:0}.plan-toolbar .plan-search{flex:1}.plan-card{border:1px solid var(--line);border-radius:5px;overflow:hidden;min-width:0;align-self:start}.plan-stage{position:relative;height:570px;background:#f3f5f5;overflow:hidden;touch-action:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.plan-stage:fullscreen{height:100vh;width:100vw;background:#edf0ef}.plan-stage svg#plan-svg{width:100%;height:100%;display:block;cursor:grab}.plan-stage svg#plan-svg:active{cursor:grabbing}.plan-stage #plan-webgl{position:absolute;inset:0}.plan-stage canvas{width:100%;height:100%;display:block}.map-point:focus{outline:none}.point-list{max-height:300px;overflow:auto;display:grid;gap:5px}.point-row{width:100%;text-align:left;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #d4dde8;border-radius:4px;color:#5b7390;background:#fff;font-size:11px}.point-row[aria-current=true]{background:#eef4fb;border-color:#8eabd1}@media (min-width:1600px){.plan-stage{height:660px}}@media (max-width:1150px){.plan-toolbar .plan-search{min-width:200px}}@media (max-width:1150px){.plan-stage{height:500px}}@media (max-width:850px){.plan-stage{height:500px}}@media (max-width:850px){.plan-toolbar>label{min-width:110px;flex:1}}@media (max-width:850px){.plan-toolbar .plan-search{min-width:170px}}@media (max-width:520px){.plan-stage{height:450px}}.plan-toolbar .floating-field{min-width:150px}
/* Both plan selectors extend the shared joined-button filter. */
.plan-layout,.plan-toolbar{--plan-control-height:58px}
.plan-layout{display:block}
.plan-map-column{min-width:0;align-self:start}
.plan-stage.has-selection{grid-template-columns:minmax(0,1fr) min(280px,38%)}
.plan-surface{position:relative;min-width:0;min-height:0;height:100%;overflow:hidden}
.plan-map-tools{position:absolute;top:0;right:0;z-index:5;display:flex;align-items:stretch;max-width:100%;overflow:hidden;border:solid #a6b6cb;border-width:0 0 1px 1px;border-radius:0 0 0 6px;background:#fff}
.plan-map-tools>.button{flex:1 1 0;min-width:0;width:64px;padding-inline:4px;font-size:11px;border:0;border-radius:0}
.plan-map-tools>.button+.button{border-left:1px solid #a6b6cb}
.plan-map-tools>.button:focus-visible{outline-offset:-3px}
.plan-stage>.plan-detail{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;touch-action:pan-y;background:#fff;border-left:1px solid var(--line)}
.plan-detail>.card{--detail-padding:12px;display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;border:0;border-radius:0;margin:0;padding:0 var(--detail-padding) var(--detail-padding)}
.plan-detail>.card>.card-heading{position:sticky;top:0;z-index:2;align-items:stretch;justify-content:flex-end;gap:0;min-height:var(--plan-control-height);margin:0 calc(-1 * var(--detail-padding))}
.plan-detail>.card h2{display:flex;align-items:center;flex:1;min-width:0;padding:8px 10px;font-size:13px;line-height:20px;font-weight:400;border-bottom:1px solid var(--line);border-radius:0;background:#f2f4f7}
.plan-detail>.card h2>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-detail-title{display:flex;flex-direction:column;gap:6px}
.plan-detail-title>span{display:block;overflow:hidden;text-overflow:ellipsis}
.plan-detail-title>small{display:flex;align-items:center;gap:6px;font-size:11px;line-height:16px;color:var(--muted)}
.plan-detail-type>.badge{flex:none}
.plan-detail-type>span:not(.badge){overflow:hidden;text-overflow:ellipsis}
.plan-detail :is(.plan-detail-close,.plan-detail-link){position:static;flex:none;min-width:64px;min-height:var(--plan-control-height);border-radius:0;border:solid var(--line);border-width:0 0 0 1px;padding:5px 6px}
.plan-detail-link{color:#315f98;background:#eaf3ff;border-color:#b9cce3}
.plan-detail-link:hover{background:#dceaff}
.plan-detail-close{color:#fff;background:#c4555c;border-color:#a84e57}
.plan-detail-close:hover{background:#ab414a}
.plan-detail-power{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;min-height:var(--plan-control-height);color:#28734d;background:#edf7ef;border:solid var(--line);border-width:0 0 1px 1px}
.plan-detail-footer{flex:none;display:flex;flex-direction:column;align-items:flex-end;margin-top:auto;background:#fff;border-top:1px solid var(--line)}
.plan-detail-tools{display:flex}
.plan-detail-actions.button-group{display:flex;flex-wrap:wrap;width:100%;margin:0;background:#fff;border-bottom:1px solid var(--line)}
.plan-detail-actions.button-group>.button{flex:1 1 auto;width:auto;min-height:var(--plan-control-height);margin:0;padding:7px 10px;border:solid #a6b6cb;border-width:0 0 0 1px;border-radius:0}
.plan-detail-actions.button-group>.button:first-child{border-left:0}
.plan-detail-actions>.plan-power-toggle[data-command=on]{color:#28734d;background:#edf7ef;border-color:#b6d8c2}
.plan-detail-actions>.plan-power-toggle[data-command=off]{color:#a13e45;background:#fbecee;border-color:#e8bdc2}
.plan-detail-actions>.plan-power-toggle[data-command=on]:hover:not(:disabled){background:#e0f0e4}
.plan-detail-actions>.plan-power-toggle[data-command=off]:hover:not(:disabled){background:#f6dce0}
.map-point{cursor:pointer}
.plan-physical{cursor:pointer;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.plan-physical text{stroke:none;pointer-events:none}
.plan-physical.active,.plan-physical:focus-visible{stroke:#c58d2f;stroke-width:3;outline:none}
.plan-physical.active rect{fill-opacity:.28}
#plan-svg,#plan-svg text{user-select:none;-webkit-user-select:none}
.map-point-symbol text{pointer-events:none}
.map-point.active rect,.map-point:focus-visible rect{fill:#e4f3f1;stroke-width:3}
.point-kind{display:inline-flex;align-items:center;flex:none}
.point-kind>.icon{width:18px;height:18px}
/* Expanded equipment stays on the map; the transparent layer never blocks panning. */
.plan-cluster-tree{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.plan-cluster-branches{display:block;width:100%;height:100%;overflow:hidden}
.plan-cluster-branches>.map-point{pointer-events:all}
.plan-cluster-branches .map-point-symbol{animation:plan-branch-in var(--motion)}
/* Derive focus from the existing disclosure state, without another JS state or
   a blocking overlay. The expanded tree and its original group stay vivid. */
#plan-base,#plan-points>.map-point,.plan-stage>.plan-detail{transition:opacity var(--motion)}
.plan-surface:has(>.plan-cluster-tree:not([hidden])) #plan-base{opacity:.25}
.plan-surface:has(>.plan-cluster-tree:not([hidden])) #plan-points>.map-point:not([aria-expanded=true]){opacity:.18}
.plan-stage:has(>.plan-surface>.plan-cluster-tree:not([hidden]))>.plan-detail{opacity:.4}
.plan-branch-halo,.plan-branch-line{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.plan-branch-halo{stroke:#fff;stroke-width:5;stroke-opacity:.85}
.plan-branch-line{stroke:#6c839d;stroke-width:1.5}
.plan-cluster-pages{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);pointer-events:auto;background:#fff}
.plan-cluster-page{display:flex;align-items:center;padding:0 10px;border-block:1px solid #a6b6cb;font-size:12px}
@keyframes plan-branch-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.plan-cluster-branches .map-point-symbol{animation:none}#plan-base,#plan-points>.map-point,.plan-stage>.plan-detail{transition:none}}
.plan-toolbar>.plan-search{display:flex;flex:0 0 auto;align-self:stretch;min-width:0;margin-left:auto}
.plan-level-slot{flex:0 1 400px;min-width:0;max-width:100%}
.plan-level-slot>.plan-search-field{width:100%;min-width:0;min-height:var(--plan-control-height);margin:0}
#plan-search::-webkit-search-cancel-button{display:none}
.plan-search-toggle.button{min-width:64px;min-height:var(--plan-control-height)}
.plan-options-dialog{--dialog-width:min(360px,calc(100vw - 24px))}
.plan-options-body{display:flex;flex-direction:column;gap:4px}
.plan-options-body>.check{min-height:36px;margin:0;gap:10px}
.plan-options-body>.floating-field{margin:4px 0 8px;width:100%}
.plan-level-filters{min-width:0;max-width:100%}
.plan-layer-toolbar{display:flex;flex:1 0 100%;flex-wrap:wrap;align-items:stretch;gap:8px;min-width:0}
.plan-mode-filters{flex:0 0 190px;min-width:0}
.plan-mode-filters .list-status-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-layer-filters{flex:1 1 max-content;min-width:0}
.plan-toolbar .list-status-filter{display:grid;width:100%;border:1px solid #a6b6cb;border-radius:5px;overflow:hidden}
.plan-level-filters .list-status-filter{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.plan-layer-filters .list-status-filter{grid-template-columns:repeat(var(--status-filter-count),minmax(0,1fr))}
.plan-toolbar :is(.plan-layer-filters,.plan-level-filters,.plan-mode-filters) .list-status-filter>.button{margin:0;border:0;border-right:1px solid #a6b6cb;border-radius:0;padding-inline:4px;white-space:normal;font-size:12px}
.plan-layer-filters .list-status-filter>.button>span:first-child{max-width:100%;overflow-wrap:anywhere}
.plan-toolbar .list-status-filter>.button:last-child{border-right:0}
.plan-toolbar .list-status-filter>.button:focus-visible{outline-offset:-3px}
@media(max-width:650px){
  .plan-card{scroll-margin-top:calc(var(--header) + 8px);scroll-margin-bottom:8px}
  .plan-stage{touch-action:pan-y}
  .plan-stage.has-selection{height:auto;min-height:calc(100svh - var(--header) - 20px);grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(200px,1fr) auto}
  .plan-stage.has-selection:fullscreen{height:100dvh;min-height:0;overflow:auto}
  .plan-surface{touch-action:none}
  .plan-surface>svg#plan-svg{position:absolute;inset:0}
  .plan-stage>.plan-detail{overflow:visible;gap:0;border-left:0;border-top:1px solid var(--line)}
  .plan-detail>.card{flex:none;min-height:auto;overflow:visible}
  .plan-toolbar{gap:8px}
  .plan-level-slot{flex:1 1 0}
  .plan-mode-filters{flex:1 0 100%}
  .plan-layer-filters .list-status-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan-layer-filters .list-status-filter>.button:not(:nth-last-child(-n+3)){border-bottom:1px solid #a6b6cb}
  .plan-layer-filters .list-status-filter>.button:nth-child(3n){border-right:0}
  .plan-layer-filters.is-distribution .list-status-filter{grid-template-columns:repeat(6,minmax(0,1fr))}
  .plan-layer-filters.is-distribution .list-status-filter>.button{grid-column:span 2;border-bottom:0;border-right:1px solid #a6b6cb}
  .plan-layer-filters.is-distribution .list-status-filter>.button:nth-child(-n+3){border-bottom:1px solid #a6b6cb}
  .plan-layer-filters.is-distribution .list-status-filter>.button:nth-child(n+4){grid-column:span 3}
  .plan-layer-filters.is-distribution .list-status-filter>.button:nth-child(3),.plan-layer-filters.is-distribution .list-status-filter>.button:last-child{border-right:0}
}

.plan-page>.page-top{min-height:calc(var(--dock-height) + 12px)}
.plan-detail-origin{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 8px;margin:0 calc(-1 * var(--detail-padding)) 12px 0;padding:3px 7px;font-size:10px;line-height:1.4;color:#6d7f94;background:#f7f9fc;border:solid var(--line);border-width:0 0 1px 1px;border-radius:0 0 0 5px}
.plan-device-info{min-width:0}
.plan-detail-facts{display:grid;margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;font-size:12px}
.plan-detail-facts>div{min-width:0;padding:6px 8px}
.plan-detail-facts>div+div{border-top:1px solid var(--line)}
.plan-detail-facts dt{font-size:10px;color:var(--muted);margin:0 0 3px}
.plan-detail-facts dd{margin:0;overflow-wrap:anywhere}
.plan-detail-facts code{font-size:11px}
.plan-device-info.has-camera>.plan-detail-facts{border-bottom:0;border-radius:4px 4px 0 0}
.plan-camera-preview.camera-tile{display:block;width:100%;margin:0;border-radius:0 0 4px 4px;overflow:hidden}