:root {
  color-scheme: light;
  --bg: #f9f9f7;
  --card: #fcfcfb;
  --card-2: #f3f2ee;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --line: #e1e0d9;
  --axis: #c3c2b7;
  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --good: #0ca30c;
  --good-ink: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --weekend: color-mix(in srgb, var(--ink) 7%, transparent);
  --ring: rgba(11, 11, 11, .10);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --tip-bg: #ffffff;
  --tip-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}
/* Dark: chosen explicitly (appearance «Dark») or automatically by device, as long as «Light» is not chosen */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0d;
  --card: #1a1a19;
  --card-2: #232321;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --line: #2c2c2a;
  --axis: #383835;
  --accent: #3987e5;
  --good-ink: #0ca30c;
  --ring: rgba(255, 255, 255, .10);
  --shadow: none;
  --tip-bg: #2c2c2a;
  --tip-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d0d;
    --card: #1a1a19;
    --card-2: #232321;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --line: #2c2c2a;
    --axis: #383835;
    --accent: #3987e5;
    --good-ink: #0ca30c;
    --ring: rgba(255, 255, 255, .10);
    --shadow: none;
    --tip-bg: #2c2c2a;
    --tip-shadow: 0 4px 14px rgba(0, 0, 0, .6);
  }
}
/* Font of the style «GreenState»: Satoshi as on greenstate.ch (Fontshare, ITF Free Font License – fonts/FFL.txt); the browser only loads
   it when the style is chosen */
