.graphicToolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}.graphicToolbar button,.graphicToolbar select,.graphicToolbar input{margin:0;width:auto}.graphicToolbar label{display:flex;align-items:center;gap:6px;margin:0}.graphicToolbar input[type=checkbox]{width:auto}.graphicWorkspace{display:grid;grid-template-columns:180px minmax(240px,1fr) 240px;gap:16px}.graphicPalette,.graphicInspector{border:1px solid #d6dce5;border-radius:8px;padding:12px;max-height:76vh;overflow:auto}.graphicPalette button{width:100%;margin:4px 0;text-align:left}.graphicPalette input{width:100%;box-sizing:border-box}.graphicInspector label{display:block;margin:10px 0}.graphicInspector input,.graphicInspector select{display:block;box-sizing:border-box;width:100%;margin-top:4px}.graphicInspector input[type=checkbox]{width:auto}.graphicInspector button{margin:5px 0}.graphicViewport{min-height:480px;max-height:76vh;overflow:auto;background:#e5e7eb;border:1px solid #cbd5e1;border-radius:8px;position:relative;overscroll-behavior:contain}.graphicExtent{position:relative}.graphicSurface{position:relative;isolation:isolate;transform-origin:top left;flex:none}.graphicEditorSurface{touch-action:none;user-select:none}.graphicGrid::after{content:'';position:absolute;inset:0;background-image:radial-gradient(#64748b66 1px,transparent 1px);background-size:var(--graphic-grid) var(--graphic-grid);pointer-events:none;z-index:-10001}.graphicBackground{position:absolute;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:-10002}.graphicElement{position:absolute;box-sizing:border-box;min-width:0}.graphicEditorSurface .graphicElement{cursor:move}.graphicEditorSurface .graphicElement>*{pointer-events:none}.graphicElement svg{display:block;overflow:visible}.graphicImage{width:100%;height:100%;object-fit:contain}.graphicText{width:100%;height:100%;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden}.graphicObjectPreview{height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:5px;background:#edf2f7;color:#205578;padding:12px;overflow:hidden}.graphicPlaceholder{color:#64748b;font-size:12px}.graphicHandle{position:absolute;width:12px;height:12px;border:2px solid #287db5;background:white;border-radius:2px;transform:translate(-50%,-50%);padding:0;margin:0;touch-action:none;pointer-events:auto!important;z-index:1}.graphicHandle.resize{left:100%;top:100%;cursor:nwse-resize}.graphicHandle.endpoint{border-radius:50%;cursor:crosshair}.graphicMarquee{position:absolute;border:1px solid #287db5;background:#287db522;pointer-events:none;z-index:10001}.graphicHkl{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.graphicHkl svg{min-height:0;flex:1;width:100%}.graphicHkl span{font-size:14px}.graphicRuntimeViewport{overflow:auto;max-width:100%;border:1px solid #d6dce5;border-radius:8px}.graphicRuntime .graphicElement>.object{box-sizing:border-box;width:100%;height:100%;padding:8px;gap:8px;overflow:auto;background:#fff;border:1px solid #d6dce5;border-radius:5px;align-content:center}.graphicRuntime .objectTitle{min-width:0}.graphicRuntime .valueImage{min-height:0;height:100%;flex:1}.graphicRuntime .valueImage img{height:100%}.graphicAction{cursor:pointer}.graphicPopup{width:min(1100px,92vw);max-height:90vh}.graphicState{border-top:1px solid #d6dce5;margin-top:12px;padding-top:8px}.graphicHint{font-size:12px;color:#64748b}@media(max-width:1200px){.graphicWorkspace{grid-template-columns:140px minmax(240px,1fr)}.graphicInspector{grid-column:1/-1;max-height:none;display:flex;gap:14px;flex-wrap:wrap;align-items:start}.graphicInspector>label{width:150px}.graphicInspector>h3,.graphicInspector>p{width:100%}}@media(max-width:650px){.graphicWorkspace{display:block}.graphicPalette{max-height:180px;margin-bottom:12px}.graphicInspector{margin-top:12px}.graphicViewport{min-height:360px}}
.graphicEditorSurface .graphicHandle{width:var(--graphic-handle-size,12px);height:var(--graphic-handle-size,12px)}
.graphicHandle.rotation{left:50%;top:calc(-1 * var(--graphic-rotation-offset,28px));border-radius:50%;background:#e8f0f9;cursor:grab}
.graphicHandle.rotation:active{cursor:grabbing}
.graphicRotationStem{position:absolute;left:50%;bottom:100%;height:var(--graphic-rotation-offset,28px);border-left:1px solid #287db5;pointer-events:none}
.graphicHklDefinition{width:100%;height:100%;overflow:hidden;position:relative}
.graphicMacroDefinition{width:100%;height:100%;overflow:hidden;position:relative}
.graphicPopup[open]{animation:graphicPopupEnter 180ms ease-out}
.graphicPopup::backdrop{background:transparent;backdrop-filter:none}
.graphicPopup[open]::backdrop{animation:graphicPopupBackdropEnter 180ms ease-out}
@keyframes graphicPopupEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes graphicPopupBackdropEnter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.graphicPopup[open],.graphicPopup[open]::backdrop{animation:none}}
.mhomeDialogBehavior::backdrop{background:rgb(15 23 42 / var(--popup-dim,0));backdrop-filter:blur(var(--popup-blur,0px))}
.mhomeDialogDragHandle{cursor:grab;touch-action:none;user-select:none}
.mhomeDialogDragHandle.dragging{cursor:grabbing}
.popupPreviewApplication{position:fixed;inset:0;z-index:2000;padding:40px;background-color:#eef1f2;background-image:linear-gradient(#cbd5e155 1px,transparent 1px),linear-gradient(90deg,#cbd5e155 1px,transparent 1px);background-size:48px 48px;color:#263746}
.graphicRuntimeViewport.graphicRuntimeFit{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border:0;border-radius:0}
.graphicRuntimeFitExtent{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}
.graphicRuntimeFitExtent>.graphicSurface{position:absolute;left:0;top:0;transform-origin:top left}
.hklLibrary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0;padding:12px;border:1px solid #d6dce5;border-radius:8px}
.hklLibrary h3,.hklLibrary p{width:100%;margin:4px 0}.hklLibrary select{width:auto;max-width:100%;margin:0}.hklLibrary button{width:auto;margin:0}
.hklSettings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.hklSettings[hidden]{display:none}
.hklSettings .graphicInspector{display:block;grid-column:auto;max-height:70vh}.hklSettings .graphicInspector>label{width:auto}
.hklSettings .hklSectionCard{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:var(--mhome-space-md);margin-block-start:var(--mhome-space-md)}
.hklSettings .hklSectionCard[data-section-tone="1"]{background:#f0fdf4;border-color:#bbf7d0}
.hklSettings .hklSectionCard[data-section-tone="2"]{background:#fffbeb;border-color:#fde68a}
.hklSettings .hklSectionCard[data-section-tone="3"]{background:#faf5ff;border-color:#e9d5ff}
.hklPreview{overflow:hidden;position:relative;margin-top:12px;border:1px solid #d6dce5}
@media(max-width:1000px){.hklSettings{grid-template-columns:1fr}.hklSettings .graphicInspector{max-height:none}}
.objectEditorPage [hidden],.graphicPagesEditor [hidden],.hklLibrary[hidden]{display:none!important}
.objectEditorPage .graphicWorkspace{grid-template-columns:170px minmax(320px,1fr) 320px}
.objectEditorPage .graphicViewport{height:65vh;max-height:none;min-height:440px}
.objectEditorPage .graphicInspector,.objectEditorPage .graphicPalette{max-height:65vh}
.objectEditorPage .graphicInspector{display:block;grid-column:auto}
.objectEditorPage .graphicInspector>label{width:auto}
.dynamicChange{padding:10px;margin:8px 0;border:1px solid #d6dce5;border-radius:8px}
.graphicInspector h4{margin:16px 0 8px;color:#205578}.graphicInspector .graphicState{width:100%;box-sizing:border-box}
.graphicEditorSurface .object{box-sizing:border-box;width:100%;height:100%;padding:8px;gap:8px;overflow:hidden;background:#fff;border:1px solid #d6dce5;border-radius:5px;align-content:center}
.graphicEditorSurface .objectTitle{min-width:0}.graphicEditorSurface .valueImage{min-height:0;flex:1}
.hklLibrary button[aria-pressed=true]{background:#287db5;color:#fff;border-color:#205578}
/* Object popups show the configured graphic size at scale 1 (object-popup-layout.mjs).
   The dialog hugs header + graphic + shared padding; it never stretches to the
   viewport. Only when the viewport is smaller is the dialog box capped at the
   viewport and the body scrolls in both directions, the graphic keeps its size. */
.objectControlPopup{--object-popup-gap:var(--mhome-space-sm);box-sizing:content-box;min-width:0;min-height:0;max-width:calc(100vw - 2 * var(--mhome-dialog-padding) - 2px - 2 * var(--object-popup-gap));max-height:calc(100vh - 2 * var(--mhome-dialog-padding) - 2px - 2 * var(--object-popup-gap));max-height:calc(100dvh - 2 * var(--mhome-dialog-padding) - 2px - 2 * var(--object-popup-gap));overflow:hidden}
.objectControlPopup[open]{display:flex;flex-direction:column}
.objectControlPopup>.graphicPopupHeader,.objectControlPopup>.objectPopupFeedback{flex:none}
.objectPopupFeedback:empty{display:none}
.objectPopupContent{flex:0 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.objectPopupContent>.graphicExtent{overflow:hidden;max-width:none;max-height:none}.objectPopupContent .graphicSurface{position:absolute;left:0;top:0}
/* Free elements share exactly the same layout in every editor and runtime. */
.graphicSurface .graphicElement>.object.baseElement{box-sizing:border-box;display:flex;width:100%;height:100%;min-width:0;padding:0;gap:0;border:0;border-radius:0;background:transparent;overflow:hidden;align-items:center;flex-wrap:nowrap}
.graphicSurface .baseElement>.value{box-sizing:border-box;width:100%;min-width:0;text-align:inherit;color:inherit;font-size:inherit;white-space:pre-wrap}
.graphicSurface .baseElement>button,.graphicSurface .baseElement>input,.graphicSurface .baseElement>.objectButtonGroup{box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;margin:0;font-size:inherit;color:inherit;text-align:inherit}
.graphicSurface .baseElement>.switch{padding:4px;border-radius:999px}
.graphicSurface .baseElement>.switch::before{width:50%;height:100%;border-radius:var(--base-thumbRadius,999px)}
.graphicSurface .baseElement>.switch[aria-checked=true]::before{transform:translateX(100%)}
.graphicSurface .baseElement>.objectButtonGroup{padding:0}
.graphicSurface .baseElement>.objectButtonGroup button{flex:1 1 0;min-width:0;min-height:0;overflow:hidden;font-size:inherit;color:inherit;text-align:inherit}
.graphicSurface .baseElement>.objectButtonGroup button[aria-pressed=true]{color:#fff}
.graphicSurface .baseElement>.valueImage{height:100%;min-height:0;max-width:100%;width:100%}
.graphicSurface .baseElement>.valueImage img{height:100%;width:100%;object-fit:contain}
.graphicSurface .baseElement:is([data-kind=slider],[data-kind=colorTemperature]){flex-direction:column;justify-content:center}
.graphicSurface .baseElement:is([data-kind=slider],[data-kind=colorTemperature])>input{flex:1;min-height:0;width:100%}
.graphicSurface .baseElement:is([data-kind=slider],[data-kind=colorTemperature])>.value{flex:0 0 auto;text-align:right;white-space:nowrap}
.graphicSurface .baseElement>.objectListInput{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;overflow:hidden;border:1px solid #cbd5e1;background:#fff}
.graphicSurface .baseElement>.objectListInput>.objectInput{box-sizing:border-box;flex:1;width:100%;height:100%;min-width:0;margin:0;border:0;background:transparent;color:inherit;font:inherit}
.graphicSurface .baseElement .objectInputUnit{flex:0 0 auto;white-space:nowrap}
.graphicSurface .baseElement .objectInputUnit:not([hidden]){padding-inline-start:.35em}
@media(max-width:1200px){.objectEditorPage .graphicWorkspace{grid-template-columns:140px minmax(240px,1fr)}.objectEditorPage .graphicWorkspace>.graphicInspector{grid-column:1/-1;max-height:none}.objectEditorPage .hklSettings{grid-template-columns:1fr}.objectEditorPage .hklSettings>.graphicInspector{max-height:none}}
@media(max-width:650px){.objectEditorPage .graphicWorkspace{display:block}.objectEditorPage .graphicViewport{min-height:360px}}
.graphicHandle.active{background:#287db5;border-color:#164e73}
.graphicPolylineDraft{pointer-events:none!important;z-index:10002!important;opacity:.65}
.graphicGuide{position:absolute;z-index:10003;touch-action:none}
.graphicGuide.x{top:0;bottom:0;width:7px;margin-left:-3px;border-left:1px dashed #287db5;cursor:ew-resize}
.graphicGuide.y{left:0;right:0;height:7px;margin-top:-3px;border-top:1px dashed #287db5;cursor:ns-resize}
.graphicSmartGuide{pointer-events:none;border-color:#b45309!important}
.graphicToolPanel{position:relative;border:1px solid #d6dce5;border-radius:8px;padding:8px;max-width:100%;box-sizing:border-box}
.graphicToolPanel summary{cursor:pointer;color:#205578;font-size:13px}
.graphicToolPanel button{margin:4px!important}
.graphicToolbar .graphicToolPanel[open]{flex-basis:100%}
.graphicGuide.x{width:var(--guide-hit,8px);margin-left:0;transform:translateX(-50%);border-left:0;background:linear-gradient(90deg,transparent calc(50% - .5px),#287db5 calc(50% - .5px),#287db5 calc(50% + .5px),transparent calc(50% + .5px))}
.graphicGuide.y{height:var(--guide-hit,8px);margin-top:0;transform:translateY(-50%);border-top:0;background:linear-gradient(transparent calc(50% - .5px),#287db5 calc(50% - .5px),#287db5 calc(50% + .5px),transparent calc(50% + .5px))}
.graphicSmartGuide{filter:hue-rotate(170deg)}

/* Shared editor selection: a separate layer, independent of element styles,
   opacity, stacking and focus. No CSS outline override is needed. */
.graphicEditorSurface{--graphic-selection-color:#287db5;--graphic-selection-contrast:#fff;overflow:visible}
.graphicEditorSurface>.graphicSelectionOverlay{position:absolute;inset:0;z-index:2147483646;pointer-events:none;overflow:visible}
.graphicSelectionContours{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke-linejoin:round;stroke-linecap:round}
.graphicSelectionContrast{stroke:var(--graphic-selection-contrast)}
.graphicSelectionColor{stroke:var(--graphic-selection-color)}
.graphicSelectionOverlay>.graphicHandle{box-sizing:border-box;border-width:calc(var(--graphic-handle-size)/6);border-color:var(--graphic-selection-color);background:var(--graphic-selection-contrast);pointer-events:auto}
.graphicSelectionOverlay>.graphicHandle.active{background:var(--graphic-selection-color)}
.graphicSelectionOverlay>.selectionRotation{border-radius:50%;background:var(--graphic-selection-contrast);cursor:grab}
.graphicSelectionOverlay>.selectionRotation:active{cursor:grabbing}
.graphicEditorSurface>.graphicMarquee{z-index:2147483647;border-color:var(--graphic-selection-color);border-width:calc(var(--graphic-handle-size)/12);background:color-mix(in srgb,var(--graphic-selection-color) 14%,transparent)}

.graphicText{display:flex;flex-direction:column}.graphicTextContent{flex-shrink:0;min-width:0;width:100%}

/* Hotspot: only the shape receives pointers; the element box stays click-through. */
.graphicElement.graphicHotspotElement{pointer-events:none}
.graphicHotspot{display:block;overflow:visible;pointer-events:none}
.graphicHotspot .hotspotShape{pointer-events:all;fill:var(--hs-normal-fill);fill-opacity:var(--hs-normal-fill-opacity);stroke:var(--hs-normal-stroke);stroke-opacity:var(--hs-normal-stroke-opacity);stroke-width:var(--hs-normal-stroke-width);vector-effect:non-scaling-stroke;transition:fill-opacity .12s,stroke-opacity .12s}
/* Hover only where a pointer can hover and the area is actionable; never required. */
@media (hover:hover){.graphicAction .graphicHotspot .hotspotShape:hover{fill:var(--hs-hover-fill);fill-opacity:var(--hs-hover-fill-opacity);stroke:var(--hs-hover-stroke);stroke-opacity:var(--hs-hover-stroke-opacity);stroke-width:var(--hs-hover-stroke-width)}}
.graphicAction .graphicHotspot .hotspotShape.active,.graphicAction:focus-visible .graphicHotspot .hotspotShape{fill:var(--hs-active-fill);fill-opacity:var(--hs-active-fill-opacity);stroke:var(--hs-active-stroke);stroke-opacity:var(--hs-active-stroke-opacity);stroke-width:var(--hs-active-stroke-width)}
.graphicHotspot .hotspotGuide{fill:none;stroke:#287db5;stroke-opacity:.75;stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;pointer-events:none}
@media (prefers-reduced-motion:reduce){.graphicHotspot .hotspotShape{transition:none}}
/* Dashboard pages (docs/dashboard-pages.md): one responsive tile grid for runtime and configurator. */
.dashboardRuntime{width:100%;min-width:0}
.dashboardGrid{display:grid;grid-template-columns:repeat(var(--dashboard-columns,12),minmax(0,1fr));grid-auto-rows:var(--dashboard-row,80px);gap:var(--dashboard-gap,16px);position:relative}
.dashboardTile{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden}
.dashboardTileTitle{flex:none;margin:0;padding:8px 12px 0;font-size:.95rem;font-weight:600;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboardTileBody{flex:1;min-width:0;min-height:0;display:flex;overflow:auto;overscroll-behavior:contain}
.dashboardTileNatural .dashboardTileBody{padding:8px}
/* Natural size: never scaled; centered while it fits, scrollable from the start edge otherwise. */
.dashboardTileSurface{flex:none;margin:auto}
.dashboardEmpty{margin:16px 0}
.dashboardEditor{min-width:0;padding:12px;margin:0 auto}
.dashboardPagesEditor .graphicViewport,.dashboardTemplatePreview{background:#f1f5f9}
.dashboardEditor:not(.dashboardPreview-desktop){background:#e5e7eb;border-radius:8px}
.dashboardEditor.dashboardPreview-desktop .dashboardGrid{min-width:720px}
.dashboardCell{border:1px dashed #cbd5e1;border-radius:6px;background:#ffffff80}
.dashboardEditor .dashboardTile{cursor:grab;user-select:none}
.dashboardEditor .dashboardTileSurface{pointer-events:none}
.dashboardEditor .dashboardTile.selected{border:2px solid #2563eb}
.dashboardTileLabel{position:absolute;right:6px;top:4px;z-index:2;padding:0 4px;border-radius:4px;background:#f8fafcd9;color:#475569;font-size:.7rem;pointer-events:none}
.dashboardResizeHandle{position:absolute;right:0;bottom:0;z-index:2;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#2563eb 50%);border-bottom-right-radius:6px}
.dashboardGhost{border:2px dashed #2563eb;border-radius:8px;background:#2563eb1a;pointer-events:none;z-index:3}
.dashboardGhost.invalid{border-color:#dc2626;background:#dc26261a}

/* Asset links of rule schema instances (docs/rule-schema-asset-links.md): arrangement only. */
.rsAssetSection .mhomeActions { flex-wrap: wrap; }
.rsAssetLabel { font-weight: 600; margin: 4px 0; overflow-wrap: anywhere; }
.rsAssetWarning { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; }
.rsAssetFacts dd { overflow-wrap: anywhere; }
.rsAssetComponents > summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.rsAssetComponent { border-left: 3px solid #e5e7eb; padding-left: 10px; margin: 8px 0; }
.rsAssetSuggestion { border-top: 1px solid #e5e7eb; padding-top: 8px; margin-top: 8px; }
dialog.rsAssetDialog { --dialog-target-width: 1300px; }