/* The switch track is a flex box: align-items centres the knob on the track's
   horizontal midline for every track/knob size, also when the knob is taller
   than the content box. translateX alone moves it between AUS and EIN. */
.object{padding:18px 0;border-bottom:1px solid #e0e3e5;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.object:last-child{border:0}.objectTitle{flex:1;min-width:140px;color:#205578;overflow-wrap:anywhere}.value{min-width:100px;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.object button{padding:10px 20px;border:1px solid #cbd5e1;border-radius:5px;background:#edf2f7;color:#205578}.object .switch{display:flex;align-items:center;border:0;border-radius:24px;width:64px;height:36px;padding:4px;background:#d1d5db}.switch::before{content:'';display:block;flex:none;background:white;width:28px;height:28px;border-radius:50%;box-shadow:0 1px 3px #0003}.switch[aria-checked=true]{background:#287db5}.switch[aria-checked=true]::before{transform:translateX(28px)}.object input[type=range]{width:100%;accent-color:#287db5}.objectMessage{flex-basis:100%;font-size:12px;color:#64748b;margin:0}
.object .objectButtonGroup{display:flex;flex-wrap:nowrap;gap:0;max-width:100%;overflow-x:auto;padding:4px}.objectButtonGroup button{flex:0 0 auto;border-radius:0;margin:0}.objectButtonGroup button+button{margin-left:-1px}.objectButtonGroup button:first-child{border-radius:5px 0 0 5px}.objectButtonGroup button:last-child{border-radius:0 5px 5px 0}.objectButtonGroup button:only-child{border-radius:5px}.objectButtonGroup button[aria-pressed=true]{background:#287db5;color:#fff;border-color:#205578;position:relative}.objectButtonGroup button:focus-visible{position:relative;z-index:1}
.object .valueText{min-width:0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.object .valueImage{display:flex;align-items:center;justify-content:center;width:240px;max-width:100%;min-width:0;min-height:120px}
.object .valueImage img{display:block;width:100%;height:180px;object-fit:contain}.object .switch{background:var(--base-offColor,#d1d5db)}
.object .switch[aria-checked=true]{background:var(--base-onColor,#287db5)}
.object .switch::before{background:var(--base-thumbColor,white);border-radius:var(--base-thumbRadius,50%)}
.object input[type=range]{accent-color:var(--base-onColor,#287db5);background:var(--base-offColor,transparent)}
.object input[type=range]::-webkit-slider-thumb{background:var(--base-thumbColor,var(--base-onColor,#287db5))}
.object input[type=range]::-moz-range-thumb{background:var(--base-thumbColor,var(--base-onColor,#287db5))}
.styleOverride{font-size:12px;color:#805700}
/* Runtime quality and errors belong to the shared renderer, never persisted graphic styles. */
.objectQuality{color:#805700;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.objectQuality[hidden],.objectMessage[hidden]{display:none}
.datapointValue>.objectQuality{display:block}
.baseElement{position:relative}
.baseElement>.objectQuality{position:absolute;right:2px;top:2px;max-width:100%;font-size:10px;line-height:1.2;background:#fffbeb;padding:1px 3px;pointer-events:none}
.baseElement>.objectMessage.error{position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow:auto;background:#fef2f2;color:#b91c1c;padding:3px;box-sizing:border-box}
.styleManager [role=status]{white-space:pre-line}
.object input[type=range].baseStyledTrack{appearance:none;height:8px!important;border-radius:4px;background:linear-gradient(to right,var(--base-onColor,#287db5) 0 var(--base-progress,0%),var(--base-offColor,#d1d5db) var(--base-progress,0%) 100%)}
.object input[type=range].baseStyledTrack::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border:1px solid #94a3b8;border-radius:var(--base-thumbRadius,50%);background:var(--base-thumbColor,#ffffff)}
.object input[type=range].baseStyledTrack::-moz-range-thumb{width:20px;height:20px;border:1px solid #94a3b8;border-radius:var(--base-thumbRadius,50%);background:var(--base-thumbColor,#ffffff)}
.baseLibraryPreview{overflow:auto;padding:12px;display:flex;flex-direction:column;gap:16px}.baseLibraryPreview .object{max-width:100%;padding:0;border:0}.baseLibraryPreview .object button{margin:0}.baseLibraryPreview .value{min-width:0;text-align:inherit}.baseLibraryPreviewItem>p{margin:0 0 8px}
.baseLibraryPreview .baseElement>.objectListInput{display:flex;align-items:center;width:100%;min-width:0}
.baseLibraryPreview .objectListInput>.objectInput{flex:1;width:100%;min-width:0;color:inherit;font:inherit;background:transparent;border:0}
.baseLibraryPreview .objectInputUnit{white-space:nowrap}


/* Common read-only dashboard base elements, in every editor and runtime. */
.graphicSurface .graphicElement>.object.baseElement.dashboardElement,.dashboardElement{
 display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;
 box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
 container-type:inline-size;line-height:1.25;
}
.dashboardElement [hidden]{display:none}
.dashboardTitle{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.dashboardValue{font-size:clamp(16px,14cqi,var(--dashboard-value-size,32px));font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;font-variant-numeric:tabular-nums}
.dashboardIcon{font-size:20px;flex:none}
.dashboardSubtitle,.dashboardTimestamp,.dashboardQuality,.dashboardHistoryState,.dashboardComparison,.dashboardTarget{font-size:12px;overflow:hidden;text-overflow:ellipsis;flex:none}
.dashboardSubtitle,.dashboardTimestamp{opacity:.75;white-space:nowrap}
.dashboardElement .dashboardGauge{width:100%;flex:1 1 60px;min-height:36px;overflow:hidden;display:block}
.dashboardProgress{position:relative;border-radius:6px;overflow:hidden;min-height:12px;flex:1 1 20px;max-height:28px;display:flex}
.dashboardProgress[data-reverse=true]{justify-content:flex-end}
.dashboardProgress[data-orientation=vertical]{min-height:24px;max-height:none;width:28px;align-self:center;align-items:flex-end}
.dashboardProgress[data-orientation=vertical][data-reverse=true]{align-items:flex-start}
.dashboardFill{flex:none;border-radius:inherit}
.dashboardSparkline{position:relative;min-height:28px;flex:1 1 60px;width:100%;overflow:hidden}
.dashboardSparkline canvas{max-width:100%;max-height:100%}
.dashboardCompact .dashboardSubtitle,.dashboardCompact .dashboardTimestamp,.dashboardCompact .dashboardComparison,.dashboardCompact .dashboardSparkline,.dashboardCompact .dashboardIcon{display:none}
.dashboardElement[data-kind=sparkline] .dashboardSparkline{display:block;min-height:28px}
.objectListRow.dashboardElement{height:auto;min-height:64px;max-height:180px}

/* Farblicht: compact, scales with the element box (em-based inside free graphics). */
.baseColorLight{display:flex;flex-direction:column;justify-content:space-evenly;gap:.35em;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}
.baseColorLight .colorLightHeader{display:flex;align-items:center;gap:.5em;min-width:0}
.baseColorLight .colorLightSwatch{flex:1 1 auto;min-width:1em;height:1.4em;border-radius:.7em;border:1px solid #cbd5e1;background:repeating-linear-gradient(45deg,#e2e8f0 0 .3em,#f8fafc .3em .6em)}
.baseColorLight .mhomeColorTrigger{flex:0 0 auto}
.baseColorLight .mhomeColorTrigger .colorLightSwatch{width:2em;flex:none}
.baseColorLight :is(button,input):disabled{cursor:not-allowed;opacity:.55}
/* Momentary button: visible pressed state while held (pointer or keyboard). */
.object button.pressed{filter:brightness(.88)}
.baseColorLight .colorLightStatus{font-size:.7em}

/* Shared color picker view. Only picker geometry/arrangement lives here; the
   portal, spacing, fonts and touch target come from the UI foundation. */
.colorPickerPopover{width:280px}
.colorPickerWheel{position:relative;width:100%;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:crosshair;flex:none;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.colorPickerMarker{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid #111;border-radius:50%;background:#fff;pointer-events:none}
.colorPickerPreview{display:block;height:1.5em;border-radius:var(--mhome-dialog-control-radius)}
.colorPickerPopover :is(.colorPickerHelp,.error){margin:0;overflow-wrap:anywhere}
.colorPickerPopover .error:empty{display:none}

/* Separate temperature control; the shared range control supplies sizes and focus. */
.object[data-kind=colorTemperature] input[type=range]{background:linear-gradient(to right,var(--temperature-start,#ffb46b),#fff4e5 50%,var(--temperature-end,#cad8ff))}
.object[data-kind=colorTemperature] .objectMessage:empty{display:none}