/* Wiring diagrams (static/wiring.js): tool bar, below it the drawing on the left and on the right «Elemente» and the properties of the sheet or
   the selection, as in the HMI (user 26 Oct «gebäudeplan r&i und verdrahtungsplan gleich anordnen wie hmi. plan links … rechts. planbild immer
   a4 quer»); printout (wiring_print.html). The drawing is always A4 landscape (297 : 210, the proportions of the A3 sheet), as large as the
   window allows – at most the height down to the bottom of the window (--wr-reserved, wrHeightUpdate), at least 340 px stay for the right column,
   which takes the rest of the width; the page does not scroll: only the right column scrolls, the drawing zooms (user 26 Oct «palnfenster nicht
   scrollbar, immer maxhöhe») */
main:has(.wr-editor, .wr-pages, .hmi-main) { padding-bottom: 0; }  /* the HMI as well: it reserves its margin itself (wrFillHeight) */
.wr-editor { display: grid; grid-template-columns: minmax(0, max(540px, calc((100vh - var(--wr-reserved, 230px)) * 297 / 210))) minmax(340px, 1fr); gap: 10px; align-items: start; }
.wr-side { min-width: 0; align-self: stretch; contain: size; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }  /* as high as the drawing */
.wr-palette > .wr-sec { margin: 0; background: var(--card); }
.wr-palette .wr-sec .wr-sec { margin-bottom: 6px; }  /* the groups inside «Elemente» */
.wr-palette .wr-sec .wr-sec > summary { font-size: 12px; padding: 5px 8px; }
.wr-palette .wr-sec .wr-sec-body { margin: 6px 4px 4px; }
.wr-pal-items { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; justify-content: start; }
.wr details.howto[open] > .howto-body { max-height: 35vh; overflow-y: auto; overscroll-behavior: contain; }  /* scrolls in itself: the page stays put */
.wr-pal-btn { position: relative; width: 40px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.wr-pal-btn:hover { border-color: var(--axis); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.wr-pal-btn.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.wr-pal-n { position: absolute; right: 1px; bottom: 0; font-size: 9px; line-height: 1; color: var(--muted); }
.wr-pal-icon { display: block; }
.wr-pal-icon line, .wr-pal-icon circle, .wr-pal-icon ellipse, .wr-pal-icon rect, .wr-pal-icon path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }
.wr-pal-icon .wr-pal-pin { fill: #d03b3b; stroke: none; }
.wr-pal-lib { flex-direction: column; align-items: stretch; }
/* the settings tile in one row: «Ansicht» … «Bearbeiten» …, wraps only when narrow */
.wr-toolbar.cfg-card { display: block; margin: 8px 0 14px; }  /* margins like every settings card (building plan): also with the hints switched off
   (no «So funktioniert es» above it) the card starts at the same height, user 27 Oct «header bei gp zu anderen plänen immernoch unterschiedlich in höhe» */
.wr-toolbar .cfg-row { gap: 8px; }
.wr-toolbar .cfg-head { padding-top: 0; }
.wr-bar-sec { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-bar-sec + .wr-bar-sec { margin-inline-start: 10px; }
.wr-group { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wr-view-sel { max-width: 190px; }
.wr-split { display: inline-flex; }
.wr-split > .btn { border-start-end-radius: 0; border-end-end-radius: 0; }
.wr-split > select { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; max-width: 140px; }
.wr-bar-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.wr-bar-field { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-2); }
.wr-bar-field select { font-size: 12px; padding: 3px 4px; max-width: 220px; }
.wr-variants select { max-width: 160px; }
.wr-undo, .wr-zoom { display: inline-flex; gap: 4px; }
.wr-zoom-val { font-size: 12px; min-width: 44px; text-align: center; color: var(--ink-2); align-self: center; }
.wr-canvas { position: relative; padding: 0; overflow: hidden; width: 100%; aspect-ratio: 297 / 210; background: #d9d9d4; outline: none; touch-action: none; }
.wr-canvas.wr-kbd:focus { box-shadow: 0 0 0 2px var(--accent); }  /* only when reached with Tab (class set in wrEditor) */
.wr-canvas.wr-on-pin, .wr-canvas.wr-on-pin .wr-svg, .wr-canvas.wr-on-pin .wr-svg * { cursor: crosshair; }  /* over a pin: before «move» of the symbol and «grab» of the wire */
.wr-canvas.wr-panning, .wr-canvas.wr-panning .wr-svg, .wr-canvas.wr-panning .wr-svg * { cursor: grabbing; }
.wr-svg { width: 100%; height: 100%; display: block; user-select: none; }
.wr-svg.wr-placing { cursor: crosshair; }
.wr-svg .wd-sym { cursor: move; }
.wr-svg .wd-wire { cursor: grab; }
.wr-svg .wd-hit { pointer-events: all; }
.wr-svg .wd-wire > .wd-hit, .wr-svg .wd-cmark > .wd-hit { stroke-width: var(--wd-hit, 2.4); pointer-events: stroke; }  /* WD_HIT_PX screen pixels at the zoom now (wrHitWidth); the stroke only – «all» took the area a bent wire encloses as well */
.wr-sel-box { fill: color-mix(in srgb, #2a78d6 8%, transparent); stroke: #2a78d6; stroke-width: 0.35; stroke-dasharray: 1.2 0.8; pointer-events: none; }
.wr-sel-wire { fill: none; stroke: #2a78d6; stroke-width: 0.9; stroke-opacity: .55; pointer-events: none; stroke-linejoin: round; }
.wr-pin { fill: #fff; stroke: #d03b3b; stroke-width: 0.25; pointer-events: none; }
.wr-pin-hover { fill: color-mix(in srgb, #d03b3b 25%, transparent); stroke: #d03b3b; stroke-width: 0.35; pointer-events: none; }
.wr-via { fill: #2a78d6; pointer-events: none; }
.wr-loose { fill: none; stroke: #d03b3b; stroke-width: 0.5; pointer-events: none; }
.wr-draft { fill: none; stroke: #2a78d6; stroke-width: 0.45; stroke-dasharray: 1.5 1; pointer-events: none; }
.wr-ghost { opacity: .45; pointer-events: none; }
.wr-frame-sel { fill: color-mix(in srgb, #2a78d6 10%, transparent); stroke: #2a78d6; stroke-width: 0.3; pointer-events: none; }
.wr-svg .wd-cmark { cursor: move; }  /* cable mark: dragged along its connections */
.wr-cores { width: 100%; }
.wr-cores td, .wr-cores th { padding: 2px 4px; }
.wr-core-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wr-core-chip i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .35); display: inline-block; }
.wr-checks li.wr-chk-error::marker { color: #d03b3b; }
.wr-checks li.wr-chk-error a { color: #b02525; }
.wr-checks li.wr-chk-warn::marker { color: #d98a00; }
.wr-checks li.wr-chk-info a { color: var(--ink-2); }
.wr-dialog .wr-in-s { width: 96px; }
.wr-dialog .wr-in-m { width: 110px; }
.wr-dialog .wr-in-cores { min-width: 220px; }
.wr-ctypes td, .wr-ctypes th { padding: 3px 4px; }
.wr-preset-sel { max-width: 320px; }
.wr-panel { display: flex; flex-direction: column; gap: 8px; }
.wr-panel .wr-sec { margin: 0; background: var(--card); }
.wr-sec-body { padding-bottom: 6px; }
.wr-sec-body .field { margin-bottom: 8px; }
.wr-sec-part { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.wr-panel input, .wr-panel select, .wr-panel textarea, .wr-dialog input, .wr-dialog select, .wr-dialog textarea { width: 100%; box-sizing: border-box; }
.wr-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.wr-row select { flex: 1; min-width: 0; width: auto; }
.wr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wr-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wr-list-small { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.wr-list-small li { margin: 2px 0; }
.wr-plan { width: 100%; }
.wr-plan td, .wr-plan th { padding: 3px 4px; }
.wr-plan .wr-pins-in { width: 70px; }
.wr-plan select { min-width: 0; }
.wr-pages { overflow: auto; height: calc(100vh - var(--wr-reserved, 280px)); min-height: 360px; padding: 10px; background: #d9d9d4; }
.wr-pages.wr-panning { cursor: grabbing; }
.wr-pages-inner { width: calc(100% * var(--wr-zoom, 1)); display: flex; flex-direction: column; gap: 12px; margin: 0 auto; }
.wr-page-box { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }
.wr-page-box .wd-page { width: 100%; height: auto; display: block; }
.wr-import-group { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; padding: 6px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 12px; }
.wr-import-group legend { font-weight: 600; padding: 0 4px; }
.wr-import-group .check { display: flex; gap: 6px; align-items: center; }
.wr-dialog { min-width: min(640px, 80vw); }
/* symbol editor: the window keeps its height and does not scroll, the drawing takes the room left (zoom instead of scrolling) */
dialog.modal.wr-se-dlg { height: min(calc(100dvh - 48px), 900px); }
dialog.modal.wr-se-dlg > .modal-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.wr-se { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); gap: 14px; }
.wr-se-props { min-width: 0; min-height: 0; overflow-y: auto; }
.wr-se-props .wr-sec { margin: 0 0 6px; background: var(--card); }  /* sections of the symbol editor (Symbol, Texte, Kontaktplan or the selection) – compact */
.wr-se-props .wr-sec > summary { font-size: 12px; padding: 4px 8px; }
.wr-se-props .wr-sec-body { margin: 4px 6px 0; padding-bottom: 2px; }
.wr-se-props .wr-sec-body .field { margin-bottom: 5px; }
.wr-se-props .wr-sec .wr-se-texts { margin-bottom: 5px; }
.wr-se-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; }
.wr-se-row3 > * { min-width: 0; }
.wr-se-row3 select, .wr-se-row3 input { width: 100%; }
.wr-se-left { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.wr-se-left > .wr-row { margin: 0; }
.wr-se-vars { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wr-se-vars:empty { display: none; }
.wr-sym-canvas { flex: 1 1 0; min-height: 0; width: 100%; display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: crosshair; touch-action: none; }
.wr-sym-canvas.wr-panning { cursor: grabbing; }
.wr-sym-canvas:focus { outline: none; }
.wr-sym-canvas .wr-frame-sel { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wr-se-grid { stroke: #eef0f0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wr-se-grid5 { stroke: #d5dada; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wr-se-origin { stroke: #2a78d6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wr-se-pin { fill: none; stroke: #d03b3b; stroke-width: 0.3; }  /* handle around the pin: its mark (wdPinMark) shows through */
.wr-se-preview { pointer-events: none; }  /* every text as in the diagram, example values (wrSePreview) */
.wr-se-preview [data-t] { pointer-events: all; cursor: move; }
.wr-se-t, .wr-se-t text { fill: #2a78d6; }  /* placed by dragging */
.wr-se-t line { stroke: #2a78d6; }
.wr-se-tfix, .wr-se-tfix text { fill: #8a8f96; cursor: pointer; }  /* texts placed by themselves (connection designations drag as .wr-se-t since 25 Oct) */
.wr-se-off { opacity: .35; }  /* switched off: drawn faded so that it can be switched on again */
.wr-se-preview .wr-se-sel, .wr-se-preview .wr-se-sel text { fill: #e0457b !important; stroke: none !important; }
.wr-se-texts { width: 100%; border-collapse: collapse; font-size: 12px; }
.wr-se-texts th { font-weight: 500; color: var(--ink-2); text-align: left; padding: 0 3px; }
.wr-se-texts td { padding: 1px 3px; }
.wr-se-props .wr-se-texts input.wr-se-num { width: 54px; }
.wr-se-props input.wr-se-pins, .wr-settings input.wr-se-pins { width: 76px; }
.wr-se-style { display: flex; flex-direction: column; gap: 4px; }  /* format of a text: alignment, style, colour, turning */
.wr-se-style .wr-row { gap: 4px; align-items: center; flex-wrap: wrap; }
.wr-se-mark { gap: 4px; align-items: center; flex-wrap: nowrap; }  /* mark of the pins: shape, diameter, colour in one row */
.wr-se-props .wr-se-mark select { flex: 1; width: auto; min-width: 0; }
.wr-se-props .wr-se-mark input.wr-se-num { width: 64px; flex: none; }
.wr-se-style input[type=color], .wr-se-props .wr-se-mark input[type=color] { width: 34px; height: 26px; padding: 1px; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.wr-se-tbtn.b { font-weight: 700; }
.wr-se-tbtn.i { font-style: italic; }
.wr-se-tbtn.u { text-decoration: underline; }
.wr-se-row-sel td { background: color-mix(in srgb, #e0457b 12%, transparent); }
.wr-se-help { text-decoration: underline dotted; cursor: help; }
.wr-settings h3 { margin: 14px 0 4px; font-size: 15px; }
.wr-set-fmt input { width: 100%; }
.wr-set-fmt code { white-space: nowrap; }
.wr-set-preset { border-top: 1px solid var(--line); padding: 6px 0; }
.wr-set-preset .wr-set-pname { max-width: 260px; }
.wr-set-contact { display: inline-flex; gap: 4px; align-items: center; margin-right: 8px; }
.wr-el-list { max-height: 62vh; overflow: auto; }
.wr-el-table td { padding: 2px 6px; vertical-align: middle; }
.wr-el-table td.actions { white-space: nowrap; }
.wr-el-hidden { opacity: .55; }
.wr-se-sel { stroke: #2a78d6 !important; fill-opacity: .9; }
text.wr-se-sel, text.wr-se-sel tspan { stroke: none !important; fill: #2a78d6 !important; }  /* a selected text of the drawing: blue, no outline (1 mm stroke made it a blot) */
.wr-se-props .field { margin-bottom: 6px; }
.wr-se-props p { margin: 4px 0; }
.wr-se-props input, .wr-se-props select { width: 100%; box-sizing: border-box; }
.wr-lib { min-width: min(900px, 88vw); }
.wr-lib-q { flex: 1; min-width: 240px; }
.wr-lib-results { max-height: 52vh; overflow: auto; display: grid; gap: 4px; }
.wr-lib-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.wr-lib-prev { display: flex; gap: 8px; align-items: center; font-size: 12px; min-height: 46px; }
.wr-lib-prev .wr-pal-icon { background: #fff; border: 1px solid var(--line); border-radius: 4px; flex: none; }
.wr-lib-path { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 1100px) {  /* narrow: the drawing over the whole width (still A4 landscape), the right column below it, the page scrolls */
  main:has(.wr-editor) { padding-bottom: 40px; }
  .wr-editor { grid-template-columns: minmax(0, 1fr); }
  .wr-side { contain: none; overflow: visible; }
  .wr-se { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
}

/* dark mode: the drawings dark with light lines (user 25 Oct: «vp in darkmode auch schwarz», then «nicht ganz schwarz»: dark grey like the cards) – the SVGs
   draw with fixed colours (paper #fff, lines #000), a filter turns them round to 90 % (paper about #1a1a1a, lines #e6e6e6) and keeps the hues of the wire
   colours; the printout (wiring_print.html, without .wr-canvas …) stays white. Out of invert(.9): 229.5 - 0.8 × value per channel – borders inside
   a filtered element are given in the colour that comes out as the dark line colour (#e8e8e8 → about #2c2c2c) */
@media screen {
  :root[data-theme="dark"] :is(.wr-canvas .wr-svg, .wr-page-box, .wr-pal-icon, .wr-sym-canvas) { filter: invert(.9) hue-rotate(180deg); }
  :root[data-theme="dark"] :is(.wr-canvas, .wr-pages) { background: var(--bg); }
  :root[data-theme="dark"] .wr-pal-btn { background: #1a1a1a; }
  :root[data-theme="dark"] :is(.wr-sym-canvas, .wr-lib-prev .wr-pal-icon) { border-color: #e8e8e8; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.wr-canvas .wr-svg, .wr-page-box, .wr-pal-icon, .wr-sym-canvas) { filter: invert(.9) hue-rotate(180deg); }
  :root:not([data-theme="light"]) :is(.wr-canvas, .wr-pages) { background: var(--bg); }
  :root:not([data-theme="light"]) .wr-pal-btn { background: #1a1a1a; }
  :root:not([data-theme="light"]) :is(.wr-sym-canvas, .wr-lib-prev .wr-pal-icon) { border-color: #e8e8e8; }
}

/* printout: one SVG page per A3 sheet */
.wr-print { margin: 0; background: #7a7a76; font-family: Arial, Helvetica, sans-serif; }
.wr-print .wr-print-bar { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: center; padding: 8px 16px; background: #1d1d1b; color: #fff; }
.wr-print .wr-print-bar button { font: inherit; padding: 6px 14px; border-radius: 6px; border: 0; background: #1baf7a; color: #fff; cursor: pointer; }
.wr-print .wd-page { display: block; width: 420mm; height: 297mm; margin: 10mm auto; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
@page { size: 420mm 297mm; margin: 0; }
@media print {
  .wr-print { background: none; }
  .wr-print .wr-print-bar { display: none; }
  .wr-print .wd-page { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .wr-print .wd-page:last-child { break-after: auto; page-break-after: auto; }
}
/* «Diese Ansicht» of the print button in the editor (wrPrintParts): the sheet or a report page on A4 landscape, below the print head */
@media print { .print-part > svg.wd-page { display: block; width: 100%; height: auto; max-height: 172mm; } }
/* report pages in the editor: fields to fill in (wdEditBox) – a box over the cell, missing values marked in GreenState green (user 25 Oct
   «hässliche farbe. greenstate grün?» – was orange; the page is inverted in dark mode, so a light green there becomes a dark one) */
.wr-page-box .wd-edit { cursor: pointer; }
.wr-page-box .wd-edit:hover { fill: rgba(96, 185, 70, .22); }
.wr-page-box .wd-edit.wd-missing { stroke: #60b946; stroke-width: .3; }
/* variables of a format with what they stand for («Formate & Vorlagen», symbol editor) */
.wr-vars { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.wr-vars code { cursor: help; }
.wr-vars code { color: var(--ink); }
/* pins in the symbol editor (user 26 Oct «wie anschluss darstellung gestalten im editor»): drawn as in the diagram (wdPinMark in the preview);
   the red handle around one drawn invisibly, around one with a mark only while the pointer is on it or it is selected */
.wr-se-pin { pointer-events: all; }
.wr-se-pin.wr-se-pin-on { stroke-opacity: 0; }
.wr-se-pin.wr-se-pin-on:hover, .wr-se-pin.wr-se-pin-on.wr-se-sel { stroke-opacity: 1; }
.wr-se-props input.wr-se-pat, .wr-settings input.wr-se-pat { width: 86px; flex: none; }
/* «Formate & Vorlagen»: sections like those of the symbol editor; the look in rows of labelled fields */
.wr-settings .wr-sec { margin: 0 0 8px; }
.wr-settings .wr-sec-body { margin: 8px 10px 4px; }
.wr-set-look { gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.wr-set-look-f { display: flex; flex-direction: column; gap: 2px; }
.wr-set-look-n { min-width: 64px; align-self: center; font-size: 13px; }
.wr-settings input.wr-se-num { width: 70px; }
.wr-settings input[type=color] { width: 34px; height: 26px; padding: 1px; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.wr-set-texts td, .wr-set-texts th { padding: 2px 6px; }

/* HMI of the hall (static/hmi.js, round 5): high-performance look after ISA-101 – grey picture, colour only for what is abnormal (alarm
   indicator: 1 red square, 2 yellow triangle, 3 orange diamond; NE 107: F red, C orange, S yellow, M blue), live values dark blue,
   running/open filled green (since 26 Oct, every item coloured by its state, see below). The picture follows the appearance (user 26 Oct «hmi auch theme übernehmen dark hell»): light grey, in the dark
   theme dark grey with light lines, light blue values and running/open filled light – light-dark() after the color-scheme of the page (the
   printout light); the alarm colours stay the same in both. Dark: background almost black, lines almost white (user 26 Oct «hmi hintergrund
   dunkler und linien heller»). */
.hmi { --hmi-bg: light-dark(#dcdcdc, #161615); --hmi-paper: light-dark(#fff, #1d1d1c); --hmi-box: light-dark(#f2f2f2, #232322);
  --hmi-box-stale: light-dark(#e6e6e6, #272726); --hmi-line: light-dark(#5f5f5f, #d4d4d0); --hmi-text: light-dark(#3a3a3a, #e4e4df);
  --hmi-ink: light-dark(#222, #f0f0ec); --hmi-on: light-dark(#1e8a3a, #3cc463); --hmi-on-ink: light-dark(#fff, #0d1a10);
  --hmi-on-line: light-dark(#14602a, #9be8b0); --hmi-off: light-dark(#c4c4c4, #3d3d3b); --hmi-cmd: light-dark(#0b7fd4, #4fb0ff);
  --hmi-pv: light-dark(#1f3a93, #8fb0ff); --hmi-stale: light-dark(#8a8a8a, #7c7c78); --hmi-norm: light-dark(#b9b9b9, #4a4a48);
  --hmi-p1: #e0201b; --hmi-p2: #f5c400; --hmi-p3: #ec8629; --hmi-ne-s: light-dark(#b08b00, #d9b200); --hmi-ne-m: light-dark(#2f6fd1, #6f9ff0); }
/* picture on the left, always A4 landscape like the drawings (user 26 Oct), the faceplate column on the right takes the rest of the width */
.hmi-main { display: grid; grid-template-columns: minmax(0, max(540px, calc((100vh - var(--wr-reserved, 230px)) * 297 / 210))) minmax(330px, 1fr); gap: 10px; align-items: start; }
.hmi-canvas { position: relative; padding: 0; overflow: hidden; width: 100%; aspect-ratio: 297 / 210; background: var(--hmi-bg); cursor: grab; touch-action: none; }
.hmi-svg { width: 100%; height: 100%; display: block; }
.hmi-side { min-width: 0; align-self: stretch; contain: size; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.hmi-svg [stroke="#000"], .hmi-svg [stroke="#000000"] { stroke: var(--hmi-line); }
.hmi-svg [fill="#000"], .hmi-svg [fill="#000000"] { fill: var(--hmi-line); }
.hmi-svg [fill="#fff"], .hmi-svg [fill="#ffffff"] { fill: var(--hmi-paper); }
.hmi-svg text { fill: var(--hmi-text); }
.hmi-svg .wd-dot { fill: var(--hmi-line); }
.hmi-bridges line { stroke: var(--hmi-line); stroke-width: 0.6; }
.hmi-svg .hmi-item { cursor: pointer; }
.hmi-svg .hmi-item * { pointer-events: all; }  /* the whole area of an item can be clicked, also where it is not filled (pump off) */
.hmi-svg .hmi-live > g:first-child > * { stroke-width: 0.45; }
.hmi-svg .hmi-on > g:first-child > :is(circle, rect, path, ellipse) { fill: var(--hmi-on); }
.hmi-svg .hmi-unknown > g:first-child > :is(circle, rect, path, ellipse) { stroke-dasharray: 0.8 0.6; }
.hmi-svg .hmi-sel > g:first-child { filter: drop-shadow(0 0 1.2px var(--hmi-pv)); }
/* Colour of the state (hmiState in static/hmi.js; user 26 Oct «hmi graphiken farblich markieren nach zustand. versch. farben, blinken etc
   für verschiedene zustände»): the lines of the symbol in the colour of its state and, for what needs attention, a coloured frame behind
   it – alarm by priority (blinking 1 Hz while unacknowledged, hollow and blinking slowly once returned, steady once acknowledged), failure F
   red dashed, command running blue pulsing, C orange, S yellow, M blue, each dashed; running/open filled green, stopped grey, unknown dashed,
   measured value in order blue, not current grey. «Reduce motion» stops the blinking, colour and shape stay. */
.hmi-svg :is(.hmi-st-p1, .hmi-st-F) > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-p1); }
.hmi-svg .hmi-st-p2 > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-ne-s); }
.hmi-svg :is(.hmi-st-p3, .hmi-st-C) > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-p3); }
.hmi-svg .hmi-st-S > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-ne-s); }
.hmi-svg .hmi-st-M > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-ne-m); }
.hmi-svg .hmi-st-cmd > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-cmd); }
.hmi-svg .hmi-st-on > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-on-line); }
.hmi-svg .hmi-st-off > g:first-child > :is(circle, rect, path, ellipse) { fill: var(--hmi-off); }
.hmi-svg .hmi-st-ok > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-pv); }
.hmi-svg :is(.hmi-st-stale, .hmi-st-unknown) > g:first-child > :is(circle, rect, path, ellipse, line, polyline, polygon) { stroke: var(--hmi-stale); stroke-dasharray: 0.8 0.6; }
.hmi-halo { stroke-width: 0.5; fill-opacity: 0.4; pointer-events: none; }
.hmi-h-p1 { fill: var(--hmi-p1); stroke: var(--hmi-p1); }
.hmi-h-p2 { fill: var(--hmi-p2); stroke: var(--hmi-ne-s); }
.hmi-h-p3 { fill: var(--hmi-p3); stroke: var(--hmi-p3); }
.hmi-h-cmd { fill: var(--hmi-cmd); stroke: var(--hmi-cmd); }
.hmi-h-F { fill: var(--hmi-p1); stroke: var(--hmi-p1); }
.hmi-h-C { fill: var(--hmi-p3); stroke: var(--hmi-p3); }
.hmi-h-S { fill: var(--hmi-p2); stroke: var(--hmi-ne-s); }
.hmi-h-M { fill: var(--hmi-ne-m); stroke: var(--hmi-ne-m); }
.hmi-halo:is(.hmi-h-F, .hmi-h-C, .hmi-h-S, .hmi-h-M) { fill-opacity: 0.2; stroke-width: 0.6; stroke-dasharray: 1.2 0.7; }
.hmi-halo.hmi-h-back { fill: none; stroke-width: 0.7; }
.hmi-selbox { fill: none; stroke: var(--hmi-pv); stroke-width: 0.35; stroke-dasharray: 1.4 0.8; pointer-events: none; }
.hmi-svg text.hmi-state-on { fill: var(--hmi-on-line); }
.hmi-svg text.hmi-state-fault { fill: var(--hmi-p1); }
.hmi-valbox:is(.hmi-vb-p1, .hmi-vb-F) { stroke: var(--hmi-p1); stroke-width: 0.45; }
.hmi-valbox:is(.hmi-vb-p2, .hmi-vb-S) { stroke: var(--hmi-ne-s); stroke-width: 0.45; }
.hmi-valbox:is(.hmi-vb-p3, .hmi-vb-C) { stroke: var(--hmi-p3); stroke-width: 0.45; }
.hmi-valbox.hmi-vb-M { stroke: var(--hmi-ne-m); stroke-width: 0.45; }
.hmi-blink-slow { animation: alarm-blink 2s steps(2, jump-none) infinite; }
.hmi-pulse { animation: hmi-pulse 2s ease-in-out infinite; }
@keyframes hmi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { :is(.hmi-blink-slow, .hmi-pulse, .hmi-ib-blink) { animation: none; } }
/* «Farben» in the tool bar: the states with a small picture each, opened below the button */
.hmi-legend { position: relative; display: inline-block; }
.hmi-legend > summary { list-style: none; }
.hmi-legend > summary::-webkit-details-marker { display: none; }
.hmi-legend-body { position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline-start: 0; width: max-content; max-width: min(440px, 80vw); padding: 8px 10px;
  box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.hmi-legend-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.hmi-legend-body li { display: flex; align-items: center; gap: 8px; }
.hmi-svg.hmi-legend-pic { width: 32px; height: 24px; flex: none; background: var(--hmi-bg); border-radius: 4px; }
.hmi-state { font-weight: bold; }
.hmi-valbox { fill: var(--hmi-box); stroke: var(--hmi-line); stroke-width: 0.15; }
.hmi-svg .hmi-value { fill: var(--hmi-pv); font-weight: bold; }
.hmi-svg .hmi-stale, .hmi-val.hmi-stale { fill: var(--hmi-stale); color: var(--hmi-stale); font-style: italic; }
.hmi-valbox.hmi-stale { fill: var(--hmi-box-stale); stroke-dasharray: 0.6 0.4; }
.hmi-bar-bg { fill: var(--hmi-box); stroke: var(--hmi-line); stroke-width: 0.12; }
.hmi-bar-norm { fill: var(--hmi-norm); }
.hmi-bar-lim { stroke: var(--hmi-line); stroke-width: 0.2; }
.hmi-bar-trip { stroke: var(--hmi-ink); stroke-width: 0.35; }
.hmi-bar-pv { fill: var(--hmi-ink); stroke: var(--hmi-ink); stroke-width: 0.35; }
.hmi-bar-pv.hmi-out { fill: var(--hmi-p1); stroke: var(--hmi-p1); }
.hmi-lead { stroke: var(--hmi-ink); stroke-width: 0.2; stroke-dasharray: 0.6 0.5; }
.hmi-prio { overflow: visible; vertical-align: middle; }
.hmi-prio :is(rect, path) { stroke: #000; stroke-width: 0.6; }
.hmi-prio text { fill: #000; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
.hmi-p1 :is(rect, path) { fill: var(--hmi-p1); }
.hmi-p1 text { fill: #fff; }
.hmi-p2 :is(rect, path) { fill: var(--hmi-p2); }
.hmi-p3 :is(rect, path) { fill: var(--hmi-p3); }
.hmi-prio.hmi-back :is(rect, path) { fill: var(--hmi-paper); stroke: var(--hmi-ink); }
.hmi-prio.hmi-back text { fill: var(--hmi-ink); }
.hmi-blink { animation: alarm-blink 1s steps(2, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .hmi-blink { animation: none; } }
.hmi-ne rect { fill: var(--hmi-paper); stroke-width: 0.35; }
.hmi-ne text { font-weight: bold; }
.hmi-ne-F rect { stroke: var(--hmi-p1); } .hmi-ne-F text { fill: var(--hmi-p1); }
.hmi-ne-C rect { stroke: var(--hmi-p3); } .hmi-ne-C text { fill: var(--hmi-p3); }
.hmi-ne-S rect { stroke: var(--hmi-ne-s); } .hmi-ne-S text { fill: var(--hmi-ne-s); }
.hmi-ne-M rect { stroke: var(--hmi-ne-m); } .hmi-ne-M text { fill: var(--hmi-ne-m); }
span.hmi-ne { display: inline-block; min-width: 1.4em; text-align: center; font-weight: bold; border: 1.5px solid currentColor; border-radius: 3px; padding: 0 3px; font-size: 12px; }
span.hmi-ne-F { color: var(--hmi-p1); } span.hmi-ne-C { color: var(--hmi-p3); } span.hmi-ne-S { color: var(--hmi-ne-s); } span.hmi-ne-M { color: var(--hmi-ne-m); }
.hmi-counts { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.hmi-count { display: inline-flex; gap: 4px; align-items: center; }
.hmi-val { color: var(--hmi-pv); font-weight: bold; white-space: nowrap; }
.hmi-bar-inline { display: block; }
.hmi-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hmi-item-btn { display: flex; width: 100%; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 4px 6px; cursor: pointer; text-align: start; font-size: 13px; }
.hmi-item-btn .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmi-noalarm { display: inline-block; width: 12px; }
.hmi-badge-on { background: var(--hmi-on); color: var(--hmi-on-ink); }
.hmi-big { font-size: 30px; font-weight: bold; color: var(--hmi-pv); line-height: 1.1; }
.hmi-big.hmi-big-fault { color: var(--hmi-p1); }
.hmi-big small { font-size: 15px; font-weight: normal; }
.hmi-limits th, .hmi-limits td { text-align: center; padding: 2px 6px; }
.hmi-spark { background: var(--card-2); border-radius: 4px; }
.hmi-spark-line { stroke: var(--hmi-pv); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hmi-state-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hmi-state-box { font-weight: bold; border: 1px solid var(--line); border-radius: 4px; padding: 2px 10px; }
.hmi-alarm-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hmi-fp-head { font-size: 15px; }
/* the same colours as a bar at the start of the rows on the right (list of the items, head of the faceplate) */
.hmi-item-btn, .hmi-fp-top { border-inline-start: 5px solid transparent; }
.hmi-fp-top { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line);
  border-radius: 6px; background: var(--card); font-size: 15px; }
.hmi-fp-top .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
:is(.hmi-ib-p1, .hmi-ib-F) { border-inline-start-color: var(--hmi-p1); }
:is(.hmi-ib-p2, .hmi-ib-S) { border-inline-start-color: var(--hmi-p2); }
:is(.hmi-ib-p3, .hmi-ib-C) { border-inline-start-color: var(--hmi-p3); }
.hmi-ib-M { border-inline-start-color: var(--hmi-ne-m); }
.hmi-ib-cmd { border-inline-start-color: var(--hmi-cmd); }
.hmi-ib-on { border-inline-start-color: var(--hmi-on); }
.hmi-ib-off { border-inline-start-color: var(--hmi-off); }
.hmi-ib-ok { border-inline-start-color: var(--hmi-pv); }
:is(.hmi-ib-stale, .hmi-ib-unknown) { border-inline-start-color: var(--hmi-stale); border-inline-start-style: dashed; }
.hmi-ib-blink { animation: hmi-edge 1s steps(2, jump-none) infinite; }
@keyframes hmi-edge { to { border-inline-start-color: transparent; } }
@media (max-width: 900px) { .hmi-main { grid-template-columns: minmax(0, 1fr); } .hmi-side { contain: none; overflow: visible; } }

/* ---------------------------------------------------------------- Anlage InView (static/inview.js): nur Anzeige.
   Ruhig wie das HMI: Flächen neutral, Farbe nur für Zustände (ein, Warnung, Störung); der Messwert ist das einzige Blau. */
.iv .iv-head-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.iv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.iv-chip.iv-ro { font-weight: 600; }
.iv-lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.iv-lamp.iv-on { background: var(--good); }
.iv-lamp.iv-warn { background: var(--warning); }
.iv-lamp.iv-crit { background: var(--critical); }
.iv-group { margin-top: 12px; }
/* all cards of a page in one row over the whole width (--n = number of cards, set by inview.js); below 180 px per card they wrap */
.iv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(180px, calc((100% - (var(--n, 3) - 1) * 12px) / var(--n, 3))), 1fr));
  gap: 12px; align-items: start; }
.iv-card { display: grid; gap: 10px; align-content: start; }
.iv-card h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iv-card h3 .iv-title { margin-right: auto; }
.iv-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iv-keys.iv-top { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 10px; }
.iv-keys.iv-top .iv-key { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 11px; }
.iv-key { min-width: 0; color: var(--hmi-pv); }
.iv-key-lbl { color: var(--ink-2); font-size: 12px; }
.iv-key-val { font-size: 26px; font-weight: 600; line-height: 1.15; white-space: nowrap; color: var(--hmi-pv); }
.iv-key-val small { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.iv-key.iv-click { cursor: pointer; }
.iv-key.iv-click:hover .iv-key-val { text-decoration: underline; }
.iv-spark { display: block; width: 100%; height: 26px; margin-top: 2px; overflow: visible; color: var(--muted); }
.iv-spark-dot { fill: none; stroke: var(--hmi-pv); stroke-width: 6; stroke-linecap: round; }
.iv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3px 28px; font-size: 13px; }  /* wide card: several columns */
.iv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.iv-ln { color: var(--ink-2); min-width: 0; }
.iv-lv { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-lv small { font-weight: 400; color: var(--muted); margin-left: 2px; }
.iv-list .iv-click { cursor: pointer; }
.iv-list .iv-click:hover { color: var(--hmi-pv); }
.iv-meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 28px; }
.iv-meter { display: grid; gap: 4px; }
.iv-meter-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.iv-meter-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.iv-track { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.iv-fill { height: 100%; border-radius: 3px; background: var(--hmi-pv); transition: width .3s; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.iv-codes { font-size: 12px; }
.iv-day { position: relative; height: 16px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.iv-win { position: absolute; top: 0; bottom: 0; background: var(--hmi-pv); }
.iv-day-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
table.iv-plan { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.iv-plan td, table.iv-plan th { padding: 2px 6px; text-align: left; border-bottom: 1px solid var(--line); }
table.iv-plan th { font-weight: 500; color: var(--muted); }
.iv-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.iv-cam { position: relative; aspect-ratio: 16 / 9; background: #161616; border-radius: var(--radius); overflow: hidden; }
.iv-cam { cursor: pointer; }
.iv-cam:focus-visible { outline: 2px solid var(--accent, #4b7bff); outline-offset: 2px; }
.iv-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* one camera: picture on the left (stays in view), its settings on the right */
dialog.modal.wide.iv-camdlg-modal { width: min(1280px, calc(100vw - 32px)); }
.iv-camdlg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 14px; align-items: start; }
.iv-camdlg-left { position: sticky; top: 0; }
.iv-camdlg-pic { position: relative; aspect-ratio: 16 / 9; background: #161616; border-radius: var(--radius); overflow: hidden; }
.iv-camdlg-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.iv-camdlg-info { margin-top: 6px; }
.iv-camdlg-set { min-width: 0; }
.iv-camf-grid { display: grid; gap: 4px; padding-bottom: 8px; }
.iv-camf-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.iv-camf { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr); align-items: center; gap: 8px; font-size: 13px; }
.iv-camf-bool { display: flex; gap: 8px; }
.iv-camf-in { display: flex; align-items: center; gap: 6px; min-width: 0; }
.iv-camf-in > input, .iv-camf-in > select { flex: 1; min-width: 0; }
.iv-camf-val { min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.iv-camf :disabled { cursor: not-allowed; opacity: .7; }
.iv-camf-foot { display: flex; justify-content: flex-end; padding-bottom: 8px; }
@media (max-width: 800px) { .iv-camdlg { grid-template-columns: 1fr; } .iv-camdlg-left { position: static; } }
.iv-cam-lbl { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.iv-cam-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; text-align: center; padding: 12px; }
.iv-devices { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.iv-devices > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.iv-cmds { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.iv-cmd-lock { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.iv-cmd { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.iv-cmd-lbl { color: var(--muted); }
.iv-cmds :disabled { cursor: not-allowed; opacity: .6; }
.iv-cmds input[type="number"] { width: 68px; font: inherit; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
.iv-cmds select { font: inherit; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
.iv-cmds .btn.iv-cmd-on { border-color: var(--good); }
.iv-cmd-lock.iv-cmd-open { color: var(--warning); font-weight: 600; }
.iv-chip.iv-ro-open { color: var(--warning); border-color: var(--warning); }
@media (max-width: 700px) { .iv-keys { grid-template-columns: 1fr; } }