@font-face { font-family: Satoshi; src: url("fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
/* Style «GreenState» (Appearance → GreenState …): calm and neutral like greenstate.ch – white and grey areas, green only where intended
   (main buttons, links, focus, active menu item; light #1a7a35 from the logo, dark #60b946), plus the cube from the logo of GreenState AG
   instead of the app icon (brand/; the user removed the lettering at the bottom of the sidebar on 18 Oct). Only on screen, printed
   it stays plain (print.css). */
@media screen {
  :root[data-style="gs"] {
    color-scheme: light;
    --bg: #f7f7f7; --card: #ffffff; --card-2: #eff4ec; --ink: #1b1b1b; --ink-2: #464545; --muted: #6b7582; --line: #e1e1e1; --axis: #c8c8c8;
    --accent: #1a7a35; --accent-ink: #ffffff; --good-ink: #006300; --ring: rgba(11, 11, 11, .10);
    --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05); --tip-bg: #ffffff; --tip-shadow: 0 4px 14px rgba(0, 0, 0, .16);
    --gs-timeline: linear-gradient(100deg, #005417, #1a7a35 40%, #5fb90a 82%, #b4eb03); --gs-font: linear-gradient(90deg, #005417, #1a7a35 55%, #4fa508);
    font-family: Satoshi, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  :root[data-style="gs"][data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0d0d; --card: #1a1a19; --card-2: #232321; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --line: #2c2c2a; --axis: #383835;
    --accent: #60b946; --accent-ink: #042e0c; --good-ink: #0ca30c; --ring: rgba(255, 255, 255, .10);
    --shadow: none; --tip-bg: #2c2c2a; --tip-shadow: 0 4px 14px rgba(0, 0, 0, .6);
    --gs-font: linear-gradient(90deg, #5fb90a, #b4eb03);
  }
  :root[data-style="gs"] nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
  :root[data-style="gs"] .nav-group.open > button.nav-sep::after { color: var(--accent); }
  /* at the top above the sidebar a fine stripe in the green tones of the logo */
  :root[data-style="gs"] .brand { background-image: linear-gradient(90deg, #005417, #1a7a35 30%, #5fb90a 65%, #b4eb03); background-size: 100% 3px; background-repeat: no-repeat; }
  /* Main buttons («✓ Complete», Save …): 2 px border and text in the gradient of the logo green tones (proposal 12). The text is
     the only background (background-clip: text – with several layers Firefox paints the whole area), the border a masked ring in
     ::before; icons (SVG) in the accent green. Padding 1 px smaller so that they stay as high as the other buttons. */
  :root[data-style="gs"] .btn.primary { position: relative; border: 2px solid transparent; color: transparent; font-weight: 700;
    background: var(--gs-font) content-box no-repeat; -webkit-background-clip: text; background-clip: text; }
  :root[data-style="gs"] .btn.primary::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; background: var(--gs-timeline); pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; }
  :root[data-style="gs"] .btn.primary:hover { filter: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  :root[data-style="gs"] .btn.primary svg { color: var(--accent); }
  :where(:root[data-style="gs"]) .btn.primary { padding: 5px 11px; }
  :where(:root[data-style="gs"]) .btn.primary.small { padding: 2px 7px; }
  :where(:root[data-style="gs"]) .btn.primary.icon-btn { padding: 5px 8px; }
  :root[data-style="gs"] .logo { background: url("brand/greenstate-mark.svg") center/contain no-repeat; border-radius: 0; }
  :root[data-style="gs"] #auth { background: var(--bg); }
  :root[data-style="gs"] .pdf-figure, :root[data-style="gs"] .fb-button .figure:not(:empty) { color: var(--accent-ink); }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-style="gs"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d0d; --card: #1a1a19; --card-2: #232321; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --line: #2c2c2a; --axis: #383835;
    --accent: #60b946; --accent-ink: #042e0c; --good-ink: #0ca30c; --ring: rgba(255, 255, 255, .10);
    --shadow: none; --tip-bg: #2c2c2a; --tip-shadow: 0 4px 14px rgba(0, 0, 0, .6);
    --gs-font: linear-gradient(90deg, #5fb90a, #b4eb03);
  }
}

* { box-sizing: border-box; }
/* No visible scrollbars anywhere (page, sidebar, tables, plan, dialogs) – the areas still scroll with wheel, touchpad, touch and keys;
   that more lies hidden shows the fading at the edges (scrollfade.js; user 26 Oct «scrollleisten nicht sichtbar»).
   scrollbar-width for Chrome, Firefox and new Safari, ::-webkit-scrollbar for older Safari. */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); display: flex; min-height: 100vh; line-height: 1.45; }
a { color: var(--accent); }
mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; }  /* search hits highlighted in blue instead of browser yellow */
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0; }
h3 { font-size: 14px; margin: 0 0 10px; color: var(--ink-2); font-weight: 600; }
.sub { color: var(--ink-2); margin: 0 0 20px; max-width: 80ch; }

/* ---------- Navigation */
.sidebar { width: 220px; flex: none; background: var(--card); border-inline-end: 1px solid var(--line); padding: 0 12px 12px; position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; }
/* only the navigation scrolls; logo at the top and user menu at the bottom stay (user 26 Oct «user dropdown immer zuunterst anzeigen und nicht im scroll bereich») */
.sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
/* the logo area stays at the top when scrolling the navigation */
.brand { display: flex; gap: 10px; align-items: center; padding: 16px 20px 12px; margin: 0 -12px 8px; position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); }
.brand-name { min-width: 0; }
.brand-buttons { margin-inline-start: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
/* user menu with the settings at the very bottom (with a short navigation at the bottom edge) */
.sidebar-foot { margin-top: auto; flex: none; }
/* settings as a toolbar in the user menu: an invisible select field above each icon opens the list */
.cfg-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cfg-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 8px; color: var(--ink-2); cursor: pointer; }
.cfg-icon:hover, .cfg-icon:focus-within { background: var(--card-2); color: var(--ink); }
.cfg-icon:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.cfg-icon select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.cfg-val { font-size: 10px; line-height: 1.2; font-weight: 600; color: var(--muted); min-height: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: #1baf7a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 25V13M16 15c0-4 3-7 8-7 0 5-3 8-8 7zM16 18c0-4-3-7-8-7 0 5 3 8 8 7z' stroke='white' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover; flex: none; }
nav { --nav-ink: color-mix(in srgb, var(--ink-2) 75%, var(--ink)); }
nav a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--nav-ink); text-decoration: none; margin-bottom: 1px; }
nav a:hover { background: var(--card-2); color: var(--ink); }
nav a.active { background: var(--card-2); color: var(--ink); font-weight: 600; }
.nav-sep { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 16px 10px 4px; }
button.nav-sep { width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; font: inherit; text-transform: none; letter-spacing: normal; color: var(--nav-ink); padding: 7px 10px; margin-top: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
button.nav-sep:hover { background: var(--card-2); color: var(--ink); }
.nav-items a { margin-inline-start: 12px; }
button.nav-sep::after { content: "▸"; font-size: 10px; transition: transform .15s; }
.nav-group.open > button.nav-sep::after { transform: rotate(90deg); }
.nav-group:not(.open) > .nav-items { display: none; }
.lo-head { cursor: pointer; margin: 0; }
.lo-head::before { content: "▸"; font-size: 11px; color: var(--muted); transition: transform .15s; }
.lo-card.open .lo-head::before { transform: rotate(90deg); }
.lo-card.open .lo-body { margin-top: 10px; }
.lo-card:not(.open) .lo-body { display: none; }
main { flex: 1; min-width: 0; padding: 28px 32px 60px; outline: none; }

/* ---------- Building blocks */
.link-x { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--muted); font: inherit; }
.link-x:hover { color: var(--critical, #d03b3b); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.tile .label { color: var(--ink-2); font-size: 12px; }
.tile .value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.tile .hint { color: var(--muted); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.toolbar label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-2); gap: 3px; }
/* Settings of a view (cfgCard() in app.js, model: trends): card below the header, on the left the section (period, filter …), on the right the fields with their label in front; all fields and buttons equally high */
.cfg-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 10px 16px; padding: 12px 16px; margin: 8px 0 14px; }
.cfg-head { padding-top: calc((34px - 1lh) / 2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.cfg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 34px; }
.cfg-row label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.cfg-row label > span { display: inline-flex; align-items: center; gap: 6px; }  /* label with «i» */
.cfg-row .info-i { margin-inline-start: 0; }
.cfg-row .spacer { flex: 1; }
.cfg-row input:not([type=checkbox]):not([type=radio]), .cfg-row select, .cfg-row .btn { box-sizing: border-box; height: 34px; }
.cfg-row .btn { display: inline-flex; align-items: center; justify-content: center; padding-block: 0; }
.cfg-row .btn.small { padding-inline: 10px; font-size: 13px; }
.cfg-row input[type=search] { width: min(240px, 100%); }
.cfg-row .field.check { padding-top: 0; }
/* segmented button, e.g. quick choice of the period */
.seg { display: inline-flex; flex-wrap: wrap; }
.seg .btn { border-radius: 0; margin-inline-start: -1px; }
.seg .btn:first-child { border-start-start-radius: 7px; border-end-start-radius: 7px; margin-inline-start: 0; }
.seg .btn:last-child { border-start-end-radius: 7px; border-end-end-radius: 7px; }
.seg .btn.primary { position: relative; }
@media (max-width: 700px) {
  .cfg-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cfg-head { padding-top: 0; }
  .cfg-head:not(:first-child) { margin-top: 8px; }
}
@media print {
  .cfg-card { border: 0; padding: 0; margin: 0 0 3mm; gap: 1mm 4mm; }
  .cfg-head { padding-top: 0; }
  .cfg-card .cfg-row input, .cfg-card .cfg-row select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; height: auto; color: var(--ink); font: inherit; box-shadow: none; }
}
.page-head-buttons { display: contents; }  /* View header (header): wide, all buttons are in one row, the print button at the far right */
.btn { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 7px; padding: 6px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--axis); background: var(--card-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--critical); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { border-color: var(--line); background: var(--card); }
/* ‹ / › (navBtn): square, the same size in every bar, at the end greyed out */
.btn.nav, .cfg-row .btn.nav { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; padding: 0; font-size: 17px; line-height: 1; }
.cfg-row .btn.nav { width: 34px; height: 34px; font-size: 18px; }
.btn.nav:disabled { opacity: .35; }
.btn.icon-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; }
.icon { display: inline-flex; }
.dd-arrow { font-size: 10px; color: var(--muted); }
.dd { position: relative; display: inline-block; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; }
.dd-menu button { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 6px; padding: 7px 10px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.dd-menu button:hover, .dd-menu button:focus-visible { background: var(--card-2); outline: none; }
.dd-menu button.dd-sep { margin-top: 5px; position: relative; }
.dd-menu button.dd-sep::before { content: ''; position: absolute; left: 4px; right: 4px; top: -3px; border-top: 1px solid var(--line); }
/* PDF collection: number of collected views on the printer icon, list in the dialog */
.pdf-figure { min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.pdf-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pdf-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.pdf-row .pdf-num { min-width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdf-row .pdf-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.icon { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 2px 6px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; min-width: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Fields filled in by the browser (login): Chrome and Edge lay a light yellow over them, in the dark theme a dirty olive (user 20 Oct: «gelbe
   felder hässlich») – hence the field colour as an inset shadow over them and the text in the text colour; Firefox likewise (:autofill), as a separate rule, because
   a browser that does not know a pseudo-class discards the whole rule */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--card) inset; box-shadow: 0 0 0 1000px var(--card) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s ease-out 0s; }
input:autofill, select:autofill, textarea:autofill { box-shadow: 0 0 0 1000px var(--card) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
input[type=color] { padding: 2px; height: 34px; width: 60px; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-inline-end: 6px; }
.empty { color: var(--muted); text-align: center; padding: 20px !important; }
.error { color: var(--critical); padding: 20px; }
.info { background: var(--card-2); border-radius: 7px; padding: 8px 10px; color: var(--ink-2); grid-column: 1 / -1; }
.guide p { margin: 0 0 6px; }
.guide ol, .guide ul { margin: 0 0 6px; padding-inline-start: 22px; }
.guide li { margin: 2px 0; }
.guide > :last-child { margin-bottom: 0; }
textarea::placeholder { color: var(--muted); opacity: .8; }
.warn-text { color: var(--critical); }

/* ---------- Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.data { border-collapse: collapse; width: 100%; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.data .num { text-align: right; }
table.data th { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--card-2); position: sticky; top: 0; z-index: 1; white-space: nowrap; }  /* z-index: the blinking dot of a badge scrolled below would show through */
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--card-2); }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions .btn { margin-inline-start: 4px; }
table.data tfoot td { font-weight: 600; background: var(--card-2); }
table.data input[type=number] { width: 90px; text-align: right; }
.clickable { cursor: pointer; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover, table.data th.sortable:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--card-2) 70%, var(--axis)); outline: none; }
table.data th.sortable .th-in::after { content: "↕"; margin-inline-start: 4px; font-size: 11px; color: var(--muted); opacity: .5; }
table.data th.sortable[aria-sort=ascending] .th-in::after { content: "▲"; opacity: 1; color: var(--accent); font-size: 9px; }
table.data th.sortable[aria-sort=descending] .th-in::after { content: "▼"; opacity: 1; color: var(--accent); font-size: 9px; }
table.data .col-off { display: none !important; }
table.data th[draggable=true] { cursor: grab; }
table.data th.drags { opacity: .45; }
table.data th.drop-l { box-shadow: inset 3px 0 0 var(--accent); }
table.data th.drop-r { box-shadow: inset -3px 0 0 var(--accent); }
table.data th .columns-grip { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
table.data th .columns-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 0; width: 2px; border-radius: 1px; background: var(--accent); opacity: 0; }
table.data thead:hover .columns-grip::after { opacity: .25; }
table.data th .columns-grip:hover::after, table.data.columns-drags .columns-grip::after { opacity: 1; }
table.data.columns-drags, table.data.columns-drags * { cursor: col-resize !important; user-select: none; }
table.data.columns-fix { table-layout: fixed; }
table.data.columns-fix th, table.data.columns-fix td { overflow: hidden; text-overflow: ellipsis; }
.columns-btn { display: inline-flex; vertical-align: middle; margin-inline-start: 6px; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
table.data thead:hover .columns-btn, .columns-btn:focus-visible { opacity: 1; }
.columns-btn:hover { color: var(--ink); background: var(--line); }
@media (hover: none) { .columns-btn { opacity: .7; } }
.columns-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.columns-row label { flex: 1; }

/* ---------- Status badges (colour + symbol + text) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 1px 8px 1px 6px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.badge.good::before { background: var(--good); }
.badge.warning::before { background: var(--warning); }
.badge.serious::before { background: var(--serious); }
.badge.critical::before { background: var(--critical); }
.badge.accent::before { background: var(--accent); }
/* Alarm active and unacknowledged (ISA-18.2): the dot blinks until someone acknowledges */
.badge.blink-dot::before { animation: alarm-blink 1s steps(2, jump-none) infinite; }
@keyframes alarm-blink { from { opacity: 1; } to { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .badge.blink-dot::before { animation: none; } }

/* ---------- Forms & dialogs */
dialog.modal { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
dialog.modal.wide { width: min(980px, calc(100vw - 32px)); }
dialog.modal.small { width: min(460px, calc(100vw - 32px)); }
dialog.modal.confirm header { border-bottom: 0; padding-bottom: 4px; }
dialog.modal.confirm footer { border-top: 0; padding-top: 4px; }
.confirm-text { white-space: pre-line; color: var(--ink-2); line-height: 1.55; }
.btn.danger-solid { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn.danger-solid:hover { filter: brightness(1.08); background: var(--critical); }
.btn:focus-visible, dialog.confirm footer .btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .35); }
dialog.modal[open] { display: flex; flex-direction: column; }
/* Header and action bar always stay visible, only the content scrolls (dvh: phone browser bars) */
dialog.modal > header, dialog.modal > footer { flex: none; }
dialog.modal { max-height: calc(100dvh - 48px); }
dialog header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 16px 18px; overflow-y: auto; }
dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
dialog footer .left { margin-inline-end: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.field select { min-width: 0; max-width: 100%; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field .incl-button { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }  /* Input field with a button next to it, e.g. «Next free date» */
.field .incl-button input { flex: 1; min-width: 140px; }
.field label { font-size: 12px; color: var(--ink-2); }
.field small { color: var(--muted); font-size: 11px; }
.field.full { grid-column: 1 / -1; }
.field.check { flex-direction: row; align-items: center; gap: 8px; padding-top: 18px; }
.field.check label { font-size: 14px; color: var(--ink); }

/* ---------- shelf selection */
.shelf-pick { grid-column: 1 / -1; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.shelf-pick[hidden] { display: none; }
.shelf-pick .row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.shelf-pick .row b { width: 64px; font-size: 12px; color: var(--ink-2); }
.chip { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; cursor: pointer; user-select: none; background: var(--card); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Occupancy plan */
.plan { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: auto; max-height: calc(100vh - 210px); }
.plan-inner { min-width: 900px; position: relative; cursor: grab; user-select: none; }
body.plan-drags, body.plan-drags * { cursor: grabbing !important; }
body.plan-drags #tip { display: none !important; }
.plan-row { display: flex; height: 22px; border-bottom: 1px solid var(--line); }
.plan-row .code { width: 72px; flex: none; font-size: 11px; color: var(--ink-2); padding: 3px 8px; position: sticky; left: 0; background: var(--card); z-index: 2; border-inline-end: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.plan-row.inactive .code { color: var(--muted); text-decoration: line-through; }
.plan-row .lane { position: relative; flex: 1; }
.plan-row .lane::after { content: ''; position: absolute; inset: 0; background: var(--we, none); pointer-events: none; z-index: 1; }
.plan-head { position: sticky; top: 0; z-index: 3; background: var(--card-2); height: 30px; }
.plan-head .code { background: var(--card-2); font-weight: 600; padding-top: 7px; }
.plan-head .wk { position: absolute; top: 0; bottom: 0; font-size: 11px; color: var(--ink-2); padding: 7px 4px 0; border-inline-start: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.plan-mod { height: 24px; background: var(--card-2); font-size: 12px; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); position: sticky; left: 0; cursor: pointer; }
.plan-mod::before { content: "▸"; display: inline-block; width: 14px; text-align: center; font-size: 11px; color: var(--muted); transition: transform .15s; }
.plan-mod.open::before { transform: rotate(90deg); }
.gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--critical); z-index: 1; opacity: .7; }
.bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; font-size: 11px; line-height: 14px; padding: 0 5px; overflow: hidden; white-space: nowrap; color: var(--ink); cursor: pointer; border-inline-start: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 42%, var(--card)); }
.bar.planned { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--card)) 0 5px, color-mix(in srgb, var(--c) 32%, var(--card)) 5px 10px); }
.bar.harvested { background: var(--card-2); border-inline-start-color: var(--muted); color: var(--muted); }
.bar:hover { outline: 2px solid var(--c); z-index: 2; }
.bar .cut { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--card); opacity: .85; pointer-events: none; }
.plan-row.propagation { height: 34px; background: var(--card-2); }
.plan-row.propagation .code { background: var(--card-2); font-weight: 600; line-height: 1.2; }
.count-seg { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.count-seg .how_many-fill { position: absolute; left: 0; right: 0; bottom: 2px; background: color-mix(in srgb, var(--good) 55%, var(--card)); border-radius: 2px 2px 0 0; box-shadow: inset 1px 0 var(--card-2); }
.count-seg.full .how_many-fill { background: var(--warning); }
.count-seg.over .how_many-fill { background: var(--critical); }
.count-seg span { position: absolute; left: 5px; bottom: 3px; font-size: 11px; line-height: 14px; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-mod .muted { font-weight: 400; }
.how_many-cap { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted); pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); align-items: center; }
.legend .pat { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: middle; margin-inline-end: 5px; border: 1px solid var(--axis); }

