/* Desktop drawing: one floating layer key, direct equipment on the plan. */
#systems-panel{left:20px;right:auto;top:auto;bottom:18px;width:min(980px,calc(100vw - 266px));max-height:calc(100vh - 170px);border-radius:12px;box-shadow:0 5px 22px #293e4b10;background:#ffffffed;overflow:hidden;z-index:15;}
#systems-panel .float-header{height:43px;min-height:43px;padding:6px 10px 6px 16px;gap:12px;border-bottom:1px solid #e6ebef;cursor:move;touch-action:none;user-select:none;}
#systems-title{font-size:11px;white-space:nowrap;color:#768b96;flex:0 0 auto;font-weight:500;}
.layer-toggles{display:flex;gap:4px;align-items:center;flex:1;}
.layer-chip{display:flex;gap:6px;align-items:center;border:1px solid transparent;border-radius:6px;padding:6px 9px;font-size:11px;color:#819099;white-space:nowrap;}
.layer-check{width:11px;height:11px;border:1px solid #b8c6ce;border-radius:3px;position:relative;}
.layer-chip[aria-pressed=true]{background:color-mix(in srgb,var(--layer-color) 8%,white);color:var(--layer-color);}
.layer-chip[aria-pressed=true] .layer-check{background:var(--layer-color);border-color:var(--layer-color);}
.layer-chip[aria-pressed=true] .layer-check:after{content:'';position:absolute;width:5px;height:3px;left:2px;top:2px;border-left:1.4px solid white;border-bottom:1.4px solid white;transform:rotate(-45deg);}
.layer-chip:hover{border-color:#d9e2e6;background:#f4f7f8;}
.layer-all{font-size:10px;color:#819099;padding:5px 7px;}
#systems-close{height:27px;width:27px;font-size:20px;padding:0;}
#systems-content{padding:8px 15px 10px;overflow:auto;max-height:250px;flex:0 1 auto;}
.device-legend-row{display:flex;gap:13px;align-items:flex-start;}
.device-legend-row+.device-legend-row{margin-top:8px;padding-top:8px;border-top:1px solid #eff2f4;}
.device-legend-layer{font-size:10px;color:var(--layer-color);font-weight:500;width:44px;flex:0 0 44px;padding-top:3px;}
.device-legend-items{display:flex;flex-wrap:wrap;gap:6px 19px;align-items:center;}
.device-legend-item{display:inline-flex;gap:6px;align-items:center;font-size:11px;line-height:1.6;color:#607883;white-space:nowrap;}
.device-legend-item i{display:flex;color:var(--layer-color);}
.device-legend-item svg{width:16px;height:16px;}
#systems-panel .dock-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 12px;}
#systems-panel .dock-controls:has(> :not([hidden])){padding-top:7px;padding-bottom:6px;}
#systems-panel #section-controls,#systems-panel #route-filter{position:static;inset:auto;display:flex;max-width:none;width:auto;min-height:0;height:auto;transform:none;padding:0;gap:3px;box-shadow:none;background:transparent;border:0;border-radius:0;}
#systems-panel #section-controls[hidden],#systems-panel #route-filter[hidden]{display:none;}
#systems-panel .section-option,#systems-panel .route-filter-button{height:27px;padding:0 9px;font-size:11px;border-radius:5px;}
#systems-panel #route-play{position:static;inset:auto;transform:none;min-height:0;height:27px;padding:3px 9px;font-size:11px;border:1px solid #dbe5e9;background:#f7f9fa;border-radius:5px;box-shadow:none;}
#systems-panel #business-flow{position:static;inset:auto;max-width:none;width:auto;border:0;border-radius:0;padding:0 21px 8px;background:transparent;box-shadow:none;overflow:visible;}
.business-sequence{font-size:11px;color:#83969f;line-height:1.7;}
#systems-panel #legend{position:static;inset:auto;max-width:none;padding:9px 16px;gap:5px;border:0;border-radius:0;border-top:1px solid #e6ebef;background:transparent;box-shadow:none;}
#systems-panel .legend-group{gap:7px 13px;}
#systems-panel .legend-item,#systems-panel .legend-title{font-size:10px;}
#systems-panel #mode-insight{position:static;inset:auto;max-width:none;padding:3px 17px 10px;gap:8px;border:0;background:transparent;box-shadow:none;border-radius:0;font-size:10px;}
#systems-panel .insight-title,#systems-panel .flow-label,#systems-panel .flow-step{font-size:10px;}
#systems-reopen{left:20px;right:auto;top:auto;bottom:20px;font-size:12px;padding:10px 15px;}
.system-info{position:fixed;z-index:40;width:280px;max-height:400px;overflow:auto;padding:13px 15px;border-radius:10px;box-shadow:0 6px 24px #1b344d1b;pointer-events:none;}
.system-info[data-pinned=true]{pointer-events:auto;}
.system-info-header{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.system-info-header h3{flex:1;font-size:13px;line-height:1.5;color:var(--device-color);font-weight:650;}
.system-info-header .icon-button{width:24px;height:24px;padding:0;font-size:18px;color:#8b9ca5;}
.system-info-location{font-size:10px;color:#8a9ba4;line-height:1.7;margin-bottom:7px;}
.system-info-role{font-size:12px;line-height:1.7;color:#516f7e;}
.system-info-related{display:flex;flex-wrap:wrap;gap:5px 13px;font-size:11px;line-height:1.8;color:#526e7c;}
.system-info .system-basis{font-size:10px;line-height:1.7;margin-top:11px;padding-top:9px;}
.system-info .system-basis summary{font-size:10px;}
.system-info .system-basis a{font-size:10px;}