html:has(#locationsView.active), body:has(#locationsView.active) { overflow:hidden; scrollbar-gutter:stable; }
body:has(#locationsView.active) {
  background-color:var(--bg);
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:var(--place-grid-size, 24px) var(--place-grid-size, 24px);
  background-position:var(--place-grid-x, 0px) calc(var(--place-grid-y, 0px) + var(--place-canvas-top, 96px) + 62px);
}
body:has(#locationsView.active) .site-header { background:transparent; }
body:has(#locationsView.active) main { padding:0; }
#locationsView.active { position:fixed; inset:var(--place-canvas-top, 96px) 0 0; }
#locationsView.active .place-viewport { top:62px; }
.place-viewport { position:absolute; inset:0; overflow:hidden; background:transparent; touch-action:none; user-select:none; cursor:grab; }
.place-viewport.is-panning, .place-viewport.is-panning * { cursor:grabbing; }
.place-viewport, .place-viewport:focus, .place-viewport:focus-visible { border:0; outline:none; box-shadow:none; }
.place-search-status { position:absolute; bottom:12px; left:24px; pointer-events:none; color:var(--muted); font-size:12px; }
.place-search-status:empty { display:none; }
.place-world { position:absolute; left:0; top:0; }
.place-group { --place-frame-color:#343b49; --place-frame-style:solid; --place-group-surface:#101217; position:absolute; border-radius:var(--radius-panel); background:var(--place-group-surface); box-shadow:0 5px 20px #0003; }
/* Paint group backgrounds, frames, connections, then labels/cards and ports.
   Keep groups free of stacking contexts so lines cross nested frames cleanly. */
.place-group::after { content:''; position:absolute; z-index:1; inset:0; border:1px var(--place-frame-style) var(--place-frame-color); border-radius:inherit; pointer-events:none; }
.place-group-building { --place-frame-color:#354553; --place-group-surface:#121920; box-shadow:none; }
.place-group-floor { --place-frame-color:#343b47; --place-group-surface:#15191f; box-shadow:none; }
.place-group-no-building { --place-frame-color:#30363e; --place-frame-style:dashed; --place-group-surface:#11151a; box-shadow:none; }
.place-group-unassigned { --place-frame-color:#30363e; --place-frame-style:dashed; --place-group-surface:#0e1115; }
.place-group-heading { position:absolute; z-index:3; top:0; left:1px; right:1px; height:28px; display:flex; align-items:center; gap:6px; padding:0 10px; pointer-events:none; }
.place-group-heading strong { max-width:calc(100% - 15px); padding:2px 1px; background:var(--place-group-surface); font-size:12px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:auto; }
.place-group-toggle { position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; gap:3px; width:100%; height:100%; padding:0 10px; border:0; background:transparent; box-shadow:none; color:var(--text); text-transform:none; letter-spacing:normal; text-align:left; pointer-events:auto; cursor:pointer; }
.place-group-toggle:hover, .place-group-toggle:active { background:transparent; color:var(--text); box-shadow:none; transform:none; }
.place-group-toggle:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.place-group-toggle svg { flex-shrink:0; width:10px; height:10px; color:var(--muted); background:var(--place-group-surface); transform:rotate(90deg); }
.place-group-toggle path { fill:none; stroke:currentColor; stroke-width:1.5; }
.is-collapsed>.place-group-heading { height:36px; }
.is-collapsed>.place-group-heading .place-group-toggle svg { transform:none; }
.place-group-empty { position:relative; z-index:3; margin:40px 14px 0; color:var(--muted); font-size:11px; background:inherit; }
.place-edges { z-index:2; }
.place-ports { position:absolute; z-index:5; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.place-node { z-index:3; }
.place-edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:var(--accent); }
.place-connection-line { fill:none; stroke:#b99c68; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.has-active-route .place-connection:not(.is-route-active) .place-connection-line { opacity:.18; }
.place-connection.is-route-active .place-connection-line { stroke:var(--accent-light); stroke-width:2.2; opacity:1; }
.place-connection-hit { fill:none; stroke:transparent; stroke-width:16; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:stroke; cursor:help; }
.place-connection:focus { outline:none; }
.place-port { stroke-width:2; pointer-events:none; }
.place-port-output { fill:#79c69a; stroke:#79c69a; }
.place-port-input { fill:var(--red); stroke:var(--red); }
.place-port-both { fill:#79c69a; stroke:var(--red); }
.place-port.is-route-active { filter:drop-shadow(0 0 3px var(--red)) drop-shadow(0 0 6px var(--red)); }
.place-port-output.is-route-active { filter:drop-shadow(0 0 3px #79c69a) drop-shadow(0 0 6px #79c69a); }
.place-port-legend { position:absolute; right:20px; bottom:16px; display:flex; gap:18px; padding:8px 12px; border:1px solid var(--line-soft); border-radius:var(--radius-panel); background:var(--surface-input); color:var(--muted); font-size:11px; pointer-events:none; }
.place-port-legend span { display:flex; align-items:center; gap:8px; }
.place-port-legend span::before { content:''; width:6px; height:10px; border:2px solid var(--red); border-radius:2px; }
.place-port-legend .is-input::before { background:var(--red); }
.place-port-legend .is-output::before { background:#79c69a; border-color:#79c69a; }
.place-subnav-layer {
  height:62px;
  background:transparent;
}
.place-sub-navigation { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:1444px; height:54px; margin:0 auto; }
.place-sub-navigation .place-port-legend { position:static; height:36px; align-items:center; }
.place-connection:hover .place-connection-line, .place-connection:focus-visible .place-connection-line { stroke:var(--accent-light); stroke-width:3; opacity:1; }
.place-connection-tooltip { position:absolute; z-index:20; max-width:min(440px, calc(100% - 16px)); max-height:calc(100% - 16px); overflow:auto; padding:12px 16px; border:1px solid var(--line-strong); border-radius:var(--radius-panel); background:var(--surface); color:var(--text); box-shadow:0 6px 24px #0008; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.6; pointer-events:none; }
.place-node { position:absolute; width:220px; border:1px solid #505b63; border-radius:var(--radius-item); background:#1a2024; box-shadow:0 2px 4px #0003; cursor:inherit; }
.place-node header { display:flex; align-items:center; gap:8px; padding:6px 7px; font-size:12px; line-height:16px; background:#252e34; border-radius:calc(var(--radius-item) - 1px) calc(var(--radius-item) - 1px) 0 0; }
.place-node header strong { display:block; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:11px; line-height:15px; }
.place-node header span { font-size:10px; white-space:nowrap; color:var(--muted); }
.place-node.is-extraction { background:#23211f; border-color:#625448; }
.place-node.is-extraction header { background:#302b26; }
.place-node.is-manufacturing { background:#1a2126; border-color:#465660; }
.place-node.is-manufacturing header { background:#252f35; }
.place-node header .place-machine-kind { display:inline-flex; flex-shrink:0; align-items:center; color:#8a9eaa; }
.place-node.is-extraction header .place-machine-kind { color:#b3977c; }
.place-machine-kind svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.place-node.has-shortage { border-color:var(--red); box-shadow:0 0 0 1px var(--red),0 2px 6px #0005; }
.place-node-meta { display:flex; flex-shrink:0; max-width:50%; justify-content:flex-end; align-items:center; gap:6px; line-height:12px; }
.place-node-type { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.place-node-body { display:grid; align-items:stretch; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:8px; padding:5px 7px; height:auto; }
.place-io { min-width:0; font-size:11px; line-height:16px; margin-top:4px; padding:6px 5px; border:1px solid; border-radius:var(--radius-item); }
.place-io.outputs { background:color-mix(in srgb, var(--green) 9%, transparent); border-color:color-mix(in srgb, var(--green) 48%, transparent); }
.place-io.inputs { background:color-mix(in srgb, var(--red) 9%, transparent); border-color:color-mix(in srgb, var(--red) 48%, transparent); }
.place-io>div>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.place-io>div>strong { flex-shrink:0; }
.place-io>div { display:flex; gap:4px; }
.place-io strong { color:var(--text); }
.place-io .is-short::before { content:''; width:3px; flex-shrink:0; align-self:stretch; margin:2px 0; border-radius:var(--radius-small); background:var(--red); }
.place-supply-warning { display:flex; align-items:center; flex-shrink:0; color:var(--red); cursor:help; }
.place-supply-warning:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.place-connection-tooltip { padding:10px 12px; font-size:12px; line-height:1.45; white-space:normal; }
.place-tooltip-title { margin-bottom:8px; color:var(--muted); font-size:11px; }
.place-tooltip-direction-title { margin-bottom:8px; color:var(--text); font-size:12px; font-weight:700; }
.place-tooltip-material-total { margin-bottom:8px; font-weight:700; color:var(--text); }
.place-tooltip-delivery-routes { padding-left:10px; border-left:1px solid var(--line-soft); color:var(--muted); font-size:11px; }
.place-tooltip-delivery-routes .place-tooltip-rows { gap:8px 12px; }
.is-machine-tooltip > .place-tooltip-section:first-child > .place-tooltip-title { margin-bottom:10px; color:var(--text); font-size:14px; font-weight:700; line-height:1.4; }
.place-tooltip-section + .place-tooltip-section { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.place-tooltip-route { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--muted); font-size:11px; }
.place-tooltip-route span { min-width:0; overflow-wrap:anywhere; }
.place-tooltip-rows { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; }
.place-tooltip-rows strong { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.place-tooltip-rows > * { min-width:0; overflow-wrap:anywhere; }
.place-tooltip-section.is-shortage, .place-tooltip-section.is-shortage .place-tooltip-title { color:var(--red); }
.place-connection-tooltip.is-machine-tooltip { width:360px; max-width:calc(100% - 16px); box-sizing:border-box; pointer-events:auto; overscroll-behavior:contain; }
.place-tooltip-materials { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.place-tooltip-materials > .place-tooltip-section { min-width:0; margin:0; padding:0; border:0; }
.place-tooltip-materials + .place-tooltip-section { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.is-machine-tooltip > .place-tooltip-section > .place-tooltip-rows { grid-template-columns:minmax(85px,1fr) minmax(0,3fr); }
.place-tooltip-materials > .place-tooltip-section + .place-tooltip-section { padding-top:10px; border-top:1px solid var(--line-soft); }
.is-machine-tooltip .outputs strong { color:var(--green); }
.is-machine-tooltip .inputs strong { color:var(--red); }
.place-node:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.place-node header .place-supply-warning span { color:var(--red); font-size:11px; font-weight:700; line-height:12px; }
.place-node.is-paused { filter:grayscale(1); opacity:.55; }
.place-node.is-dimmed { opacity:.3; }
.place-node.is-dragging { opacity:.2; }
.place-drag-ghost { z-index:10; pointer-events:none; opacity:.85; }
.place-group.is-drop-target { outline:3px solid var(--accent-light); box-shadow:inset 0 0 0 6px #f39a1930; }
.place-group.is-drop-target::after { border-color:var(--accent-light); }
.place-viewport.is-moving-machine, .place-viewport.is-moving-machine * { cursor:grabbing; }
.place-empty { position:absolute; top:80px; left:5%; width:90%; text-align:center; color:var(--muted); }
.place-view-tools { --place-control-height:var(--subnav-primary-control-height, 34px); display:flex; align-items:center; gap:var(--subnav-control-gap, 8px); padding:0; cursor:default; }
.place-view-tools [data-view-action] { min-height:28px; padding:0 3px; border:0; border-radius:0; background:none; box-shadow:none; color:var(--muted); font-size:12px; text-transform:none; letter-spacing:normal; font-weight:500; cursor:pointer; }
.place-view-tools [data-view-action]:hover { color:var(--text); background:none; text-decoration:none; }
.place-view-tools [data-view-action]:active { transform:none; box-shadow:none; }
.place-view-tools [data-view-action]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.place-view-tools .place-zoom-value { min-width:40px; font-variant-numeric:tabular-nums; }
.place-view-tools .place-center-view {
  display:flex;
  align-self:stretch;
  align-items:center;
  justify-content:center;
  width:38px;
  min-height:0;
  margin-right:-8px;
  margin-left:2px;
  padding:0;
  border-left:1px solid var(--line);
}
.place-center-view svg { width:14px; height:14px; }
.place-center-view circle, .place-center-view path { fill:none; stroke:currentColor; stroke-width:1.4; }
.place-jump-select { width:var(--subnav-primary-control-width, 214px); }
.place-jump-select .search-select-trigger { min-height:var(--place-control-height); height:var(--place-control-height); padding:0 32px 0 10px; border-color:var(--line-strong); font-size:.78rem; }
.place-jump-select .search-select-menu { top:calc(100% + 6px); bottom:auto; width:max(100%,200px); }
.place-jump-select .search-select-options { max-height:min(320px,60vh); overflow-y:auto; }
.place-filter-option { display:flex; align-items:center; gap:9px; padding:8px; color:var(--text); font-size:12px; font-weight:400; cursor:pointer; }
.place-filter-option:hover { background:var(--surface-raised); }
.place-filter-option input { width:14px; height:14px; margin:0; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.place-filter-option span { min-width:0; overflow-wrap:anywhere; }
.place-zoom-controls { height:var(--place-control-height); display:flex; align-items:center; gap:8px; padding:0 8px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface-input); }
@media (max-width:650px) { .place-sub-navigation { gap:8px; } .place-jump-select { width:120px; } .place-port-legend { gap:8px; padding-inline:8px; } }