/* ---------- Utilisation chart */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 0 0 22px 34px; position: relative; }
.chart .axis { position: absolute; left: 34px; right: 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.chart .axis span { position: absolute; left: -34px; top: -8px; width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.chart .axis.base { border-top-color: var(--axis); }
.chart .col { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.chart .col .b { width: min(70%, 44px); background: var(--accent); border-radius: 4px 4px 0 0; min-height: 1px; }
.chart .col.over .b { background: var(--critical); }
.chart .col:hover .b { filter: brightness(1.12); }
.chart .col .x { position: absolute; bottom: -20px; font-size: 11px; color: var(--muted); white-space: nowrap; }

#tip { position: fixed; z-index: 1000; background: var(--tip-bg); color: var(--ink); border: 1px solid var(--axis); font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 7px; pointer-events: none; max-width: 340px; white-space: pre-line; box-shadow: var(--tip-shadow); }

/* ---------- info icons, explanation boxes, help */
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-inline-start: 5px; border-radius: 50%; border: 1px solid var(--axis); background: var(--card); color: var(--ink-2); font: italic 600 10px/1 Georgia, serif; cursor: help; padding: 0; vertical-align: middle; flex: none; }
.page-head-title h1 { margin-bottom: 12px; }
.page-head-title h1 .info-i { width: 18px; height: 18px; margin-inline-start: 8px; font-size: 12px; vertical-align: 3px; }
.info-i:hover, .info-i:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); outline: none; }
.th-in { display: inline-flex; align-items: center; }
th.num .th-in { justify-content: flex-end; }
.dotted { border-bottom: 1px dotted var(--muted); cursor: help; }
.small { font-size: 12px; }
.full-row { grid-column: 1 / -1; }
/* Sections of input areas and popups – one style everywhere: light grey area like the sections of the sensors page (.se-section), small light
   title. Forms (schema «section»), groups of the permissions, «send to user» of the feedback, settings cards, intermediate titles in popups. */
.form-grid > .form-section, .permissions fieldset, .fb-send { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px 12px; margin: 0; }
.form-grid > .form-section { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; }
.form-section-title, .permissions legend, .fb-send legend, .cfg-head, .modal-body h4 { font-size: 13px; font-weight: 600; text-transform: none;
  letter-spacing: normal; color: var(--ink-2); color: light-dark(var(--ink-2), var(--ink)); }  /* one step below the card titles (h3 14 px); dark mode white */
