.form-dialog{border-radius:5px;border-color:#75a8cc}.form-dialog .dialog-header{background:#589dce;color:white;padding:13px 18px}.form-dialog .dialog-header .eyebrow{color:#dfedf8}.form-dialog .dialog-header h2{color:white;font-size:19px;font-weight:500}.form-dialog .dialog-header .icon-button{background:transparent;border-color:#ffffff33;color:white}.form-dialog .dialog-actions .primary{background:#559bc9;border-radius:3px}.form-dialog .field input,.form-dialog .field select,.form-dialog .field textarea{border-radius:3px}
.network-expansion{position:absolute;left:16px;top:16px;z-index:450;display:flex;gap:5px;align-items:flex-start}
.network-expansion>button{width:39px;height:39px;background:#559bc9;border:1px solid #4288b8;color:#fff;border-radius:5px;box-shadow:0 2px 8px #15375025}
.network-expansion .expansion-items{display:flex;gap:1px;background:white;border:1px solid #d4dfe8;box-shadow:0 3px 12px #173b4d20;border-radius:4px;overflow:hidden}
.expansion-items button{border:0;border-right:1px solid #dce5eb;background:#fff;color:#4f728c;padding:10px 12px;font-size:11px;min-height:37px}.expansion-items button:hover{background:#eaf3fb}
.optical-dialog{width:min(1420px,97vw);border-radius:6px;border:1px solid #6ea6cd;max-height:96vh}
.optical-dialog .dialog-header{background:#589dce;color:white;padding:12px 16px;border:0}.optical-dialog .dialog-header .eyebrow{color:#d9ecfa;font-size:8px;letter-spacing:1px}.optical-dialog .dialog-header h2{font-size:19px;margin-top:1px;color:white;font-weight:500}
.optical-dialog .dialog-header .secondary,.optical-dialog .dialog-header .icon-button{background:#ffffff17;color:white;border:1px solid #ffffff33;border-radius:3px;min-height:30px;padding:5px 9px;font-size:10px}.optical-dialog .dialog-header .secondary:hover,.optical-dialog .dialog-header .icon-button:hover{background:#ffffff30}
.optical-dialog .detail-tabs{background:#f5f7f9;padding:0 16px;gap:23px}.optical-dialog .detail-tabs button{padding:10px 0;font-size:11px}.optical-dialog .detail-body:has(.optical-shell){padding:0}
.optical-shell{background:#eef1f4}.optical-tools{display:flex;gap:12px;padding:9px 12px;border-bottom:1px solid #d0d9e1;background:#f7f8fa;align-items:center;flex-wrap:wrap}
.optical-tool-group{display:flex;align-items:center;gap:3px;border-right:1px solid #d4dce3;padding-right:12px}.optical-tool-group:last-child{border:0;margin-left:auto;padding:0}
.optical-tool{border:1px solid #d3dbe2;border-radius:2px;padding:7px 9px;min-height:33px;background:#fff;color:#485e70;font-size:10px;gap:6px}.optical-tool svg{width:17px;height:17px}.optical-tool:hover{border-color:#6d9ec0;background:#eff6fc}.optical-tool.active{color:#2d73a6;background:#e1effa;border-color:#8db6d3}
.zoom-tools button{min-width:29px;font-size:16px;padding:3px 8px}.zoom-tools>span{font-size:10px;min-width:39px;text-align:center;color:#647889}
.optical-status{display:flex;align-items:center;gap:12px;background:#fff;padding:8px 13px;color:#81919d;font-size:10px;border-bottom:1px solid #d9e0e6}.optical-status .badge{white-space:nowrap}
.diagram-scroll.optical-canvas{border:0;border-radius:0;background-color:#e7e9eb;background-image:linear-gradient(#b7bec22b 1px,transparent 1px),linear-gradient(90deg,#b7bec22b 1px,transparent 1px);background-size:20px 20px;min-height:380px;height:54vh;max-height:620px;overscroll-behavior:contain}.diagram-scroll.optical-canvas.no-grid{background-image:none}
@media (pointer:coarse){.box-pin::after{content:"";position:absolute;inset:-11px}}.button-danger{color:#b3263c;border-color:#e3b3bb}.cable-properties{margin-bottom:16px}.cable-properties>div{height:auto;min-height:38px}.cable-properties small{display:block;color:#647582}.cable-properties strong{white-space:pre-wrap;font-weight:500}.diagram-scroll.optical-canvas{cursor:grab;user-select:none}.diagram-scroll.optical-canvas.connecting{cursor:crosshair}.optical-canvas .port,.optical-canvas .port *{cursor:crosshair}.diagram-scroll.optical-canvas.panning,.diagram-scroll.optical-canvas.panning *{cursor:grabbing!important}.diagram-scroll.optical-canvas.wiring,.diagram-scroll.optical-canvas.wiring *{cursor:crosshair!important}.optical-svg{font-family:Arial,sans-serif}.optical-canvas:not(.connecting) .object-drag-handle{cursor:move;touch-action:none}.optical-canvas.connecting .port{cursor:crosshair}.optical-canvas .port:hover circle{stroke:#115cbd;stroke-width:2}.optical-canvas .port.selected circle{stroke:#0759df;stroke-width:3}.optical-canvas .optical-object.selected>.cable-body{filter:drop-shadow(0 0 3px #3994df33)}
.optical-dialog{overflow-x:hidden}.optical-shell{min-width:0;max-width:100%}.diagram-scroll.optical-canvas{width:100%;min-width:0;overflow:auto;contain:layout paint;touch-action:pan-x pan-y}.optical-canvas .optical-svg{max-width:none;min-width:0;display:block}
.optical-bottom{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-top:1px solid #cdd7e0;background:#f7f8fa;gap:15px;font-size:10px;color:#61798c}.optical-bottom small{display:block;color:#97a5af;font-size:9px;margin-top:3px}.optical-bottom .primary{background:#559bc9;border-color:#4288b8;border-radius:2px}.optical-bottom .secondary{border-radius:2px}
.optical-shell>.endpoint-selected{margin:0;border-radius:0;padding:7px 13px;font-size:10px}.optical-dialog .dialog-header .icon-button svg{width:16px;height:16px}.optical-shell .empty-state{padding-top:120px}.optical-object .port>rect:last-child{cursor:crosshair}.optical-dialog .notice-block{background:#fafaf4}
@media(max-width:760px){.network-expansion{left:10px;top:10px}.expansion-items{flex-direction:column}.expansion-items button{font-size:10px}.optical-dialog{width:99vw;margin:1vh auto}.optical-dialog .dialog-header{padding:10px}.optical-dialog .detail-tabs{padding:0 10px;gap:16px}.optical-tools{gap:5px;padding:6px}.optical-tool{padding:6px;font-size:9px}.optical-tool-group{gap:2px;padding-right:5px}.optical-tool-group:last-child{margin-left:0}.optical-status{align-items:flex-start;flex-direction:column;gap:5px;font-size:9px;padding:7px 9px}.optical-status .badge{font-size:8px}.diagram-scroll.optical-canvas{height:49vh;min-height:300px}.optical-bottom{flex-direction:column;align-items:flex-start;padding:8px;gap:8px}.optical-bottom .inline{width:100%;justify-content:flex-end;gap:5px}.optical-bottom .small{font-size:9px;padding:5px 7px;min-height:29px}.optical-bottom small{font-size:8px}}
@media(max-width:760px){.optical-dialog .dialog-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}.optical-dialog .dialog-header .eyebrow{display:none}.optical-dialog .dialog-header h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.optical-dialog .detail-header-right{gap:4px}.optical-dialog .dialog-header .secondary{font-size:0;width:29px;height:29px;padding:5px;gap:0;min-height:29px}.optical-dialog .dialog-header .secondary svg{width:16px;height:16px}.optical-dialog .dialog-header .icon-button{width:29px;height:29px;padding:5px;min-height:29px}}
.box-cable-manager{margin-bottom:18px}.box-cable-manager>div{align-items:center;white-space:normal;gap:15px}.box-cable-manager strong{font-size:12px;font-weight:600;color:#3d586d}.box-cable-manager small{display:block;margin-top:4px;font-size:10px;color:#8fa0ac}
.diagram-scroll.optical-canvas{touch-action:none;scroll-behavior:auto}
.wire-hit{pointer-events:stroke;cursor:pointer}.wire-handles circle{cursor:move;touch-action:none}.wire-preview{pointer-events:none}

.optical-sgp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid #d0d9e1;background:#fff;font-size:10px;color:#607788}.optical-sgp-bar>span{flex:1;min-width:180px}.optical-sgp-bar label{display:flex;align-items:center;gap:6px}.optical-sgp-bar select{max-width:180px;font-size:10px;padding:4px;border:1px solid #cdd8e2;background:white}.splitter-client-label{pointer-events:none}

/* Floating detail window leaves the map interactive. */
#detail-dialog.floating-detail{position:fixed;inset:auto;margin:0;padding:0;max-width:none;max-height:none;min-width:0;min-height:0;z-index:1100;overflow:hidden;box-shadow:0 12px 45px #102b4355;box-sizing:border-box}
#detail-dialog.floating-detail:not([open]){display:none}
.floating-detail #detail-content{height:100%;display:flex;flex-direction:column;min-width:0;min-height:0}
.floating-detail .dialog-header,.floating-detail .detail-tabs{flex-shrink:0}
.floating-detail .dialog-header{background:#589dce;color:#fff;padding:10px 14px;gap:8px}
.floating-detail .dialog-header h2{font-size:18px;color:white;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.floating-detail .dialog-header>div:first-child{min-width:0}
.floating-detail .dialog-header .eyebrow{color:#e2f1fb;font-size:8px}
.floating-detail .dialog-header .secondary,.floating-detail .dialog-header .icon-button{background:#ffffff17;border:1px solid #ffffff33;color:white;border-radius:3px;min-height:28px}
.floating-detail .detail-header-right{flex-shrink:0;gap:5px}
.floating-detail .window-control{width:28px;height:28px;padding:1px;font-size:18px}
.window-drag-bar{cursor:move;touch-action:none;user-select:none}
.window-drag-bar button{cursor:pointer;touch-action:manipulation}
.floating-detail .detail-body{flex:1;min-height:0;overflow:auto}
.floating-detail .detail-body:has(.optical-shell){display:flex;flex-direction:column;padding:0;overflow:hidden}
.floating-detail .optical-shell{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.floating-detail .optical-tools,.floating-detail .optical-status,.floating-detail .optical-sgp-bar,.floating-detail .optical-bottom,.floating-detail .endpoint-selected{flex-shrink:0}
.floating-detail .diagram-scroll.optical-canvas{flex:1;height:0;min-height:60px;max-height:none}
.window-resize{position:absolute;z-index:1200;touch-action:none}
.window-resize-n,.window-resize-s{left:10px;right:10px;height:7px;cursor:ns-resize}.window-resize-n{top:0}.window-resize-s{bottom:0}
.window-resize-e,.window-resize-w{top:10px;bottom:10px;width:7px;cursor:ew-resize}.window-resize-e{right:0}.window-resize-w{left:0}
.window-resize-ne,.window-resize-nw,.window-resize-se,.window-resize-sw{width:16px;height:16px}.window-resize-ne{top:0;right:0;cursor:nesw-resize}.window-resize-nw{top:0;left:0;cursor:nwse-resize}.window-resize-se{bottom:0;right:0;cursor:nwse-resize;border-right:3px solid #74a8cb;border-bottom:3px solid #74a8cb}.window-resize-sw{bottom:0;left:0;cursor:nesw-resize}
.window-moving{user-select:none}.window-minimized .detail-tabs,.window-minimized .detail-body,.window-minimized .window-resize{display:none!important}
@media(max-width:760px){.floating-detail .dialog-header{display:flex!important;padding:8px;gap:5px}.floating-detail .dialog-header h2{font-size:15px}.floating-detail .detail-header-right{gap:3px}.floating-detail .detail-header-right .icon-button{width:27px;height:27px;padding:4px}.floating-detail .optical-bottom small{display:none}.floating-detail .optical-status{padding:5px 8px}.floating-detail .optical-sgp-bar{padding:5px 8px;gap:5px}.floating-detail .optical-sgp-bar>span{min-width:100%;font-size:9px}.floating-detail .detail-tabs{padding:0 9px;gap:15px;overflow-x:auto}.floating-detail .detail-tabs button{white-space:nowrap}}

.optical-signal-summary{flex-shrink:0;margin:0;padding:6px 12px;background:#fff8e8;border-bottom:1px solid #ead7a7;font-size:10px;color:#775a22}.optical-signal-summary summary{cursor:pointer;font-weight:600}.optical-signal-summary p{margin:5px 0;font-size:10px}.floating-detail .optical-signal-summary{max-height:125px;overflow:auto}
.mobile-tools-toggle{display:none}
/* The phone gets a full-screen diagram; desktop floating windows stay unchanged. */
@media(max-width:760px){
 body:has(#detail-dialog[open]){overflow:hidden}
 #detail-dialog.floating-detail{left:0!important;top:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh;border:0;border-radius:0}
 #detail-dialog.floating-detail .window-resize,#detail-dialog.floating-detail #detail-minimize,#detail-dialog.floating-detail #detail-maximize,#detail-dialog.floating-detail #detail-edit{display:none}
 .floating-detail .window-drag-bar{touch-action:auto;cursor:default;padding-top:max(8px,env(safe-area-inset-top))}
 .floating-detail .detail-header-right .icon-button,.floating-detail .detail-header-right .secondary{width:44px;height:44px;min-height:44px}
 .floating-detail .detail-tabs{gap:20px;min-height:44px;scrollbar-width:none}
 .floating-detail .detail-tabs::-webkit-scrollbar{display:none}
 .floating-detail .detail-tabs button{min-height:44px;font-size:12px}
 .floating-detail .optical-tools{gap:6px;padding:6px 8px;flex-shrink:0}
 .floating-detail .mobile-tools-toggle{display:inline-flex;min-height:44px;font-size:12px;padding:8px 10px}
 .floating-detail .optical-tool-group{border:0;padding:0;gap:4px}
 .floating-detail .optical-tools .optical-tool{min-height:44px;font-size:12px}
 .floating-detail .optical-tool-group:first-of-type{display:none}
 .floating-detail .optical-tool-group:nth-of-type(2)>:not(#opt-fit){display:none}
 .floating-detail .zoom-tools{margin-left:auto!important}
 .floating-detail .zoom-tools button{min-width:44px}
 .floating-detail .zoom-tools>span{min-width:30px;font-size:11px}
 .floating-detail .optical-status{padding:4px 8px}
 .floating-detail #opt-hint,.floating-detail .optical-sgp-bar{display:none}
 .floating-detail .optical-signal-summary{padding:8px;font-size:11px;max-height:90px}
 .floating-detail .optical-bottom{flex-direction:row;align-items:center;gap:8px;padding:6px 8px max(6px,env(safe-area-inset-bottom))}
 .floating-detail .optical-bottom .inline{width:auto;flex-shrink:0}
 .floating-detail .optical-bottom .inline>button{display:none}
 .floating-detail .optical-bottom .inline>#opt-save-close{display:inline-flex;min-height:44px;padding:8px 12px;font-size:12px}
 .floating-detail .mobile-tools-open .optical-tool-group:first-of-type{display:flex;order:3;width:100%}
 .floating-detail .mobile-tools-open .optical-tool-group:nth-of-type(2){flex-wrap:wrap}
 .floating-detail .mobile-tools-open .optical-tool-group:nth-of-type(2)>:not(#opt-fit){display:inline-flex}
 .floating-detail .mobile-tools-open .optical-sgp-bar{display:flex;max-height:100px;overflow:auto}
 .floating-detail .mobile-tools-open .optical-bottom{flex-wrap:wrap;max-height:160px;overflow:auto}
 .floating-detail .mobile-tools-open .optical-bottom .inline{width:100%;justify-content:flex-start;overflow-x:auto}
 .floating-detail .mobile-tools-open .optical-bottom .inline>button{display:inline-flex;flex-shrink:0;min-height:44px;padding:8px;font-size:11px}
}

/* Planned boxes stay distinct from deployed CTOs and splice boxes. */
.box-pin.unbuilt>span{background:#7c3aed;border:2px dashed #fff;box-shadow:0 0 0 2px #5b21b6,0 2px 5px #18354a66}
.legend-dot.purple{background:#7c3aed}.badge.unbuilt-status{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd}.unbuilt-text{color:#6d28d9}

/* Keep the desktop diagram canvas large; supporting data opens over the canvas. */
.optical-shell{position:relative}
.optical-data-content{display:contents}
.optical-data-toggle{display:none}
@media(min-width:761px){
 .floating-detail .dialog-header{padding:4px 10px;min-height:38px}
 .floating-detail .dialog-header .eyebrow{display:none}
 .floating-detail .dialog-header h2{font-size:15px;margin:0}
 .floating-detail .detail-tabs{padding:0 10px;gap:20px;min-height:29px}
 .floating-detail .detail-tabs button{padding:6px 0;font-size:10px}
 .floating-detail .optical-tools{padding:4px 8px;gap:6px}
 .floating-detail .optical-tool-group{padding-right:6px}
 .floating-detail .optical-tool{min-height:28px;padding:4px 7px}
 .floating-detail .optical-data-toggle{display:inline-flex}
 .floating-detail .optical-data-content{display:none;position:absolute;top:38px;left:8px;right:8px;z-index:30;background:#fff;border:1px solid #cbd8e4;border-radius:5px;box-shadow:0 5px 20px #15375030;max-height:calc(100% - 70px);overflow:auto}
 .floating-detail .data-open .optical-data-content{display:block}
 .floating-detail .optical-data-content .optical-status{flex-wrap:wrap}
 .floating-detail .optical-bottom{padding:4px 8px;gap:8px}
 .floating-detail .optical-bottom small{display:none}
 .floating-detail .optical-bottom .small{min-height:29px;padding:5px 8px;font-size:10px}
}

.optical-sgp-notice{position:absolute;left:8px;bottom:45px;z-index:12;max-width:min(530px,calc(100% - 16px));padding:7px 10px;background:#fff8e9;color:#835611;border:1px solid #e6c578;border-radius:5px;font-size:10px;text-align:left;box-shadow:0 2px 8px #173b4d15}