.form-section > .form-section-title { grid-column: 1 / -1; margin: 0 0 -4px; }
.permissions legend, .fb-send legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; }  /* title inside the area, not on its frame */
:root[data-hints="off"] details.howto { display: none; }  /* setting «Hints: hide» */
details.howto { background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 8px; margin: 0 0 16px; max-width: 110ch; }
details.howto summary { cursor: pointer; padding: 8px 12px; color: var(--ink-2); font-weight: 600; font-size: 13px; list-style-position: inside; }
details.howto[open] summary { border-bottom: 1px solid var(--line); }
.howto-body, .help section { padding: 4px 14px 10px; color: var(--ink-2); }
.howto-body p, .help p { margin: 8px 0; }
.howto-body ul, .help ul { margin: 6px 0; padding-inline-start: 20px; }
.howto-body li, .help li { margin: 3px 0; }
.formula { font: 500 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; background: var(--card-2); color: var(--ink); border-radius: 6px; padding: 4px 10px; margin: 4px 0; overflow-x: auto; white-space: pre-wrap; }
.help { max-width: 920px; }
.help section { margin-top: 14px; padding: 16px 20px; scroll-margin-top: 16px; }
.help h2 { font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.help-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc { margin: 0; padding-inline-start: 20px; columns: 2; column-gap: 32px; }
.toc li { margin: 4px 0; }
.formulas input[type=search] { min-width: 280px; }
.formulas [hidden] { display: none; }

.card h3 { display: flex; align-items: center; }
.tile .label { display: flex; align-items: center; }
/* «View as»: coloured frame and hint bar as long as the admin views as another user */
body.view-as_user main { box-shadow: inset 0 0 0 3px var(--warning); }
#view-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1500; display: flex; align-items: center; gap: 12px;
  background: var(--warning); color: #000; padding: 8px 10px 8px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); }
@media print { #view-banner { display: none; } body.view-as_user main { box-shadow: none; } }
/* Popover (index.html): lies in the top layer above modal windows; the browser defaults for popovers (centre, border, background) are reset here */
#toast { position: fixed; inset: auto 20px 20px auto; margin: 0; border: 0; padding: 0; background: none; color: inherit; overflow: visible; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
#toast div { background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 420px; }
#toast div.err { background: var(--critical); color: #fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { font: inherit; border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

@media (max-width: 800px) {
  body { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 0 16px 10px; }
  .brand { padding: 10px 16px 8px; margin: 0 -16px; border-bottom: 0; }
  nav { display: flex; flex-direction: column; }  /* as on the desktop: the groups can be expanded and collapsed */
  button.nav-sep { padding: 10px 12px; margin-top: 2px; }
  main { padding: 18px 16px 40px; }
  .grid.two { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Login / registration / first setup */
body.auth-mode .sidebar, body.auth-mode main { display: none; }
#auth { position: fixed; inset: 0; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 40px;
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, #1baf7a 14%, var(--bg)), var(--bg)); }
#auth[hidden] { display: none; }
.auth-card { width: min(440px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.auth-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-head .spacer { flex: 1; }
.auth-head small { display: block; color: var(--muted); font-size: 12px; }
.auth-head select { font-size: 12px; padding: 3px 6px; }
.auth-card h1 { font-size: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.auth-form .btn.primary { padding: 9px 14px; margin-top: 4px; }
.auth-error { background: color-mix(in srgb, var(--critical) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--critical) 40%, var(--card)); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.auth-ok { background: color-mix(in srgb, var(--good) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--card)); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; }
.auth-error[hidden], .auth-ok[hidden] { display: none; }
.auth-bottom { margin-top: 16px; text-align: center; font-size: 13px; }

/* ---------- user box in the sidebar */
.user-box { padding: 4px 0 0; border-top: 1px solid var(--line); }
.user-box[hidden] { display: none; }
.user-name strong { display: block; font-size: 13px; }
.user-name small { color: var(--muted); font-size: 12px; }
/* the menu opens upwards above the name: settings, then the account buttons */
.user-menu { display: grid; gap: 10px; padding: 8px 0 4px; }
.user-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.user-box > button.nav-sep { display: flex; padding: 6px 10px; margin-top: 4px; }
.user-box.open > button.nav-sep::after { transform: rotate(-90deg); }
.user-box:not(.open) > .user-menu { display: none; }

/* ---------- scroll areas fade out slightly where more lies hidden above or below (scrollfade.js sets the class and --fade-t/--fade-b)
   Three mask layers: the fading inside the padding box, plus the border ring kept whole (border-box minus padding-box). */
@property --fade-t { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fade-b { syntax: '<number>'; inherits: false; initial-value: 1; }
.scroll-fade {
  --fade: 36px;
  mask-image: linear-gradient(to bottom, #000 var(--fade-from, 0px), rgb(0 0 0 / var(--fade-t)) var(--fade-from, 0px), #000 calc(var(--fade-from, 0px) + var(--fade)),
    #000 calc(100% - var(--fade)), rgb(0 0 0 / var(--fade-b)) 100%), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-origin: padding-box, border-box, padding-box;
  mask-clip: padding-box, border-box, padding-box;
  mask-composite: add, exclude, add;
  mask-repeat: no-repeat;
  transition: --fade-t .15s, --fade-b .15s;
}
.plan.scroll-fade { --fade-from: 30px; }  /* below the sticky week row */
/* the page itself: two strips over the view (not over the sidebar) */
body::before, body::after { content: ""; position: fixed; inset-inline: 220px 0; height: 36px; pointer-events: none; z-index: 40; opacity: 0; transition: opacity .15s; }
body::before { top: 0; background: linear-gradient(var(--bg), transparent); }
body::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
html.page-fade-t body::before, html.page-fade-b body::after { opacity: 1; }
body.auth-mode::before, body.auth-mode::after { display: none; }
@media (max-width: 800px) { body::before, body::after { inset-inline-start: 0; } }
@media print { .scroll-fade { mask: none; } body::before, body::after { display: none; } }

/* ---------- users & permissions */
.hint-band { background: color-mix(in srgb, var(--warning) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--card)); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.permissions { display: flex; flex-direction: column; gap: 10px; }
.permissions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.permission { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.permission label { cursor: pointer; }
.pw-row { display: flex; gap: 6px; }
.totp-qr { display: block; width: 200px; max-width: 100%; margin: 0 auto; }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-secret { font-family: ui-monospace, Menlo, monospace; user-select: all; }
.totp-form { grid-template-columns: 1fr; }
.totp-codes { columns: 2; white-space: nowrap; margin: 0; padding-inline-start: 28px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.8; }
.totp-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pw-row input { flex: 1; font-family: ui-monospace, Menlo, monospace; }

/* ---------- History */
ul.diff { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.5; }
ul.diff del { color: var(--muted); }
.bar-cell { display: inline-flex; align-items: center; gap: 6px; }
.bar { display: inline-block; height: 8px; border-radius: 0 4px 4px 0; background: var(--accent); }
.chart.days { gap: 2px; }
.chart.days .col .b { width: 100%; max-width: 18px; border-radius: 3px 3px 0 0; }

/* ---------- System status (admin) */
.meter { height: 6px; border-radius: 3px; background: var(--card-2); margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--good); }
.meter span.hint { background: var(--warning); }
.meter span.warning { background: var(--serious); }
.meter span.critical { background: var(--critical); }
.sys-card { margin: 16px 0; }
.sys-card .tiles { margin-bottom: 10px; }
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
table.kv td:first-child { width: 40%; }
table.kv td { word-break: break-word; }

/* ---------- print (button «Print» in the views): always a light layout, controls hidden */
#print-head, #print-content { display: none; }
@media print {
  .lo-card .lo-body { display: block !important; margin-top: 10px; } .lo-head::before { display: none; }
  /* The additions [data-theme] and :not(…) make the rule as specific as the dark colours above – otherwise those win and the printout becomes dark */
  :root, :root[data-theme], :root:not([data-theme="light"]) { color-scheme: light; --bg: #fff; --card: #fff; --card-2: #f3f2ee; --ink: #000; --ink-2: #444; --muted: #777; --line: #d6d5ce; --axis: #b5b4aa;
    --accent: #2a78d6; --good-ink: #006300; --ring: rgba(11, 11, 11, .10); --shadow: none; --tip-bg: #fff; --tip-shadow: none; font-size: 9pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { display: block; background: #fff; }
  .sidebar, #toast, #tip, #auth, dialog, #print-frame, .btn, a.btn, details.howto, .tabs, .info-i, td.actions, table.data th:last-child:empty, table.data th.page-head-empty, .columns-btn, .columns-grip,
  .toolbar > div > p.sub, label:has(input[type=search]:placeholder-shown) { display: none !important; }
  main { padding: 0; }
  body:not(.print-complete) main h1 { display: none; }
  body.print-complete main { display: none; }
  #print-content { display: block; }
  .print-part + .print-part { break-before: page; }
  /* PDF collection: every view with its own header (its label as the title) and its own format; its h1 is dropped */
  .pdf-part.landscape { page: pdf-landscape; } .pdf-part.portrait { page: pdf-portrait; }
  .pdf-part .toolbar h1 { display: none; }
  #print-head, .pdf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12mm; border-bottom: 2px solid #148a5f; padding-bottom: 2.5mm; margin-bottom: 5mm; }
  .print-mark { font-size: 8pt; font-weight: 700; color: #148a5f; letter-spacing: .06em; text-transform: uppercase; }
  .print-mark span { color: var(--muted); font-weight: 400; margin-inline-start: 6px; }
  .print-title { font-size: 15pt; font-weight: 700; margin-top: 1mm; }
  .print-info { color: var(--ink-2); margin-top: .5mm; }
  .print-state { text-align: right; font-size: 8pt; color: var(--muted); white-space: nowrap; }
  h1 { font-size: 13pt; }
  h2 { font-size: 12pt; margin: 0 0 3mm; }
  .toolbar { margin-bottom: 3mm; }
  .toolbar input, .toolbar select, .form-grid input, .form-grid textarea, td input[type=number] { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; box-shadow: none; }
  .form-grid textarea { resize: none; }
  .card, .table-wrap, .plan { box-shadow: none; border-radius: 0; }
  .table-wrap, .plan { overflow: visible; max-height: none; }
  table.data { font-size: 8.5pt; }
  table.data.columns-fix { table-layout: auto; width: 100% !important; }
  table.data.columns-fix th { width: auto !important; }
  table.data thead { display: table-header-group; }
  table.data tr, .tile, .plan-row, .sys-card, .grid.two > .card { break-inside: avoid; }
  .plan-inner { min-width: 0; }
  .plan-head, .plan-row .code, .plan-mod { position: static; }
  .bar { cursor: default; }
  .plan-mod::before { display: none; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* store & purchasing */
[hidden] { display: none !important; }
.good-text { color: var(--good); }
.nowrap { white-space: nowrap; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
dl.kv.two { grid-template-columns: max-content 1fr max-content 1fr; }
.kv dt { color: var(--ink-2); font-size: 12px; padding-top: 2px; }
.kv dd { margin: 0; }
@media (max-width: 760px) { dl.kv.two { grid-template-columns: max-content 1fr; } }
.mail_text, .logtext { white-space: pre-wrap; font: 12px/1.45 ui-monospace, Menlo, monospace; margin: 0; }
.mail_text { background: var(--card-2); border-radius: 7px; padding: 10px 12px; max-height: 42vh; overflow: auto; }
.logtext { max-height: 9em; overflow: auto; }
.mail-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: 13px; }
.chk { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.chk-point { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); }
table.we input, table.we select { font-size: 13px; }
table.we input.short { width: 76px; }
table.we input.medium { width: 110px; }
table.we td.defect { min-width: 170px; }
table.we td.defect > * { display: block; width: 100%; margin-bottom: 3px; }
.storage { color: var(--accent); }
.scan-field { min-width: 220px; }
.hints { margin: 0; padding-inline-start: 0; list-style: none; display: grid; gap: 6px; }
.hints li { line-height: 1.45; }
table.log td { vertical-align: top; }

/* building plan */
/* Settings card (fpTool: view with version · filter) and while editing the row for editing below it; inside it groups with a fine divider in front */
.fp-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }  /* edit row: gaps of 10 px so that it fits into one row at 1400 px */
.fp-group { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.fp-row > .fp-group + .fp-group, .fp-cfg .cfg-row > .fp-group + .fp-3d-tools, .fp-cfg .cfg-row > .fp-group + .fp-floors, .fp-cfg .cfg-row > .fp-version, .fp-cfg .cfg-row > .fp-filter, .fp-3d-tools > .fp-group + .fp-group { padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
.fp-row > .fp-group + .fp-group { padding-inline-start: 10px; }
.fp-tools .fp-check { flex-direction: row; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-2); }
.fp-plan { max-width: 240px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-legend-bottom { padding: 0 2px; }
/* Building plan: filter in the settings card (fpLegend) – the types as entries with ticks in the menu, «Dimensions» set apart at the end */
.fp-filter .pdf-figure { margin-inline-start: 6px; }
.fp-filter .dd-menu { min-width: 230px; max-height: min(70vh, 560px); overflow-y: auto; }
.fp-filter .dd-menu button { display: flex; align-items: center; gap: 8px; }
.fp-filter .dd-menu button::before { content: ''; flex: none; width: 14px; text-align: center; font-weight: 700; color: var(--accent); }
.fp-filter .dd-menu button.on::before { content: '✓'; }
.fp-filter .dd-menu button:not(.on) { color: var(--muted); }
.fp-filter .dd-menu button .muted { margin-inline-start: auto; padding-inline-start: 14px; }
.fp-filter .dd-menu .fp-chip-dims { margin-top: 5px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; }
.fp-chip .muted { font-size: 11px; }
.fp-icon { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.fp-zoom .fp-measure-button { min-width: 30px; padding-inline: 0; display: inline-flex; align-items: center; justify-content: center; }
.fp-chip { font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.fp-chip.on { color: var(--ink); border-color: var(--axis); }
.fp-chip:not(.on) .fp-point, .fp-chip:not(.on) .fp-icon { opacity: .3; }
.fp-point { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; flex: none; }
.fp-chip .fp-point { margin-inline-end: 0; }
.fp-floors { display: inline-flex; gap: 4px; }
.fp-floor-hits { margin-inline-start: 5px; padding: 0 5px; border-radius: 99px; background: var(--critical); color: #fff; font-size: 11px; }
.fp-grid { flex-direction: row !important; align-items: center; gap: 6px !important; }
/* Plan on the left, on the right the bar of the selected element, the dimension and the info and fields – as in the HMI and the wiring diagrams
   (user 26 Oct «gebäudeplan r&i und verdrahtungsplan gleich anordnen wie hmi. plan links … rechts. planbild immer a4 quer»): the picture is always
   A4 landscape (297 : 210), as large as the window allows – at most the height without header and settings card down to 16 px above the bottom
   of the window as in the wiring diagrams (--fp-reserved measures fpHeightUpdate), at least 340 px stay for the right column, which takes the
   rest of the width and scrolls by itself. The edit row is at the top of the right column (user 27 Oct «untere bearbeitenleiste auch rechts oben
   bei gp … plan nicht volle höhe») */
main:has(.fp-wrap) { padding-bottom: 16px; }
.fp-wrap { display: grid; grid-template-columns: minmax(0, max(450px, calc((100vh - var(--fp-reserved, 304px)) * 297 / 210))) minmax(340px, 1fr); gap: 12px; align-items: start; }
.fp-canvas { position: relative; padding: 0; overflow: hidden; width: 100%; aspect-ratio: 297 / 210; }
.fp-side { min-width: 0; align-self: stretch; contain: size; display: flex; flex-direction: column; gap: 10px; }  /* as high as the plan */
/* only the panel scrolls: the edit row and the bar of the selected element stay at the top, their menus open over the panel instead of being cut off */
.fp-side > .fp-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fp-side > :not(.fp-panel) { flex: none; }
.fp-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: grab; background: var(--card); }
.fp-svg:active { cursor: grabbing; }
/* 3D view (floorplan3d.js): the box lies above the plan, SVG and zoom buttons stay hidden in the DOM */
.fp-canvas.fp-3d > *:not(.fp-3d-box, .fp-3d-buttons) { display: none; }
.fp-3d-box { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; background: var(--card); }
.fp-3d-box canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
.fp-3d-box.fp-3d-works canvas { cursor: crosshair; }
/* Crosshair in the centre of the walkthrough (floorplan3d.js, fp3Snap): white with a dark edge – visible on light and dark areas */
.fp-3d-cross { display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; }
.fp-3d-box.fp-3d-works .fp-3d-cross { display: block; }
.fp-3d-cross::before, .fp-3d-cross::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.fp-3d-cross::before { left: 10px; top: 0; width: 2px; height: 22px; }
.fp-3d-cross::after { left: 0; top: 10px; width: 22px; height: 2px; }
.fp-3d-box.fp-3d-drags canvas { cursor: move; }
.fp-3d-box:focus-within { box-shadow: inset 0 0 0 2px var(--ring); }
.fp-3d-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: none; font-size: 12px; line-height: 1.3; padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--ink); white-space: nowrap; border: 1px solid var(--line); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.fp-3d-label.small { font-size: 10px; opacity: .85; }
.fp-3d-label.sel { font-weight: 600; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fp-3d-label.opening { font-size: 10px; opacity: .8; border-style: dashed; }
.fp-3d-buttons { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; gap: 4px; justify-items: end; }  /* Camera in the picture (fp3Buttons), like .fp-zoom in the 2D plan */
.fp-3d-buttons .btn { min-width: 30px; }
.fp-3d-hint { position: absolute; left: 8px; bottom: 8px; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 2px 8px; border-radius: 6px; pointer-events: none; max-width: calc(100% - 160px); }
.fp-3d-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.fp-eye-on { opacity: .55; }
.fp-3d-tools { display: inline-flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
/* Menu «3D» (fp3Tools): section, names, light & shadow below each other */
.fp-3d-dd .dd-menu { min-width: 220px; padding: 6px 12px; }
.fp-3d-dd .dd-menu > label { display: flex; margin: 0; padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.fp-3d-dd .dd-menu > label:has(> input:disabled) { opacity: .5; }  /* room light without «Light & shadow» */
.fp-3d-split { display: inline-flex; gap: 4px; }  /* 2D: button «3D» and its menu (fp3Pre) */
.fp-3d-pre > .btn { padding-inline: 8px; }
.fp-3d-pre .dd-menu > label:nth-child(2) { margin-bottom: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }  /* orbit / walkthrough above the settings */
/* Fullscreen of the 3D view (fp3Fullscreen, class on <html>): the box fills the window – in the browser's fullscreen the screen –, the tools of the toolbar
   float at the top of the picture. Below the hint (#tip), the notifications and dialogs */
@media screen {
  html.fp-3d-full { overflow: hidden; }
  html.fp-3d-full .fp-canvas.fp-3d { position: fixed; inset: 0; z-index: 900; height: auto; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
  html.fp-3d-full .fp-3d-box:focus-within { box-shadow: none; }
  html.fp-3d-full .fp-3d-tools { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 901; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow); }
}
.fp-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.fp-zoom .btn { min-width: 30px; }
.fp-panel { max-width: none; }  /* the right column (.fp-side) */
.fp-panel h3 { margin: 0 0 10px; display: flex; align-items: center; }
.fp-panel .table-wrap { margin: 8px 0; }
.fp-list, .fp-legend { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.fp-legend li { display: flex; align-items: center; }
.fp-note { white-space: pre-wrap; color: var(--ink-2); }
.fp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fp-strip:not(:empty) { display: flex; }
.fp-strip { display: none; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }  /* at the top of the right column: hides nothing */
.fp-strip .fp-actions { margin: 0; }
.fp-row-new { margin: 0; padding: 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }  /* edit row at the top of the right column: background like the bar below it */
.fp-actions .fp-zorder { width: auto; max-width: 150px; padding: 3px 6px; font-size: 13px; }
/* Editing (user 18 Oct: «Felder teils viel zu gross», «möglichst wenige Zeilen», «abschnitte aber untereinander»): the sections are below each other,
   the fields inside them flow and are as wide as their content: numbers 90 px, selections by the longest choice, text 200 px, ticks in the same row.
   Surface, opacity and colour as a row in fixed columns (fpPair), so the parts are aligned below each other */
.fp-sections { display: grid; gap: 8px; }
.fp-sections > .fp-section { min-width: 0; margin: 0; }
.fp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; margin-bottom: 8px; }
.fp-form .field, .fp-pair { flex: none; }
.fp-panel .field label { white-space: nowrap; }
.fp-form input[data-figure] { width: 90px; }
.fp-form .field > input:not([type=checkbox]):not([type=color]):not([data-figure]), .fp-panel .fp-form textarea { width: 200px; }
.fp-form select { max-width: 220px; }
.fp-form .fp-check { margin: 0; min-height: 26px; }
.fp-pair { display: grid; grid-template-columns: 170px 130px auto; gap: 12px; align-items: end; }
.fp-panel .field { gap: 2px; }
.fp-panel .field label { font-size: 11px; }
.fp-panel :is(input:not([type=checkbox]):not([type=color]), select, textarea) { padding: 3px 6px; font-size: 13px; border-radius: 6px; }
.fp-panel input[type=color] { height: 26px; }
.fp-corners, .fp-align { max-width: 560px; }
.fp-color { display: flex; gap: 6px; align-items: center; }
.fp-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.fp-panel > .field { margin-bottom: 10px; }
/* Sections of the side panel (fpSegment): one box each with a header bar for expanding and collapsing, the content indented (user 18 Oct: «Bereiche besser abgrenzen») */
.fp-section { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 8px; }
.fp-section > summary { cursor: pointer; padding: 6px 10px; background: var(--card-2); border-radius: 7px; color: var(--ink-2); font-weight: 600; font-size: 13px; list-style-position: inside; }
.fp-section[open] > summary { border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0; color: var(--ink); }
.fp-section > summary:hover { color: var(--ink); }
.fp-section > :not(summary) { margin-inline: 10px; }
.fp-section > summary + * { margin-top: 8px; }
.fp-section[open] { padding-bottom: 2px; }
.small { font-size: 12px; }
.fp-r1 { fill: none; stroke: var(--line); stroke-width: .02; }
.fp-r5 { fill: none; stroke: var(--axis); stroke-width: .04; }
.fp-bg { pointer-events: none; }
.fp-axis text { font-size: .6px; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.fp-hall-wall { fill: var(--card-2); fill-opacity: .55; stroke: var(--ink-2); stroke-width: .6px; vector-effect: non-scaling-stroke; }
/* Wall as a band of its thickness: hall outside on the outline, room and hull inside (fpWallBand); outline and band with a fine line */
.fp-wall-band { fill-opacity: .8; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.fp-hall-band { fill: var(--ink-2); stroke: var(--ink-2); }
svg .fp-el .fp-area.fp-incl-wall, svg .fp-passive .fp-area.fp-incl-wall { stroke-width: .6px; vector-effect: non-scaling-stroke; }
.fp-el.sel .fp-wall-band { fill: var(--accent); stroke: var(--accent); }
.fp-el.hits .fp-wall-band { fill: var(--critical); stroke: var(--critical); }
.fp-hall-name { font-size: .7px; fill: var(--muted); font-weight: 600; pointer-events: none; }
.fp-el { outline: none; }
.fp-el .fp-area { fill-opacity: .2; stroke-width: .08; }
.fp-el .fp-dashed { fill-opacity: .12; }
/* Line style of the outline: areas draw in metres, sub-elements and guide lines with a fixed stroke width in pixels (see below) */
.fp-line-stroke { stroke-dasharray: .4 .25; }
.fp-line-point { stroke-dasharray: .01 .22; stroke-linecap: round; }
.fp-line-dash_dot { stroke-dasharray: .5 .2 .01 .2; stroke-linecap: round; }
.fp-el:not(.sel):not(.hits) .fp-line-no, .fp-passive .fp-line-no { stroke: none; }
.fp-hatch { stroke: var(--axis); stroke-width: .05; }
.fp-pattern { opacity: .6; }
.fp-name { fill: var(--ink); text-anchor: middle; font-weight: 600; pointer-events: none; }
.fp-under { fill: var(--ink-2); text-anchor: middle; pointer-events: none; }
.fp-lock { text-anchor: end; pointer-events: none; }
.fp-bar-bg { fill: var(--line); }
.fp-el:not(.fp-hall):hover .fp-area, .fp-el:focus-visible .fp-area { fill-opacity: .32; stroke-width: .14; }
.fp-el.sel .fp-area, .fp-el.sel .fp-hall-wall { stroke: var(--accent); stroke-width: .2; fill-opacity: .35; }
.fp-el.draggable_item { cursor: move; }
.fp-el.dimmed { opacity: .22; }
.fp-el.hits .fp-area { stroke: var(--critical); stroke-width: .28; fill-opacity: .4; }
.fp-ghost rect, .fp-ghost polygon, .fp-ghost ellipse { fill: none; stroke: var(--muted); stroke-width: .06; stroke-dasharray: .3 .2; }
.fp-ghost text { fill: var(--muted); font-style: italic; }
.fp-corner { fill: #fff; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: move; }
.fp-edge { fill: var(--accent); fill-opacity: .45; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: copy; }
.fp-corners { margin: 0 0 10px; display: grid; gap: 4px; font-size: 13px; }
.fp-align { display: grid; gap: 6px; margin: 0 0 10px; font-size: 13px; }
.fp-align select { width: 100%; box-sizing: border-box; }
.fp-align .fp-actions { margin: 0; }
.fp-corners-head { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.fp-corner-row { display: grid; grid-template-columns: 18px 1fr 1fr auto; gap: 6px; align-items: center; }
.fp-corner-row input { width: 100%; box-sizing: border-box; }
.fp-svg.fp-measuring, .fp-svg.fp-measuring .fp-el { cursor: crosshair; }
/* Dimensioning according to the standard: thin extension and dimension lines, filled arrows at the ends, dimension above the line – everything in the text colour (black, white in dark mode) */
.fp-dim line, .fp-measurements line { stroke: var(--ink); stroke-width: .75px; fill: none; vector-effect: non-scaling-stroke; }
.fp-dim line.fp-dim-pending { stroke-dasharray: 6 4; }
.fp-dim polygon.fp-dim-arrow, .fp-measurements polygon.fp-dim-arrow { fill: var(--ink); stroke: none; }
.fp-dim line.fp-dim-part, .fp-measurements line.fp-dim-part { stroke-width: .5px; stroke-dasharray: 4 3; opacity: .8; }  /* legs of a slanted measurement */
.fp-dim polygon.fp-dim-part, .fp-measurements polygon.fp-dim-part { opacity: .8; }
.fp-dim line.fp-dim-snap { stroke-width: .75px; stroke-dasharray: 3 3; opacity: .7; }
/* Reference object under the mouse while measuring: outline, filled for the object centre; edge thick; triangle on the edge centre */
.fp-dim polygon.fp-dim-ref { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.fp-dim polygon.fp-dim-ref-full { fill: var(--accent); fill-opacity: .22; }
.fp-dim line.fp-dim-ref-hem { stroke: var(--card); stroke-width: 7px; stroke-linecap: round; opacity: .9; }
.fp-dim line.fp-dim-ref-edge { stroke: var(--accent); stroke-width: 4px; stroke-linecap: round; }
.fp-dim polygon.fp-dim-ref-triangle { fill: var(--accent); stroke: var(--card); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fp-dim polygon.fp-dim-ref-active { fill: #fff; stroke: var(--accent); stroke-width: 2px; }
.fp-dim rect.fp-dim-ref-square { fill: #fff; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.fp-dim circle.fp-dim-point, .fp-measurements circle.fp-dim-point { fill: none; stroke: var(--ink); stroke-width: .75px; vector-effect: non-scaling-stroke; }
.fp-dim text, .fp-measurements text { fill: var(--ink); stroke: var(--card); paint-order: stroke; stroke-linejoin: round; text-anchor: middle; font-weight: 500; font-family: system-ui, sans-serif; }
.fp-measurements line.fp-m-line { stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.fp-svg.fp-measuring .fp-measurements line.fp-m-line { pointer-events: none; }
.fp-measurements text.fp-m-hits { pointer-events: all; cursor: pointer; }
.fp-measurements .fp-m.sel .fp-m-hits { cursor: move; }  /* selected: dimension line and dimension can be dragged */
.fp-measurements .fp-m.sel line:not(.fp-m-line) { stroke-width: 1.5px; }
.fp-measurements .fp-m.sel text.fp-m-text { font-weight: 700; }
.fp-m-del { pointer-events: all; cursor: pointer; }
.fp-measurements .fp-m-del circle.fp-m-del-circle { fill: var(--critical); stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fp-m-del-cross { fill: none; stroke: #fff !important; stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.fp-measure-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px; }
.fp-measure-box h3 { margin: 0; font-size: 14px; }
.fp-measure-box .fp-actions { margin: 0; }
.fp-measure-box .kv { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.fp-measure-box p { margin: 0; flex: 1 1 260px; }
.fp-measure-box[hidden], .fp-panel[hidden] { display: none; }
.fp-snap line { stroke: var(--critical); stroke-width: 1px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.fp-handle { fill: var(--accent); stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
/* Doors, gates, windows in the wall; furnishings in the detail plan. Stroke widths in screen pixels (non-scaling-stroke), so that they stay equally fine in the
   whole plan and in the strongly enlarged detail plan */
.fp-plan { max-width: 230px; }
.fp-opening-new { display: inline-flex; gap: 4px; }
.fp-opening polygon, .fp-opening polyline, .fp-opening path, .fp-kind .fp-area, .fp-passive .fp-area { vector-effect: non-scaling-stroke; }
.fp-gap { fill: var(--card); stroke-width: 1px; }
.fp-glass { fill: none; stroke-width: 2px; }
.fp-roller-door { fill: none; stroke-width: 3px; stroke-dasharray: 7 4; }
.fp-leaf { fill: none; stroke-width: 2px; stroke-linecap: round; }
.fp-door-handle { stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.fp-swing { fill-opacity: .12; stroke-width: 1px; stroke-dasharray: 4 3; }
.fp-slide-path { fill: none; stroke-width: 1px; stroke-dasharray: 4 3; }
.fp-gate-name { font-weight: 600; pointer-events: none; }
.fp-gate-name.fp-title-drag { pointer-events: auto; cursor: move; }
.fp-opening:hover .fp-gap, .fp-opening:focus-visible .fp-gap { stroke-width: 2px; }
.fp-opening.sel .fp-gap { stroke: var(--accent); stroke-width: 2.5px; }
/* Multiple selection: unticked elements (in the list, not changed along) dashed; list in the side panel with its own scrollbar */
.fp-el.fp-more-off .fp-area, .fp-el.fp-more-off .fp-hall-wall { stroke: var(--accent); stroke-width: .12; stroke-dasharray: .3 .25; }
.fp-opening.fp-more-off .fp-gap { stroke: var(--accent); stroke-dasharray: 3 3; }
.fp-el.fp-more-show .fp-area, .fp-el.fp-more-show .fp-hall-wall { stroke: var(--critical); stroke-width: .25; }  /* mouse on the row of the list */
.fp-opening.fp-more-show .fp-gap { stroke: var(--critical); stroke-width: 4px; }
.fp-more-list { max-height: 240px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.fp-more-list .fp-check { margin: 0; align-items: flex-start; }
.fp-more-list .fp-point { flex: none; margin-top: 4px; }
.fp-more-choice { width: auto; max-width: 150px; padding: 3px 6px; font-size: 13px; }
.fp-opening.hits .fp-gap { stroke: var(--critical); stroke-width: 3px; }
.fp-passive .fp-area { fill-opacity: .3; stroke-width: .7px; }
.fp-el.fp-kind .fp-area { fill-opacity: .3; stroke-width: 1.5px; }
.fp-el.fp-kind:not(.fp-hall):hover .fp-area, .fp-el.fp-kind:focus-visible .fp-area { fill-opacity: .42; stroke-width: 2px; }
.fp-el.fp-kind.sel .fp-area { stroke-width: 3px; fill-opacity: .45; }
.fp-el.fp-kind.hits .fp-area { stroke-width: 3px; }
.fp-kind .fp-line-stroke, .fp-passive .fp-line-stroke { stroke-dasharray: 7 5; }
.fp-kind .fp-line-point, .fp-passive .fp-line-point { stroke-dasharray: .1 5; }
.fp-kind .fp-line-dash_dot, .fp-passive .fp-line-dash_dot { stroke-dasharray: 10 5 .1 5; }
/* Sub-room (walls as a strong outline), wall (opaque), guide line (outline only; a wide invisible margin makes it clickable) */
.fp-el.fp-kind .fp-area.fp-masonry, .fp-passive .fp-area.fp-masonry { fill-opacity: .08; stroke-width: 3px; }
.fp-el.fp-kind:not(.fp-hall):hover .fp-area.fp-masonry, .fp-el.fp-kind:focus-visible .fp-area.fp-masonry { fill-opacity: .14; stroke-width: 3.5px; }
.fp-el.fp-kind.sel .fp-area.fp-masonry { fill-opacity: .16; stroke-width: 4px; }
.fp-el.fp-kind .fp-area.fp-solid, .fp-passive .fp-area.fp-solid { fill-opacity: .85; stroke-width: 1px; }
.fp-el.fp-kind:not(.fp-hall):hover .fp-area.fp-solid, .fp-el.fp-kind:focus-visible .fp-area.fp-solid { fill-opacity: 1; }
.fp-el.fp-kind.sel .fp-area.fp-solid { fill-opacity: .9; stroke-width: 2.5px; }
.fp-passive .fp-area.fp-help { stroke-width: 1px; }
/* Railing: line on the axis (fpRailing2d), stronger than an outline; posts as dots */
.fp-el.fp-kind .fp-area.fp-railing-line, .fp-passive .fp-area.fp-railing-line { stroke-width: 2.5px; stroke-linecap: round; }
.fp-el.fp-kind:hover .fp-area.fp-railing-line, .fp-el.fp-kind:focus-visible .fp-area.fp-railing-line { stroke-width: 3.5px; }
.fp-el.fp-kind.sel .fp-area.fp-railing-line { stroke-width: 4.5px; }
.fp-passive .fp-area.fp-railing-line { stroke-width: 1.5px; }
/* Pipe: strong line on the axis (fpPipe2d); cable tray: narrow area in its real width – both with a fixed stroke width, also free in the hall */
/* menus of the edit row (floorplan_items.js, fpMenus): sections side by side, each with the same light heading, as wide as their content (fixed columns
   had pushed a fourth one out sideways); the edit row is at the top of the right column (user 27 Oct): they open downwards over the panel and to the
   left over the plan, so that they stay inside the window; symbol, chair back and rim in the plan */
.fp-sec-dd .dd-menu { top: calc(100% + 4px); bottom: auto; inset-inline-start: auto; inset-inline-end: 0; max-width: 94vw; max-height: min(75vh, 640px); overflow: auto; }
.fp-sec-dd .dd-menu:not([hidden]) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, max-content); gap: 0 8px; align-items: start; }
.fp-turn-grip { fill: #fff; stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; cursor: grab; }  /* turning grip of an object (fpTurnGrip) */
.fp-turn-line { stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fp-is-turned > .fp-handle { display: none; }  /* turned object: the size handle would sit at the unturned corner – size in the side panel */
.fp-sec-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px 2px; }
.fp-inv-sym { fill: var(--ink); text-anchor: middle; font-weight: 600; pointer-events: none; }
.fp-inv-line { fill: #3d3d3d; opacity: .75; }
.fp-inv-rim { fill: none; stroke: #3d3d3d; stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .6; }
.fp-area.fp-pipe-line { fill: none; stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fp-area.fp-tray-route { fill-opacity: .45; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fp-el:hover .fp-area.fp-pipe-line, .fp-el:focus-visible .fp-area.fp-pipe-line, .fp-el:hover .fp-area.fp-tray-route, .fp-el:focus-visible .fp-area.fp-tray-route { stroke-width: 4px; }
.fp-el.sel .fp-area.fp-pipe-line, .fp-el.sel .fp-area.fp-tray-route, .fp-el.hits .fp-area.fp-pipe-line, .fp-el.hits .fp-area.fp-tray-route { stroke-width: 5px; }
.fp-passive .fp-area.fp-pipe-line { stroke-width: 2px; }
/* Riser pipe: circle of the pipe with a dot in the middle, stroke like the horizontal pipe */
.fp-area.fp-pipe-circle { fill-opacity: .35; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.fp-pipe-point { fill: none; stroke-width: 5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fp-el:hover .fp-area.fp-pipe-circle, .fp-el:focus-visible .fp-area.fp-pipe-circle { stroke-width: 4px; }
.fp-el.sel .fp-area.fp-pipe-circle, .fp-el.hits .fp-area.fp-pipe-circle { stroke-width: 5px; }
.fp-passive .fp-area.fp-pipe-circle { stroke-width: 2px; }
.fp-el.sel .fp-post { fill: var(--accent); }
.fp-help-grab { fill: none; stroke: transparent; stroke-width: 12px; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.fp-passive .fp-help-grab { pointer-events: none; }
.fp-footprint { fill-opacity: .07; stroke: var(--ink-2); stroke-width: .2; pointer-events: none; }
.fp-footprint.fp-incl-wall { stroke: none; }  /* Detail plan of a room: the wall band draws the outline (user 15 Oct: «wieso zwei farben im umriss?») */
.fp-room-name { fill: var(--muted); font-weight: 600; pointer-events: none; }
.fp-version { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; max-width: 100%; }
.fp-version label { min-width: 0; }
.fp-version select { max-width: 220px; min-width: 0; }
/* Settings card of the building plan always in one row as soon as the card is wide enough for it (user 24 Oct «1 zeile!»): instead of wrapping,
   the plan and version selections become narrower (down to 110 px); below 900 px inner card width (3D with «Back» needs about 910 px) the row wraps as before */
.fp-cfg { container-type: inline-size; }
@container (min-width: 900px) {
  .fp-cfg .cfg-row, .fp-cfg .cfg-row :is(.fp-group, .fp-version, .fp-3d-tools, .seg) { flex-wrap: nowrap; }
  .fp-cfg .cfg-row > :is(.fp-group, .fp-version), .fp-cfg .cfg-row :is(.fp-group, .fp-version) > label.fp-grid { flex: 0 1 auto; min-width: 0; }
  .fp-cfg :is(.fp-plan, .fp-version select) { flex: 0 1 auto; min-width: 110px; }
}
.fp-version-hint { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 8px; border-inline-start: 4px solid var(--warning); }
@media (max-width: 1100px) {  /* narrow: the plan over the whole width (still A4 landscape), the right column below it, the page scrolls */
  .fp-wrap { grid-template-columns: minmax(0, 1fr); }
  main:has(.fp-wrap) { padding-bottom: 40px; }
  .fp-canvas { width: min(100%, calc((60vh - 44px) * 297 / 210)); }  /* the toolbar wraps (version): the bar of the selected element below stays visible without scrolling */
  .fp-side { contain: none; }
  .fp-side > .fp-panel { overflow: visible; }
}
@media print {
  .fp-tools, .fp-3d-buttons, .fp-row-new, .fp-zoom, .fp-panel, .fp-strip, .fp-measure-box, .fp-version-hint { display: none !important; }
  .fp-wrap { display: block; }
  .fp-canvas { height: 170mm; border: 0; }
  .fp-print-sheet h2 { margin: 0 0 2mm; }
  .fp-print-svg { width: 100%; height: 138mm; display: block; border: 1px solid var(--line); }
  .fp-print-sheet-3d img { display: block; max-width: 100%; max-height: 150mm; width: auto; height: auto; margin: 0 auto; border: 1px solid var(--line); }  /* 3D: the picture as shown (fp3Snapshot) */
  .fp-print-legend { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin-top: 2mm; font-size: 8pt; }
  .fp-print-legend .fp-point { margin-inline-end: 1mm; }
}

/* Video tutorials */
.gd-wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 12px; align-items: start; }
.gd-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 190px); overflow: auto; }
.gd-cap { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.gd-cap:hover { background: var(--card-2); }
.gd-cap.active { background: var(--accent); color: var(--accent-ink); }
.gd-cap.active small { color: inherit; opacity: .85; }
.gd-group { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 8px 2px; }
.gd-group:first-child { padding-top: 4px; }
.gd-num { min-width: 1.6em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; align-self: flex-start; }
.gd-cap.active .gd-num { color: inherit; opacity: .85; }
.gd-title { display: flex; flex-direction: column; line-height: 1.25; }
.gd-title small { color: var(--muted); font-size: 11px; }
.gd-content h2 { margin: 0; }
.gd-video { display: block; width: 100%; max-height: 58vh; background: #000; cursor: pointer; }
.gd-stage { position: relative; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.gd-stage .gd-ut:not(.im-image) { margin: 0; border-radius: 0; }
/* own control bar below the video – covers neither picture nor text */
.gd-strip { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #0f1412; color: #fff; }
.gd-button { flex: none; min-width: 36px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.gd-button:hover, .gd-button:focus-visible { background: rgba(255, 255, 255, .14); }
.gd-controller { flex: 1; min-width: 60px; accent-color: var(--accent); cursor: pointer; }
.gd-clock { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-stage:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.gd-stage:fullscreen .gd-video { flex: 1; min-height: 0; max-height: none; }
/* Subtitles above the picture (videos from vrec2): the current sentence at the bottom of the picture, white with a light shadow – position and font size are set by tutorials.js */
.gd-ut.im-image { position: absolute; z-index: 1; margin: 0; padding: 0 4%; min-height: 0; border-radius: 0; background: transparent; line-height: 1.25; pointer-events: none; box-sizing: border-box; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .55); }
.gd-video::cue { color: #fff; background: transparent; font-family: system-ui, sans-serif; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .55); }  /* the same subtitles as a text track when the video plays alone in fullscreen – size: tutorials.js */
.gd-ut { background: #0f1412; color: #fff; font-weight: 600; text-align: center; padding: 8px 14px; min-height: 3.6em; border-radius: 0 0 8px 8px; margin-bottom: 10px; }
.gd-empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--axis); border-radius: 8px; }
.gd-steps { padding-inline-start: 22px; display: grid; gap: 6px; }
.gd-steps li { padding: 4px 8px; border-radius: 6px; }
.gd-steps li.clickable { cursor: pointer; }
.gd-steps li.clickable:hover { background: var(--card-2); }
.gd-steps li.active { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
@media (max-width: 900px) { .gd-wrap { grid-template-columns: 1fr; } .gd-list { max-height: none; } }
.fp-form input:not([type=checkbox]), .fp-form select, .fp-panel textarea { box-sizing: border-box; }

/* ---------- notifications (bell) and phone menu */
.bell { position: relative; background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 6px; color: var(--ink-2); cursor: pointer; display: inline-flex; }
.bell:hover, .bell:focus-visible { background: var(--card-2); color: var(--ink); }
.bell .figure:not(:empty) { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--warning); color: #111; font: 600 10px/16px system-ui, sans-serif; text-align: center; }
.bell.critical .figure:not(:empty) { background: var(--critical); color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 18px; color: var(--ink); cursor: pointer; }
ul.notifications { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.notifications a { color: var(--ink); text-decoration: none; display: block; padding: 6px 8px; border-radius: 7px; }
ul.notifications a:hover { background: var(--card-2); }
.notification-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.notification-chips a { text-decoration: none; color: var(--ink); }

/* ---------- today (large controls for phone and tablet) */
.today-grid { columns: 380px; column-gap: 16px; }
.today-card { break-inside: avoid; margin-bottom: 16px; }
.today-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.today-row:first-of-type { border-top: 0; }
.today-row.over .today-text > strong, .today-row.over .today-text > a { color: var(--critical); }
.today-text { min-width: 0; flex: 1 1 220px; }
.today-buttons { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.today-buttons .btn { padding: 8px 12px; }
.today-fast { margin-bottom: 14px; flex-wrap: wrap; }
.today-days { margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.small { font-size: 12px; }

/* ---------- observations, check checklist, photo */
.obs-list { display: grid; gap: 12px; }
.card.obs { display: flex; gap: 14px; align-items: flex-start; }
.card.obs img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex: none; }
.obs-text { flex: 1; min-width: 0; }
.obs-text p { margin: 6px 0; }
.photo-preview img { max-width: 100%; max-height: 220px; border-radius: 8px; }
.photo-preview { grid-column: 1 / -1; }
.qa-list { display: grid; gap: 4px; }
.qa-point { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.qa-point input[type=checkbox] { width: 20px; height: 20px; flex: none; order: 2; }
.qa-point > span { flex: 1; }
.qa-point input[type=number] { width: 110px; }
.qa-point:has(input[type=checkbox]:checked) { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--card)); }
.qa-point.nok { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--card)); }

/* ---------- sensors: tiles with sparkline, history with crosshair */
.sensor-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }  /* compact: more sensors at a glance */
.card.sensor { text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 2px; padding: 8px 10px; font-size: 13px; }
.card.sensor svg.sparkline { height: 24px; }
.card.sensor:hover { border-color: var(--axis); }
.card.sensor.alarm { border-color: var(--critical); }
.card.sensor.inactive { opacity: .6; }
.devices { display: grid; gap: 10px; margin-bottom: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* one group per device: output (switch) and inputs (readings) */
.devices > * { grid-column: 1 / -1; }
.devices > .device-group.mini { grid-column: auto; }  /* minimised: a quarter of the width, four groups per row */
@media (max-width: 1100px) { .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .devices { grid-template-columns: minmax(0, 1fr); } }
.device-group { display: grid; gap: 4px; padding: 10px 12px; align-content: start; }
.device-group h3 { margin: 0; font-size: 15px; }
.device-group.mini h3 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-group.mini { height: var(--se-group-h, 320px); grid-template-rows: auto minmax(0, 1fr); }  /* as high as when open (operations.js groupHeight) */
.device-group.mini .se-rows { overflow-y: auto; align-content: start; min-height: 0; }  /* many values: scroll */
.se-title-tap { cursor: pointer; user-select: none; }
.se-group-title { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 8em; }
.se-group-buttons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.se-mini-button { min-width: 28px; justify-content: center; font-weight: 600; }
.se-handle { cursor: grab; touch-action: none; user-select: none; color: var(--muted); padding: 0 2px; font-size: 16px; line-height: 1; }
.device-group.drags { opacity: .45; }
.device-group.drop-prior { box-shadow: inset 4px 0 0 var(--accent); }
.device-group.drop-after { box-shadow: inset -4px 0 0 var(--accent); }
.devices > .device-group:not(.mini).drop-prior { box-shadow: inset 0 4px 0 var(--accent); }
.devices > .device-group:not(.mini).drop-after { box-shadow: inset 0 -4px 0 var(--accent); }
[dir=rtl] .device-group.mini.drop-prior { box-shadow: inset -4px 0 0 var(--accent); }
[dir=rtl] .device-group.mini.drop-after { box-shadow: inset 4px 0 0 var(--accent); }
.drop-end { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.se-drag, .se-drag *, .se-drag-b, .se-drag-b * { cursor: grabbing; user-select: none; }
.se-empty { margin: 0; padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius); }
.se-without-empty { display: none; }
.se-drag .se-without-empty { display: grid; }
.se-rows { display: grid; gap: 1px; }
.se-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; border-radius: 6px; padding: 3px 4px;
  font: inherit; font-size: 13px; color: inherit; cursor: pointer; text-align: start; }
.se-row:hover { background: var(--card-2); }
.se-row.inactive { opacity: .6; }
.se-row-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-row-val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.se-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.se-point.good { background: var(--good); }
.se-point.critical { background: var(--critical); }
.se-section { margin-bottom: 12px; padding: 6px 12px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius); }  /* raised: the group cards lie on it */
.se-section.shut { padding-bottom: 6px; }
.se-section.drags { opacity: .45; }
/* sensor window: its open alarms at the top, each with «Quittieren» */
.se-alarm-now { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--critical); border-radius: 7px; background: var(--card-2); }
.se-alarm-now-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.se-alarm-now-row > .btn { margin-inline-start: auto; }
.se-section.drop-prior { box-shadow: 0 -4px 0 var(--accent); }  /* dragging an area: the line in the gap before or after the target */
.se-section.drop-after { box-shadow: 0 4px 0 var(--accent); }
.se-section .devices { margin-bottom: 0; }
.se-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.se-section-title { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 16px; color: inherit; cursor: pointer; }
.se-arrow { display: inline-block; transition: transform .15s; color: var(--muted); }
.se-section.shut .se-arrow { transform: rotate(-90deg); }
[dir=rtl] .se-section.shut .se-arrow { transform: rotate(90deg); }
.se-section.shut .se-section-head { margin-bottom: 0; }
/* Page parts sensors / data sources / archive: each its own section with a heading line (data sources and archive collapsible) */
.se-fold { margin-top: 28px; }
.se-fold[data-fold=sensors], .se-fold[data-fold=alarms] { margin-top: 20px; }
/* alarm list (sensors page, overview): at most half the window high, scrolls with the header row standing */
/* the rows snap in below the header row (34 px, fixed): none is cut off half under it (user 27 Oct «immernoch komisch»); the fade
   starts below the header row and is short – it only hints at more above, the first row stays readable */
.alarm-list .table-wrap { max-height: 50vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-top: 34px; }
.alarm-list th { height: 34px; box-sizing: border-box; }
.alarm-list tbody tr { scroll-snap-align: start; }
.alarm-list .table-wrap.scroll-fade { --fade-from: 34px; --fade: 14px; }
.se-fold > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); list-style: none; cursor: pointer; }
.se-fold > summary::-webkit-details-marker { display: none; }
.se-fold-title { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 18px; }
.se-fold[open] > summary { margin-bottom: 10px; }
.se-fold:not([open]) .se-arrow { transform: rotate(-90deg); }
[dir=rtl] .se-fold:not([open]) .se-arrow { transform: rotate(90deg); }
.se-filter .cfg-row { gap: 8px 10px; }  /* filter bar like trends (trends.css .tr-filter) */
.se-filter input[type=search] { min-width: 14em; }
.device-group .sensor-grid { margin-top: 4px; }
.device-group .card.sensor { background: var(--card-2); border-color: var(--axis); }  /* tiles stand out from the group card */
.device-group .card.sensor:hover { border-color: var(--muted); }
.device-group .card.sensor.alarm { border-color: var(--critical); }
.card.sensor.device-outgoing { border-style: dashed; }
.devices-other { margin: 4px 0 8px; }
.sensor-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: center; }  /* long name + status: the status moves to the next row instead of over the edge */
.sensor-val { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
svg.sparkline { width: 100%; height: 36px; }
svg.timeline { width: 100%; height: auto; max-height: 320px; margin: 8px 0; }
svg.sparkline .line, svg.timeline .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.timeline .grid { stroke: var(--line); stroke-width: 1; }
svg.timeline .limit_value { stroke: var(--critical); stroke-width: 1; stroke-dasharray: 4 4; }
svg.timeline .limit_value.hard { stroke-width: 1.5; stroke-dasharray: none; }  /* LL/HH */
svg.timeline .axis { fill: var(--muted); font-size: 11px; }
svg.timeline .cross { stroke: var(--axis); stroke-width: 1; }
svg.timeline .point { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.chart .axis.capacity { border-top: 1px dashed var(--critical); }
.chart .axis.capacity span { color: var(--critical); }

/* ---------- Demand planning, invoice totals */
table.inquiry td.missing { background: color-mix(in srgb, var(--critical) 10%, var(--card)); }
table.inquiry td.missing > div:first-child { color: var(--critical); font-weight: 600; }
.totals { justify-self: end; min-width: 260px; display: grid; gap: 4px; }
.totals > div { display: flex; justify-content: space-between; gap: 20px; font-variant-numeric: tabular-nums; }
.totals .total { font-weight: 700; border-top: 2px solid var(--ink); padding-top: 4px; }

@media (max-width: 800px) {
  .menu-btn { display: inline-block; }
  .brand-buttons { flex-direction: row; gap: 4px; }
  .sidebar nav, .sidebar .sidebar-foot { display: none; }
  body.menu-pending .sidebar nav { display: flex; }
  body.menu-pending .sidebar .sidebar-foot { display: block; }
  nav a { padding: 10px 12px; }
  .today-grid { columns: 1; }
  .today-row { flex-wrap: wrap; }
  .today-buttons { width: 100%; justify-content: stretch; }
  .today-buttons .btn { flex: 1; padding: 11px 12px; font-size: 15px; }
  .card.obs { flex-direction: column; }
  .card.obs img { width: 100%; height: 180px; }
  .toolbar { flex-wrap: wrap; }
  /* View header: print button at the top right next to the title, the other buttons in the row below */
  .page-head > .spacer { display: none; }
  .page-head-title { flex: 1 1 0; min-width: 0; }
  .page-head-buttons { order: 1; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .page-head-buttons:empty { display: none; }
}
@media print { .bell, .menu-btn { display: none !important; } }

/* Arabic: only the script runs from right to left – layout, order and alignment of the interface stay as in the other languages.
   Every text follows its own language (hints can be in a different language than the interface); charts and the building plan stay untouched */
html { text-align: left; }
:where(input, textarea, select) { text-align: left; }
#tip, .howto-body, .help section, .field small { unicode-bidi: plaintext; }
:root:lang(ar) body * { unicode-bidi: plaintext; }
:root:lang(ar) svg *, :root:lang(ar) summary { unicode-bidi: normal; }

/* «Active» in lists: switch directly in the row */
input.active-switcher { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border: 0; border-radius: 10px; background: var(--axis); position: relative; cursor: pointer; vertical-align: middle; transition: background .15s; }
input.active-switcher::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); transition: transform .15s; }
input.active-switcher:checked { background: var(--good); }
input.active-switcher:checked::after { transform: translateX(14px); }
input.active-switcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { input.active-switcher { appearance: auto; -webkit-appearance: auto; width: auto; height: auto; background: none; } input.active-switcher::after { content: none; } }

/* Conflict when saving (app.js conflictResolve): per field the input and the current value */
.conflict-table td:nth-child(2) { color: var(--muted, inherit); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.conflict-table td:nth-child(3) { font-weight: 600; }

/* Live updates (live.js): bar above a view whose data changed meanwhile */
.live-hint { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #2a78d6) 45%, transparent); border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--accent, #2a78d6) 10%, var(--card, transparent)); }
.fb-live-settings { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }

/* a writing request of this button is under way (app.js api): pulse lightly, only after 150 ms */
button.busy { cursor: progress; animation: fms-busy 1.1s .15s ease-in-out infinite; }
@keyframes fms-busy { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { button.busy { animation: none; opacity: .6; } }

/* presence (live.js): who else has the record open – below the head of the window */
dialog.modal > .presence { margin: 0 18px; padding: 6px 10px; border-radius: 6px; font-size: 13px;
  background: color-mix(in srgb, var(--warning, #b8860b) 14%, var(--card, transparent)); border: 1px solid color-mix(in srgb, var(--warning, #b8860b) 40%, transparent); }